Add an exercise submission when the user submits an answer

graphql/index.tsx

@@ -508,6 +508,22 @@ export type AddExerciseMutation = {
   }
 }
 
+export type AddExerciseSubmissionMutationVariables = Exact<{
+  exerciseId: Scalars['Int']
+  userAnswer: Scalars['String']
+}>
+
+export type AddExerciseSubmissionMutation = {
+  __typename?: 'Mutation'
+  addExerciseSubmission: {
+    __typename?: 'ExerciseSubmission'
+    id: number
+    exerciseId: number
+    userId: number
+    userAnswer: string
+  }
+}
+
 export type AddModuleMutationVariables = Exact<{
   content: Scalars['String']
   lessonId: Scalars['Int']
@@ -2446,6 +2462,91 @@ export type AddExerciseMutationOptions = Apollo.BaseMutationOptions<
   AddExerciseMutation,
   AddExerciseMutationVariables
 >
+export const AddExerciseSubmissionDocument = gql`
+  mutation AddExerciseSubmission($exerciseId: Int!, $userAnswer: String!) {
+    addExerciseSubmission(exerciseId: $exerciseId, userAnswer: $userAnswer) {
+      id
+      exerciseId
+      userId
+      userAnswer
+    }
+  }
+`
+export type AddExerciseSubmissionMutationFn = Apollo.MutationFunction<
+  AddExerciseSubmissionMutation,
+  AddExerciseSubmissionMutationVariables
+>
+export type AddExerciseSubmissionProps<
+  TChildProps = {},
+  TDataName extends string = 'mutate'
+> = {
+  [key in TDataName]: Apollo.MutationFunction<
+    AddExerciseSubmissionMutation,
+    AddExerciseSubmissionMutationVariables
+  >
+} & TChildProps
+export function withAddExerciseSubmission<
+  TProps,
+  TChildProps = {},
+  TDataName extends string = 'mutate'
+>(
+  operationOptions?: ApolloReactHoc.OperationOption<
+    TProps,
+    AddExerciseSubmissionMutation,
+    AddExerciseSubmissionMutationVariables,
+    AddExerciseSubmissionProps<TChildProps, TDataName>
+  >
+) {
+  return ApolloReactHoc.withMutation<
+    TProps,
+    AddExerciseSubmissionMutation,
+    AddExerciseSubmissionMutationVariables,
+    AddExerciseSubmissionProps<TChildProps, TDataName>
+  >(AddExerciseSubmissionDocument, {
+    alias: 'addExerciseSubmission',
+    ...operationOptions
+  })
+}
+
+/**
+ * __useAddExerciseSubmissionMutation__
+ *
+ * To run a mutation, you first call `useAddExerciseSubmissionMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useAddExerciseSubmissionMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [addExerciseSubmissionMutation, { data, loading, error }] = useAddExerciseSubmissionMutation({
+ *   variables: {
+ *      exerciseId: // value for 'exerciseId'
+ *      userAnswer: // value for 'userAnswer'
+ *   },
+ * });
+ */
+export function useAddExerciseSubmissionMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    AddExerciseSubmissionMutation,
+    AddExerciseSubmissionMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<
+    AddExerciseSubmissionMutation,
+    AddExerciseSubmissionMutationVariables
+  >(AddExerciseSubmissionDocument, options)
+}
+export type AddExerciseSubmissionMutationHookResult = ReturnType<
+  typeof useAddExerciseSubmissionMutation
+>
+export type AddExerciseSubmissionMutationResult =
+  Apollo.MutationResult<AddExerciseSubmissionMutation>
+export type AddExerciseSubmissionMutationOptions = Apollo.BaseMutationOptions<
+  AddExerciseSubmissionMutation,
+  AddExerciseSubmissionMutationVariables
+>
 export const AddModuleDocument = gql`
   mutation addModule(
     $content: String!

graphql/queries/addExerciseSubmission.ts

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client'
+
+const ADD_EXERCISE_SUBMISSION = gql`
+  mutation AddExerciseSubmission($exerciseId: Int!, $userAnswer: String!) {
+    addExerciseSubmission(exerciseId: $exerciseId, userAnswer: $userAnswer) {
+      id
+      exerciseId
+      userId
+      userAnswer
+    }
+  }
+`
+
+export default ADD_EXERCISE_SUBMISSION

pages/exercises/[lessonSlug].tsx

@@ -4,7 +4,10 @@ import Layout from '../../components/Layout'
 import withQueryLoader, {
   QueryDataProps
 } from '../../containers/withQueryLoader'
-import { GetExercisesQuery } from '../../graphql'
+import {
+  GetExercisesQuery,
+  useAddExerciseSubmissionMutation
+} from '../../graphql'
 import Error, { StatusCode } from '../../components/Error'
 import LoadingSpinner from '../../components/LoadingSpinner'
 import AlertsDisplay from '../../components/AlertsDisplay'
@@ -22,6 +25,7 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
   const { lessons, alerts, exercises, exerciseSubmissions } = queryData
   const router = useRouter()
   const [exerciseIndex, setExerciseIndex] = useState(-1)
+  const [addExerciseSubmission] = useAddExerciseSubmissionMutation()
   const [userAnswers, setUserAnswers] = useState<Record<number, string>>({})
   useEffect(() => {
     setUserAnswers(
@@ -79,9 +83,12 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
           lessonTitle={currentLesson.title}
           hasPrevious={exerciseIndex > 0}
           hasNext={exerciseIndex < currentExercises.length - 1}
-          submitUserAnswer={(userAnswer: string) =>
+          submitUserAnswer={(userAnswer: string) => {
             setUserAnswers({ ...userAnswers, [exercise.id]: userAnswer })
-          }
+            addExerciseSubmission({
+              variables: { exerciseId: exercise.id, userAnswer }
+            })
+          }}
         />
       ) : (
         <ExerciseList