Merge branch 'master' of https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g14 into cicd

Author: ngjiayuan

MatchingService/src/matching/matching.service.ts

@@ -54,7 +54,7 @@ export function initializeMatchingService(io: Server) {
         user.preferences.category === category
       );
     });
-
+    let timeoutId: NodeJS.Timeout;
     if (matchedUser) {
       // Remove both users from the active list
       removeUserFromActiveList(socket);
@@ -64,6 +64,11 @@ export function initializeMatchingService(io: Server) {
       socket.emit('matchFound', {matchedUserPreferences: matchedUser.preferences, seed: randomSeed});
       matchedUser.socket.emit('matchFound', {matchedUserPreferences: preferences, seed: randomSeed});
     } else {
+      
+      timeoutId = setTimeout(() => {
+        socket.emit('noMatchFound');
+        removeUserFromActiveList(socket);
+      }, 30000);
       // Handle the case when no match is found for the user
       // You can emit a "noMatchFound" event or handle it differently
     }

frontend/src/components/MatchingService/MatchingForm.tsx

@@ -17,16 +17,23 @@ const style = {
   transform: "translate(-50%, -50%)",
   width: "50%",
   display: "flex-wrap",
-  maxHeight: "60%",
+  // Remove or adjust the maxHeight value
+  //maxHeight: "60%",
   justifyContent: "center",
   textAlign: "center",
   bgcolor: "background.paper",
   border: "2px solid #000",
   boxShadow: 24,
-  overflow: "auto",
   p: 4,
 };
 
+const snackbarStyle = {
+  position: "absolute" as "absolute",
+  top: 3,
+  left: "50%",
+  transform: "translate(-50%, 0)",
+};
+
 const titleStyle = {
   fontSize: "2rem", // Increase the title size
 };
@@ -53,6 +60,7 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
   const { user } = useAuth();
   const userEmail = user?.email;
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
+  const [snackbarMessage, setSnackbarMessage] = React.useState("");
 
   const handleConnect = async () => {
     const preferences = {
@@ -69,6 +77,9 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
     });
 
     if (filteredQuestions.length === 0) {
+      setSnackbarMessage(
+        "No questions match the selected difficulty and category."
+      );
       setOpenSnackbar(true);
       return;
     }
@@ -121,8 +132,11 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
       const matchedUser = matchedUserPreferences.matchedUserPreferences;
       setIsMatching(false);
       const qId = await getQuestions(seed);
-      const hashedEmailOne = sha256(userEmail || "");
-      const hashedEmailTwo = sha256(matchedUser.userEmail);
+      const emails = [userEmail, matchedUser.userEmail].sort();
+
+      // Hash the sorted emails
+      const hashedEmailOne = sha256(emails[0]);
+      const hashedEmailTwo = sha256(emails[1]);
       navigate(`/collab/question/${qId}/${hashedEmailOne}/${hashedEmailTwo}`);
     });
 
@@ -132,6 +146,19 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [difficulty, category, userEmail, navigate]);
 
+  React.useEffect(() => {
+    socket.on("noMatchFound", () => {
+      console.log("Match Not Found");
+      setIsMatching(false);
+      setSnackbarMessage("No eligible match found within the given timeframe.");
+      setOpenSnackbar(true);
+    });
+
+    return () => {
+      socket.off("noMatchFound");
+    };
+  });
+
   return (
     <Box sx={style}>
       <h2 style={titleStyle}>
@@ -186,6 +213,7 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
       )}
 
       <Snackbar
+        style={snackbarStyle}
         open={openSnackbar}
         autoHideDuration={6000}
         onClose={() => setOpenSnackbar(false)}
@@ -196,7 +224,7 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
           severity="warning"
           sx={{ width: "100%" }}
         >
-          No questions match the selected difficulty and category.
+          {snackbarMessage}
         </Alert>
       </Snackbar>
     </Box>