student feature: Add the ability to report exercises

__tests__/__snapshots__/storyshots.test.js.snap

@@ -6490,6 +6490,21 @@ a = a + 10
       </div>
     </div>
   </div>
+  <div
+    className=""
+  >
+    <button
+      className="btn newButton container__reportBtn borderless"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "mute",
+        }
+      }
+    >
+      Report a problem
+    </button>
+  </div>
 </section>
 `;
 

components/ExerciseCard/ExerciseCard.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import ExerciseCard, { Message } from './ExerciseCard'
+import { MockedProvider } from '@apollo/client/testing'
 
 const exampleProblem = `let a = 5
 a = a + 10
@@ -16,16 +17,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { getByRole, queryByText } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={false}
-        setAnswerShown={setAnswerShown}
-        message={Message.EMPTY}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          answerShown={false}
+          setAnswerShown={setAnswerShown}
+          message={Message.EMPTY}
+          setMessage={setMessage}
+          submitUserAnswer={submitUserAnswer}
+          exerciseId={1}
+        />
+      </MockedProvider>
     )
 
     // Test that an error message shows if the user is wrong
@@ -48,16 +52,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { getByRole, queryByText, getByLabelText } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={false}
-        setAnswerShown={setAnswerShown}
-        message={Message.ERROR}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          answerShown={false}
+          setAnswerShown={setAnswerShown}
+          message={Message.ERROR}
+          setMessage={setMessage}
+          exerciseId={1}
+          submitUserAnswer={submitUserAnswer}
+        />
+      </MockedProvider>
     )
 
     expect(queryByText(Message.ERROR)).toBeInTheDocument()
@@ -87,16 +94,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { getByRole, queryByText } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={true}
-        setAnswerShown={setAnswerShown}
-        message={Message.SUCCESS}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          exerciseId={1}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          answerShown={true}
+          setAnswerShown={setAnswerShown}
+          message={Message.SUCCESS}
+          setMessage={setMessage}
+          submitUserAnswer={submitUserAnswer}
+        />
+      </MockedProvider>
     )
 
     expect(queryByText(Message.SUCCESS)).toBeInTheDocument()
@@ -119,16 +129,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { queryByText, getByRole } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={false}
-        setAnswerShown={setAnswerShown}
-        message={Message.SUCCESS}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          exerciseId={1}
+          answerShown={false}
+          setAnswerShown={setAnswerShown}
+          message={Message.SUCCESS}
+          setMessage={setMessage}
+          submitUserAnswer={submitUserAnswer}
+        />
+      </MockedProvider>
     )
 
     expect(queryByText(Message.SUCCESS)).toBeInTheDocument()

components/ExerciseCard/ExerciseCard.tsx

@@ -1,5 +1,6 @@
 import Markdown from 'markdown-to-jsx'
 import React, { useState } from 'react'
+import ExerciseReportCard from '../ExerciseReportCard'
 import { NewButton } from '../theme/Button'
 import { Text } from '../theme/Text'
 import styles from './exerciseCard.module.scss'
@@ -13,6 +14,7 @@ export type ExerciseCardProps = {
   message: Message
   setMessage: (message: Message) => void
   submitUserAnswer: (userAnswer: string) => void
+  exerciseId: number
 }
 
 export enum Message {
@@ -29,7 +31,8 @@ const ExerciseCard = ({
   setAnswerShown,
   message,
   setMessage,
-  submitUserAnswer
+  submitUserAnswer,
+  exerciseId
 }: ExerciseCardProps) => {
   const [studentAnswer, setStudentAnswer] = useState('')
 
@@ -102,6 +105,7 @@ const ExerciseCard = ({
           </div>
         </>
       )}
+      <ExerciseReportCard exerciseId={exerciseId} answerShown={answerShown} />
     </section>
   )
 }

pages/exercises/[lessonSlug].tsx

@@ -168,6 +168,7 @@ const Exercise = ({
           })
           submitUserAnswer(exercise.id, userAnswer)
         }}
+        exerciseId={exercise.id}
       />
       <div className="d-flex justify-content-between mt-4">
         {hasPrevious ? (

stories/components/ExerciseCard.stories.tsx

@@ -1,3 +1,4 @@
+import { MockedProvider } from '@apollo/client/testing'
 import React, { useState } from 'react'
 import ExerciseCard, { Message } from '../../components/ExerciseCard'
 
@@ -19,17 +20,20 @@ export const Basic = () => {
   const [message, setMessage] = useState(Message.EMPTY)
 
   return (
-    <ExerciseCard
-      problem={exampleProblem}
-      answer={exampleAnswer}
-      explanation={exampleExplanation}
-      answerShown={answerShown}
-      setAnswerShown={setAnswerShown}
-      message={message}
-      setMessage={setMessage}
-      submitUserAnswer={userAnswer => {
-        console.log(`User answer submitted: ${userAnswer}`)
-      }}
-    />
+    <MockedProvider>
+      <ExerciseCard
+        problem={exampleProblem}
+        answer={exampleAnswer}
+        explanation={exampleExplanation}
+        answerShown={answerShown}
+        setAnswerShown={setAnswerShown}
+        message={message}
+        setMessage={setMessage}
+        submitUserAnswer={userAnswer => {
+          console.log(`User answer submitted: ${userAnswer}`)
+        }}
+        exerciseId={1}
+      />
+    </MockedProvider>
   )
 }