From 3ea0989a9725db5469af1db2ece076a1da36ea86 Mon Sep 17 00:00:00 2001
From: Marco Escaleira <marcoescaleira2000@gmail.com>
Date: Sun, 17 Mar 2024 19:21:05 +0000
Subject: [PATCH] feat: quiz attempt submission with modal

---
 src/components/QuizAttempt/QuizAttempt.tsx    | 28 ++++++-------
 .../QuizAttemptSubmitDialog.tsx               | 40 +++++++++++++++++++
 src/state/attemptStore.ts                     |  6 +++
 3 files changed, 60 insertions(+), 14 deletions(-)
 create mode 100644 src/components/QuizAttemptSubmitDialog/QuizAttemptSubmitDialog.tsx

diff --git a/src/components/QuizAttempt/QuizAttempt.tsx b/src/components/QuizAttempt/QuizAttempt.tsx
index a511ccb..d9daf36 100644
--- a/src/components/QuizAttempt/QuizAttempt.tsx
+++ b/src/components/QuizAttempt/QuizAttempt.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { Button, Tooltip, Typography } from "@material-tailwind/react";
 import { X, Timer } from "lucide-react";
-import { useNavigate } from "react-router-dom";
 import { useTimer } from "react-timer-hook";
 import { toast } from "react-toastify";
 import useBreakpoint from "use-breakpoint";
 import { QuestionTypeChip } from "@components/QuestionTypeChip/QuestionTypeChip";
 import { QuizAttemptCancelDialog } from "@components/QuizAttemptCancelDialog/QuizAttemptCancelDialog";
+import { QuizAttemptSubmitDialog } from "@components/QuizAttemptSubmitDialog/QuizAttemptSubmitDialog";
 import { QuizByIdQuery } from "@generated/graphql.ts";
 import { useAttemptStore } from "@state/attemptStore.ts";
 import { useUserStore } from "@state/userStore.ts";
@@ -17,7 +17,6 @@ interface QuizAttemptProps {
 }
 
 export function QuizAttempt({ quiz }: QuizAttemptProps) {
-  const navigate = useNavigate();
   const { breakpoint } = useBreakpoint(BREAKPOINTS);
   const { isLoggedIn } = useUserStore();
   const {
@@ -25,8 +24,8 @@ export function QuizAttempt({ quiz }: QuizAttemptProps) {
     questions,
     currentQuestion,
     toggleCancelQuizDialog,
+    toggleSubmitQuizDialog,
     startAttempt,
-    submitAttempt,
     resetAttempt,
     setQuestionResponse,
     goToPreviousQuestion,
@@ -135,17 +134,18 @@ export function QuizAttempt({ quiz }: QuizAttemptProps) {
             Previous
           </Button>
           {isLastQuestion ? (
-            <Button
-              variant="gradient"
-              color="green"
-              onClick={() => {
-                // TODO: Confirm if all questions were answered and if the user wants to submit the attempt
-                // TODO: Handle attempt submission
-                submitAttempt(quiz.id, navigate);
-              }}
-            >
-              Finish
-            </Button>
+            <>
+              <Button
+                variant="gradient"
+                color="green"
+                onClick={() => {
+                  toggleSubmitQuizDialog();
+                }}
+              >
+                Finish
+              </Button>
+              <QuizAttemptSubmitDialog quizId={quiz.id} />
+            </>
           ) : (
             <Button color="blue" onClick={goToNextQuestion}>
               Next
diff --git a/src/components/QuizAttemptSubmitDialog/QuizAttemptSubmitDialog.tsx b/src/components/QuizAttemptSubmitDialog/QuizAttemptSubmitDialog.tsx
new file mode 100644
index 0000000..29f25f0
--- /dev/null
+++ b/src/components/QuizAttemptSubmitDialog/QuizAttemptSubmitDialog.tsx
@@ -0,0 +1,40 @@
+import { Button, Dialog, DialogBody, DialogFooter, DialogHeader, Typography } from "@material-tailwind/react";
+import { useNavigate } from "react-router-dom";
+import { useAttemptStore } from "@state/attemptStore.ts";
+
+export function QuizAttemptSubmitDialog({ quizId }: { quizId: string }) {
+  const navigate = useNavigate();
+  const { isSubmitQuizDialogOpen, toggleSubmitQuizDialog, submitAttempt } = useAttemptStore();
+
+  return (
+    <Dialog open={isSubmitQuizDialogOpen} handler={toggleSubmitQuizDialog} className="outline-none">
+      <DialogHeader>
+        <Typography className="text-xl font-medium">Are you sure?</Typography>
+      </DialogHeader>
+      <DialogBody>
+        <Typography>Confirm all your answers and submit your attempt below</Typography>
+      </DialogBody>
+      <DialogFooter className="gap-3">
+        <Button
+          variant="outlined"
+          color="gray"
+          onClick={() => {
+            toggleSubmitQuizDialog();
+          }}
+        >
+          Go back
+        </Button>
+        <Button
+          variant="gradient"
+          color="green"
+          onClick={() => {
+            toggleSubmitQuizDialog();
+            submitAttempt(quizId, navigate);
+          }}
+        >
+          Submit
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}
diff --git a/src/state/attemptStore.ts b/src/state/attemptStore.ts
index 4db8ba0..847ba1c 100644
--- a/src/state/attemptStore.ts
+++ b/src/state/attemptStore.ts
@@ -22,6 +22,8 @@ interface AttemptState {
   resetAttempt: () => void;
   isCancelQuizDialogOpen: boolean;
   toggleCancelQuizDialog: () => void;
+  isSubmitQuizDialogOpen: boolean;
+  toggleSubmitQuizDialog: () => void;
   quizAccordion: number;
   handleQuizAccordion: (value: number) => void;
   goToPreviousQuestion: () => void;
@@ -36,6 +38,7 @@ export const useAttemptStore = create<AttemptState>()(
       currentQuestion: 0,
       startTime: "",
       isCancelQuizDialogOpen: false,
+      isSubmitQuizDialogOpen: false,
       quizAccordion: 1,
 
       startAttempt: (questions, startTime) =>
@@ -127,6 +130,9 @@ export const useAttemptStore = create<AttemptState>()(
       toggleCancelQuizDialog: () =>
         setState(({ isCancelQuizDialogOpen }) => ({ isCancelQuizDialogOpen: !isCancelQuizDialogOpen })),
 
+      toggleSubmitQuizDialog: () =>
+        setState(({ isSubmitQuizDialogOpen }) => ({ isSubmitQuizDialogOpen: !isSubmitQuizDialogOpen })),
+
       handleQuizAccordion: value =>
         setState(({ quizAccordion }) => ({ quizAccordion: quizAccordion === value ? 0 : value })),