diff --git a/graphql/index.tsx b/graphql/index.tsx index 7065d3348..3c379b3c8 100644 --- a/graphql/index.tsx +++ b/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 + > +) { + return ApolloReactHoc.withMutation< + TProps, + AddExerciseSubmissionMutation, + AddExerciseSubmissionMutationVariables, + AddExerciseSubmissionProps + >(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 +export type AddExerciseSubmissionMutationOptions = Apollo.BaseMutationOptions< + AddExerciseSubmissionMutation, + AddExerciseSubmissionMutationVariables +> export const AddModuleDocument = gql` mutation addModule( $content: String! diff --git a/graphql/queries/addExerciseSubmission.ts b/graphql/queries/addExerciseSubmission.ts new file mode 100644 index 000000000..39e08072e --- /dev/null +++ b/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 diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx index e33110783..50cfaab8e 100644 --- a/pages/exercises/[lessonSlug].tsx +++ b/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> = ({ const { lessons, alerts, exercises, exerciseSubmissions } = queryData const router = useRouter() const [exerciseIndex, setExerciseIndex] = useState(-1) + const [addExerciseSubmission] = useAddExerciseSubmissionMutation() const [userAnswers, setUserAnswers] = useState>({}) useEffect(() => { setUserAnswers( @@ -79,9 +83,12 @@ const Exercises: React.FC> = ({ 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 } + }) + }} /> ) : (