From d233d52603703257b07f81971b2581d17f5be986 Mon Sep 17 00:00:00 2001
From: Aaron McAdam <aaron@aaronmcadam.com>
Date: Mon, 5 Aug 2024 15:04:12 +0100
Subject: [PATCH] add state for quiz result

---
 src/components/quiz-result.tsx |  6 +++---
 src/components/quiz.tsx        | 26 +++++++++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/quiz-result.tsx b/src/components/quiz-result.tsx
index d012aea..eb063c0 100644
--- a/src/components/quiz-result.tsx
+++ b/src/components/quiz-result.tsx
@@ -2,17 +2,17 @@ import { CheckCircle } from "lucide-react";
 import { CircleX } from "lucide-react";
 
 export type QuizResultProps = {
-  status: "accepted" | "rejected";
+  result: "accepted" | "rejected";
 };
 
-export function QuizResult({ status }: QuizResultProps) {
+export function QuizResult({ result }: QuizResultProps) {
   return (
     <div>
       <h2 className="font-medium text-2xl text-center mt-16">
         Finished! Your result is...
       </h2>
       <div className="mt-16">
-        {status === "accepted" ? <SuccessAlert /> : <ErrorAlert />}
+        {result === "accepted" ? <SuccessAlert /> : <ErrorAlert />}
       </div>
     </div>
   );
diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
index ec1613f..3dea1b9 100644
--- a/src/components/quiz.tsx
+++ b/src/components/quiz.tsx
@@ -27,6 +27,9 @@ export type QuizQuestion = {
 };
 
 export function Quiz() {
+  const [result, setResult] = React.useState<"accepted" | "rejected" | null>(
+    null,
+  );
   const [questions, setQuestions] = React.useState<QuizQuestion[]>([]);
 
   // TODO: Perf: we may want to somehow preload the display HTML because
@@ -50,12 +53,23 @@ export function Quiz() {
       );
   }, []);
 
+  React.useEffect(() => {
+    const isRejected = questions.some((q) => q.response?.isRejection);
+    const isAccepted =
+      questions.length > 0
+        ? questions.every((q) => q.status === "complete")
+        : false;
+
+    if (isRejected) {
+      setResult("rejected");
+    } else if (isAccepted) {
+      setResult("accepted");
+    }
+  }, [questions]);
+
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const currentQuestion = questions[currentIndex];
 
-  const isRejected = questions.some((q) => q.response?.isRejection);
-  const isAccepted = questions.every((q) => q.status === "complete");
-
   function handleOptionClick(option: Option) {
     // Update the current question with its response and "complete" status
     // and set the next question as "upcoming"
@@ -99,10 +113,8 @@ export function Quiz() {
 
   return (
     <div className="flex-grow m-auto max-w-2xl pt-24">
-      {isRejected ? (
-        <QuizResult status="rejected" />
-      ) : isAccepted ? (
-        <QuizResult status="accepted" />
+      {result ? (
+        <QuizResult result={result} />
       ) : currentQuestion ? (
         <div>
           <QuizNavigation