From ab0b81020df45c2fa3ba27c2dd3ba22db6341b9e Mon Sep 17 00:00:00 2001
From: Aaron McAdam <aaron@aaronmcadam.com>
Date: Mon, 5 Aug 2024 21:52:06 +0100
Subject: [PATCH] custom arePropsEqual function causing issues

sometimes the option doesn't get selected
---
 src/components/quiz-option.tsx | 93 +++++++++++++++-------------------
 src/components/quiz.tsx        |  5 +-
 2 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/src/components/quiz-option.tsx b/src/components/quiz-option.tsx
index c626cd1..ced25cc 100644
--- a/src/components/quiz-option.tsx
+++ b/src/components/quiz-option.tsx
@@ -10,55 +10,46 @@ export type QuizOptionProps = {
   value: string | boolean;
 };
 
-export const QuizOption = React.memo(
-  function QuizOption({
-    onClick,
-    isSelected,
-    display,
-    value,
-  }: QuizOptionProps) {
-    const type = display === "Yes" || display === "No" ? "boolean" : "image";
+export const QuizOption = React.memo(function QuizOption({
+  onClick,
+  isSelected,
+  display,
+  value,
+}: QuizOptionProps) {
+  const type = display === "Yes" || display === "No" ? "boolean" : "image";
 
-    return (
-      <Button
-        onClick={onClick}
-        variant="outline"
-        className={cn(
-          "mt-2 h-auto flex flex-col items-center justify-center relative",
-          {
-            "ring-2 ring-primary": isSelected,
-            // TODO: only apply this after clicking the option because otherwise, when navigating back to a question,
-            // the selected option will blink.
-            "animate-blink": isSelected,
-          },
-        )}
-      >
-        {isSelected ? (
-          <CircleCheck className="h-5 w-5 text-primary absolute top-2 right-2" />
-        ) : null}
-        {display === "Yes" ? (
-          <div className="flex items-center h-[154px]">
-            <Check className="flex-grow text-brand-600 h-16 w-16" />
-          </div>
-        ) : null}
-        {display === "No" ? (
-          <div className="flex items-center h-[154px]">
-            <X className="text-brand-600 h-16 w-16" />
-          </div>
-        ) : null}
-        <span
-          className={cn({ "h-[154px]": type === "image" })}
-          dangerouslySetInnerHTML={{ __html: display }}
-        />
-        {value}
-      </Button>
-    );
-  },
-  (prevProps, nextProps) => {
-    const arePropsEqual =
-      prevProps.isSelected === nextProps.isSelected &&
-      prevProps.display === nextProps.display;
-
-    return arePropsEqual;
-  },
-);
+  return (
+    <Button
+      onClick={onClick}
+      variant="outline"
+      className={cn(
+        "mt-2 h-auto flex flex-col items-center justify-center relative",
+        {
+          "ring-2 ring-primary": isSelected,
+          // TODO: only apply this after clicking the option because otherwise, when navigating back to a question,
+          // the selected option will blink.
+          "animate-blink": isSelected,
+        },
+      )}
+    >
+      {isSelected ? (
+        <CircleCheck className="h-5 w-5 text-primary absolute top-2 right-2" />
+      ) : null}
+      {display === "Yes" ? (
+        <div className="flex items-center h-[154px]">
+          <Check className="flex-grow text-brand-600 h-16 w-16" />
+        </div>
+      ) : null}
+      {display === "No" ? (
+        <div className="flex items-center h-[154px]">
+          <X className="text-brand-600 h-16 w-16" />
+        </div>
+      ) : null}
+      <span
+        className={cn({ "h-[154px]": type === "image" })}
+        dangerouslySetInnerHTML={{ __html: display }}
+      />
+      {value}
+    </Button>
+  );
+});
diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
index 453b92a..00a531b 100644
--- a/src/components/quiz.tsx
+++ b/src/components/quiz.tsx
@@ -41,7 +41,7 @@ export function Quiz() {
   // TODO: Perf: we may want to somehow preload the display HTML because
   // we're seeing some flicker when images have to load.
   // Hard coding the height of the option helps, but it's not ideal.
-  // We'd probably need to parse or regex the html to check what element it is.
+  // We'd probably need to parse or regex the html to check what element it is to preload the image.
   React.useEffect(() => {
     fetch("/api/questions")
       .then((res) => res.json())
@@ -65,7 +65,6 @@ export function Quiz() {
   const currentQuestion = quizState.questions[quizState.currentIndex];
 
   // Update the current question with its response and "complete" status
-  // and set the next question as "upcoming"
   function handleOptionClick(option: Option) {
     setQuizState((prevState) => {
       const updatedQuestions = prevState.questions.map((q, i) => {
@@ -117,7 +116,7 @@ export function Quiz() {
           result: isRejected ? "rejected" : isAccepted ? "accepted" : null,
         };
       });
-    }, 600); // 600ms delay for double blink effect
+    }, 600); // 600ms delay matches the blink animation duration
   }
 
   // If the number of options is a multiple of 3, use 3 columns, otherwise 2