From 9d2ffb518360d7e651e637e363a274da026ec07c Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Sat, 31 Jan 2026 16:28:02 +0600
Subject: [PATCH] feat(test): add custom back navigation handling

---
 src/hooks/useExamNavGuard.ts        | 14 +++++++++
 src/pages/student/practice/Test.tsx | 48 ++++++++++++++++++++++++++++-
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useExamNavGuard.ts

diff --git a/src/hooks/useExamNavGuard.ts b/src/hooks/useExamNavGuard.ts
new file mode 100644
index 0000000..383e239
--- /dev/null
+++ b/src/hooks/useExamNavGuard.ts
@@ -0,0 +1,14 @@
+import { useBlocker } from "react-router-dom";
+import { useSatExam } from "../stores/useSatExam";
+
+export const useExamNavigationGuard = () => {
+  const phase = useSatExam((s) => s.phase);
+
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      (phase === "MODULE" || phase === "BREAK") &&
+      currentLocation.pathname !== nextLocation.pathname,
+  );
+
+  return blocker;
+};
diff --git a/src/pages/student/practice/Test.tsx b/src/pages/student/practice/Test.tsx
index 4edf354..c0924f3 100644
--- a/src/pages/student/practice/Test.tsx
+++ b/src/pages/student/practice/Test.tsx
@@ -37,8 +37,19 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
+import { useExamNavigationGuard } from "../../../hooks/useExamNavGuard";
 
 export const Test = () => {
+  const blocker = useExamNavigationGuard();
+
+  const [showExitDialog, setShowExitDialog] = useState(false);
+
+  useEffect(() => {
+    if (blocker.state === "blocked") {
+      setShowExitDialog(true);
+    }
+  }, [blocker.state]);
+
   const navigate = useNavigate();
   const { user } = useAuthStore();
   const token = useAuthToken();
@@ -445,7 +456,7 @@ export const Test = () => {
                       <div className="flex justify-end gap-3 mt-4">
                         <DialogClose asChild>
                           <button className="px-4 py-2 border rounded-lg cursor-pointer font-satoshi">
-                            Cancel
+                            Stay
                           </button>
                         </DialogClose>
                         <button
@@ -515,6 +526,41 @@ export const Test = () => {
                 </DialogContent>
               </Dialog>
 
+              <Dialog open={showExitDialog} onOpenChange={setShowExitDialog}>
+                <DialogContent showCloseButton={false}>
+                  <DialogHeader>
+                    <DialogTitle className="font-satoshi-medium text-start">
+                      Want to quit the test?
+                    </DialogTitle>
+                    <DialogDescription className="font-satoshi tracking-wide">
+                      Your progress will be saved and you can resume later.
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <div className="flex justify-end gap-3 mt-4">
+                    <button
+                      onClick={() => {
+                        setShowExitDialog(false);
+                        blocker.reset(); // ⬅️ stay on page
+                      }}
+                      className="px-4 py-2 border rounded-lg cursor-pointer font-satoshi"
+                    >
+                      Stay
+                    </button>
+
+                    <button
+                      onClick={() => {
+                        finishExam();
+                        blocker.proceed(); // ⬅️ allow navigation
+                      }}
+                      className="px-4 py-2 bg-red-600 text-white rounded-lg cursor-pointer font-satoshi"
+                    >
+                      Quit Test
+                    </button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+
               <button
                 disabled={isSubmitting}
                 onClick={handleNext}