feat: quiz attempt submission with modal

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,16 +17,15 @@ interface QuizAttemptProps {
 }
 
 export function QuizAttempt({ quiz }: QuizAttemptProps) {
-  const navigate = useNavigate();
   const { breakpoint } = useBreakpoint(BREAKPOINTS);
   const { isLoggedIn } = useUserStore();
   const {
     isAttemptRunning,
     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

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>
+  );
+}

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 })),