pagination setup done

mddanishyusuf · Mar 31, 2019 · 04a118d · 04a118d
1 parent bb97d8d
commit 04a118d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/components/AddButton.js b/components/AddButton.js
@@ -5,7 +5,7 @@ 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>
+                <li><a href="https://github.com/mddanishyusuf/dailyhack/issues" target="_blank"><PlusSquare color={'#4618B1'} size={18} /> <span>Any Tricks?</span></a></li>
             </ul>
         </div>
         <style jsx>

diff --git a/components/Header.js b/components/Header.js
@@ -1,4 +1,6 @@
 import Link from 'next/link'
+import { withRouter } from 'next/router'
+
 import AddButton from  './AddButton'
 import { Twitter, GitHub, Users } from 'react-feather';
 
@@ -16,7 +18,7 @@ const Header = (props) => (
             </ul>
         </div>
         </div>
-        {props.pathname === "/" ? 
+        {props.router.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>
@@ -84,4 +86,4 @@ const Header = (props) => (
     </div>
 )
 
-export default Header;
+export default withRouter(Header);
diff --git a/components/Layout.js b/components/Layout.js
@@ -11,8 +11,7 @@ const Layout = props => (
             <title>{props.title}</title>
             <link href="https://fonts.googleapis.com/css?family=Questrial|Poppins:500" rel="stylesheet"/>
         </Head>
-        <Header {...props.url}/>
-        <body>
+        <Header/>
         {props.children}
         <style jsx global>
             {`
@@ -26,7 +25,6 @@ const Layout = props => (
                 }
             `}
         </style>
-        </body>
     </div>
 )
 

diff --git a/components/PaginationBox.js b/components/PaginationBox.js
@@ -1,12 +1,19 @@
+import Link from 'next/link'
+
 function PaginationBox(props){
-    const paginationArray = Array.from(Array(props.total_issues).keys())
     const activePage = props.active_page
+    const numberOfPages = Math.ceil(props.total_issues / 5)
+    const paginationArray = Array.from(Array(numberOfPages).keys())
     return(
         <div className="pagination">
+        {activePage}
             <ul>
                 {paginationArray.map(number => {
                     return(
-                        <li key={number}>{number+1}</li>
+                        <li key={number}>
+                            {number+1 === parseInt(activePage) ? <span>{number+1}</span> : <Link as={`/page/${number+1}`} href={`/page?page_number=${number+1}`}><a>{number+1}</a></Link>}
+                        </li>
+
                     )
                 })}
             </ul>
@@ -21,7 +28,19 @@ function PaginationBox(props){
 
                     .pagination ul li {
                         display: inline-block;
+                    }
+
+                    .pagination ul li a, .pagination ul li span{
                         padding: 5px;
+                        border: 1px solid #333;
+                        border-radius: 50% 40% 45% 50% / 40% 50% 55% 40%;
+                        padding: 5px 10px;
+                        margin: 3px;
+                    }
+
+                    .pagination ul li span{
+                        background-color: #4618B1;
+                        color: #fff;
                     }
 
                 `}

diff --git a/server.js b/server.js
@@ -23,7 +23,7 @@ app
         })
 
         server.get('/page/:page_number', (req, res) => {
-            const actualPage = '/index'
+            const actualPage = '/'
             const page_number = req.params.page_number
             const queryParams = { page_number }
             app.render(req, res, actualPage, queryParams)