improvement: correctly mapping multi choice questions

MarcoEscaleira · Mar 17, 2024 · 9b1317e · 9b1317e
1 parent e75234e
commit 9b1317e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 36 deletions.
diff --git a/src/components/AttemptHistoryTable/AttemptHistoryTable.tsx b/src/components/AttemptHistoryTable/AttemptHistoryTable.tsx
@@ -23,7 +23,7 @@ export function AttemptHistoryTable({ quizId }: AttemptHistoryTableProps) {
   if (!userId) return null;
 
   return (
-    <div className="flex w-full flex-col">
+    <div className="container flex flex-col">
       <section className="flex items-center">
         <Typography variant="h2" className="text-xl font-medium">
           Attempt History

diff --git a/src/components/QuizAttempt/QuizAttempt.tsx b/src/components/QuizAttempt/QuizAttempt.tsx
@@ -7,7 +7,7 @@ import { toast } from "react-toastify";
 import useBreakpoint from "use-breakpoint";
 import { QuestionTypeChip } from "@components/QuestionTypeChip/QuestionTypeChip";
 import { QuizAttemptCancelDialog } from "@components/QuizAttemptCancelDialog/QuizAttemptCancelDialog";
-import { QuestionType, QuizByIdQuery } from "@generated/graphql.ts";
+import { QuizByIdQuery } from "@generated/graphql.ts";
 import { useAttemptStore } from "@state/attemptStore.ts";
 import { useUserStore } from "@state/userStore.ts";
 import { BREAKPOINTS } from "@utils/constants.ts";
@@ -117,31 +117,18 @@ export function QuizAttempt({ quiz }: QuizAttemptProps) {
         </Typography>
 
         <div className="mt-10 flex flex-wrap gap-5 sm:gap-7">
-          {question.type === QuestionType.Single &&
-            question.options.map(({ text, chosen }) => (
-              <Button
-                key={text}
-                fullWidth
-                variant={chosen ? "filled" : "outlined"}
-                color="blue-gray"
-                onClick={() => setQuestionResponse(text)}
-              >
-                {text}
-              </Button>
-            ))}
-
-          {question.type === QuestionType.Multi &&
-            question.options.map(({ text }) => (
-              <Button
-                key={text}
-                fullWidth
-                variant="outlined"
-                color="blue-gray"
-                onClick={() => setQuestionResponse(text)}
-              >
-                {text}
-              </Button>
-            ))}
+          {question.options.map(({ text, chosen }) => (
+            <Button
+              key={text}
+              fullWidth
+              variant={chosen ? "filled" : "outlined"}
+              color="blue-gray"
+              className="outline-none focus:ring-0"
+              onClick={() => setQuestionResponse(text)}
+            >
+              {text}
+            </Button>
+          ))}
         </div>
         <div className="mt-12 flex w-full justify-between">
           <Button variant="outlined" color="gray" disabled={currentQuestion === 0} onClick={goToPreviousQuestion}>

diff --git a/src/pages/Quiz/index.tsx b/src/pages/Quiz/index.tsx
@@ -111,8 +111,8 @@ export function Component() {
       </section>
 
       {!isAttemptRunning && (
-        <div className="mt-6 block w-full md:hidden">
-          <hr className="border-secondaryShades.5 mb-4 w-full" />
+        <div className="container mt-6 flex flex-col md:hidden">
+          <hr className="border-secondaryShades.5 mb-4 flex w-full" />
           <AttemptHistoryTable quizId={quiz?.id || ""} />
         </div>
       )}

diff --git a/src/state/attemptStore.ts b/src/state/attemptStore.ts
@@ -85,23 +85,29 @@ export const useAttemptStore = create<AttemptState>()(
               return {
                 ...question,
                 options: question.options.map(option => {
-                  if (option.text === chosenOption) {
-                    return {
-                      ...option,
-                      chosen: true,
-                    };
-                  }
+                  const chosen = option.text === chosenOption;
                   return {
                     ...option,
-                    chosen: false,
+                    chosen: chosen,
                   };
                 }),
               };
             }
 
             if (isMultipleChoice) {
+              return {
+                ...question,
+                options: question.options.map(option => {
+                  const chosen = option.text === chosenOption;
+                  return {
+                    ...option,
+                    chosen: chosen ? !option.chosen : option.chosen,
+                  };
+                }),
+              };
             }
           }
+
           return question;
         });