#8 Implements Pagination

raeperd · Jan 9, 2022 · e39a99a · e39a99a
1 parent 911f682
commit e39a99a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,13 +1,40 @@
 import Head from 'next/head';
+import { useState } from 'react';
 import { Article, getAllArticles } from '../lib/article';
 
+const PAGE_SIZE = 1
+
 export default function Index({ siteName, posts }: IndexProps) {
+  const [pageCurrent, setPageCurrent] = useState(0)
+  const lastPage = Math.floor(posts.length / PAGE_SIZE) - 1
   return (
     <>
       <Head>
         <title>{siteName}</title>
       </Head>
-      {posts.map((post) => <ArticlePreview article={post} />)}
+      {posts
+        .slice(pageCurrent * PAGE_SIZE, pageCurrent * PAGE_SIZE + PAGE_SIZE)
+        .map((post) => <ArticlePreview article={post} />)}
+      <nav className="main-nav">
+        {pageCurrent > 0 && (
+          <button
+            className="prev"
+            type="button"
+            onClick={() => setPageCurrent(pageCurrent - 1)}
+          >
+            prev_page
+          </button>
+        )}
+        {pageCurrent !== lastPage && (
+        <button
+          className="next"
+          type="button"
+          onClick={() => setPageCurrent(pageCurrent + 1)}
+        >
+          next_page
+        </button>
+        ) }
+      </nav>
     </>
   )
 }

diff --git a/public/app.css b/public/app.css
@@ -291,7 +291,7 @@ img {
     margin-top: 5rem;
 }
 
-.main-nav a {
+.main-nav button {
     font-size: 1.8rem;
     line-height: 5.5rem;
     color: var(--white);
@@ -434,7 +434,7 @@ img {
     }
 }
 
-/* Post content
+/* Article content
  -------------------------------------------------- */
 .post-content {
     font-size: 2.2rem;