Merge pull request #67 from jolynloh/BE/stopmatch

Add question check before matching & show confirmation popup before leaving matching pages

Author: feliciagan

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,
@@ -131,11 +132,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);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [matchUser?.id, location.pathname]);

frontend/src/pages/Home/index.tsx

@@ -7,6 +7,8 @@ import {
   Grid2,
   TextField,
   Typography,
+  CircularProgress,
+  useMediaQuery,
 } from "@mui/material";
 import { useEffect, useReducer, useState } from "react";
 
@@ -17,23 +19,28 @@ import {
   languageList,
   maxMatchTimeout,
   minMatchTimeout,
+  QUESTION_DOES_NOT_EXIST_ERROR,
   USE_MATCH_ERROR_MESSAGE,
 } from "../../utils/constants";
 import reducer, {
   getQuestionCategories,
+  getQuestionList,
   initialState as initialState,
 } from "../../reducers/questionReducer";
 import CustomChip from "../../components/CustomChip";
 import homepageImage from "/homepage_image.svg";
 import { useMatch } from "../../contexts/MatchContext";
 import Loader from "../../components/Loader";
+import { toast } from "react-toastify";
 
 const Home: React.FC = () => {
   const [complexities, setComplexities] = useState<string[]>([]);
   const [categories, setCategories] = useState<string[]>([]);
   const [languages, setLanguages] = useState<string[]>([]);
   const [timeout, setTimeout] = useState<number | undefined>(30);
 
+  const [isQueryingQnDB, setIsQueryingQnDB] = useState<boolean>(false);
+
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const match = useMatch();
@@ -42,10 +49,23 @@ const Home: React.FC = () => {
   }
   const { findMatch, loading } = match;
 
+  const isSmallerThan1100px = useMediaQuery('(max-width:1100px)');
+
   useEffect(() => {
     getQuestionCategories(dispatch);
   }, []);
 
+  useEffect(() => {
+    if (isQueryingQnDB) {
+      if (state.questions.length > 0) {
+        findMatch(complexities, categories, languages, timeout!);
+      } else {
+        toast.error(QUESTION_DOES_NOT_EXIST_ERROR);
+      }
+    }
+    setIsQueryingQnDB(false);
+  }, [state.questions]);
+
   if (loading) {
     return <Loader />;
   }
@@ -78,19 +98,21 @@ const Home: React.FC = () => {
         Specify your question preferences and sit back as we find you the best
         match.
       </Typography>
-      <Box
-        component="img"
-        src={homepageImage}
-        alt="Interview Practice Buddy"
-        sx={{
-          position: "absolute",
-          top: "35%",
-          left: "10%",
-          width: "128px",
-          height: "auto",
-          objectFit: "contain",
-        }}
-      />
+      {isSmallerThan1100px && (
+        <Box
+          component="img"
+          src={homepageImage}
+          alt="Interview Practice Buddy"
+          sx={{
+            position: "absolute",
+            top: "35%",
+            left: "10%",
+            width: "128px",
+            height: "auto",
+            objectFit: "contain",
+          }}
+        />
+      )}
       <Card
         sx={{
           padding: 4,
@@ -272,11 +294,12 @@ const Home: React.FC = () => {
             categories.length == 0 ||
             languages.length == 0
           }
-          onClick={() =>
-            findMatch(complexities, categories, languages, timeout!)
-          }
+          onClick={() => {
+            setIsQueryingQnDB(true);
+            getQuestionList(1, 10, "", complexities, categories, dispatch);
+          }}
         >
-          Find my match!
+          {isQueryingQnDB ? <CircularProgress /> : "Find my match!"}
         </Button>
       </Card>
     </AppMargin>

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

@@ -96,6 +96,17 @@ export const MATCH_LOGIN_REQUIRED_MESSAGE =
 export const MATCH_OFFER_TIMEOUT_MESSAGE = "Match offer timeout!";
 export const MATCH_CONNECTION_ERROR =
   "Connection error! Please try again later.";
+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";