From 4ce2352d99ebd8045bbba1bdde07225f2302b6d3 Mon Sep 17 00:00:00 2001 From: Joseph Ting Date: Tue, 19 Feb 2019 11:32:24 +0900 Subject: [PATCH 1/4] Add category pagination --- gatsby-node.js | 30 ++++++++++++++------ src/templates/category-page/index.js | 39 +++++++++++++++++++++++--- src/templates/category-page/styles.css | 13 +++++++++ 3 files changed, 70 insertions(+), 12 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 97a13cc..0035aa5 100644 --- a/gatsby-node.js +++ b/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, diff --git a/src/templates/category-page/index.js b/src/templates/category-page/index.js index c7e09ff..8f781ee 100644 --- a/src/templates/category-page/index.js +++ b/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 = {} }) { ) })} + @@ -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 { diff --git a/src/templates/category-page/styles.css b/src/templates/category-page/styles.css index e3fafe6..cde45cc 100644 --- a/src/templates/category-page/styles.css +++ b/src/templates/category-page/styles.css @@ -43,3 +43,16 @@ margin: 25px; color: #5c5c5c; } + +.content ul.pagination-list { + list-style: none; + margin: 0; +} + +.content ul.pagination-list li + li { + margin: 0; +} + +.content ul.pagination-list li *:last-child { + margin: .25rem; +} From ce7ec9af6e26b7536f18331438034586666ba7de Mon Sep 17 00:00:00 2001 From: Joseph Ting Date: Tue, 19 Feb 2019 13:21:39 +0900 Subject: [PATCH 2/4] Update category-page spec snapshot --- .../category-page/__snapshots__/spec.js.snap | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/templates/category-page/__snapshots__/spec.js.snap b/src/templates/category-page/__snapshots__/spec.js.snap index 8f6d662..2d5602e 100644 --- a/src/templates/category-page/__snapshots__/spec.js.snap +++ b/src/templates/category-page/__snapshots__/spec.js.snap @@ -95,6 +95,21 @@ exports[`Template matches the snapshot 1`] = ` title="New Title 2" /> + From dd254f1879712ca666f1aa1e617c13dd361afd0a Mon Sep 17 00:00:00 2001 From: Joseph Ting Date: Tue, 19 Feb 2019 13:37:30 +0900 Subject: [PATCH 3/4] Add pageContext pagination template test - Update test snapshot --- .../category-page/__snapshots__/spec.js.snap | 39 ++++++++++++++++++- src/templates/category-page/spec.js | 8 +++- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/templates/category-page/__snapshots__/spec.js.snap b/src/templates/category-page/__snapshots__/spec.js.snap index 2d5602e..b2ee297 100644 --- a/src/templates/category-page/__snapshots__/spec.js.snap +++ b/src/templates/category-page/__snapshots__/spec.js.snap @@ -7,6 +7,7 @@ exports[`Template matches the snapshot 1`] = `
} > @@ -102,13 +103,47 @@ exports[`Template matches the snapshot 1`] = ` > ← Previous Page + + Next Page → +
    + > +
  • + + 1 + +
    • +
  • + + 2 + +
    • +
  • + + 3 + +
    • +
diff --git a/src/templates/category-page/spec.js b/src/templates/category-page/spec.js index 10d9011..ad3b2a7 100644 --- a/src/templates/category-page/spec.js +++ b/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(