Merge pull request #4 from avorg/style-sermon-meta

style sermon meta

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

containers/sermon/detail.js

@@ -0,0 +1,51 @@
+import {useRouter} from "next/router";
+import ErrorPage from "next/error";
+import styles from "./detail.module.scss";
+import React from "react";
+
+
+export default function SermonDetail({sermon}) {
+    const router = useRouter()
+
+    if (!router.isFallback && !sermon) {
+        return <ErrorPage statusCode={404}/>
+    }
+
+    const imageSrc = sermon.imageWithFallback.url,
+        imageAlt = sermon.title;
+
+    return (
+        <div>
+            {router.isFallback ? (
+                <h1>Loading…</h1>
+            ) : (
+                <div>
+                    <div className={styles.meta}>
+                        {imageSrc ? <img src={imageSrc} alt={imageAlt}/> : null}
+                        <div>
+                            <h1>{sermon.title}</h1>
+                            <ul className={styles.speakers}>
+                                {sermon.persons.map(speaker => {
+                                    return <li key={speaker.name}>{speaker.name}</li>
+                                })}
+                            </ul>
+                        </div>
+                    </div>
+
+                    {sermon.recordingDate ? <p>{(new Date(sermon.recordingDate)).toLocaleDateString()}</p> : null}
+                    {sermon.audioFiles.map(file => {
+                        return <div key={file.url}>
+                            <audio controls src={file.url} preload={'metadata'}>Your browser doesn't support this
+                                player.
+                            </audio>
+                        </div>
+                    })}
+
+                    {sermon.description ? <div dangerouslySetInnerHTML={{__html: sermon.description}}/> : null}
+
+                    Other sermons: ...
+                </div>
+            )}
+        </div>
+    )
+}

containers/sermon/detail.module.scss

@@ -0,0 +1,31 @@
+.meta {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  img {
+    flex: 0 0 50px;
+    margin-right: .75rem;
+    border-radius: 100%;
+  }
+  h1 {
+    margin: 0;
+  }
+}
+
+.speakers  {
+  margin: 0;
+  padding-left: 0;
+  li {
+    display: inline;
+    list-style-type: none;
+    font-style: italic;
+    opacity: .5;
+  }
+  li:after {
+    content: ", ";
+  }
+  li:last-child:after {
+    content: "";
+  }
+}
+

pages/[language]/sermons/[id].spec.js → containers/sermon/detail.spec.js

@@ -1,7 +1,7 @@
-import { getAllPostsWithSlug as getLatestSermons, getSermon } from '../../../lib/api'
-import { getStaticPaths } from './[id]'
+import { getAllPostsWithSlug as getLatestSermons } from '../../lib/api'
+import { getStaticPaths } from '../../pages/[language]/sermons/[id]'
 
-jest.mock('../../../lib/api')
+jest.mock('../../lib/api')
 
 describe("detailPageGenerator", () => {
     it("gets sermons", async () => {

lib/api.js

@@ -61,7 +61,7 @@ fragment SermonsFragment on Recording {
             first: 1000
         }
     })
-    return data?.sermons
+    return data && data.sermons
 }
 
 export async function getSermon(id) {
@@ -91,5 +91,5 @@ fragment SermonFragment on Recording {
             id
         }
     })
-    return data?.sermon;
+    return data && data.sermon;
 }

package.json

@@ -20,7 +20,14 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "babel-jest": "^26.3.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.4.2",
     "ts-jest": "^26.3.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    }
   }
 }

pages/[language]/sermons/[id].js

@@ -1,54 +1,10 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
 import React from "react";
-// import Layout from '../../../components/layout'
-import { getAllPostsWithSlug as getLatestSermons, getSermon } from '../../../lib/api'
+import {getAllPostsWithSlug as getLatestSermons, getSermon} from '../../../lib/api'
+import SermonDetail from "../../../containers/sermon/detail";
 
-export default function Post({ sermon }) {
-    const router = useRouter()
+export default SermonDetail
 
-    if (!router.isFallback && !sermon) {
-        return <ErrorPage statusCode={404} />
-    }
-
-    const imageSrc = sermon.imageWithFallback.url,
-        imageAlt = sermon.title;
-
-    return (
-        <div>
-            {router.isFallback ? (
-                <h1>Loading…</h1>
-            ) : (
-                <>
-                    <div className={'template-sermon'}>
-                        <div className="template-sermon__meta">
-                            {imageSrc ? <img src={imageSrc} alt={imageAlt}/> : null}
-                            <div className="template-sermon__meta-text">
-                                <h1>{sermon.title}</h1>
-                                <ul className={'template-sermon__speakers'}>
-                                    {sermon.persons.map(speaker => {
-                                        return <li>{speaker.name}</li>
-                                    })}
-                                </ul>
-                            </div>
-                        </div>
-
-                        {sermon.recordingDate ? <p>{(new Date(sermon.recordingDate)).toLocaleDateString()}</p> : null}
-                        {sermon.audioFiles.map(file => {
-                            return <div><audio controls src={file.url} preload={'metadata'}>Your browser doesn't support this player.</audio></div>
-                        })}
-
-                        {sermon.description ? <div dangerouslySetInnerHTML={{__html: sermon.description}} /> : null}
-
-                        Other sermons: ...
-                    </div>
-                </>
-            )}
-        </div>
-    )
-}
-
-export async function getStaticProps({ params }) {
+export async function getStaticProps({params}) {
     const sermon = await getSermon(params.id)
 
     return {
@@ -59,7 +15,6 @@ export async function getStaticProps({ params }) {
     }
 }
 
-
 export async function getStaticPaths() {
     const allPosts = await getLatestSermons()
     const cutOffDate = new Date('2020-06-01')