feat(paginator): now loading posts on page change

abedzantout · Sep 18, 2019 · 3e0ecf7 · 3e0ecf7
1 parent 926ed08
commit 3e0ecf7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,7 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import './index.styles.css';
 import {NextPage} from 'next';
+import { useRouter } from 'next/router'
 
 import {defaultMetaTags} from '../core/constants';
 import Layout from '../shared/components/layout';
@@ -30,6 +31,7 @@ const IndexPage: NextPage = (props: Props) => {
 
     const [skip, updateSkip] = useState(!!props.skip ? props.skip : 0);
 
+    const router = useRouter();
     const page = !!props.page ? props.page : 1;
     const entries = props.entries;
     const tags = props.tags || [];
@@ -39,13 +41,17 @@ const IndexPage: NextPage = (props: Props) => {
     const rangeLimit = Math.ceil(total / limit);
     const range = calculateRange(rangeLimit);
 
+       useEffect(() => {
+           router.push({pathname: '/', query: {page: skip >= 0 ? skip : 0}});
+       }, [skip]);
+
     return (
         <Layout meta={defaultMetaTags}>
             <div className="container">
                 <div className="blogposts">
                     <h1 className="blogposts__header">Latest posts</h1>
                     <div className="cards-deck">
-                        {cards(posts)}
+                        {cards(entries)}
                     </div>
                 </div>
                 <div className="sidenav">
@@ -62,9 +68,14 @@ const IndexPage: NextPage = (props: Props) => {
     )
 };
 
-IndexPage.getInitialProps = async ({req, query}) => {
-    const {page} = query;
-    const {entries, total, skip, limit} = await getBlogPostEntries({limit: 1});
+IndexPage.getInitialProps = async ({query}) => {
+
+    let page: number = 0;
+    if(parseInt(query.page + '') > 0) {
+        page = parseInt(query.page + '') - 1;
+    }
+
+    const {entries, total, skip, limit} = await getBlogPostEntries({limit: 1, skip: page});
     const allTags = entries.map(entry => entry.tags);
     const tags = Array.from(new Set(allTags.flat(1)));
     return {page, entries, tags, total, skip, limit};

diff --git a/shared/components/paginator/index.tsx b/shared/components/paginator/index.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent, Fragment, useState} from 'react';
+import React, {FunctionComponent, Fragment, useState, useEffect} from 'react';
 import './styles.css';
 import {render} from "react-dom";