Add back navigation confirmation popup on matching pages

Author: jolynloh

frontend/package-lock.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"

frontend/package.json

@@ -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

frontend/src/contexts/MatchContext.tsx

@@ -296,7 +296,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!"}