Feat: Pagination

Author: Ameen Azeez

gatsby-node.js

@@ -64,14 +64,27 @@ exports.createPages = async ({ graphql, actions }) => {
   const authorTemplate = path.resolve(`./src/templates/author.js`);
   const pageTemplate = path.resolve(`./src/templates/page.js`);
   const postTemplate = path.resolve(`./src/templates/post.js`);
+  const blogsTemplate = path.resolve(`./src/templates/blogs.js`);
 
+  paginate({
+    createPage,
+    items: posts,
+    itemsPerPage: postsPerPage,
+    component: blogsTemplate,
+    pathPrefix: "blogs",
+    context: {
+      pathPrefix: "blogs",
+      // slug: node.slug,
+    },
+  });
+  
   // Create tag pages
   tags.forEach(({ node }) => {
     const totalPosts = node.postCount !== null ? node.postCount : 0;
 
     // This part here defines, that our tag pages will use
     // a `/tag/:slug/` permalink.
-    const url = `/tag/${node.slug}`;
+    const url = `tag/${node.slug}`;
 
     const items = Array.from({ length: totalPosts });
 
@@ -81,9 +94,9 @@ exports.createPages = async ({ graphql, actions }) => {
       items: items,
       itemsPerPage: postsPerPage,
       component: tagsTemplate,
-      pathPrefix: ({ pageNumber }) =>
-        pageNumber === 0 ? url : `${url}/page`,
+      pathPrefix: url,
       context: {
+        pathPrefix: url,
         slug: node.slug,
       },
     });

package-lock.json

@@ -66,6 +66,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet": "6.1.0",
+    "react-paginate": "^8.1.4",
     "url": "0.11.0"
   }
 }

package.json

@@ -1,32 +1,38 @@
 import * as React from "react";
 import PropTypes from "prop-types";
 import { Link } from "gatsby";
+import ReactPaginate from 'react-paginate';
+import { navigate } from "gatsby"
+
 
 const Pagination = ({ pageContext }) => {
-  const { previousPagePath, nextPagePath, humanPageNumber, numberOfPages } =
+  const { previousPagePath, nextPagePath, pageNumber, numberOfPages, pathPrefix } =
     pageContext;
 
+  console.log(pageContext)
+
+  function handlePageClick(e) {
+    if (e.selected == 0) {
+      navigate(`/${pathPrefix}`)
+    } else {
+      navigate(`/${pathPrefix}/${e.selected + 1}`)
+    }
+  }
+
   return (
     <nav className="pagination" role="navigation">
-      <div>
-        {previousPagePath && (
-          <Link to={previousPagePath} rel="prev">
-            Previous
-          </Link>
-        )}
-      </div>
-      {numberOfPages > 1 && (
-        <div className="pagination-location">
-          Page {humanPageNumber} of {numberOfPages}
-        </div>
-      )}
-      <div>
-        {nextPagePath && (
-          <Link to={nextPagePath} rel="next">
-            Next
-          </Link>
-        )}
-      </div>
+      <ReactPaginate
+        breakLabel="."
+        containerClassName={"pagination"}
+        nextLabel=">"
+        onPageChange={handlePageClick}
+        pageRangeDisplayed={3}
+        pageCount={numberOfPages}
+        previousLabel="<"
+        marginPagesDisplayed={2}
+        renderOnZeroPageCount={null}
+        initialPage={pageNumber}
+      />
     </nav>
   );
 };

src/components/common/Pagination.js

@@ -47,3 +47,27 @@
 
   }
 }
+
+
+.pagination{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.pagination li {
+  /* border: 0.1px solid gray; */
+  padding: 0.1rem 0.5rem;
+  cursor: pointer;
+  display: block;
+  font-weight: bold;
+  @apply text-gray-400 md:text-lg w-10 text-center mt-auto rounded-full;
+}
+
+.pagination .selected {
+  padding: 0.1rem 0.5rem;
+  cursor: pointer;
+  display: block;
+  font-weight: bold;
+  @apply text-orange-700 bg-orange-100;
+}