Add category pagination

gatsby-node.js

@@ -94,6 +94,28 @@ exports.createPages = ({ actions, graphql }) => {
       return Promise.reject(result.errors)
     }
 
+    const categories = result.data.allMarkdownRemark.edges.reduce((acc, { node: { fields: { category }}}) => ({
+      ...acc,
+      [category]: acc.hasOwnProperty(category) ? acc[category] + 1 : 1
+    }), {})
+    const postsPerPage = 9
+    for (let cat in categories) {
+      const numPages = Math.ceil(categories[cat] / postsPerPage)
+      for (let i of Array(numPages).keys()) {
+        createPage({
+          path: i === 0 ? `/${cat}` : `/${cat}/${i + 1}`,
+          component: categoryTemplate,
+          context: {
+            category: cat,
+            skip: i * postsPerPage,
+            limit: postsPerPage,
+            numPages,
+            currentPage: i + 1
+          }
+        })
+      }
+    }
+
     result.data.allMarkdownRemark.edges.forEach(({ node }) => {
       const {
         fields: { category, slug } = {},
@@ -102,14 +124,6 @@ exports.createPages = ({ actions, graphql }) => {
 
       const url = path.join('/', category.toLowerCase(), pathToMaterial)
 
-      createPage({
-        path: category,
-        component: categoryTemplate,
-        context: {
-          category,
-        },
-      })
-
       createPage({
         path: slug,
         component: blogPostTemplate,

src/templates/category-page/__snapshots__/spec.js.snap

@@ -7,6 +7,7 @@ exports[`Template matches the snapshot 1`] = `
     <Header
       contribute={true}
       subtitle="react.explore-tech.org"
+      title="random"
     />
   }
 >
@@ -95,6 +96,55 @@ exports[`Template matches the snapshot 1`] = `
             title="New Title 2"
           />
         </div>
+        <nav
+          aria-label="pagination"
+          className="pagination"
+          role="navigation"
+        >
+          <mockConstructor
+            className="pagination-previous"
+            to="/random"
+          >
+            ← Previous Page
+          </mockConstructor>
+          <mockConstructor
+            className="pagination-next"
+            to="/random/3"
+          >
+            Next Page →
+          </mockConstructor>
+          <ul
+            className="pagination-list"
+          >
+            <li>
+              <mockConstructor
+                aria-label="Goto page 1"
+                className="pagination-link"
+                to="/random"
+              >
+                1
+              </mockConstructor>
+            </li>
+            <li>
+              <mockConstructor
+                aria-label="Goto page 2"
+                className="pagination-link is-current"
+                to="/random/2"
+              >
+                2
+              </mockConstructor>
+            </li>
+            <li>
+              <mockConstructor
+                aria-label="Goto page 3"
+                className="pagination-link"
+                to="/random/3"
+              >
+                3
+              </mockConstructor>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
   </div>

src/templates/category-page/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Helmet from 'react-helmet'
-import { graphql } from 'gatsby'
+import { graphql, Link } from 'gatsby'
 import Fuse from 'fuse.js'
 
 import Layout from '../../components/Layout'
@@ -13,7 +13,11 @@ import './styles.css'
 import '../material-page/styles.css'
 
 export default function Template({ data = {}, pageContext = {} }) {
-  const { category } = pageContext
+  const { category, currentPage, numPages } = pageContext
+  const isFirst = currentPage === 1
+  const isLast = currentPage === numPages
+  const prevPage = currentPage - 1 <= 1 ? `/${category}` : `/${category}/${(currentPage - 1).toString()}`
+  const nextPage = `/${category}/${(currentPage + 1).toString()}`
 
   const { allMarkdownRemark: { edges = [] } = {} } = data
 
@@ -142,6 +146,29 @@ export default function Template({ data = {}, pageContext = {} }) {
                 )
               })}
             </div>
+            <nav
+              className="pagination"
+              role="navigation"
+              aria-label="pagination"
+            >
+              {!isFirst && (
+                <Link to={prevPage} className="pagination-previous">← Previous Page</Link>
+              )}
+              {!isLast && (
+                <Link to={nextPage} className="pagination-next">Next Page →</Link>
+              )}
+              <ul className="pagination-list">
+                {Array.from({ length: numPages }, (_, i) => (
+                  <li>
+                    <Link
+                      to={`/${category}${i === 0 ? '' : '/' + (i + 1)}`}
+                      className={`pagination-link${currentPage === i + 1 ? ' is-current' : ''}`}
+                      aria-label={`Goto page ${i + 1}`}
+                    >{`${i + 1}`}</Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
@@ -150,8 +177,12 @@ export default function Template({ data = {}, pageContext = {} }) {
 }
 
 export const pageQuery = graphql`
-  query MaterialsByCategory($category: String!) {
-    allMarkdownRemark(filter: { fields: { category: { eq: $category } } }) {
+  query MaterialsByCategory($category: String!, $skip: Int!, $limit: Int!) {
+    allMarkdownRemark(
+      filter: { fields: { category: { eq: $category } } }
+      limit: $limit
+      skip: $skip
+    ) {
       edges {
         node {
           fields {

src/templates/category-page/spec.js

@@ -56,9 +56,15 @@ const graphResult = {
   },
 }
 
+const pageContext = {
+  category: 'random',
+  currentPage: 2,
+  numPages: 3
+}
+
 describe('Template', () => {
   it('matches the snapshot', () => {
-    const wrapper = shallow(<Template data={graphResult} />)
+    const wrapper = shallow(<Template data={graphResult} pageContext={pageContext} />)
     expect(wrapper).toMatchSnapshot()
   })
 })

src/templates/category-page/styles.css

@@ -43,3 +43,16 @@
   margin: 25px;
   color: #5c5c5c;
 }
+
+.content ul.pagination-list {
+  list-style: none;
+}
+
+.content ul.pagination-list,
+.content ul.pagination-list li {
+  margin: 0;
+}
+
+.content ul.pagination-list li *:last-child {
+  margin: .25rem;
+}