working on simple version

docker-compose.yml

@@ -28,6 +28,7 @@ services:
       - "127.0.0.1:8801:4000"
     environment:
       - NODE_ENV=development
+      - PRISMA_MANAGEMENT_API_SECRET=PrismaSecret
     depends_on:
       - prisma
 

frontend/components/training.js

@@ -1,4 +1,4 @@
-function calculateRating(ratings) {
+function calculateRating (ratings) {
   const numberOfRatings = ratings.length
   const sumOfRatings = ratings.reduce(
     (accumulator, rating) => accumulator + rating.value,
@@ -30,49 +30,87 @@ const TrainingHint = props => (
 const Training = props => (
   <article>
     <h2>{props.title}</h2>
-    <section id='info'>
-      <p>
+    <aside>
+      <div id='trainingType'>
         <span className='caption'>Type: </span>
         <span className='data'>{props.type.name}</span>
-      </p>
-      <p>
+      </div>
+      <div id='trainingDate'>
         <span className='caption'>Date: </span>
-        <span className='data'>{(new Date(props.trainingDate)).toLocaleDateString()}</span>
-      </p>
-      <p>
+        <date className='data'>
+          {new Date(props.trainingDate).toLocaleDateString()}
+        </date>
+      </div>
+      <div id='trainingLocation'>
         <span className='caption'>Location: </span>
         <span className='data'>{props.location}</span>
-      </p>
-      <p>
+      </div>
+      <div id='trainingRegistrations'>
         <span className='caption'>Registrations: </span>
-        <span className='data'>{props.registration.length} <a href=''>Register!</a></span>
-      </p>
-      <p>
+        <span className='data'>
+          {props.registration.length} <a href=''>Register!</a>
+        </span>
+      </div>
+      <div id='trainingAttendance'>
         <span className='caption'>Attendance: </span>
         <span className='data'>{props.attendance}</span>
-      </p>
-      <p>
+      </div>
+      <div id='trainingRatings'>
         <span className='caption'>Rating: </span>
-        <span className='data'>{calculateRating(props.ratings)} [<a href=''>{props.ratings.length}</a>]
-          Rate it!
+        <span className='data'>
+          {calculateRating(props.ratings)} [
+          <a href=''>{props.ratings.length}</a>] Rate it!
           <a href=''>*</a>
           <a href=''>*</a>
           <a href=''>*</a>
           <a href=''>*</a>
           <a href=''>*</a>
         </span>
-      </p>
-    </section>
-    <section id='content'>
+      </div>
+    </aside>
+    <section>
       <h3>Content</h3>
-      {props.content.sort(block => block.sequence).map(block => <Block key={block.id} {...block} />)}
+      <ol>
+        {props.content
+          .sort(block => block.sequence)
+          .map(block => (
+            <Block key={block.id} {...block} />
+          ))}
+      </ol>
+      <iframe
+        width='560'
+        height='315'
+        src='https://www.youtube.com/embed/hRz0qPREKho'
+        frameborder='0'
+        allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
+        allowfullscreen
+      />
     </section>
+
+    <style jsx>
+      {`
+        article {
+          border: 1px solid black;
+        }
+
+        article > h2 {
+          font-size: 120%;
+          font-family: roboto_black;
+        }
+
+        aside {
+        }
+
+        section {
+        }
+      `}
+    </style>
   </article>
 )
 
-const Block = props => <article>
-  <h2>{props.title}</h2>
-  <section id='info'>
+const Block = props => (
+  <li>
+    <h2>{props.title}</h2>
     <p>
       <span className='caption'>Duration: </span>
       <span className='data'>{props.duration}</span>
@@ -83,22 +121,38 @@ const Block = props => <article>
     </p>
     <p>
       <span className='caption'>Format: </span>
-      <span className='data'>{props.format.name}</span>
+      <span className='data'>
+        {props.format.name}{' '}
+        <sup>
+          <a title={props.format.description}>[?]</a>
+        </sup>
+      </span>
     </p>
     <p>
       <span className='caption'>Description: </span>
       <span className='data'>{props.description}</span>
     </p>
-  </section>
-</article>
+  </li>
+)
 
 class TrainingCreateForm extends React.Component {
-  render() {
-    return <form>
-      <label htmlFor="title">Title<input type="text" id="title" /></label>
-      <label htmlFor="title">Title<input type="text" id="title" /></label>
-      <label htmlFor="title">Title<input type="text" id="title" /></label>
-    </form>
+  render () {
+    return (
+      <form>
+        <label htmlFor='title'>
+          Title
+          <input type='text' id='title' />
+        </label>
+        <label htmlFor='title'>
+          Title
+          <input type='text' id='title' />
+        </label>
+        <label htmlFor='title'>
+          Title
+          <input type='text' id='title' />
+        </label>
+      </form>
+    )
   }
 }
 

frontend/pages/_app.js

@@ -1,7 +1,7 @@
-import App from "next/app";
-import Page from "../components/page";
-import { ApolloProvider } from "react-apollo";
-import withApollo from "../lib/withApollo";
+import App from 'next/app'
+import Page from '../components/page'
+import { ApolloProvider } from 'react-apollo'
+import withApollo from '../lib/withApollo'
 
 /**
  * Next.js uses the `App` component to initialize pages. See:
@@ -20,31 +20,31 @@ import withApollo from "../lib/withApollo";
  */
 
 class MyApp extends App {
-  static async getInitialProps({ Component, ctx }) {
-    let pageProps = {};
+  static async getInitialProps ({ Component, ctx }) {
+    let pageProps = {}
 
     if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx);
+      pageProps = await Component.getInitialProps(ctx)
     }
 
     // Add the query object to the pageProps
     // https://github.com/wesbos/Advanced-React/blob/master/finished-application/frontend/pages/_app.js
-    pageProps.query = ctx.query;
+    pageProps.query = ctx.query
 
-    return { pageProps };
+    return { pageProps }
   }
 
-  render() {
-    const { Component, apollo, pageProps } = this.props;
+  render () {
+    const { Component, apollo, pageProps } = this.props
 
     return (
       <ApolloProvider client={apollo}>
-        <Page>
+        <Page id='page'>
           <Component {...pageProps} />
         </Page>
       </ApolloProvider>
-    );
+    )
   }
 }
 
-export default withApollo(MyApp);
+export default withApollo(MyApp)

frontend/pages/index.js

@@ -1,23 +1,21 @@
-import React from "react";
-import Head from "next/head";
-import Header from "../components/header";
-import Nav from "../components/nav"
-import Sidebar from "../components/sidebar";
-import Footer from "../components/footer";
-import Poll from "../components/poll";
-import Training from "../components/training";
-import { TrainingArchive } from "../components/training";
-import Exercise from "../components/exercise";
-import { ExerciseList } from "../components/exercise";
-import { PeopleList } from "../components/people";
-import data from "../initial-data.js";
-console.log("home done.");
+import React from 'react'
+import Head from 'next/head'
+import Header from '../components/header'
+import Nav from '../components/nav'
+import Sidebar from '../components/sidebar'
+import Footer from '../components/footer'
+import Poll from '../components/poll'
+import Training from '../components/training'
+import Exercise from '../components/exercise'
+import { PeopleList } from '../components/people'
+import data from '../initial-data.js'
+console.log('home done.')
 
 const Home = () => (
-  <div id="app">
+  <div id='app'>
     <Head>
       <title>Home</title>
-      <link rel="icon" href="/favicon.ico" />
+      <link rel='icon' href='/favicon.ico' />
     </Head>
 
     <Header />
@@ -27,6 +25,6 @@ const Home = () => (
     </main>
     <Footer />
   </div>
-);
+)
 
-export default Home;
+export default Home