From 741eedfd59e32f7793813b172d09a706214130f4 Mon Sep 17 00:00:00 2001
From: Aaron McAdam <aaron@aaronmcadam.com>
Date: Fri, 2 Aug 2024 14:51:03 +0100
Subject: [PATCH] refactor: separate dialog from the quiz itself

---
 src/components/quiz-button.tsx | 84 +++--------------------------
 src/components/quiz.tsx        | 97 ++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+), 77 deletions(-)
 create mode 100644 src/components/quiz.tsx

diff --git a/src/components/quiz-button.tsx b/src/components/quiz-button.tsx
index fc53ea3..c31233e 100644
--- a/src/components/quiz-button.tsx
+++ b/src/components/quiz-button.tsx
@@ -12,6 +12,8 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Quiz } from "./quiz";
 
 type Option = {
   display: string;
@@ -26,33 +28,6 @@ type Question = {
 };
 
 export function QuizButton() {
-  const [questions, setQuestions] = React.useState<Question[]>([]);
-
-  // TODO: Perf: we may want to somehow preload the display HTML because
-  // we're seeing some flicker when navigating between steps
-  React.useEffect(() => {
-    fetch("/api/questions")
-      .then((res) => res.json())
-      .then((data) => setQuestions(data));
-  }, []);
-
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-  const currentQuestion = questions[currentIndex];
-
-  // TODO: we may want to consolidate these state values into
-  // an object we can use to read the overall quiz state
-  // make this take account of any amount of questions
-  // for now, we'll hard code the amount of questions
-  const [chosenOptions, setChosenOptions] = React.useState<
-    Record<number, number | null>
-  >({
-    0: null,
-    1: null,
-    2: null,
-  });
-
-  const visitorIsRejected = Object.values(chosenOptions).some((o) => o === -1);
-
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -68,56 +43,11 @@ export function QuizButton() {
             quick questions.
           </DialogDescription>
         </DialogHeader>
-        <div className="py-4">
-          {visitorIsRejected ? (
-            <h3>You&apos;re not eligible for treatment</h3>
-          ) : currentIndex === questions.length ? (
-            <h3>You&apos;re eligible for treatment</h3>
-          ) : currentQuestion ? (
-            <div className="mt-8">
-              <div className="flex gap-4">
-                {questions.map((_q, i) => (
-                  <Button
-                    key={i}
-                    className={currentIndex === i ? "border-primary" : ""}
-                    onClick={() => {
-                      setCurrentIndex(i);
-                    }}
-                    disabled={chosenOptions[i] === null}
-                    variant="outline"
-                  >{`Step ${i + 1}`}</Button>
-                ))}
-              </div>
-              <h3>{currentQuestion.question}</h3>
-              <div className="flex gap-4">
-                {currentQuestion.options.map((o, i) => (
-                  <Button
-                    key={o.value}
-                    onClick={() => {
-                      setCurrentIndex(currentIndex + 1);
-                      setChosenOptions((currentChosenOptions) => {
-                        return {
-                          ...currentChosenOptions,
-                          [currentIndex]: o.isRejection ? -1 : i,
-                        };
-                      });
-                    }}
-                    variant="outline"
-                    className={cn(
-                      "mt-2 h-auto",
-                      chosenOptions[currentIndex] === i ? "border-primary" : "",
-                    )}
-                  >
-                    <span dangerouslySetInnerHTML={{ __html: o.display }} />
-                    {o.value}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          ) : null}
-        </div>
-        <DialogFooter>
-          {/* <Button variant="outline">Close</Button> */}
+        <Quiz />
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
new file mode 100644
index 0000000..81dd339
--- /dev/null
+++ b/src/components/quiz.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "./ui/button";
+
+type Option = {
+  display: string;
+  value: string;
+  isRejection: boolean;
+};
+
+type Question = {
+  question: string;
+  type: string;
+  options: Option[];
+};
+
+export function Quiz() {
+  const [questions, setQuestions] = React.useState<Question[]>([]);
+
+  // TODO: Perf: we may want to somehow preload the display HTML because
+  // we're seeing some flicker when navigating between steps
+  React.useEffect(() => {
+    fetch("/api/questions")
+      .then((res) => res.json())
+      .then((data) => setQuestions(data));
+  }, []);
+
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const currentQuestion = questions[currentIndex];
+
+  // TODO: we may want to consolidate these state values into
+  // an object we can use to read the overall quiz state
+  // make this take account of any amount of questions
+  // for now, we'll hard code the amount of questions
+  const [chosenOptions, setChosenOptions] = React.useState<
+    Record<number, number | null>
+  >({
+    0: null,
+    1: null,
+    2: null,
+  });
+
+  const visitorIsRejected = Object.values(chosenOptions).some((o) => o === -1);
+
+  return (
+    <div className="py-4">
+      {visitorIsRejected ? (
+        <h3>You&apos;re not eligible for treatment</h3>
+      ) : currentIndex === questions.length ? (
+        <h3>You&apos;re eligible for treatment</h3>
+      ) : currentQuestion ? (
+        <div className="mt-8">
+          <div className="flex gap-4">
+            {questions.map((_q, i) => (
+              <Button
+                key={i}
+                className={currentIndex === i ? "border-primary" : ""}
+                onClick={() => {
+                  setCurrentIndex(i);
+                }}
+                disabled={chosenOptions[i] === null}
+                variant="outline"
+              >{`Step ${i + 1}`}</Button>
+            ))}
+          </div>
+          <h3>{currentQuestion.question}</h3>
+          <div className="flex gap-4">
+            {currentQuestion.options.map((o, i) => (
+              <Button
+                key={o.value}
+                onClick={() => {
+                  setCurrentIndex(currentIndex + 1);
+                  setChosenOptions((currentChosenOptions) => {
+                    return {
+                      ...currentChosenOptions,
+                      [currentIndex]: o.isRejection ? -1 : i,
+                    };
+                  });
+                }}
+                variant="outline"
+                className={cn(
+                  "mt-2 h-auto",
+                  chosenOptions[currentIndex] === i ? "border-primary" : "",
+                )}
+              >
+                <span dangerouslySetInnerHTML={{ __html: o.display }} />
+                {o.value}
+              </Button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}