Merge pull request #77 from jolynloh/BE/stopmatch

Add confirmation popup when navigate away from matching pages
CS3219-AY2425S1 · Oct 20, 2024 · 2db16f9 · 2db16f9
2 parents 08fa523 + b4317b7
commit 2db16f9
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 26 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,11 +22,12 @@
     "@mui/material": "^6.1.0",
     "@uiw/react-md-editor": "^4.0.4",
     "axios": "^1.7.7",
+    "history": "^5.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-material-ui-carousel": "^3.4.2",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.3.0",
     "react-toastify": "^10.0.5",
     "socket.io-client": "^4.8.0",
     "vite-plugin-svgr": "^4.2.0"

diff --git a/frontend/src/contexts/MatchContext.tsx b/frontend/src/contexts/MatchContext.tsx
@@ -15,6 +15,8 @@ import {
 import { useAuth } from "./AuthContext";
 import { toast } from "react-toastify";
 import useAppNavigate from "../components/UseAppNavigate";
+import { UNSAFE_NavigationContext } from "react-router-dom";
+import { Action, type History, type Transition } from "history";
 
 type MatchUser = {
   id: string;
@@ -109,6 +111,8 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const [matchPending, setMatchPending] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
 
+  const navigator = useContext(UNSAFE_NavigationContext).navigator as History;
+
   useEffect(() => {
     if (user) {
       setMatchUser({
@@ -135,6 +139,16 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     openSocketConnection();
     matchSocket.emit(MatchEvents.USER_CONNECTED, matchUser?.id);
 
+    const unblock = navigator.block((transition: Transition) => {
+      if (
+        transition.action === Action.Replace ||
+        confirm(ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE)
+      ) {
+        unblock();
+        appNavigate(transition.location.pathname);
+      }
+    });
+
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
       e.preventDefault();
       e.returnValue = ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE; // for legacy support, does not actually display message

diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
@@ -290,7 +290,7 @@ const Home: React.FC = () => {
           }
           onClick={() => {
             setIsQueryingQnDB(true);
-            getQuestionList(1, 10, "", complexities, categories, dispatch);
+            getQuestionList(1, 1, "", complexities, categories, dispatch);
           }}
         >
           {isQueryingQnDB ? <CircularProgress /> : "Find my match!"}