Show confirmation popup message before user leaves (unloads) matching pages

Author: jolynloh

frontend/src/contexts/MatchContext.tsx

@@ -3,6 +3,7 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { matchSocket } from "../utils/matchSocket";
 import {
+  ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE,
   FAILED_MATCH_REQUEST_MESSAGE,
   MATCH_CONNECTION_ERROR,
   MATCH_ENDED_MESSAGE,
@@ -130,11 +131,22 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     openSocketConnection();
     matchSocket.emit(MatchEvents.USER_CONNECTED, matchUser?.id);
 
-    window.addEventListener("beforeunload", () => closeSocketConnection());
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE; // for legacy support, does not actually display message
+    };
+
+    const handleUnload = () => {
+      closeSocketConnection();
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener("unload", handleUnload);
 
     return () => {
       closeSocketConnection();
-      window.removeEventListener("beforeunload", () => closeSocketConnection());
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener("unload", handleUnload);
     };
   }, [matchUser?.id, location.pathname]);
 

frontend/src/pages/NewQuestion/index.tsx

@@ -15,6 +15,7 @@ import reducer, {
 import { toast } from "react-toastify";
 
 import {
+  ABORT_CREATE_OR_EDIT_QUESTION_CONFIRMATION_MESSAGE,
   complexityList,
   FAILED_QUESTION_CREATE,
   FILL_ALL_FIELDS,
@@ -47,11 +48,7 @@ const NewQuestion = () => {
       selectedComplexity ||
       selectedCategories.length > 0
     ) {
-      if (
-        !confirm(
-          "Are you sure you want to leave this page? All process will be lost."
-        )
-      ) {
+      if (!confirm(ABORT_CREATE_OR_EDIT_QUESTION_CONFIRMATION_MESSAGE)) {
         return;
       }
     }

frontend/src/pages/QuestionEdit/index.tsx

@@ -11,6 +11,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { toast } from "react-toastify";
 
 import {
+  ABORT_CREATE_OR_EDIT_QUESTION_CONFIRMATION_MESSAGE,
   complexityList,
   FAILED_QUESTION_UPDATE,
   FILL_ALL_FIELDS,
@@ -61,11 +62,7 @@ const QuestionEdit = () => {
   }, [state.selectedQuestion]);
 
   const handleBack = () => {
-    if (
-      !confirm(
-        "Are you sure you want to leave this page? All process will be lost."
-      )
-    ) {
+    if (!confirm(ABORT_CREATE_OR_EDIT_QUESTION_CONFIRMATION_MESSAGE)) {
       return;
     }
     navigate("/questions");

frontend/src/utils/constants.ts

@@ -94,6 +94,15 @@ export const MATCH_CONNECTION_ERROR =
 export const QUESTION_DOES_NOT_EXIST_ERROR =
   "There are no questions with the specified complexity and category. Please try another combination.";
 
+/* Alerts & Dialog Boxes */
+// Questions
+export const ABORT_CREATE_OR_EDIT_QUESTION_CONFIRMATION_MESSAGE =
+  "Are you sure you want to leave this page? All process will be lost.";
+
+// Match
+export const ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE =
+  "Are you sure you want to leave the matching process?";
+
 /* Image paths */
 export const FIND_MATCH_FORM_PATH = "/find_match_form.png";
 export const MATCH_FOUND_PATH = "/match_found.png";