fix: Handle flagging an already flagged exercise

__tests__/__snapshots__/storyshots.test.js.snap

@@ -6622,6 +6622,24 @@ exports[`Storyshots Components/ExerciseReportCard Basic 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/ExerciseReportCard Flagged Exercise 1`] = `
+<div>
+  <div>
+    <button
+      className="btn newButton container__reportBtn borderless"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "mute",
+        }
+      }
+    >
+      Report a problem
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/FilterButtons Basic 1`] = `
 <div
   className="d-flex flex-row"

components/ExerciseCard/ExerciseCard.test.tsx

@@ -28,6 +28,7 @@ describe('ExerciseCard component', () => {
           setMessage={setMessage}
           submitUserAnswer={submitUserAnswer}
           exerciseId={1}
+          flaggedAt={!!''}
         />
       </MockedProvider>
     )
@@ -63,6 +64,7 @@ describe('ExerciseCard component', () => {
           setMessage={setMessage}
           exerciseId={1}
           submitUserAnswer={submitUserAnswer}
+          flaggedAt={!!''}
         />
       </MockedProvider>
     )
@@ -105,6 +107,7 @@ describe('ExerciseCard component', () => {
           message={Message.SUCCESS}
           setMessage={setMessage}
           submitUserAnswer={submitUserAnswer}
+          flaggedAt={!!''}
         />
       </MockedProvider>
     )
@@ -140,6 +143,7 @@ describe('ExerciseCard component', () => {
           message={Message.SUCCESS}
           setMessage={setMessage}
           submitUserAnswer={submitUserAnswer}
+          flaggedAt={!!''}
         />
       </MockedProvider>
     )

components/ExerciseCard/ExerciseCard.tsx

@@ -15,6 +15,7 @@ export type ExerciseCardProps = {
   setMessage: (message: Message) => void
   submitUserAnswer: (userAnswer: string) => void
   exerciseId: number
+  flaggedAt: boolean
 }
 
 export enum Message {
@@ -32,8 +33,10 @@ const ExerciseCard = ({
   message,
   setMessage,
   submitUserAnswer,
-  exerciseId
+  exerciseId,
+  flaggedAt
 }: ExerciseCardProps) => {
+  console.log(exerciseId, flaggedAt)
   const [studentAnswer, setStudentAnswer] = useState('')
 
   return (
@@ -105,7 +108,7 @@ const ExerciseCard = ({
           </div>
         </>
       )}
-      <ExerciseReportCard exerciseId={exerciseId} />
+      <ExerciseReportCard exerciseId={exerciseId} flaggedAt={flaggedAt} />
     </section>
   )
 }

components/ExerciseReportCard/ExerciseReportCard.test.js

@@ -35,7 +35,7 @@ describe('ExerciseReportCard Component', () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <ExerciseReportCard exerciseId={1} />
+        <ExerciseReportCard exerciseId={1} flaggedAt={!!''} />
       </MockedProvider>
     )
 
@@ -49,12 +49,31 @@ describe('ExerciseReportCard Component', () => {
     ).toBeInTheDocument()
   })
 
+  it('Should display default message for an already flagged exercise', async () => {
+    expect.assertions(1)
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <ExerciseReportCard
+          exerciseId={1}
+          flaggedAt={!!'11/04/2022 19:00:15'}
+        />
+      </MockedProvider>
+    )
+
+    await userEvent.click(screen.getByText(reportBtn))
+
+    expect(
+      await screen.findByText('The exercise has already been reported')
+    ).toBeInTheDocument()
+  })
+
   it('Should cancel the report', async () => {
     expect.assertions(1)
 
     render(
       <MockedProvider mocks={mocks}>
-        <ExerciseReportCard exerciseId={1} />
+        <ExerciseReportCard exerciseId={1} flaggedAt={!!''} />
       </MockedProvider>
     )
 

components/ExerciseReportCard/ExerciseReportCard.tsx

@@ -85,9 +85,10 @@ const Body = ({
 
 type Props = {
   exerciseId: number
+  flaggedAt: boolean
 }
 
-const ExerciseReportCard = ({ exerciseId }: Props) => {
+const ExerciseReportCard = ({ exerciseId, flaggedAt }: Props) => {
   const [reportMode, setReportMode] = useState(false)
   const [description, setDescription] = useState('')
   const [flagExercise, { data, loading, error }] = useFlagExerciseMutation({
@@ -109,6 +110,20 @@ const ExerciseReportCard = ({ exerciseId }: Props) => {
     )
   }
 
+  console.log(reportMode, flaggedAt)
+
+  if (reportMode && flaggedAt) {
+    return (
+      <div className={`${styles.container} mt-3`}>
+        <h6>The exercise has already been reported</h6>
+        <p className="mb-0">
+          We appreciate your concern. The exercise has already been reported and
+          we are investigating the problem that has been reported.
+        </p>
+      </div>
+    )
+  }
+
   return (
     <div>
       {reportMode ? (

pages/exercises/[lessonSlug].tsx

@@ -76,7 +76,8 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
           if (userAnswer) return 'INCORRECT'
           return 'NOT ANSWERED'
         })(),
-        removedAt: exercise.removedAt
+        removedAt: exercise.removedAt,
+        flaggedAt: exercise.flaggedAt || ''
       }
     })
     .filter(
@@ -119,6 +120,7 @@ type ExerciseData = {
   problem: string
   answer: string
   explanation: string
+  flaggedAt: string
 }
 
 type ExerciseProps = {
@@ -172,6 +174,7 @@ const Exercise = ({
           submitUserAnswer(exercise.id, userAnswer)
         }}
         exerciseId={exercise.id}
+        flaggedAt={!!exercise.flaggedAt}
       />
       <div className="d-flex justify-content-between mt-4">
         {hasPrevious ? (

stories/components/ExerciseCard.stories.tsx

@@ -33,6 +33,7 @@ export const Basic = () => {
           console.log(`User answer submitted: ${userAnswer}`)
         }}
         exerciseId={1}
+        flaggedAt={!!''}
       />
     </MockedProvider>
   )

stories/components/ExerciseReportCard.stories.tsx

@@ -34,7 +34,36 @@ export const Basic = () => {
           }
         ]}
       >
-        <ExerciseReportCard exerciseId={1} />
+        <ExerciseReportCard exerciseId={1} flaggedAt={!!''} />
+      </MockedProvider>
+    </div>
+  )
+}
+
+export const FlaggedExercise = () => {
+  return (
+    <div>
+      <MockedProvider
+        mocks={[
+          {
+            request: {
+              query: FLAG_EXERCISE,
+              variables: {
+                id: 1,
+                flagReason: ''
+              }
+            },
+            result: {
+              data: {
+                flagExercise: {
+                  id: 1
+                }
+              }
+            }
+          }
+        ]}
+      >
+        <ExerciseReportCard exerciseId={1} flaggedAt={!!'today'} />
       </MockedProvider>
     </div>
   )