Skip to content

Commit

Permalink
pagination added
Browse files Browse the repository at this point in the history
  • Loading branch information
@mddanishyusuf
mddanishyusuf committed Mar 30, 2019
1 parent e300048 commit bb97d8d
Show file tree
Hide file tree
Showing 11 changed files with 268 additions and 43 deletions.
47 changes: 47 additions & 0 deletions components/AddButton.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import Link from 'next/link';
import { PlusSquare } from 'react-feather';

const AddButton = () => (
<div style={{textAlign: 'center'}}>
<div className="right-navbar">
<ul>
<li><a href="https://twitter.com/dailyhacknotes" target="_blank"><PlusSquare color={'#4618B1'} size={18} /> <span>Any Tricks?</span></a></li>
</ul>
</div>
<style jsx>
{`
.right-navbar ul{
text-align: center;
display: inline-block;
padding: 0;
margin: 0 0 80px 0px;
border-radius: 4px;
color: #24292e;
border: 1px solid rgba(27,31,35,.2);
}
.right-navbar ul li{
padding: 10px;
-moz-box-align: center;
align-items: center;
list-style: none;
padding: 8px 15px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
}
.right-navbar ul li a{
display: flex;
text-decoration: none;
color: #707070
}
.right-navbar ul li span {
padding: 0px 5px;
}
`}
</style>

</div>
)

export default AddButton;
71 changes: 56 additions & 15 deletions components/HackCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,54 @@
import Markdown from 'markdown-to-jsx';
import getSlug from 'speakingurl'
import Link from 'next/link';
import { Eye, Heart, MessageSquare } from 'react-feather';
import { Tag, Heart, MessageSquare } from 'react-feather';
import moment from 'moment'

const HyperLink = ({ children, ...props }) => (
<a {...props} href={props.href} target="_blank">{children}</a>
);

const HackCard = (props) => {
const issue = props.single_issue
return (
<div className="hack-card-container">
<div className="hack-card">
<div className="hack-card-meta">
<img src={issue.user.avatar_url} className="author-picture" />
<br/>
<div className="author-name">{issue.user.login}</div>
<div className="created-at">{moment(issue.created_at).fromNow()}</div>
</div>
<div className="hack-card-content">
<div className="main-content">
<Link as={`/post/${[getSlug(issue.title),issue.number].join('-')}`} href={`/post?number=${issue.number}&slug=${[getSlug(issue.title)]}`}><a><h2>{issue.title}</h2></a></Link>
<Markdown>{issue.body}</Markdown>
<Markdown
options={{
overrides: {
a: {
component: HyperLink
},
},
}}
>{issue.body}</Markdown>
</div>
<div className="card-footer">
<div className="views">
<Eye size={14}/>1.5k
</div>
<div className="heart">
<Heart size={14}/>25
<div className="heart footer-meta">
<ul>
<Tag size={18} color={'#4618B1'}/><span>
{issue.labels !== undefined ? issue.labels.map(label => {
return(
<li key={label.id}>#{label.name}</li>
)
}): ''}
</span>
</ul>
</div>
<div className="any-comments">
<MessageSquare size={14}/>any comments?
{/* <div className="heart footer-meta">
<Heart size={18} color={'#4618B1'}/><span>25</span>
</div> */}
<div className="any-comments footer-meta">
<MessageSquare size={18} color={'#4618B1'}/><a href={issue.html_url} target="_blank"><span>{issue.comments === 0 ? 'any comments?' : issue.comments}</span></a>
</div>
</div>
</div>
Expand All @@ -41,16 +62,20 @@ const HackCard = (props) => {
.hack-card-meta {
line-height: 1.4;
font-size: 0.9rem;
font-size: 0.8rem;
}
.hack-card-meta img {
display: block;
width: 40px;
height: 40px;
background-color: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border: 1px solid #d8d8d8
border-radius: 50% 50% 40% 40% / 60% 60% 20% 30%;
border: 3px solid #d8d8d8
}
.hack-card-meta .author-name {
color: #885DF1
}
.hack-card-content {
Expand Down Expand Up @@ -89,14 +114,30 @@ const HackCard = (props) => {
.card-footer {
display: grid;
grid-template-columns: 60px 60px auto;
grid-template-columns: auto 150px;
font-size: 12px;
background-color: #fff;
padding: 10px 15px;
}
.card-footer .any-comments {
text-align: right;
.footer-meta {
-moz-box-align: center;
align-items: center;
display: flex;
}
.footer-meta ul {
display: flex;
padding: 0;
margin: 0;
}
.footer-meta ul li {
display: inline-block;
padding: 0px 5px;
}
.card-footer .any-comments{
}
`}
</style>
Expand Down
82 changes: 80 additions & 2 deletions components/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,86 @@
import Link from 'next/link'
import AddButton from './AddButton'
import { Twitter, GitHub, Users } from 'react-feather';

const Header = () => (
const Header = (props) => (
<div>
<Link href="/"><a>DailyHack</a></Link>
<div className="navbar">
<div className="website-logo">
<Link href="/"><a><img src='/static/images/DailyHackLogo.png'/></a></Link>
</div>
<div className="right-navbar">
<ul>
<li><Link href="/contributors"><a><Users color={'#4618B1'} size={18}/> <span>Contributors</span></a></Link></li>
<li><a href="https://github.com/mddanishyusuf/dailyhack/" target="_blank"><GitHub color={'#4618B1'} size={18}/> <span>GitHub</span></a></li>
<li><a href="https://twitter.com/dailyhacknotes" target="_blank"><Twitter color={'#4618B1'} size={18} /> <span>Twitter</span></a></li>
</ul>
</div>
</div>
{props.pathname === "/" ?
<div className="landing-heading">
<h2>A community of Makers and Geeks</h2>
<p>It's a place where people share there daily hack they use in their developments. So, Do you have any hack?</p>
<AddButton/>
</div>
: ""}

<style jsx>
{`
.navbar {
display: grid;
grid-template-columns: 50% 50%;
padding: 0px 60px;
margin-bottom: 60px;
}
.website-logo img{
width: 250px;
}
.landing-heading {
text-align: center;
}
.landing-heading h2 {
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1.40455;
color: #202124;
letter-spacing: -.5px;
}
.landing-heading p {
max-width: 570px;
display: inline-block;
}
.right-navbar ul{
float: right;
}
.right-navbar ul li{
padding: 10px;
-moz-box-align: center;
align-items: center;
float: left;
list-style: none;
}
.right-navbar ul li a{
display: flex;
text-decoration: none;
color: #707070
}
.right-navbar ul li span {
padding: 0px 5px;
}
`}
</style>

</div>
)

Expand Down
15 changes: 11 additions & 4 deletions components/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,24 @@ const Layout = props => (
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<title>{props.title}</title>
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Questrial|Poppins:500" rel="stylesheet"/>
</Head>
<Header />
<Header {...props.url}/>
<body>
{props.children}
<style jsx>
<style jsx global>
{`
body {
font-family: 'Questrial', sans-serif !important;
padding: 0 !imporatnt;
font-family: 'Questrial', sans-serif;
margin: 0;
}
p {
line-height: 1.8
}
`}
</style>
</body>
</div>
)

Expand Down
33 changes: 33 additions & 0 deletions components/PaginationBox.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
function PaginationBox(props){
const paginationArray = Array.from(Array(props.total_issues).keys())
const activePage = props.active_page
return(
<div className="pagination">
<ul>
{paginationArray.map(number => {
return(
<li key={number}>{number+1}</li>
)
})}
</ul>
<style jsx>
{`
.pagination ul{
padding: 0;
margin: 20px 0px 100px 0px;
text-align: center;
list-style-type: none;
}
.pagination ul li {
display: inline-block;
padding: 5px;
}
`}
</style>
</div>
)
}

export default PaginationBox;
14 changes: 14 additions & 0 deletions pages/contributors.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import {Fragment} from 'react';
import Layout from '../components/Layout';

function Contributors(props){
return(
<Fragment>
<Layout title="Daily Hack: A community of Makers and Geeks" {...props}>
We are makers
</Layout>
</Fragment>
)
}

export default Contributors;
32 changes: 19 additions & 13 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import fetch from 'isomorphic-unfetch';

import Layout from '../components/Layout';
import HackCard from '../components/HackCard';
import PaginationBox from '../components/PaginationBox';

function HackComponent(props){
return (
Expand All @@ -16,14 +17,7 @@ function HackComponent(props){
.main-container {
width: 80%;
margin: 0px auto;
font-family: 'Questrial', sans-serif;
}
.hack-list {
}
p {
line-height: 1.8
}
}
`}</style>
</div>
)
Expand All @@ -32,18 +26,30 @@ function HackComponent(props){
function DailyHackHome(props){
return(
<Fragment>
<Layout title="Daily Hack: Share your daily hack with others">
<Layout title="Daily Hack: A community of Makers and Geeks" {...props}>
<HackComponent {...props}/>
<PaginationBox {...props}/>
</Layout>
</Fragment>
)
}

DailyHackHome.getInitialProps = async function(){
const result = await fetch(process.env.DAILYHACK_GITHUB_API)
const issues = await result.json()
DailyHackHome.getInitialProps = async function(context){
var page_number;
var per_page = 5
if(context.query.page_number === undefined){
page_number = 1
}else{
page_number = context.query.page_number
}
const url = process.env.DAILYHACK_GITHUB_API + '/' + page_number + '/' + per_page
const result = await fetch(url)
const data = await result.json()
return {
dailyhacks: issues
dailyhacks: data.issues,
page_number: context.query.page_number,
total_issues: data.total_issues,
active_page: page_number
}
}

Expand Down
Loading

0 comments on commit bb97d8d

Please sign in to comment.