From 6d562b0c26648237ec4b00b47b4abfac14fecb46 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 11:57:26 -0700
Subject: [PATCH 1/8] Add DOJO exercise filter checkbox

---
 pages/exercises/[lessonSlug].tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 50cfaab8e..8bca25b9d 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -24,6 +24,7 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
 }) => {
   const { lessons, alerts, exercises, exerciseSubmissions } = queryData
   const router = useRouter()
+  const [hideAnswered, setHideAnswered] = useState(false)
   const [exerciseIndex, setExerciseIndex] = useState(-1)
   const [addExerciseSubmission] = useAddExerciseSubmissionMutation()
   const [userAnswers, setUserAnswers] = useState<Record<number, string>>({})
@@ -70,6 +71,9 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
       explanation: exercise.explanation || '',
       userAnswer: userAnswers[exercise.id] ?? null
     }))
+    .filter(
+      exercise => !hideAnswered || exercise.userAnswer !== exercise.answer
+    )
 
   const exercise = currentExercises[exerciseIndex]
 
@@ -95,6 +99,8 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
           tabs={tabs}
           setExerciseIndex={setExerciseIndex}
           lessonTitle={currentLesson.title}
+          hideAnswered={hideAnswered}
+          setHideAnswered={setHideAnswered}
           exercises={currentExercises}
         />
       )}
@@ -185,6 +191,8 @@ type ExerciseListProps = {
   tabs: { text: string; url: string }[]
   setExerciseIndex: React.Dispatch<React.SetStateAction<number>>
   lessonTitle: string
+  hideAnswered: boolean
+  setHideAnswered: (hideAnswered: boolean) => void
   exercises: {
     moduleName: string
     problem: string
@@ -197,6 +205,8 @@ const ExerciseList = ({
   tabs,
   setExerciseIndex,
   lessonTitle,
+  hideAnswered,
+  setHideAnswered,
   exercises
 }: ExerciseListProps) => {
   return (
@@ -208,7 +218,19 @@ const ExerciseList = ({
         />
       </div>
       <div className="d-flex flex-column flex-md-row justify-content-between align-items-center">
-        <h1 className="my-2 my-md-5 fs-2">{lessonTitle}</h1>
+        <div className="my-2 my-md-5">
+          <h1 className="fs-2">{lessonTitle}</h1>
+          <label className="d-inline-flex align-items-center">
+            <input
+              className="form-check-input m-0 me-3"
+              type="checkbox"
+              style={{ width: 30, height: 30 }}
+              checked={hideAnswered}
+              onChange={() => setHideAnswered(!hideAnswered)}
+            />
+            <span>Show unanswered exercises only</span>
+          </label>
+        </div>
         <div
           className={`mb-3 mb-md-0 d-flex d-md-block ${styles.exerciseList__solveExercisesButtonContainer}`}
         >
@@ -225,7 +247,7 @@ const ExerciseList = ({
           <ExercisePreviewCard
             key={i}
             moduleName={exercise.moduleName}
-            state={exercise.userAnswer === null ? 'NOT ANSWERED' : 'ANSWERED'}
+            state={exercise.userAnswer ? 'ANSWERED' : 'NOT ANSWERED'}
             problem={exercise.problem}
           />
         ))}

From 81607cdd8af895a995c22169a303a75dc74069de Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 13:15:14 -0700
Subject: [PATCH 2/8] Move React state down to Exercise component so it can
 handle filtered exercises

---
 pages/exercises/[lessonSlug].tsx | 111 ++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 40 deletions(-)

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 8bca25b9d..a4e3fd25c 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -24,8 +24,8 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
 }) => {
   const { lessons, alerts, exercises, exerciseSubmissions } = queryData
   const router = useRouter()
+  const [solvingExercise, setSolvingExercise] = useState(false)
   const [hideAnswered, setHideAnswered] = useState(false)
-  const [exerciseIndex, setExerciseIndex] = useState(-1)
   const [addExerciseSubmission] = useAddExerciseSubmissionMutation()
   const [userAnswers, setUserAnswers] = useState<Record<number, string>>({})
   useEffect(() => {
@@ -75,29 +75,31 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
       exercise => !hideAnswered || exercise.userAnswer !== exercise.answer
     )
 
-  const exercise = currentExercises[exerciseIndex]
-
   return (
     <Layout title={currentLesson.title}>
-      {exercise ? (
+      {solvingExercise ? (
         <Exercise
-          key={exerciseIndex}
-          exercise={exercise}
-          setExerciseIndex={setExerciseIndex}
           lessonTitle={currentLesson.title}
-          hasPrevious={exerciseIndex > 0}
-          hasNext={exerciseIndex < currentExercises.length - 1}
-          submitUserAnswer={(userAnswer: string) => {
-            setUserAnswers({ ...userAnswers, [exercise.id]: userAnswer })
+          exercises={currentExercises}
+          userAnswers={userAnswers}
+          onExit={localUserAnswers => {
+            setUserAnswers({ ...userAnswers, ...localUserAnswers })
+            setSolvingExercise(false)
+          }}
+          submitUserAnswer={(exerciseId, userAnswer) => {
             addExerciseSubmission({
-              variables: { exerciseId: exercise.id, userAnswer }
+              variables: { exerciseId, userAnswer }
             })
           }}
         />
       ) : (
         <ExerciseList
           tabs={tabs}
-          setExerciseIndex={setExerciseIndex}
+          onClickSolveExercises={() => {
+            if (currentExercises.length > 0) {
+              setSolvingExercise(true)
+            }
+          }}
           lessonTitle={currentLesson.title}
           hideAnswered={hideAnswered}
           setHideAnswered={setHideAnswered}
@@ -110,42 +112,48 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
 }
 
 type ExerciseData = {
+  id: number
   problem: string
   answer: string
   explanation: string
 }
 
 type ExerciseProps = {
-  exercise: ExerciseData
-  setExerciseIndex: React.Dispatch<React.SetStateAction<number>>
   lessonTitle: string
-  hasPrevious: boolean
-  hasNext: boolean
-  submitUserAnswer: (userAnswer: string) => void
+  exercises: ExerciseData[]
+  userAnswers: Record<number, string>
+  submitUserAnswer: (exerciseId: number, userAnswer: string) => void
+  onExit: (userAnswers: Record<number, string>) => void
 }
 
 const Exercise = ({
-  exercise,
-  setExerciseIndex,
   lessonTitle,
-  hasPrevious,
-  hasNext,
-  submitUserAnswer
+  exercises,
+  userAnswers,
+  submitUserAnswer,
+  onExit
 }: ExerciseProps) => {
   const [answerShown, setAnswerShown] = useState(false)
   const [message, setMessage] = useState(Message.EMPTY)
+  const [exerciseIndex, setExerciseIndex] = useState(0)
+  const [localUserAnswers, setLocalUserAnswers] = useState(userAnswers)
+  const exercise = exercises[exerciseIndex]
+
+  const hasPrevious = exerciseIndex > 0
+  const hasNext = exerciseIndex < exercises.length - 1
 
   return (
     <div className={`mx-auto ${styles.exercise__container}`}>
       <button
         className="btn ps-0 d-flex align-items-center"
-        onClick={() => setExerciseIndex(-1)}
+        onClick={() => onExit(localUserAnswers)}
       >
         <ArrowLeftIcon size="medium" aria-label="Exit" />
       </button>
 
       <h1 className="mb-4 fs-2">{lessonTitle}</h1>
       <ExerciseCard
+        key={exercise.id}
         problem={exercise.problem}
         answer={exercise.answer}
         explanation={exercise.explanation}
@@ -153,12 +161,22 @@ const Exercise = ({
         setAnswerShown={setAnswerShown}
         message={message}
         setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
+        submitUserAnswer={userAnswer => {
+          setLocalUserAnswers({
+            ...localUserAnswers,
+            [exercise.id]: userAnswer
+          })
+          submitUserAnswer(exercise.id, userAnswer)
+        }}
       />
       <div className="d-flex justify-content-between mt-4">
         {hasPrevious ? (
           <button
-            onClick={() => setExerciseIndex(i => i - 1)}
+            onClick={() => {
+              setExerciseIndex(i => i - 1)
+              setAnswerShown(false)
+              setMessage(Message.EMPTY)
+            }}
             className="btn btn-outline-primary fw-bold px-4 py-2"
             style={{ fontFamily: 'PT Mono', fontSize: 14 }}
           >
@@ -168,12 +186,26 @@ const Exercise = ({
           <div />
         )}
         {message === Message.SUCCESS ? (
-          <NewButton onClick={() => setExerciseIndex(i => i + 1)}>
+          <NewButton
+            onClick={() => {
+              if (exerciseIndex === exercises.length - 1) {
+                onExit(localUserAnswers)
+              } else {
+                setExerciseIndex(i => i + 1)
+              }
+              setAnswerShown(false)
+              setMessage(Message.EMPTY)
+            }}
+          >
             NEXT QUESTION
           </NewButton>
         ) : hasNext ? (
           <button
-            onClick={() => setExerciseIndex(i => i + 1)}
+            onClick={() => {
+              setExerciseIndex(i => i + 1)
+              setAnswerShown(false)
+              setMessage(Message.EMPTY)
+            }}
             className="btn btn-outline-primary fw-bold px-4 py-2"
             style={{ fontFamily: 'PT Mono', fontSize: 14 }}
           >
@@ -187,23 +219,25 @@ const Exercise = ({
   )
 }
 
+type ExerciseItem = {
+  moduleName: string
+  problem: string
+  answer: string
+  userAnswer: string | null
+}
+
 type ExerciseListProps = {
   tabs: { text: string; url: string }[]
-  setExerciseIndex: React.Dispatch<React.SetStateAction<number>>
+  onClickSolveExercises: () => void
   lessonTitle: string
   hideAnswered: boolean
   setHideAnswered: (hideAnswered: boolean) => void
-  exercises: {
-    moduleName: string
-    problem: string
-    answer: string
-    userAnswer: string | null
-  }[]
+  exercises: ExerciseItem[]
 }
 
 const ExerciseList = ({
   tabs,
-  setExerciseIndex,
+  onClickSolveExercises,
   lessonTitle,
   hideAnswered,
   setHideAnswered,
@@ -234,10 +268,7 @@ const ExerciseList = ({
         <div
           className={`mb-3 mb-md-0 d-flex d-md-block ${styles.exerciseList__solveExercisesButtonContainer}`}
         >
-          <NewButton
-            className="flex-grow-1"
-            onClick={() => setExerciseIndex(0)}
-          >
+          <NewButton className="flex-grow-1" onClick={onClickSolveExercises}>
             SOLVE EXERCISES
           </NewButton>
         </div>

From a64f94e15d61b864021b9a0fdd998dd50840898e Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 13:31:25 -0700
Subject: [PATCH 3/8] Add INCORRECT state for ExercisePreview

---
 components/ExercisePreviewCard/ExercisePreviewCard.tsx | 2 +-
 pages/exercises/[lessonSlug].tsx                       | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/ExercisePreviewCard/ExercisePreviewCard.tsx b/components/ExercisePreviewCard/ExercisePreviewCard.tsx
index 186acda87..31ec20e9b 100644
--- a/components/ExercisePreviewCard/ExercisePreviewCard.tsx
+++ b/components/ExercisePreviewCard/ExercisePreviewCard.tsx
@@ -3,7 +3,7 @@ import styles from './exercisePreviewCard.module.scss'
 
 export type ExercisePreviewCardProps = {
   moduleName: string
-  state: 'NOT ANSWERED' | 'ANSWERED'
+  state: 'NOT ANSWERED' | 'INCORRECT' | 'ANSWERED'
   problem: string
   className?: string
 }
diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index a4e3fd25c..73d3c09e7 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -262,7 +262,7 @@ const ExerciseList = ({
               checked={hideAnswered}
               onChange={() => setHideAnswered(!hideAnswered)}
             />
-            <span>Show unanswered exercises only</span>
+            <span>Show incomplete exercises only</span>
           </label>
         </div>
         <div
@@ -278,7 +278,11 @@ const ExerciseList = ({
           <ExercisePreviewCard
             key={i}
             moduleName={exercise.moduleName}
-            state={exercise.userAnswer ? 'ANSWERED' : 'NOT ANSWERED'}
+            state={(() => {
+              if (exercise.userAnswer === exercise.answer) return 'ANSWERED'
+              if (exercise.userAnswer) return 'INCORRECT'
+              return 'NOT ANSWERED'
+            })()}
             problem={exercise.problem}
           />
         ))}

From 5833acc517874e1556feb5f7db430cdea9f3f091 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 14:20:53 -0700
Subject: [PATCH 4/8] Add tests for DOJO exercises show-incomplete-only
 checkbox

---
 .../pages/exercises/[lessonSlug].test.js      | 109 ++++++++++++++++++
 pages/exercises/[lessonSlug].tsx              |   6 +-
 2 files changed, 110 insertions(+), 5 deletions(-)

diff --git a/__tests__/pages/exercises/[lessonSlug].test.js b/__tests__/pages/exercises/[lessonSlug].test.js
index 738271e14..1ae6f3a78 100644
--- a/__tests__/pages/exercises/[lessonSlug].test.js
+++ b/__tests__/pages/exercises/[lessonSlug].test.js
@@ -111,6 +111,115 @@ describe('Exercises page', () => {
     expect(queryByRole('button', { name: 'SKIP' })).not.toBeInTheDocument()
   })
 
+  test('Renders different exercises depending on whether the show-only-incompleted checkbox is checked', async () => {
+    const mocks = [
+      {
+        request: { query: GET_EXERCISES },
+        result: {
+          data: getExercisesData
+        }
+      },
+      {
+        request: {
+          query: ADD_EXERCISE_SUBMISSION,
+          variables: {
+            exerciseId: 2,
+            userAnswer: 'blah blah'
+          }
+        },
+        result: {
+          data: {
+            addExerciseSubmissions: {
+              id: 1,
+              exerciseId: 2,
+              userId: 4,
+              userAnswer: 'blah blah'
+            }
+          }
+        }
+      },
+      {
+        request: {
+          query: ADD_EXERCISE_SUBMISSION,
+          variables: {
+            exerciseId: 3,
+            userAnswer: '-1'
+          }
+        },
+        result: {
+          data: {
+            addExerciseSubmissions: {
+              id: 1,
+              exerciseId: 3,
+              userId: 4,
+              userAnswer: '-1'
+            }
+          }
+        }
+      }
+    ]
+
+    const { findByLabelText, findAllByText, findByRole } = render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Exercises />
+      </MockedProvider>
+    )
+
+    let checkbox = await findByLabelText('Show incomplete exercises only')
+
+    let exercisePreviews = await findAllByText('Problem')
+    expect(exercisePreviews.length).toBe(3)
+    let notAnsweredExercisePreviews = await findAllByText('NOT ANSWERED')
+    expect(notAnsweredExercisePreviews.length).toBe(2)
+
+    fireEvent.click(checkbox)
+
+    exercisePreviews = await findAllByText('Problem')
+    expect(exercisePreviews.length).toBe(2)
+    notAnsweredExercisePreviews = await findAllByText('NOT ANSWERED')
+    expect(notAnsweredExercisePreviews.length).toBe(2)
+
+    const solveExercisesButton = await findByRole('button', {
+      name: 'SOLVE EXERCISES'
+    })
+    fireEvent.click(solveExercisesButton)
+
+    let inputBox = await findByLabelText('User answer')
+    fireEvent.change(inputBox, {
+      target: { value: 'blah blah' }
+    })
+    let submitButton = await findByRole('button', { name: 'SUBMIT' })
+    fireEvent.click(submitButton)
+
+    const skipButton = await findByRole('button', { name: 'SKIP' })
+    fireEvent.click(skipButton)
+
+    inputBox = await findByLabelText('User answer')
+    fireEvent.change(inputBox, {
+      target: { value: '-1' }
+    })
+    submitButton = await findByRole('button', { name: 'SUBMIT' })
+    fireEvent.click(submitButton)
+
+    const nextQuestionButton = await findByRole('button', {
+      name: 'NEXT QUESTION'
+    })
+    fireEvent.click(nextQuestionButton)
+
+    exercisePreviews = await findAllByText('Problem')
+    expect(exercisePreviews.length).toBe(1)
+    let incorrectExercisePreviews = await findAllByText('INCORRECT')
+    expect(incorrectExercisePreviews.length).toBe(1)
+
+    checkbox = await findByLabelText('Show incomplete exercises only')
+    fireEvent.click(checkbox)
+
+    exercisePreviews = await findAllByText('Problem')
+    expect(exercisePreviews.length).toBe(3)
+    incorrectExercisePreviews = await findAllByText('INCORRECT')
+    expect(incorrectExercisePreviews.length).toBe(1)
+  })
+
   test('Should not render lessons nav card tab if lesson docUrl is null', async () => {
     const mocks = [
       {
diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 73d3c09e7..23a0036bf 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -95,11 +95,7 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
       ) : (
         <ExerciseList
           tabs={tabs}
-          onClickSolveExercises={() => {
-            if (currentExercises.length > 0) {
-              setSolvingExercise(true)
-            }
-          }}
+          onClickSolveExercises={() => setSolvingExercise(true)}
           lessonTitle={currentLesson.title}
           hideAnswered={hideAnswered}
           setHideAnswered={setHideAnswered}

From 1488552389ab3604b3eeada076428f71d278e63f Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 14:38:32 -0700
Subject: [PATCH 5/8] Only show SOLVE EXERCISES button if there is at least 1
 exercise

---
 pages/exercises/[lessonSlug].tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 23a0036bf..2bf9c1b45 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -261,13 +261,15 @@ const ExerciseList = ({
             <span>Show incomplete exercises only</span>
           </label>
         </div>
-        <div
-          className={`mb-3 mb-md-0 d-flex d-md-block ${styles.exerciseList__solveExercisesButtonContainer}`}
-        >
-          <NewButton className="flex-grow-1" onClick={onClickSolveExercises}>
-            SOLVE EXERCISES
-          </NewButton>
-        </div>
+        {exercises.length > 0 && (
+          <div
+            className={`mb-3 mb-md-0 d-flex d-md-block ${styles.exerciseList__solveExercisesButtonContainer}`}
+          >
+            <NewButton className="flex-grow-1" onClick={onClickSolveExercises}>
+              SOLVE EXERCISES
+            </NewButton>
+          </div>
+        )}
       </div>
       <div className={styles.exerciseList__container}>
         {exercises.map((exercise, i) => (

From 36855fbc4914e7f26a6c9bc60fa056c67b8e4b9b Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 15:04:26 -0700
Subject: [PATCH 6/8] Use expect(a).toHaveLength(b) instead of
 expect(a.length).toBe(b) for better error messages

---
 __tests__/pages/exercises/[lessonSlug].test.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/__tests__/pages/exercises/[lessonSlug].test.js b/__tests__/pages/exercises/[lessonSlug].test.js
index 1ae6f3a78..203c24bcd 100644
--- a/__tests__/pages/exercises/[lessonSlug].test.js
+++ b/__tests__/pages/exercises/[lessonSlug].test.js
@@ -168,16 +168,16 @@ describe('Exercises page', () => {
     let checkbox = await findByLabelText('Show incomplete exercises only')
 
     let exercisePreviews = await findAllByText('Problem')
-    expect(exercisePreviews.length).toBe(3)
+    expect(exercisePreviews).toHaveLength(3)
     let notAnsweredExercisePreviews = await findAllByText('NOT ANSWERED')
-    expect(notAnsweredExercisePreviews.length).toBe(2)
+    expect(notAnsweredExercisePreviews).toHaveLength(2)
 
     fireEvent.click(checkbox)
 
     exercisePreviews = await findAllByText('Problem')
-    expect(exercisePreviews.length).toBe(2)
+    expect(exercisePreviews).toHaveLength(2)
     notAnsweredExercisePreviews = await findAllByText('NOT ANSWERED')
-    expect(notAnsweredExercisePreviews.length).toBe(2)
+    expect(notAnsweredExercisePreviews).toHaveLength(2)
 
     const solveExercisesButton = await findByRole('button', {
       name: 'SOLVE EXERCISES'
@@ -207,17 +207,17 @@ describe('Exercises page', () => {
     fireEvent.click(nextQuestionButton)
 
     exercisePreviews = await findAllByText('Problem')
-    expect(exercisePreviews.length).toBe(1)
+    expect(exercisePreviews).toHaveLength(1)
     let incorrectExercisePreviews = await findAllByText('INCORRECT')
-    expect(incorrectExercisePreviews.length).toBe(1)
+    expect(incorrectExercisePreviews).toHaveLength(1)
 
     checkbox = await findByLabelText('Show incomplete exercises only')
     fireEvent.click(checkbox)
 
     exercisePreviews = await findAllByText('Problem')
-    expect(exercisePreviews.length).toBe(3)
+    expect(exercisePreviews).toHaveLength(3)
     incorrectExercisePreviews = await findAllByText('INCORRECT')
-    expect(incorrectExercisePreviews.length).toBe(1)
+    expect(incorrectExercisePreviews).toHaveLength(1)
   })
 
   test('Should not render lessons nav card tab if lesson docUrl is null', async () => {

From cefee5ec751d8661d051da7c245a1fdfa2076ab6 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 15:09:33 -0700
Subject: [PATCH 7/8] Replace await waitFor(() => getBy*) with await findBy*

---
 .../pages/exercises/[lessonSlug].test.js      | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/__tests__/pages/exercises/[lessonSlug].test.js b/__tests__/pages/exercises/[lessonSlug].test.js
index 203c24bcd..e7a17d734 100644
--- a/__tests__/pages/exercises/[lessonSlug].test.js
+++ b/__tests__/pages/exercises/[lessonSlug].test.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, waitFor, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import Exercises from '../../../pages/exercises/[lessonSlug]'
 import { useRouter } from 'next/router'
@@ -28,9 +28,7 @@ describe('Exercises page', () => {
       </MockedProvider>
     )
 
-    await waitFor(() =>
-      screen.getByRole('heading', { name: /Foundations of JavaScript/i })
-    )
+    await screen.findByRole('heading', { name: /Foundations of JavaScript/i })
 
     screen.getByRole('link', { name: 'CHALLENGES' })
     screen.getByRole('link', { name: 'EXERCISES' })
@@ -66,15 +64,13 @@ describe('Exercises page', () => {
       }
     ]
 
-    const { getByRole, queryByRole, getByLabelText } = render(
+    const { getByRole, findByRole, queryByRole, getByLabelText } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <Exercises />
       </MockedProvider>
     )
 
-    await waitFor(() =>
-      getByRole('heading', { name: /Foundations of JavaScript/i })
-    )
+    await findByRole('heading', { name: /Foundations of JavaScript/i })
 
     const solveExercisesButton = getByRole('button', {
       name: 'SOLVE EXERCISES'
@@ -242,9 +238,7 @@ describe('Exercises page', () => {
       </MockedProvider>
     )
 
-    await waitFor(() =>
-      screen.getByRole('heading', { name: /Foundations of JavaScript/i })
-    )
+    await screen.findByRole('heading', { name: /Foundations of JavaScript/i })
 
     screen.getByRole('link', { name: 'CHALLENGES' })
     screen.getByRole('link', { name: 'EXERCISES' })
@@ -270,7 +264,7 @@ describe('Exercises page', () => {
       </MockedProvider>
     )
 
-    await waitFor(() => screen.getByRole('heading', { name: /500 Error/i }))
+    await screen.findByRole('heading', { name: /500 Error/i })
   })
 
   test('Should render a 404 error page if the lesson is not found', async () => {
@@ -292,7 +286,7 @@ describe('Exercises page', () => {
       </MockedProvider>
     )
 
-    await waitFor(() => screen.getByRole('heading', { name: /404 Error/i }))
+    await screen.findByRole('heading', { name: /404 Error/i })
   })
 
   test('Should render a loading spinner if useRouter is not ready', async () => {
@@ -314,6 +308,6 @@ describe('Exercises page', () => {
       </MockedProvider>
     )
 
-    await waitFor(() => screen.getByText('Loading...'))
+    await screen.findByText('Loading...')
   })
 })

From 4159728f8a62c1b691857be02d96046d8824c570 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 1 Oct 2022 16:32:22 -0700
Subject: [PATCH 8/8] Add state property to exercise data

---
 pages/exercises/[lessonSlug].tsx | 35 +++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 2bf9c1b45..5d2585741 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -12,7 +12,9 @@ import Error, { StatusCode } from '../../components/Error'
 import LoadingSpinner from '../../components/LoadingSpinner'
 import AlertsDisplay from '../../components/AlertsDisplay'
 import NavCard from '../../components/NavCard'
-import ExercisePreviewCard from '../../components/ExercisePreviewCard'
+import ExercisePreviewCard, {
+  ExercisePreviewCardProps
+} from '../../components/ExercisePreviewCard'
 import { NewButton } from '../../components/theme/Button'
 import ExerciseCard, { Message } from '../../components/ExerciseCard'
 import { ArrowLeftIcon } from '@primer/octicons-react'
@@ -63,14 +65,22 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
 
   const currentExercises = exercises
     .filter(exercise => exercise?.module.lesson.slug === slug)
-    .map(exercise => ({
-      id: exercise.id,
-      moduleName: exercise.module.name,
-      problem: exercise.description,
-      answer: exercise.answer,
-      explanation: exercise.explanation || '',
-      userAnswer: userAnswers[exercise.id] ?? null
-    }))
+    .map(exercise => {
+      const userAnswer = userAnswers[exercise.id] ?? null
+      return {
+        id: exercise.id,
+        moduleName: exercise.module.name,
+        problem: exercise.description,
+        answer: exercise.answer,
+        explanation: exercise.explanation || '',
+        userAnswer,
+        state: ((): ExercisePreviewCardProps['state'] => {
+          if (userAnswer === exercise.answer) return 'ANSWERED'
+          if (userAnswer) return 'INCORRECT'
+          return 'NOT ANSWERED'
+        })()
+      }
+    })
     .filter(
       exercise => !hideAnswered || exercise.userAnswer !== exercise.answer
     )
@@ -220,6 +230,7 @@ type ExerciseItem = {
   problem: string
   answer: string
   userAnswer: string | null
+  state: ExercisePreviewCardProps['state']
 }
 
 type ExerciseListProps = {
@@ -276,11 +287,7 @@ const ExerciseList = ({
           <ExercisePreviewCard
             key={i}
             moduleName={exercise.moduleName}
-            state={(() => {
-              if (exercise.userAnswer === exercise.answer) return 'ANSWERED'
-              if (exercise.userAnswer) return 'INCORRECT'
-              return 'NOT ANSWERED'
-            })()}
+            state={exercise.state}
             problem={exercise.problem}
           />
         ))}