Sermons list

.github/workflows/ci.yml

@@ -1,5 +1,5 @@
 name: CI
-on: [push, pull_request]
+on: push
 jobs:
   audit:
     runs-on: ubuntu-latest

gatsby-node.js

@@ -4,12 +4,10 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
-const sermonFactory = require('./src/templates/sermon.factory.js'),
-    sermonsFactory = require('./src/templates/sermons.factory.js')
+const sermonFactory = require('./src/templates/sermons.factory.js')
 
 exports.createPages = async ({graphql, actions}) => {
     const {createPage} = actions
 
     await sermonFactory.createPages(graphql, createPage)
-    await sermonsFactory.createPages(graphql, createPage)
-}
+}

gatsby-node.spec.js

@@ -10,10 +10,7 @@ describe("gatsby node", () => {
             data: {
                 avorg: {
                     sermons: {
-                        nodes: [],
-                        pageInfo: {
-                            hasNextPage: false
-                        }
+                        nodes: [{}]
                     }
                 }
             }
@@ -25,6 +22,6 @@ describe("gatsby node", () => {
 
         await createPages(args)
 
-        expect(path.resolve).toBeCalledWith(`./src/templates/sermons.js`)
+        expect(path.resolve).toBeCalledWith(`./src/templates/sermons.list.js`)
     })
-})
+})

package.json

@@ -17,6 +17,7 @@
     "gatsby-source-graphql": "^2.6.1",
     "gatsby-transformer-sharp": "^2.5.7",
     "lodash": "^4.17.19",
+    "moment": "^2.27.0",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
@@ -38,7 +39,7 @@
   ],
   "license": "0BSD",
   "scripts": {
-    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",
+    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",

src/common.scss

@@ -1,9 +1,10 @@
 $gray-night: #1c1c1d;
-$gray-dark: #242426;
-$gray-mid: #262627;
-$gray-light: #747474;
-$gray-lighter: #dbdbdb;
-$gray-lightest: #e5e5e5;
-$gray-bleached: #eee;
+$gray-darkest: #242426;
+$gray-darker: #262627;
+$gray-dark: #747474;
+$gray-mid: #dbdbdb;
+$gray-light: #e5e5e5;
+$gray-lighter: #eee;
+$gray-lightest: #f7f7f7;
 
 $accent: #3DA88E;

src/components/layout.scss

@@ -5,7 +5,7 @@
 }
 
 .organism-header {
-  background-color: $gray-dark;
+  background-color: $gray-darkest;
 }
 
 // CSS Reset, Etc:
@@ -571,7 +571,6 @@ thead {
 td,
 th {
   text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
   font-feature-settings: "tnum";
   -moz-font-feature-settings: "tnum";
   -ms-font-feature-settings: "tnum";

src/components/molecules/pagination.scss

@@ -9,15 +9,15 @@
     margin-right: .2em;
 
     a {
-      color: $gray-light;
+      color: $gray-dark;
       text-decoration: none;
       display: block;
       border-radius: 3px;
       padding: .2em .5em;
     }
 
     &:not(.active) a:hover {
-      background-color: $gray-bleached;
+      background-color: $gray-lighter;
     }
   }
 

src/helpers/paths.js

@@ -0,0 +1 @@
+export const getSermonPath = (node, languageCode) => `/${languageCode}/sermons/${node.id}`

src/helpers/queries.js

@@ -1,30 +1,28 @@
 const _ = require(`lodash`),
     constants = require(`../constants`)
 
-// Must include pageInfo.hasNextPage and pageInfo.endCursor in generated queries
-exports.getPages = async (graphql, query, queryArgs, pageSelector, cursor = null, pages = []) => {
-    queryArgs.cursor = cursor
+const NUM_PER_PAGE = 250;
 
-    const result = await graphql(query, queryArgs),
-        page = _.get(result, pageSelector)
-
-    pages.push(page)
+exports.NUM_PER_PAGE = NUM_PER_PAGE;
 
-    const hasNextPage = _.get(page, 'pageInfo.hasNextPage') &&
-        pages.length < constants.query_page_limit
+// Required in query:
+//   pageInfo.hasNextPage
+//   pageInfo.endCursor
+//   aggregate.count
+exports.getPages = async (graphql, query, queryArgs, pageSelector) => {
+    const result = await graphql(query, queryArgs),
+        page = _.get(result, pageSelector),
+        pages = [page],
+        pageCount = Math.ceil(_.get(page, 'aggregate.count') / NUM_PER_PAGE),
+        maxPage = Math.min(pageCount, constants.query_page_limit)
 
-    if (hasNextPage) {
-        const nextCursor = _.get(page, 'pageInfo.endCursor')
+    if (!page) return [];
+    if (!maxPage || maxPage < 1) return pages;
 
-        return exports.getPages(
-            graphql,
-            query,
-            queryArgs,
-            pageSelector,
-            nextCursor,
-            pages
-        )
-    }
+    pages.push(...await Promise.all(_.range(1, maxPage).map(i => graphql(query, {
+        ...queryArgs,
+        cursor: Buffer.from(i * NUM_PER_PAGE + 1 + '').toString('base64')
+    }).then(result => _.get(result, pageSelector)))));
 
     return pages
 }

src/templates/sermon.js → src/templates/sermons.detail.js

@@ -1,12 +1,11 @@
 import React from "react"
 import Layout from "../components/layout"
-import './sermon.scss'
+import './sermons.detail.scss'
 
-export default function Sermon({ pageContext }) {
+export default function SermonsDetail({ pageContext }) {
     const sermon = pageContext.node,
-        firstPresenter = sermon.persons[0],
-        imageSrc = firstPresenter && firstPresenter.imageWithFallback.url,
-        imageAlt = firstPresenter && firstPresenter.name;
+        imageSrc = sermon.imageWithFallback.url,
+        imageAlt = sermon.title;
 
     return (
         <Layout>