updated next and react

backend/index.ts

@@ -52,7 +52,7 @@ server.applyMiddleware({ app, cors: corsOptions })
 
 app.listen({ port: process.env.PORT }, () => {
   console.log(
-    `Server ready at http://localhost:${process.env.PORT}/${server.graphqlPath} 🚀`
+    `Server ready at http://localhost:${process.env.PORT}/${server.graphqlPath} 🚀!`
   )
 })
 

codegen.yml

@@ -6,7 +6,8 @@ documents: 'frontend/src/**/*.graphql'
 generates:
   frontend/src/gql/index.tsx:
     config:
-      skipTypename: true
+      skipTypename: false
+      maybeValue: T | undefined
       withHooks: true
       withComponent: false
       withHOC: false

frontend/package.json

@@ -31,12 +31,12 @@
     "howler": "^2.1.3",
     "isomorphic-unfetch": "^3.0.0",
     "lodash": "^4.17.15",
-    "next": "9.1.2",
+    "next": "^9.3.4",
     "next-link": "^2.0.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "react": "16.13.1",
-    "react-dom": "16.11.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-onclickoutside": "^6.9.0",
     "react-sortable-hoc": "^1.11.0",
     "standard": "14.3.3",

frontend/src/gql/index.tsx

@@ -2,7 +2,7 @@
 import { gql } from '@apollo/client';
 import * as ApolloReactCommon from '@apollo/react-common';
 import * as ApolloReactHooks from '@apollo/client';
-export type Maybe<T> = T | null;
+export type Maybe<T> = T | undefined;
 
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
@@ -15,6 +15,7 @@ export type Scalars = {
 };
 
 export type Block = Node & {
+   __typename?: 'Block',
   id: Scalars['ID'],
   title: Scalars['String'],
   description?: Maybe<Scalars['String']>,
@@ -88,6 +89,7 @@ export type BlockCreateWithoutBlocksInput = {
 };
 
 export type BlockInstance = Node & {
+   __typename?: 'BlockInstance',
   id: Scalars['ID'],
   block: Block,
   order: Scalars['Int'],
@@ -377,6 +379,7 @@ export type BlockWhereUniqueInput = {
 };
 
 export type Comment = Node & {
+   __typename?: 'Comment',
   id: Scalars['ID'],
   text: Scalars['String'],
   author: User,
@@ -601,6 +604,7 @@ export type CommentWhereUniqueInput = {
 
 
 export type Exercise = Node & {
+   __typename?: 'Exercise',
   id: Scalars['ID'],
   name: Scalars['String'],
   description: Scalars['String'],
@@ -642,6 +646,7 @@ export type ExerciseCreatevideosInput = {
 };
 
 export type ExerciseInstance = Node & {
+   __typename?: 'ExerciseInstance',
   id: Scalars['ID'],
   exercise: Exercise,
   order: Scalars['Int'],
@@ -875,6 +880,7 @@ export type ExerciseWhereUniqueInput = {
 };
 
 export type Format = Node & {
+   __typename?: 'Format',
   id: Scalars['ID'],
   name: Scalars['String'],
   description: Scalars['String'],
@@ -995,6 +1001,7 @@ export type FormatWhereUniqueInput = {
 };
 
 export type Mutation = {
+   __typename?: 'Mutation',
   createUser: User,
   updateUser?: Maybe<User>,
   deleteUser?: Maybe<User>,
@@ -1098,6 +1105,7 @@ export enum Permission {
 }
 
 export type Query = {
+   __typename?: 'Query',
   currentUser: User,
   user?: Maybe<User>,
   users: Array<User>,
@@ -1210,6 +1218,7 @@ export type QueryExercisesArgs = {
 };
 
 export type Rating = Node & {
+   __typename?: 'Rating',
   id: Scalars['ID'],
   user: User,
   value: Scalars['Int'],
@@ -1469,6 +1478,7 @@ export type RatingWhereUniqueInput = {
 };
 
 export type Track = Node & {
+   __typename?: 'Track',
   id: Scalars['ID'],
   title: Scalars['String'],
   artist: Scalars['String'],
@@ -1639,6 +1649,7 @@ export type TrackWhereUniqueInput = {
 };
 
 export type Training = Node & {
+   __typename?: 'Training',
   id: Scalars['ID'],
   title: Scalars['String'],
   type: TrainingType,
@@ -1703,6 +1714,7 @@ export enum TrainingOrderByInput {
 }
 
 export type TrainingType = Node & {
+   __typename?: 'TrainingType',
   id: Scalars['ID'],
   name: Scalars['String'],
   description: Scalars['String'],
@@ -1972,6 +1984,7 @@ export type TrainingWhereInput = {
 };
 
 export type User = Node & {
+   __typename?: 'User',
   id: Scalars['ID'],
   email: Scalars['String'],
   name: Scalars['String'],
@@ -2250,40 +2263,126 @@ export type UserWhereUniqueInput = {
   email?: Maybe<Scalars['String']>,
 };
 
+export type ExerciseContentFragment = (
+  { __typename?: 'ExerciseInstance' }
+  & Pick<ExerciseInstance, 'id' | 'order' | 'repetitions' | 'variation'>
+  & { exercise: (
+    { __typename?: 'Exercise' }
+    & Pick<Exercise, 'id' | 'name' | 'description' | 'videos' | 'pictures' | 'targets' | 'baseExercise'>
+  ) }
+);
+
+export type BlockContentFragment = (
+  { __typename?: 'Block' }
+  & Pick<Block, 'id' | 'title' | 'description' | 'videos' | 'pictures' | 'duration' | 'rest'>
+  & { format: (
+    { __typename?: 'Format' }
+    & Pick<Format, 'id' | 'name' | 'description'>
+  ), blocks: Maybe<Array<(
+    { __typename?: 'BlockInstance' }
+    & Pick<BlockInstance, 'id' | 'order' | 'rounds' | 'variation'>
+    & { block: (
+      { __typename?: 'Block' }
+      & BlockHintFragment
+    ) }
+  )>>, exercises: Maybe<Array<(
+    { __typename?: 'ExerciseInstance' }
+    & ExerciseContentFragment
+  )>> }
+);
+
+export type BlockHintFragment = (
+  { __typename?: 'Block' }
+  & Pick<Block, 'id' | 'title' | 'description' | 'videos' | 'pictures' | 'duration' | 'rest'>
+  & { format: (
+    { __typename?: 'Format' }
+    & Pick<Format, 'id' | 'name' | 'description'>
+  ), blocks: Maybe<Array<(
+    { __typename?: 'BlockInstance' }
+    & Pick<BlockInstance, 'id'>
+  )>>, exercises: Maybe<Array<(
+    { __typename?: 'ExerciseInstance' }
+    & ExerciseContentFragment
+  )>> }
+);
+
+export type SubBlockFragment = (
+  { __typename?: 'BlockInstance' }
+  & Pick<BlockInstance, 'id' | 'order' | 'rounds' | 'variation'>
+  & { block: (
+    { __typename?: 'Block' }
+    & BlockContentFragment
+  ) }
+);
+
+export type SubBlockHintFragment = (
+  { __typename?: 'BlockInstance' }
+  & Pick<BlockInstance, 'id' | 'order' | 'rounds' | 'variation'>
+  & { block: (
+    { __typename?: 'Block' }
+    & BlockHintFragment
+  ) }
+);
+
 export type TrainingQueryVariables = {
   id: Scalars['ID']
 };
 
 
-export type TrainingQuery = { training: Maybe<(
-    Pick<Training, 'id' | 'title' | 'location' | 'trainingDate' | 'attendance' | 'published'>
-    & { type: Pick<TrainingType, 'id'> }
-  )> };
+export type TrainingQuery = (
+  { __typename?: 'Query' }
+  & { training: Maybe<(
+    { __typename?: 'Training' }
+    & Pick<Training, 'id' | 'title' | 'createdAt' | 'trainingDate' | 'location' | 'attendance' | 'published'>
+    & { type: (
+      { __typename?: 'TrainingType' }
+      & Pick<TrainingType, 'id' | 'name' | 'description'>
+    ), blocks: Maybe<Array<(
+      { __typename?: 'BlockInstance' }
+      & SubBlockFragment
+    )>> }
+  )> }
+);
 
 export type TrainingsQueryVariables = {};
 
 
-export type TrainingsQuery = { trainings: Array<(
-    Pick<Training, 'id' | 'title' | 'location' | 'trainingDate' | 'attendance' | 'published'>
-    & { type: Pick<TrainingType, 'id' | 'name' | 'description'> }
-  )> };
+export type TrainingsQuery = (
+  { __typename?: 'Query' }
+  & { trainings: Array<(
+    { __typename?: 'Training' }
+    & Pick<Training, 'id' | 'title' | 'trainingDate' | 'location' | 'published'>
+    & { type: (
+      { __typename?: 'TrainingType' }
+      & Pick<TrainingType, 'id' | 'name' | 'description'>
+    ), blocks: Maybe<Array<(
+      { __typename?: 'BlockInstance' }
+      & SubBlockHintFragment
+    )>> }
+  )> }
+);
 
 export type TrainingTypesQueryVariables = {};
 
 
-export type TrainingTypesQuery = { trainingTypes: Array<Pick<TrainingType, 'id' | 'name' | 'description'>> };
-
-export type TrainingTypeQueryVariables = {
-  where: TrainingTypeWhereUniqueInput
-};
-
-
-export type TrainingTypeQuery = { trainingType: Maybe<Pick<TrainingType, 'id' | 'name' | 'description'>> };
+export type TrainingTypesQuery = (
+  { __typename?: 'Query' }
+  & { trainingTypes: Array<(
+    { __typename?: 'TrainingType' }
+    & Pick<TrainingType, 'id' | 'name' | 'description'>
+  )> }
+);
 
 export type FormatsQueryVariables = {};
 
 
-export type FormatsQuery = { formats: Array<Pick<Format, 'id' | 'name' | 'description'>> };
+export type FormatsQuery = (
+  { __typename?: 'Query' }
+  & { formats: Array<(
+    { __typename?: 'Format' }
+    & Pick<Format, 'id' | 'name' | 'description'>
+  )> }
+);
 
 export type CreateTrainingMutationVariables = {
   title: Scalars['String'],
@@ -2296,7 +2395,13 @@ export type CreateTrainingMutationVariables = {
 };
 
 
-export type CreateTrainingMutation = { createTraining: Pick<Training, 'id'> };
+export type CreateTrainingMutation = (
+  { __typename?: 'Mutation' }
+  & { createTraining: (
+    { __typename?: 'Training' }
+    & Pick<Training, 'id'>
+  ) }
+);
 
 export type CreateTrainingTypeMutationVariables = {
   name: Scalars['String'],
@@ -2304,7 +2409,13 @@ export type CreateTrainingTypeMutationVariables = {
 };
 
 
-export type CreateTrainingTypeMutation = { createTrainingType: Pick<TrainingType, 'id'> };
+export type CreateTrainingTypeMutation = (
+  { __typename?: 'Mutation' }
+  & { createTrainingType: (
+    { __typename?: 'TrainingType' }
+    & Pick<TrainingType, 'id'>
+  ) }
+);
 
 export type CreateFormatMutationVariables = {
   name: Scalars['String'],
@@ -2312,12 +2423,24 @@ export type CreateFormatMutationVariables = {
 };
 
 
-export type CreateFormatMutation = { createFormat: Pick<Format, 'id'> };
+export type CreateFormatMutation = (
+  { __typename?: 'Mutation' }
+  & { createFormat: (
+    { __typename?: 'Format' }
+    & Pick<Format, 'id'>
+  ) }
+);
 
 export type UsersQueryVariables = {};
 
 
-export type UsersQuery = { users: Array<Pick<User, 'id' | 'email' | 'name' | 'permissions' | 'interests'>> };
+export type UsersQuery = (
+  { __typename?: 'Query' }
+  & { users: Array<(
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'email' | 'name' | 'permissions' | 'interests'>
+  )> }
+);
 
 export type UserSignupMutationVariables = {
   email: Scalars['String'],
@@ -2326,7 +2449,13 @@ export type UserSignupMutationVariables = {
 };
 
 
-export type UserSignupMutation = { userSignup: Pick<User, 'id' | 'email' | 'name'> };
+export type UserSignupMutation = (
+  { __typename?: 'Mutation' }
+  & { userSignup: (
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'email' | 'name'>
+  ) }
+);
 
 export type UserLoginMutationVariables = {
   email: Scalars['String'],
@@ -2334,24 +2463,42 @@ export type UserLoginMutationVariables = {
 };
 
 
-export type UserLoginMutation = { userLogin: Pick<User, 'id' | 'email' | 'name'> };
+export type UserLoginMutation = (
+  { __typename?: 'Mutation' }
+  & { userLogin: (
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'email' | 'name'>
+  ) }
+);
 
 export type UserLogoutMutationVariables = {};
 
 
-export type UserLogoutMutation = Pick<Mutation, 'userLogout'>;
+export type UserLogoutMutation = (
+  { __typename?: 'Mutation' }
+  & Pick<Mutation, 'userLogout'>
+);
 
 export type CurrentUserQueryVariables = {};
 
 
-export type CurrentUserQuery = { currentUser: Pick<User, 'id' | 'email' | 'name' | 'permissions' | 'interests'> };
+export type CurrentUserQuery = (
+  { __typename?: 'Query' }
+  & { currentUser: (
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'email' | 'name' | 'permissions' | 'interests'>
+  ) }
+);
 
 export type RequestResetMutationVariables = {
   email: Scalars['String']
 };
 
 
-export type RequestResetMutation = Pick<Mutation, 'requestReset'>;
+export type RequestResetMutation = (
+  { __typename?: 'Mutation' }
+  & Pick<Mutation, 'requestReset'>
+);
 
 export type ResetPasswordMutationVariables = {
   token: Scalars['String'],
@@ -2359,14 +2506,26 @@ export type ResetPasswordMutationVariables = {
 };
 
 
-export type ResetPasswordMutation = { resetPassword: Pick<User, 'id' | 'name'> };
+export type ResetPasswordMutation = (
+  { __typename?: 'Mutation' }
+  & { resetPassword: (
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'name'>
+  ) }
+);
 
 export type UserDeleteMutationVariables = {
   email: Scalars['String']
 };
 
 
-export type UserDeleteMutation = { deleteUser: Maybe<Pick<User, 'id'>> };
+export type UserDeleteMutation = (
+  { __typename?: 'Mutation' }
+  & { deleteUser: Maybe<(
+    { __typename?: 'User' }
+    & Pick<User, 'id'>
+  )> }
+);
 
 export type UserUpdateMutationVariables = {
   email: Scalars['String'],
@@ -2374,9 +2533,104 @@ export type UserUpdateMutationVariables = {
 };
 
 
-export type UserUpdateMutation = { updateUser: Maybe<Pick<User, 'id' | 'name' | 'email' | 'permissions' | 'interests'>> };
-
+export type UserUpdateMutation = (
+  { __typename?: 'Mutation' }
+  & { updateUser: Maybe<(
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'name' | 'email' | 'permissions' | 'interests'>
+  )> }
+);
 
+export const ExerciseContentFragmentDoc = gql`
+    fragment exerciseContent on ExerciseInstance {
+  id
+  exercise {
+    id
+    name
+    description
+    videos
+    pictures
+    targets
+    baseExercise
+  }
+  order
+  repetitions
+  variation
+}
+    `;
+export const BlockHintFragmentDoc = gql`
+    fragment blockHint on Block {
+  id
+  title
+  description
+  videos
+  pictures
+  duration
+  format {
+    id
+    name
+    description
+  }
+  rest
+  blocks {
+    id
+  }
+  exercises {
+    ...exerciseContent
+  }
+}
+    ${ExerciseContentFragmentDoc}`;
+export const BlockContentFragmentDoc = gql`
+    fragment blockContent on Block {
+  id
+  title
+  description
+  videos
+  pictures
+  duration
+  format {
+    id
+    name
+    description
+  }
+  rest
+  blocks {
+    id
+    block {
+      ...blockHint
+    }
+    order
+    rounds
+    variation
+  }
+  exercises {
+    ...exerciseContent
+  }
+}
+    ${BlockHintFragmentDoc}
+${ExerciseContentFragmentDoc}`;
+export const SubBlockFragmentDoc = gql`
+    fragment subBlock on BlockInstance {
+  id
+  block {
+    ...blockContent
+  }
+  order
+  rounds
+  variation
+}
+    ${BlockContentFragmentDoc}`;
+export const SubBlockHintFragmentDoc = gql`
+    fragment subBlockHint on BlockInstance {
+  id
+  block {
+    ...blockHint
+  }
+  order
+  rounds
+  variation
+}
+    ${BlockHintFragmentDoc}`;
 export const TrainingDocument = gql`
     query training($id: ID!) {
   training(id: $id) {
@@ -2384,14 +2638,20 @@ export const TrainingDocument = gql`
     title
     type {
       id
+      name
+      description
     }
-    location
+    createdAt
     trainingDate
+    location
     attendance
     published
+    blocks {
+      ...subBlock
+    }
   }
 }
-    `;
+    ${SubBlockFragmentDoc}`;
 
 /**
  * __useTrainingQuery__
@@ -2428,13 +2688,15 @@ export const TrainingsDocument = gql`
       name
       description
     }
-    location
     trainingDate
-    attendance
+    location
     published
+    blocks {
+      ...subBlockHint
+    }
   }
 }
-    `;
+    ${SubBlockHintFragmentDoc}`;
 
 /**
  * __useTrainingsQuery__
@@ -2494,41 +2756,6 @@ export function useTrainingTypesLazyQuery(baseOptions?: ApolloReactHooks.LazyQue
 export type TrainingTypesQueryHookResult = ReturnType<typeof useTrainingTypesQuery>;
 export type TrainingTypesLazyQueryHookResult = ReturnType<typeof useTrainingTypesLazyQuery>;
 export type TrainingTypesQueryResult = ApolloReactCommon.QueryResult<TrainingTypesQuery, TrainingTypesQueryVariables>;
-export const TrainingTypeDocument = gql`
-    query trainingType($where: TrainingTypeWhereUniqueInput!) {
-  trainingType(where: $where) {
-    id
-    name
-    description
-  }
-}
-    `;
-
-/**
- * __useTrainingTypeQuery__
- *
- * To run a query within a React component, call `useTrainingTypeQuery` and pass it any options that fit your needs.
- * When your component renders, `useTrainingTypeQuery` returns an object from Apollo Client that contains loading, error, and data properties 
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useTrainingTypeQuery({
- *   variables: {
- *      where: // value for 'where'
- *   },
- * });
- */
-export function useTrainingTypeQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<TrainingTypeQuery, TrainingTypeQueryVariables>) {
-        return ApolloReactHooks.useQuery<TrainingTypeQuery, TrainingTypeQueryVariables>(TrainingTypeDocument, baseOptions);
-      }
-export function useTrainingTypeLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<TrainingTypeQuery, TrainingTypeQueryVariables>) {
-          return ApolloReactHooks.useLazyQuery<TrainingTypeQuery, TrainingTypeQueryVariables>(TrainingTypeDocument, baseOptions);
-        }
-export type TrainingTypeQueryHookResult = ReturnType<typeof useTrainingTypeQuery>;
-export type TrainingTypeLazyQueryHookResult = ReturnType<typeof useTrainingTypeLazyQuery>;
-export type TrainingTypeQueryResult = ApolloReactCommon.QueryResult<TrainingTypeQuery, TrainingTypeQueryVariables>;
 export const FormatsDocument = gql`
     query formats {
   formats {

frontend/src/training/components/EditTraining.tsx

@@ -10,6 +10,7 @@ import TrainingTypeSelector from './TrainingTypeSelector'
 import { parse } from 'date-fns'
 import EditSubBlocks from './EditSubBlocks'
 import { useEffect } from 'react'
+import { trainingDBToArray } from '../utils'
 
 const nextTuesday = parse('11:45', 'HH:mm', new Date())
 nextTuesday.setDate(
@@ -31,16 +32,17 @@ const initialData = {
 
 const EditTraining = ({ id = '' }: { id?: string }) => {
   const trainingData = useTrainingQuery({ variables: { id } })
+  trainingDBToArray(trainingData.data?.training)
 
   const { values, touched, onChange, loadData } = useForm(initialData)
   const [createTraining, createData] = useCreateTrainingMutation()
   const props = { onChange }
 
-  useEffect(() => {
-    if (trainingData.data && trainingData.data.training)
-      loadData(trainingData.data.training)
-  }, [trainingData])
-  console.log(data)
+  // useEffect(() => {
+  //   if (trainingData.data && trainingData.data.training)
+  //     loadData(trainingData.data.training)
+  // }, [trainingData])
+  // console.log(data)
 
   return (
     <>

frontend/src/training/training.graphql

@@ -1,16 +1,106 @@
 # import * from '../../../backend/database/generated/prisma.graphql'
 
+fragment exerciseContent on ExerciseInstance {
+  id
+  exercise {
+    id
+    name
+    description
+    videos
+    pictures
+    targets
+    baseExercise
+  }
+  order
+  repetitions
+  variation
+}
+
+fragment blockContent on Block {
+  id
+  title
+  description
+  videos
+  pictures
+  duration
+  format {
+    id
+    name
+    description
+  }
+  rest
+  blocks {
+    id
+    block {
+      ...blockHint
+    }
+    order
+    rounds
+    variation
+  }
+  exercises {
+    ...exerciseContent
+  }
+}
+
+fragment blockHint on Block {
+  id
+  title
+  description
+  videos
+  pictures
+  duration
+  format {
+    id
+    name
+    description
+  }
+  rest
+  blocks {
+    id
+  }
+  exercises {
+    ...exerciseContent
+  }
+}
+
+fragment subBlock on BlockInstance {
+  id
+  block {
+    ...blockContent
+  }
+  order
+  rounds
+  variation
+}
+
+fragment subBlockHint on BlockInstance {
+  id
+  block {
+    ...blockHint
+  }
+  order
+  rounds
+  variation
+}
+
 query training($id: ID!) {
   training(id: $id) {
     id
     title
     type {
       id
+      name
+      description
     }
-    location
+    createdAt
     trainingDate
+    location
     attendance
     published
+    blocks {
+      ...subBlock
+    }
   }
 }
 
@@ -23,10 +113,12 @@ query trainings {
       name
       description
     }
-    location
     trainingDate
-    attendance
+    location
     published
+    blocks {
+      ...subBlockHint
+    }
   }
 }
 
@@ -38,14 +130,6 @@ query trainingTypes {
   }
 }
 
-query trainingType($where: TrainingTypeWhereUniqueInput!) {
-  trainingType(where: $where) {
-    id
-    name
-    description
-  }
-}
-
 query formats {
   formats {
     id

frontend/src/training/utils.ts

@@ -1,4 +1,12 @@
 import { IBlock, IExercise, IRating } from './types'
+import {
+  Training,
+  TrainingType,
+  TrainingQuery,
+  TrainingQueryResult,
+  TrainingQueryVariables,
+  SubBlockFragment
+} from '../gql'
 
 /**
  * Takes a block of exercises and calculates the duration in seconds.
@@ -57,3 +65,20 @@ export function calculateRating(ratings: IRating[]) {
   )
   return numberOfRatings ? sumOfRatings / numberOfRatings : '-'
 }
+
+export function trainingDBToArray(DBTraining: TrainingQuery['training']) {
+  console.log({ DBTraining })
+  if (!DBTraining) return undefined
+  const { __typename, blocks, ...data } = DBTraining
+  return { ...data, blocks: blockDBToArray(blocks) }
+}
+
+export function trainingArrayToDB() {}
+
+export function blockDBToArray(DBSubBlock?: SubBlockFragment[]) {
+  console.log({ DBSubBlock })
+  if (!DBSubBlock) return undefined
+  return DBSubBlock
+}
+
+export function blockArrayToDB() {}