From f606da6c6277769b6874b39e93800cbfcf3e9887 Mon Sep 17 00:00:00 2001 From: Flacial Date: Thu, 8 Dec 2022 17:33:15 +0400 Subject: [PATCH 1/6] feat(component): Create ExerciseReportCard --- .../ExerciseReportCard.test.js | 66 +++++++++ .../ExerciseReportCard/ExerciseReportCard.tsx | 138 ++++++++++++++++++ .../exerciseReportCard.module.scss | 30 ++++ components/ExerciseReportCard/index.tsx | 1 + .../components/ExerciseReportCard.stories.tsx | 41 ++++++ 5 files changed, 276 insertions(+) create mode 100644 components/ExerciseReportCard/ExerciseReportCard.test.js create mode 100644 components/ExerciseReportCard/ExerciseReportCard.tsx create mode 100644 components/ExerciseReportCard/exerciseReportCard.module.scss create mode 100644 components/ExerciseReportCard/index.tsx create mode 100644 stories/components/ExerciseReportCard.stories.tsx diff --git a/components/ExerciseReportCard/ExerciseReportCard.test.js b/components/ExerciseReportCard/ExerciseReportCard.test.js new file mode 100644 index 000000000..0073308d7 --- /dev/null +++ b/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( + + + + ) + + 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( + + + + ) + + await userEvent.click(screen.getByText(reportBtn)) + await userEvent.click(screen.getByText('Cancel')) + + expect(await screen.findByText(reportBtn)).toBeInTheDocument() + }) +}) diff --git a/components/ExerciseReportCard/ExerciseReportCard.tsx b/components/ExerciseReportCard/ExerciseReportCard.tsx new file mode 100644 index 000000000..e2ada50cc --- /dev/null +++ b/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) => ( +
+
Report a mistake in this exercise
+

Remember to double check your answer. Thanks for your help!

+

+ Alternatively, you can{' '} + + report any technical problems + {' '} + you might be experiencing. +

+ + setDescription(v)} + value={description} + placeHolder="Describe the mistake here..." + /> +
+ {loading || error ? ( + + ) : ( + <> + + + + )} +
+
+) + +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 ( +
+
Reported a mistake in this exercise
+

+ We appreciate your input. We will shortly investigate the problem that + has been reported. +

+
+ ) + } + + return ( +
+ {reportMode ? ( + + ) : ( + + )} +
+ ) +} + +export default ExerciseReportCard diff --git a/components/ExerciseReportCard/exerciseReportCard.module.scss b/components/ExerciseReportCard/exerciseReportCard.module.scss new file mode 100644 index 000000000..c349473c1 --- /dev/null +++ b/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%; +} diff --git a/components/ExerciseReportCard/index.tsx b/components/ExerciseReportCard/index.tsx new file mode 100644 index 000000000..7878cd9b3 --- /dev/null +++ b/components/ExerciseReportCard/index.tsx @@ -0,0 +1 @@ +export { default } from './ExerciseReportCard' diff --git a/stories/components/ExerciseReportCard.stories.tsx b/stories/components/ExerciseReportCard.stories.tsx new file mode 100644 index 000000000..5239c12af --- /dev/null +++ b/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 ( +
+

+ Leave the description empty and try to submit to display success message +

+ + + +
+ ) +} From 5808da5a3067aa94dfd8723b5ce6a1beef07d4fb Mon Sep 17 00:00:00 2001 From: Flacial Date: Thu, 8 Dec 2022 17:45:49 +0400 Subject: [PATCH 2/6] 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 c8eeef3e6..ce5f2681b 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -6660,6 +6660,24 @@ a = a + 10 `; +exports[`Storyshots Components/ExerciseReportCard Basic 1`] = ` +
+

+ Leave the description empty and try to submit to display success message +

+
+ +
+
+`; + exports[`Storyshots Components/FilterButtons Basic 1`] = `
Date: Thu, 8 Dec 2022 17:45:58 +0400 Subject: [PATCH 3/6] test: Pass prop --- components/ExerciseReportCard/ExerciseReportCard.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ExerciseReportCard/ExerciseReportCard.test.js b/components/ExerciseReportCard/ExerciseReportCard.test.js index 0073308d7..b5dff2aae 100644 --- a/components/ExerciseReportCard/ExerciseReportCard.test.js +++ b/components/ExerciseReportCard/ExerciseReportCard.test.js @@ -35,7 +35,7 @@ describe('ExerciseReportCard Component', () => { render( - + ) From 8be1f34102c03410a8126a731078f6cc4e16ec37 Mon Sep 17 00:00:00 2001 From: Flacial Date: Thu, 8 Dec 2022 18:59:11 +0400 Subject: [PATCH 4/6] refactor: Use theme/Button --- __tests__/__snapshots__/storyshots.test.js.snap | 7 ++++++- components/ExerciseReportCard/ExerciseReportCard.tsx | 5 +++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index ce5f2681b..8450fc573 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -6669,8 +6669,13 @@ exports[`Storyshots Components/ExerciseReportCard Basic 1`] = ` className="" > diff --git a/components/ExerciseReportCard/ExerciseReportCard.tsx b/components/ExerciseReportCard/ExerciseReportCard.tsx index e2ada50cc..d8563a33c 100644 --- a/components/ExerciseReportCard/ExerciseReportCard.tsx +++ b/components/ExerciseReportCard/ExerciseReportCard.tsx @@ -124,12 +124,13 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => { setReportMode={setReportMode} /> ) : ( - + )}
) From fac9bc343a39ff353f32995b761464c11089f4b0 Mon Sep 17 00:00:00 2001 From: Flacial Date: Thu, 8 Dec 2022 19:12:55 +0400 Subject: [PATCH 5/6] refactor: Extend theme/Button styles --- components/ExerciseReportCard/ExerciseReportCard.tsx | 4 +++- .../ExerciseReportCard/exerciseReportCard.module.scss | 8 +++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/ExerciseReportCard/ExerciseReportCard.tsx b/components/ExerciseReportCard/ExerciseReportCard.tsx index d8563a33c..5d569e4d2 100644 --- a/components/ExerciseReportCard/ExerciseReportCard.tsx +++ b/components/ExerciseReportCard/ExerciseReportCard.tsx @@ -7,6 +7,7 @@ import { MdInput } from '../MdInput' import NavLink from '../NavLink' import QueryInfo from '../QueryInfo' import { Button } from '../theme/Button' +import btnStyles from '../../scss/button.module.scss' type BodyProps = { description: string @@ -125,9 +126,10 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => { /> ) : ( diff --git a/components/ExerciseReportCard/exerciseReportCard.module.scss b/components/ExerciseReportCard/exerciseReportCard.module.scss index c349473c1..0cc49f817 100644 --- a/components/ExerciseReportCard/exerciseReportCard.module.scss +++ b/components/ExerciseReportCard/exerciseReportCard.module.scss @@ -9,16 +9,14 @@ } .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; + padding: 0; &:hover { color: colors.$bg-green; + background-color: transparent; + box-shadow: unset; } } From 62546221fada013761851f7697199ff99d80a155 Mon Sep 17 00:00:00 2001 From: Flacial Date: Thu, 8 Dec 2022 19:13:52 +0400 Subject: [PATCH 6/6] test: Update snapshots --- __tests__/__snapshots__/storyshots.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 8450fc573..84be56aaa 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -6669,11 +6669,11 @@ exports[`Storyshots Components/ExerciseReportCard Basic 1`] = ` className="" >