feat(component): Create ExerciesReportCard

__tests__/__snapshots__/storyshots.test.js.snap

@@ -6660,6 +6660,24 @@ a = a + 10
 </section>
 `;
 
+exports[`Storyshots Components/ExerciseReportCard Basic 1`] = `
+<div>
+  <p>
+    Leave the description empty and try to submit to display success message
+  </p>
+  <div
+    className=""
+  >
+    <button
+      className="container__reportBtn"
+      onClick={[Function]}
+    >
+      Report a problem
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/FilterButtons Basic 1`] = `
 <div
   className="d-flex flex-row"

components/ExerciseReportCard/ExerciseReportCard.test.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import ExerciseReportCard from './index'
+import { render, screen } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
+import FLAG_EXERCISE from '../../graphql/queries/flagExercise'
+import userEvent from '@testing-library/user-event'
+
+// Imported to be able to use expect(...).toBeInTheDocument()
+import '@testing-library/jest-dom'
+
+const mocks = [
+  {
+    request: {
+      query: FLAG_EXERCISE,
+      variables: {
+        id: 1,
+        flagReason: 'Bad exercise'
+      }
+    },
+    result: {
+      data: {
+        flagExercise: {
+          id: 1
+        }
+      }
+    }
+  }
+]
+
+const reportBtn = 'Report a problem'
+
+describe('ExerciseReportCard Component', () => {
+  it('Should submit an issue successfully', async () => {
+    expect.assertions(1)
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <ExerciseReportCard exerciseId={1} answerShown={true} />
+      </MockedProvider>
+    )
+
+    await userEvent.click(screen.getByText(reportBtn))
+
+    await userEvent.type(screen.getByTestId('textbox'), 'Bad exercise')
+    await userEvent.click(screen.getByText('Submit issue'))
+
+    expect(
+      await screen.findByText('Reported a mistake in this exercise')
+    ).toBeInTheDocument()
+  })
+
+  it('Should cancel the report', async () => {
+    expect.assertions(1)
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <ExerciseReportCard exerciseId={1} answerShown={false} />
+      </MockedProvider>
+    )
+
+    await userEvent.click(screen.getByText(reportBtn))
+    await userEvent.click(screen.getByText('Cancel'))
+
+    expect(await screen.findByText(reportBtn)).toBeInTheDocument()
+  })
+})

components/ExerciseReportCard/ExerciseReportCard.tsx

@@ -0,0 +1,138 @@
+import { ApolloError } from '@apollo/client'
+import React, { useState } from 'react'
+import { DISCORD_PATH } from '../../constants'
+import { FlagExerciseMutation, useFlagExerciseMutation } from '../../graphql'
+import styles from './exerciseReportCard.module.scss'
+import { MdInput } from '../MdInput'
+import NavLink from '../NavLink'
+import QueryInfo from '../QueryInfo'
+import { Button } from '../theme/Button'
+
+type BodyProps = {
+  description: string
+  loading: boolean
+  data?: null | FlagExerciseMutation
+  error?: ApolloError
+  setDescription: (str: string) => void
+  flagExercise: () => void
+  setReportMode: (mode: boolean) => void
+}
+
+const Body = ({
+  description,
+  loading,
+  error,
+  data,
+  setDescription,
+  flagExercise,
+  setReportMode
+}: BodyProps) => (
+  <div className={styles.container}>
+    <h5>Report a mistake in this exercise</h5>
+    <p>Remember to double check your answer. Thanks for your help!</p>
+    <p>
+      Alternatively, you can{' '}
+      <NavLink hoverUnderline path={DISCORD_PATH}>
+        report any technical problems
+      </NavLink>{' '}
+      you might be experiencing.
+    </p>
+    <label htmlFor="description" className="mb-2">
+      Description of issue:
+    </label>
+    <MdInput
+      onChange={(v: string) => setDescription(v)}
+      value={description}
+      placeHolder="Describe the mistake here..."
+    />
+    <div className={styles.container__btns__container}>
+      {loading || error ? (
+        <QueryInfo
+          data={data}
+          loading={loading}
+          error={error?.message || ''}
+          texts={{
+            loading: 'Submitting the issue...',
+            data: 'Thanks for reporting!',
+            error: 'Oops, something went wrong.'
+          }}
+        />
+      ) : (
+        <>
+          <Button
+            border
+            outline
+            btnType="info"
+            color="info"
+            onClick={() => flagExercise()}
+          >
+            Submit issue
+          </Button>
+          <Button
+            outline
+            btnType="info"
+            color="info"
+            onClick={() => setReportMode(false)}
+          >
+            Cancel
+          </Button>
+        </>
+      )}
+    </div>
+  </div>
+)
+
+type Props = {
+  exerciseId: number
+  answerShown: boolean
+}
+
+const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
+  const [reportMode, setReportMode] = useState(false)
+  const [description, setDescription] = useState('')
+  const [flagExercise, { data, loading, error }] = useFlagExerciseMutation({
+    variables: {
+      id: exerciseId,
+      flagReason: description
+    }
+  })
+
+  const marginOnExpand = answerShown ? 'mt-5' : ''
+
+  if (data && !loading) {
+    return (
+      <div className={`${styles.container} ${marginOnExpand}`}>
+        <h6>Reported a mistake in this exercise</h6>
+        <p className="mb-0">
+          We appreciate your input. We will shortly investigate the problem that
+          has been reported.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={marginOnExpand}>
+      {reportMode ? (
+        <Body
+          data={data}
+          loading={loading}
+          error={error}
+          description={description}
+          setDescription={setDescription}
+          flagExercise={flagExercise}
+          setReportMode={setReportMode}
+        />
+      ) : (
+        <button
+          className={styles.container__reportBtn}
+          onClick={() => setReportMode(true)}
+        >
+          Report a problem
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default ExerciseReportCard

components/ExerciseReportCard/exerciseReportCard.module.scss

@@ -0,0 +1,30 @@
+@use '../../scss/colors.module.scss';
+
+.container {
+  max-width: 400px;
+  background-color: hsl(0, 0%, 96%);
+  padding: 20px;
+  border: 1px solid hsl(0, 0%, 84%);
+  border-radius: 10px;
+}
+
+.container__reportBtn {
+  font-family: 'PT Mono';
+  font-size: 12px;
+  color: hsl(248, 13%, 56%);
+  text-transform: uppercase;
+  text-decoration: underline;
+  background-color: transparent;
+  border: 0;
+
+  &:hover {
+    color: colors.$bg-green;
+  }
+}
+
+.container__btns__container {
+  display: grid;
+  row-gap: 8px;
+  margin-top: 18px;
+  width: 100%;
+}

components/ExerciseReportCard/index.tsx

@@ -0,0 +1 @@
+export { default } from './ExerciseReportCard'

stories/components/ExerciseReportCard.stories.tsx

@@ -0,0 +1,41 @@
+import { MockedProvider } from '@apollo/client/testing'
+import React from 'react'
+import ExerciseReportCard from '../../components/ExerciseReportCard'
+import FLAG_EXERCISE from '../../graphql/queries/flagExercise'
+
+export default {
+  component: ExerciseReportCard,
+  title: 'Components/ExerciseReportCard'
+}
+
+export const Basic = () => {
+  return (
+    <div>
+      <p>
+        Leave the description empty and try to submit to display success message
+      </p>
+      <MockedProvider
+        mocks={[
+          {
+            request: {
+              query: FLAG_EXERCISE,
+              variables: {
+                id: 1,
+                flagReason: ''
+              }
+            },
+            result: {
+              data: {
+                flagExercise: {
+                  id: 1
+                }
+              }
+            }
+          }
+        ]}
+      >
+        <ExerciseReportCard exerciseId={1} answerShown={false} />
+      </MockedProvider>
+    </div>
+  )
+}