From 9866f325b94de46b252ba761c6b36a9cdfbed689 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 13 Jan 2023 21:18:20 +0400
Subject: [PATCH 1/4] refactor: Pass flaggedAt down the components tree

---
 components/ExerciseCard/ExerciseCard.test.tsx | 4 ++++
 components/ExerciseCard/ExerciseCard.tsx      | 7 +++++--
 pages/exercises/[lessonSlug].tsx              | 5 ++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/ExerciseCard/ExerciseCard.test.tsx b/components/ExerciseCard/ExerciseCard.test.tsx
index 6eed17375..1ff299373 100644
--- a/components/ExerciseCard/ExerciseCard.test.tsx
+++ b/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>
     )
diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx
index 3062cc2c1..fdb0e0aa0 100644
--- a/components/ExerciseCard/ExerciseCard.tsx
+++ b/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>
   )
 }
diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 82284733e..6024cedd2 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/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 ? (

From 43e3484f98c3a469a45ded5b46c2b87d70fa02a1 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 13 Jan 2023 21:18:33 +0400
Subject: [PATCH 2/4] feat: Handle when an exercise is already flagged

---
 .../ExerciseReportCard.test.js                | 23 ++++++++++++--
 .../ExerciseReportCard/ExerciseReportCard.tsx | 17 +++++++++-
 .../components/ExerciseReportCard.stories.tsx | 31 ++++++++++++++++++-
 3 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/components/ExerciseReportCard/ExerciseReportCard.test.js b/components/ExerciseReportCard/ExerciseReportCard.test.js
index 0d5dc6873..e11855ea2 100644
--- a/components/ExerciseReportCard/ExerciseReportCard.test.js
+++ b/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>
     )
 
diff --git a/components/ExerciseReportCard/ExerciseReportCard.tsx b/components/ExerciseReportCard/ExerciseReportCard.tsx
index 3dca12f8a..b4c467887 100644
--- a/components/ExerciseReportCard/ExerciseReportCard.tsx
+++ b/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 ? (
diff --git a/stories/components/ExerciseReportCard.stories.tsx b/stories/components/ExerciseReportCard.stories.tsx
index 9e01f9537..0f7f92264 100644
--- a/stories/components/ExerciseReportCard.stories.tsx
+++ b/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>
   )

From 561b18d6f9bf2da4c74da12eba83476ed1ba9a07 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 13 Jan 2023 21:18:40 +0400
Subject: [PATCH 3/4] test: Update snapshots

---
 .../__snapshots__/storyshots.test.js.snap      | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index 4a9449aa0..fad6cfd3c 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__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"

From 1993b441803befae946296e722ab5221ba1bbe85 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 13 Jan 2023 22:01:24 +0400
Subject: [PATCH 4/4] Pass prop to story

---
 stories/components/ExerciseCard.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stories/components/ExerciseCard.stories.tsx b/stories/components/ExerciseCard.stories.tsx
index 9249ec123..883226a16 100644
--- a/stories/components/ExerciseCard.stories.tsx
+++ b/stories/components/ExerciseCard.stories.tsx
@@ -33,6 +33,7 @@ export const Basic = () => {
           console.log(`User answer submitted: ${userAnswer}`)
         }}
         exerciseId={1}
+        flaggedAt={!!''}
       />
     </MockedProvider>
   )