starting overlay for mini forms

backend/src/training/resolvers.ts

@@ -32,9 +32,7 @@ export const resolvers: IResolvers = {
 
   Mutation: {
     createTraining: async (parent, args, context, info) => {
-      console.log('pre permission')
       checkPermission(context, ['INSTRUCTOR', 'ADMIN'])
-      console.log('post permission')
       const training = await context.db.mutation.createTraining(
         { data: args },
         info

frontend/src/modal/index.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const modalContext = createContext({ visible: true });

frontend/src/training/components/FormatSelector.tsx

@@ -1,32 +1,32 @@
-import { useFormatsQuery } from '../../gql'
-import { ChangeEvent } from 'react'
+import { useFormatsQuery } from "../../gql";
+import { ChangeEvent } from "react";
 
 interface IFormatSelector {
-  value: { connect: { id: string } } | undefined
-  name?: string
-  label?: string
-  onChange: (event: ChangeEvent<HTMLSelectElement> | NestedEvent) => void
+  value: { connect: { id: string } } | undefined;
+  name?: string;
+  label?: string;
+  onChange: (event: ChangeEvent<HTMLSelectElement> | NestedEvent) => void;
 }
 
 const FormatSelector = ({
   onChange,
   value,
-  name = 'format',
-  label = 'Format',
+  name = "format",
+  label = "Format",
   ...props
 }: IFormatSelector) => {
-  const formats = useFormatsQuery()
-  const id = value && value.connect.id
+  const formats = useFormatsQuery();
+  const id = value && value.connect.id;
 
-  if (formats.data && !value) {
-    const id = formats.data.formats[0].id
+  if (formats.data && formats.data.formats.length > 0 && !value) {
+    const id = formats.data.formats[0].id;
     onChange({
       target: {
-        type: 'custom',
+        type: "custom",
         value: { connect: { id } },
         name
       }
-    })
+    });
   }
 
   return (
@@ -39,17 +39,17 @@ const FormatSelector = ({
         onChange={event => {
           const copy: NestedEvent = {
             target: {
-              type: 'custom',
+              type: "custom",
               value: { connect: { id: event.target.value } },
               name
             }
-          }
-          onChange(copy)
+          };
+          onChange(copy);
         }}
         {...props}
       >
-        {formats.loading && 'loading formats...'}
-        {formats.error && 'error loading formats'}
+        {formats.loading && "loading formats..."}
+        {formats.error && "error loading formats"}
         {formats.data &&
           formats.data.formats.map(format => (
             <option
@@ -62,15 +62,15 @@ const FormatSelector = ({
           ))}
       </select>
       <button
-        type='button'
+        type="button"
         onClick={event => {
-          event.preventDefault()
+          event.preventDefault();
         }}
       >
         Add format
       </button>
     </>
-  )
-}
+  );
+};
 
-export default FormatSelector
+export default FormatSelector;

frontend/src/training/components/TrainingTypeSelector.tsx

@@ -1,32 +1,36 @@
-import { ChangeEvent } from 'react'
-import { useTrainingTypesQuery } from '../../gql'
+import { ChangeEvent } from "react";
+import { useTrainingTypesQuery } from "../../gql";
 
 interface ITrainingTypeSelector {
-  value: { connect: { id: string } } | undefined
-  label?: string
-  name?: string
-  onChange: (event: ChangeEvent<HTMLSelectElement> | NestedEvent) => void
+  value: { connect: { id: string } } | undefined;
+  label?: string;
+  name?: string;
+  onChange: (event: ChangeEvent<HTMLSelectElement> | NestedEvent) => void;
 }
 
 const TrainingTypeSelector = ({
   onChange,
   value,
-  name = 'type',
-  label = 'Training type',
+  name = "type",
+  label = "Training type",
   ...props
 }: ITrainingTypeSelector) => {
-  const trainingTypes = useTrainingTypesQuery()
-  const id = value && value.connect.id
+  const trainingTypes = useTrainingTypesQuery();
+  const id = value && value.connect.id;
 
-  if (trainingTypes.data && !value) {
-    const id = trainingTypes.data.trainingTypes[0].id
+  if (
+    trainingTypes.data &&
+    trainingTypes.data.trainingTypes.length > 0 &&
+    !value
+  ) {
+    const id = trainingTypes.data.trainingTypes[0].id;
     onChange({
       target: {
-        type: 'custom',
+        type: "custom",
         value: { connect: { id } },
         name
       }
-    })
+    });
   }
 
   return (
@@ -39,17 +43,17 @@ const TrainingTypeSelector = ({
         onChange={event => {
           const copy: NestedEvent = {
             target: {
-              type: 'custom',
+              type: "custom",
               value: { connect: { id: event.target.value } },
               name
             }
-          }
-          onChange(copy)
+          };
+          onChange(copy);
         }}
         {...props}
       >
-        {trainingTypes.loading && 'loading training types...'}
-        {trainingTypes.error && 'error loading training types'}
+        {trainingTypes.loading && "loading training types..."}
+        {trainingTypes.error && "error loading training types"}
         {trainingTypes.data &&
           trainingTypes.data.trainingTypes.map(trainingType => (
             <option
@@ -62,14 +66,14 @@ const TrainingTypeSelector = ({
           ))}
       </select>
       <button
-        type='button'
+        type="button"
         onClick={event => {
-          event.preventDefault()
+          event.preventDefault();
         }}
       >
         Add type
       </button>
     </>
-  )
-}
-export default TrainingTypeSelector
+  );
+};
+export default TrainingTypeSelector;