Merge pull request #99 from CS3219-AY2324S1/add-timer-to-matching-form

Add timer

Author: wilburrito

MatchingService/src/matching/matching.service.ts

@@ -12,6 +12,7 @@ export function initializeMatchingService(io: Server) {
     socket.on('startMatching', (preferences: any) => {
       // Add the user to the list of active users with their preferences
       activeUsers.push({ socket, preferences });
+      //console.log('user is in queue to match with another user');
 
       // Attempt to find a match for the user
       tryMatchForUser(socket, preferences);
@@ -61,6 +62,7 @@ export function initializeMatchingService(io: Server) {
       removeUserFromActiveList(matchedUser.socket);
       const randomSeed = Date.now();
       // Emit "matchFound" to both users
+      //console.log('match found');
       socket.emit('matchFound', {matchedUserPreferences: matchedUser.preferences, seed: randomSeed});
       matchedUser.socket.emit('matchFound', {matchedUserPreferences: preferences, seed: randomSeed});
     } else {

frontend/src/components/MatchingService/MatchingForm.tsx

@@ -65,6 +65,21 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
   const userEmail = user?.email;
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
   const [snackbarMessage, setSnackbarMessage] = React.useState("");
+  const [remainingTime, setRemainingTime] = React.useState(0); // State for the countdown timer
+  const [timerId, setTimerId] = React.useState<NodeJS.Timeout | null>(null); // State to keep track of the timer
+
+
+  const startCountdown = () => {
+    setRemainingTime(30); // Start the timer at 30 seconds
+    setIsMatching(true);
+    // Clear any existing timer
+    if (timerId) clearInterval(timerId);
+    // Start a new timer
+    const id = setInterval(() => {
+      setRemainingTime((time) => time - 1);
+    }, 1000);
+    setTimerId(id);
+  };
 
   const handleConnect = async () => {
     const preferences = {
@@ -88,8 +103,24 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
 
     socket.emit("startMatching", preferences);
     setIsMatching(true);
+    startCountdown();
   };
 
+  React.useEffect(() => {
+    if (remainingTime === 0 && timerId) {
+      clearInterval(timerId);
+      setIsMatching(false); // Update isMatching state to false as matching ends
+      setSnackbarMessage("Matching timed out after 30 seconds.");
+      setOpenSnackbar(true);
+    }
+  }, [remainingTime, timerId]);
+
+  React.useEffect(() => {
+    return () => {
+      if (timerId) clearInterval(timerId);
+    };
+  }, [timerId]);
+
   const generateConsistentRandomIndex = (seed: any, arrayLength: number) => {
     return seed % arrayLength;
   };
@@ -127,6 +158,8 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
     getCategories();
   }, []);
 
+  
+
   React.useEffect(() => {
     socket.on("matchFound", async (matchedUserPreferences) => {
       console.log("Match Found:", matchedUserPreferences);
@@ -203,7 +236,10 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
         </select>
       </div>
       {isMatching ? (
-        <div>Loading...</div>
+        <div>Loading... 
+        <p>Time remaining: {remainingTime} seconds</p>
+        </div>
+        
       ) : (
         <Button sx={{ mt: "5%" }} variant="contained" onClick={handleConnect}>
           Connect
@@ -229,4 +265,4 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
   );
 });
 
-export default MatchingForm;
+export default MatchingForm;