Persist exercise submissions when user submits exercise submission

__tests__/pages/exercises/[lessonSlug].test.js

@@ -6,6 +6,7 @@ import { useRouter } from 'next/router'
 import { MockedProvider } from '@apollo/client/testing'
 import getExercisesData from '../../../__dummy__/getExercisesData'
 import GET_EXERCISES from '../../../graphql/queries/getExercises'
+import ADD_EXERCISE_SUBMISSION from '../../../graphql/queries/addExerciseSubmission'
 
 describe('Exercises page', () => {
   const { query } = useRouter()
@@ -43,6 +44,25 @@ describe('Exercises page', () => {
         result: {
           data: getExercisesData
         }
+      },
+      {
+        request: {
+          query: ADD_EXERCISE_SUBMISSION,
+          variables: {
+            exerciseId: 2,
+            userAnswer: '3'
+          }
+        },
+        result: {
+          data: {
+            addExerciseSubmissions: {
+              id: 1,
+              exerciseId: 2,
+              userId: 3,
+              userAnswer: '3'
+            }
+          }
+        }
       }
     ]
 

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