work in progress

backend/datamodel.prisma

@@ -4,7 +4,7 @@ type User {
     name: String!
     password: String!
     createdAt: DateTime! @createdAt
-    comments: [Comment]! 
+    comments: [Comment]!
     ratings: [Rating]!
     permissions: [Permission]!  @scalarList(strategy: RELATION)
     interests: [String]!  @scalarList(strategy: RELATION)
@@ -32,7 +32,7 @@ type Training {
 
 type TrainingType {
     id: ID! @id
-    name: String!
+    name: String! @unique
     description: String!
 }
 
@@ -67,7 +67,7 @@ type Exercise {
     name: String!
     description: String!
     video: String!
-    targets: [String]! @scalarList(strategy: RELATION) 
+    targets: [String]! @scalarList(strategy: RELATION)
     baseExercise: BaseExercise!
 }
 

frontend/components/signup.js

@@ -11,7 +11,7 @@ const SignupAdoption = adopt({
     <Mutation
       mutation={USER_SIGNUP}
       refetchQueries={[{ query: CURRENT_USER }]}
-    >{render}
+    >{(signup, { data, error, loading }) => render({ signup, data, error, loading, render })}
     </Mutation>
   ),
   form: ({ mutation, render }) => (

frontend/components/trainingForm.js

@@ -7,26 +7,44 @@ import { TextInput } from '../lib/forms'
 import { CREATE_TRAINING } from '../lib/graphql'
 
 const TrainingAdoption = adopt({
-  training: ({ render }) => (<Mutation mutation={CREATE_TRAINING}>{render}</Mutation>),
-  form: ({ render }) => (
+  mutation: ({ render }) => (
+    <Mutation mutation={CREATE_TRAINING}>
+      {(createTraining, { loading, data, error }) => render({ createTraining, loading, data, error })}
+    </Mutation>
+  ),
+  formik: ({ mutation: { createTraining }, render }) => (
     <Formik
-      initialVariables={{
-        title: '',
-        trainingDate: ''
+      initialValues={{
+        title: 'Winter HIIT 7',
+        type: 'HIIT',
+        content: [],
+        trainingDate: Date.now(),
+        location: '',
+        attendance: 0,
+        published: false
       }}
-      validationSchema={{
-        title: Yup.string(),
+      validationSchema={Yup.object({
+        title: Yup.string()
+          .required('required'),
+        type: Yup.string(),
         trainingDate: Yup.date()
-      }}
-      onSubmit={ev => console.log(ev.target)}
+          .required('required'),
+        location: Yup.string()
+          .required('required'),
+        attendance: Yup.number()
+          .integer('integer number'),
+        published: Yup.bool()
+      })}
+      onSubmit={values => console.log(values)}
     >
       {render}
-    </Formik>)
+    </Formik>
+  )
 })
 
 const TrainingForm = props => (
   <TrainingAdoption>
-    {({ training, form }) => (
+    {({ mutation: { createTraining, data, loading, error }, formik }) => (
       <Form>
         <h2>Create Training</h2>
         <TextInput

frontend/components/user.js

@@ -10,17 +10,37 @@ const UserAdoption = adopt({
   logout: ({ render }) => <Mutation mutation={USER_LOGOUT} refetchQueries={[{ query: CURRENT_USER }]}>{render}</Mutation>
 })
 
-class UserNav extends React.Component {
-  state = {
-    menu: false
-  }
+const UserNav = props => {
+  const [menu, setMenu] = React.useState(false)
 
-  toggleMenu = ev => {
-    ev.preventDefault()
-    this.setState({ menu: !this.state.menu })
-  }
+  return (
+    <UserAdoption>{({ user, logout }) => {
+      if (user.loading) {
+        return (
+          <p>Loading...</p>
+        )
+      }
+      if (user.error) {
+        return (
+          <LoginForm />
+        )
+      }
+      const { name, email, id } = user.data.me
+      return (
+        <>
+          <a href='' onClick={ev => setMenu(!menu)}>{name}</a>
+          {menu || (
+            <UserNavMenu />
+          )}
+        </>
+      )
+    }}
+    </UserAdoption>
+  )
+}
 
-  logout = async (ev, logout) => {
+const UserNavMenu = props => {
+  const logout = async (ev, logout) => {
     ev.preventDefault()
     try {
       const id = await logout()
@@ -29,59 +49,31 @@ class UserNav extends React.Component {
     }
   }
 
-  render() {
-    return (
-      <UserAdoption>{({ user, logout }) => {
-        if (user.loading) return (
-          <p>Loading...</p>
-        )
-        if (user.error) return (
-          <LoginForm>
-            <style jsx>
-              {`
-            label {
-              display: inline;
-            }
-          `}
-            </style>
-          </LoginForm>
-        )
-        const { name, email, id } = user.data.me
-        return (
-          <>
-            <a href='' onClick={this.toggleMenu}>{name}</a>
-            {this.state.menu || (
-              <UserNavMenu />
-            )}
-          </>
-        )
-      }}
-      </UserAdoption>
-    )
-  }
-}
+  return (
+    <>
+      <section className='usermenu'>
+        <h2>Welcome, {name}</h2>
+        <Link href={{ path: 'user' }}><a>Edit user data</a></Link>
+        <a
+          href='' onClick={ev => {
+            ev.preventDefault()
+            this.logout(ev, logout)
+          }}
+        >Logout
+        </a>
+      </section>
 
-const UserNavMenu = props => (
-  <>
-    <section className='usermenu'>
-      <h2>Welcome, {name}</h2>
-      <Link href={{ path: 'user' }}><a>Edit user data</a></Link>
-      <a href='' onClick={ev => {
-        ev.preventDefault()
-        this.logout(ev, logout)
-      }}>Logout</a>
-    </section>
-
-    <style jsx>
-      {`
+      <style jsx>
+        {`
 section.usermenu {
   position: absolute;
   background: rgba(127,0,0,0.5);
 }
                 `}
-    </style>
-  </>
-)
+      </style>
+    </>
+  )
+}
 
 const User = props => <a />
 

frontend/pages/index.js

@@ -27,7 +27,6 @@ const Home = () => (
     <section id='nextTraining'>
       <Query query={TRAININGS}>{
         ({ data, error, loading }) => {
-          console.log(data, error, loading)
           if (error) return (<p>Error {error.message}</p>)
           if (loading) return (<p>Loading...</p>)
           if (data.trainings.length) {