Sermons list

.github/workflows/ci.yml

@@ -1,5 +1,5 @@
 name: CI
-on: [push, pull_request]
+on: push
 jobs:
   audit:
     runs-on: ubuntu-latest
@@ -29,4 +29,44 @@ jobs:
         run: npm ci
       - name: Run tests
         run: npm test
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache npm dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Cache Gatsby cache folder
+        uses: actions/cache@v2
+        with:
+          path: ~/.cache
+          key: ${{ runner.os }}-cache-gatsby
+          restore-keys: |
+            ${{ runner.os }}-cache-gatsby
+      - name: Cache Gatsby build folder
+        uses: actions/cache@v2
+        with:
+          path: ~/public
+          key: ${{ runner.os }}-public-gatsby
+          restore-keys: |
+            ${{ runner.os }}-public-gatsby
+      - name: Install dependencies
+        run: npm ci
+      - name: Build site
+        run: npm run build
+      - name: Deploy to Netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './public'
+          production-branch: master
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: "Deploy from GitHub Actions"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 3
 

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/templates/sermon.factory.js

@@ -6,21 +6,9 @@ const _ = require(`lodash`),
 const query = `
 query loadPagesQuery($language: AVORG_Language!, $cursor: String) {
   avorg {
-    sermons(language: $language, first: 50, after: $cursor) {
+    sermons(language: $language, first: 50, after: $cursor, orderBy: {direction: DESC, field: CREATED_AT}) {
       nodes {
-        title
         id
-        persons {
-          name
-          imageWithFallback {
-            url(size: 50)
-          }
-        }
-        audioFiles {
-          url
-        }
-        recordingDate
-        description
       }
       pageInfo {
         hasNextPage
@@ -47,7 +35,7 @@ const createSermon = async (createPage, node, pathPrefix) => {
     await createPage({
         path: `${pathPrefix}/sermons/${nodeId}`,
         component: path.resolve(`./src/templates/sermon.js`),
-        context: {node}
+        context: {id: nodeId}
     })
 }
 

src/templates/sermon.factory.spec.js

@@ -40,14 +40,6 @@ describe("sermon factory", () => {
         expect(createPage.mock.calls[0][0].path).toContain('en/sermons/')
     })
 
-    it("passes sermon data", async () => {
-        const {createPage} = await testCreatePages([{
-            'title': 'the_title'
-        }])
-
-        expect(createPage.mock.calls[0][0].context.node).toEqual({'title': 'the_title'})
-    })
-
     it("uses sermon id in url", async () => {
         const {createPage} = await testCreatePages([{id: 3}])
 
@@ -59,4 +51,12 @@ describe("sermon factory", () => {
 
         expect(graphql.mock.calls[0][0]).toContain("loadPagesQuery($language: AVORG_Language!, $cursor: String)")
     })
+
+    it("passes id to page", async () => {
+        const {createPage} = await testCreatePages([{
+            'id': 'the_id'
+        }])
+
+        expect(createPage.mock.calls[0][0].context.id).toEqual('the_id')
+    })
 })

src/templates/sermon.js

@@ -1,12 +1,12 @@
 import React from "react"
 import Layout from "../components/layout"
 import './sermon.scss'
+import {graphql} from "gatsby";
 
-export default function Sermon({ pageContext }) {
-    const sermon = pageContext.node,
-        firstPresenter = sermon.persons[0],
-        imageSrc = firstPresenter && firstPresenter.imageWithFallback.url,
-        imageAlt = firstPresenter && firstPresenter.name;
+export default function Sermon({ data }) {
+    const sermon = data.avorg.sermon,
+        imageSrc = sermon.imageWithFallback.url,
+        imageAlt = sermon.title;
 
     return (
         <Layout>
@@ -34,3 +34,24 @@ export default function Sermon({ pageContext }) {
         </Layout>
     )
 }
+
+export const query = graphql`
+    query ($id: ID!) {
+        avorg {
+            sermon(id: $id) {
+                title
+                persons {
+                    name
+                }
+                audioFiles {
+                    url
+                }
+                recordingDate
+                description
+                imageWithFallback {
+                    url(size: 50)
+                }
+            }
+        }
+    }
+`

src/templates/sermons.factory.js

@@ -6,14 +6,9 @@ const _ = require(`lodash`),
 const query = `
 query loadPagesQuery($language: AVORG_Language!, $cursor: String) {
     avorg {
-        sermons(language: $language, after: $cursor) {
-            nodes {
-                title
-            }
+        sermons(language: $language, after: $cursor, orderBy: {direction: DESC, field: CREATED_AT}) {
             pageInfo {
                 hasNextPage
-                hasPreviousPage
-                startCursor
                 endCursor
             }
             aggregate {
@@ -37,19 +32,20 @@ const createPagesByLang = async (
 
     await Promise.all(pages.map((page, i) => {
         const baseUrl = constants.languages[langKey].base_url,
-            nodes = _.get(page, 'nodes'),
             sermonCount = _.get(page, 'aggregate.count', 0),
+            cursor = _.get(page, 'pageInfo.endCursor'),
             pageNumber = i + 1
 
         return createPage({
             path: `${baseUrl}/sermons/page/${pageNumber}`,
             component: path.resolve(`./src/templates/sermons.js`),
             context: {
-                nodes,
                 pagination: {
                     total: Math.ceil(sermonCount / 10),
                     current: pageNumber
-                }
+                },
+                language: langKey,
+                cursor
             }
         })
     }))

src/templates/sermons.factory.spec.js

@@ -72,16 +72,6 @@ describe("sermons factory", () => {
             })
     })
 
-    it("passes sermons to createPage", async () => {
-        const sermons = ["sermons"],
-            returnValue = {data:{avorg:{sermons:{nodes:sermons}}}}
-
-        const {createPage} = await testCreatePages({returnValue})
-
-        expect(createPage.mock.calls[0][0].context.nodes)
-            .toEqual(sermons)
-    })
-
     it("awaits page create", async () => {
         let done = false;
 
@@ -184,4 +174,20 @@ describe("sermons factory", () => {
             expect(graphql).toBeCalledTimes(10)
         })
     })
+
+    it("passes language to page", async () => {
+        const {createPage} = await testCreatePages()
+
+        expect(createPage.mock.calls[0][0].context.language)
+            .toEqual("ENGLISH")
+    })
+
+    it("passes cursor to page", async () => {
+        const {createPage} = await testCreatePages({
+            returnValue: {data:{avorg:{sermons:{pageInfo:{endCursor:"the_cursor"}}}}}
+        })
+
+        expect(createPage.mock.calls[0][0].context.cursor)
+            .toEqual("the_cursor")
+    })
 })

src/templates/sermons.js

@@ -2,16 +2,51 @@ import React from "react"
 import Layout from "../components/layout"
 import './sermons.scss'
 import Pagination from "../components/molecules/pagination"
+import {graphql} from "gatsby";
+import moment from "moment";
 
-export default function Sermons({ pageContext }) {
-    const sermons = pageContext.nodes,
+export default function Sermons({pageContext, data}) {
+    if (!data) {
+        return <p>Page query failed</p>
+    }
+
+    const sermons = data.avorg.sermons.nodes,
         {total, current} = pageContext.pagination;
 
     return (
         <Layout className={'template-sermons'}>
-            <ul>{sermons.map((n, i) => <li>{n.title}</li>)}</ul>
+            <table>
+                {sermons.map((n, i) => <tr>
+                    <td><img src={n.imageWithFallback.url} alt={n.title} /></td>
+                    <td><a href={`/en/sermons/${n.id}`}>{n.title}</a></td>
+                    <td>{n.persons.map(p => p.name).join(', ')}</td>
+                    <td>{moment(n.recordingDate).fromNow()}</td>
+                    <td>{new Date(1000 * n.duration).toISOString().substr(11, 8)}</td>
+                </tr>)}
+            </table>
 
-            <Pagination current={current} total={total} base={'/en/sermons'} />
+            <Pagination current={current} total={total} base={'/en/sermons'}/>
         </Layout>
     )
-}
+}
+
+export const query = graphql`
+    query loadPage($language: AVORG_Language!, $cursor: String) {
+        avorg {
+            sermons(language: $language, after: $cursor, orderBy: {direction: DESC, field: CREATED_AT}) {
+                nodes {
+                    title
+                    id
+                    imageWithFallback {
+                        url(size: 50)
+                    }
+                    persons {
+                        name
+                    }
+                    duration
+                    recordingDate
+                }
+            }
+        }
+    }
+`

src/templates/sermons.scss

@@ -1,2 +1,16 @@
+@import "../common";
+
 .template-sermons {
-}
+  img {
+    border-radius: 100%;
+  }
+  tr {
+    border-top: 2px solid $gray-lightest;
+  }
+  tr:nth-child(even) {
+    background-color: $gray-lightest;
+  }
+  td {
+    padding: .5em;
+  }
+}