From d7142f6b5adfa6bc1f781387c7d5c24b9c026b21 Mon Sep 17 00:00:00 2001
From: "Au Chen Xi, Gabriel" <au.gabriel@u.nus.edu>
Date: Mon, 13 Nov 2023 22:58:00 +0800
Subject: [PATCH 1/6] Fix toast at wrong location

---
 src/hooks/useMatchUsers.ts | 2 ++
 src/pages/collab/index.tsx | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useMatchUsers.ts b/src/hooks/useMatchUsers.ts
index 40fb746..6302d79 100644
--- a/src/hooks/useMatchUsers.ts
+++ b/src/hooks/useMatchUsers.ts
@@ -1,6 +1,7 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 import { api } from "~/utils/api";
 
 type UseMatchUsersResult = {
@@ -23,6 +24,7 @@ export default function useMatchUsers(): UseMatchUsersResult {
           data.user2 === session?.user.id
         ) {
           console.log("Routing");
+          toast.success("Redirecting to room...");
           void router.push(`/collab/rooms/${data.sessionId}`);
         }
       },
diff --git a/src/pages/collab/index.tsx b/src/pages/collab/index.tsx
index 022c246..537d303 100644
--- a/src/pages/collab/index.tsx
+++ b/src/pages/collab/index.tsx
@@ -173,7 +173,6 @@ const MatchRequestPage = () => {
   api.matchRequest.subscribeToMyRequestSuccess.useSubscription(undefined, {
     onData(data) {
       matchUsers.setMatchedUsers(data.userId1, data.userId2);
-      toast.success("Redirecting to room...");
     },
   });
   // subscprtions api -- END

From 0832792e11f6ef1f96c32e80612937389ea8e149 Mon Sep 17 00:00:00 2001
From: "Au Chen Xi, Gabriel" <au.gabriel@u.nus.edu>
Date: Mon, 13 Nov 2023 23:39:08 +0800
Subject: [PATCH 2/6] Move useEffect down to handle stale data

---
 src/pages/collab/index.tsx | 71 ++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/pages/collab/index.tsx b/src/pages/collab/index.tsx
index 537d303..7dd33ef 100644
--- a/src/pages/collab/index.tsx
+++ b/src/pages/collab/index.tsx
@@ -60,40 +60,6 @@ const MatchRequestPage = () => {
     };
   });
 
-  useEffect(() => {
-    if (time === REQUEST_EXPIRY_TIME_SECS && curUserMatchRequest) {
-      const { difficulty, category, matchType } = curUserMatchRequest;
-      const sameRequest = { difficulty, category, matchType };
-      deleteMatchRequest({ matchType: curUserMatchRequest.matchType });
-      toast(
-        (t) => (
-          <div className="flex flex-col justify-evenly text-slate-800">
-            <span className="text-center mb-2">No requests found 🫠.</span>
-            <div className="flex justify-stretch">
-              <button
-                className="border bg-blue-500 rounded-md text-slate-100 p-2 mr-1"
-                onClick={() => {
-                  toast.dismiss(t.id);
-                  createMatchRequest(sameRequest);
-                }}
-                type="button"
-              >
-                Recreate again
-              </button>
-              <button
-                className="border bg-stone-500 rounded-md text-slate-100 p-2"
-                onClick={() => toast.dismiss(t.id)}
-                type="button"
-              >
-                Dismiss
-              </button>
-            </div>
-          </div>
-        ),
-        { duration: 60000, id: "timeout", position: "top-center" },
-      );
-    }
-  }, [time]);
 
   const matchUsers = useMatchUsers();
   const [isCreatingMatchRequest, setIsCreatingMatchRequest] = useState(false);
@@ -177,6 +143,43 @@ const MatchRequestPage = () => {
   });
   // subscprtions api -- END
 
+
+  useEffect(() => {
+    if (time >= REQUEST_EXPIRY_TIME_SECS && curUserMatchRequest) {
+      console.log(curUserMatchRequest);
+      const { difficulty, category, matchType } = curUserMatchRequest;
+      const sameRequest = { difficulty, category, matchType };
+      deleteMatchRequest({ matchType: curUserMatchRequest.matchType });
+      toast(
+        (t) => (
+          <div className="flex flex-col justify-evenly text-slate-800">
+            <span className="text-center mb-2">No requests found 🫠.</span>
+            <div className="flex justify-stretch">
+              <button
+                className="border bg-blue-500 rounded-md text-slate-100 p-2 mr-1"
+                onClick={() => {
+                  toast.dismiss(t.id);
+                  createMatchRequest(sameRequest);
+                }}
+                type="button"
+              >
+                Recreate again
+              </button>
+              <button
+                className="border bg-stone-500 rounded-md text-slate-100 p-2"
+                onClick={() => toast.dismiss(t.id)}
+                type="button"
+              >
+                Dismiss
+              </button>
+            </div>
+          </div>
+        ),
+        { duration: 60000, id: "timeout", position: "top-center" },
+      );
+    }
+  }, [time]);
+
   useEffect(() => {
     if (!curUserMatchRequest) {
       if (intervalRef.current) {

From 73204977f1f817106079ba224bf5ad7177a49899 Mon Sep 17 00:00:00 2001
From: "Au Chen Xi, Gabriel" <au.gabriel@u.nus.edu>
Date: Mon, 13 Nov 2023 23:48:43 +0800
Subject: [PATCH 3/6] Add the isfetching check

---
 src/pages/collab/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/collab/index.tsx b/src/pages/collab/index.tsx
index 7dd33ef..5df56c4 100644
--- a/src/pages/collab/index.tsx
+++ b/src/pages/collab/index.tsx
@@ -73,7 +73,7 @@ const MatchRequestPage = () => {
   const { data: numOfOnlineUsers = 0, refetch: refetchGetNumOfMatchReqs } =
     api.matchRequest.getNumOfMatchRequests.useQuery();
 
-  const { data: curUserMatchRequest, refetch: refetchCurrentUserRequest } =
+  const { data: curUserMatchRequest, refetch: refetchCurrentUserRequest, isFetching: isCurUserMatchFetching } =
     api.matchRequest.getCurrentUserRequest.useQuery(undefined, {
       onError() {
         toast.error("Error loading current user's match request");
@@ -145,8 +145,7 @@ const MatchRequestPage = () => {
 
 
   useEffect(() => {
-    if (time >= REQUEST_EXPIRY_TIME_SECS && curUserMatchRequest) {
-      console.log(curUserMatchRequest);
+    if (time >= REQUEST_EXPIRY_TIME_SECS && curUserMatchRequest && !isCurUserMatchFetching) {
       const { difficulty, category, matchType } = curUserMatchRequest;
       const sameRequest = { difficulty, category, matchType };
       deleteMatchRequest({ matchType: curUserMatchRequest.matchType });
@@ -178,7 +177,7 @@ const MatchRequestPage = () => {
         { duration: 60000, id: "timeout", position: "top-center" },
       );
     }
-  }, [time]);
+  }, [time, curUserMatchRequest]);
 
   useEffect(() => {
     if (!curUserMatchRequest) {

From a5fa65fd8434bb5a3bd38ddd1b80d70029e981bd Mon Sep 17 00:00:00 2001
From: "Au Chen Xi, Gabriel" <au.gabriel@u.nus.edu>
Date: Mon, 13 Nov 2023 23:49:27 +0800
Subject: [PATCH 4/6] fix wrong field use

---
 src/pages/collab/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/collab/index.tsx b/src/pages/collab/index.tsx
index 5df56c4..8176de7 100644
--- a/src/pages/collab/index.tsx
+++ b/src/pages/collab/index.tsx
@@ -177,7 +177,7 @@ const MatchRequestPage = () => {
         { duration: 60000, id: "timeout", position: "top-center" },
       );
     }
-  }, [time, curUserMatchRequest]);
+  }, [time, isCurUserMatchFetching]);
 
   useEffect(() => {
     if (!curUserMatchRequest) {

From 609a16d0f7395ed14543257f0a7726f782b5d172 Mon Sep 17 00:00:00 2001
From: "Au Chen Xi, Gabriel" <au.gabriel@u.nus.edu>
Date: Mon, 13 Nov 2023 23:51:01 +0800
Subject: [PATCH 5/6] Add fetching check to timer hook

---
 src/pages/collab/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/collab/index.tsx b/src/pages/collab/index.tsx
index 8176de7..da287b2 100644
--- a/src/pages/collab/index.tsx
+++ b/src/pages/collab/index.tsx
@@ -180,6 +180,7 @@ const MatchRequestPage = () => {
   }, [time, isCurUserMatchFetching]);
 
   useEffect(() => {
+    if (isCurUserMatchFetching) return;
     if (!curUserMatchRequest) {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
@@ -201,7 +202,7 @@ const MatchRequestPage = () => {
     intervalRef.current = setInterval(() => {
       setTime((prev) => prev + 1);
     }, 1000);
-  }, [curUserMatchRequest]);
+  }, [curUserMatchRequest, isCurUserMatchFetching]);
 
   const {
     data: manualRequests = [],

From 74ddb3b80c7d51d529f8ca71f58b98b7b4898d78 Mon Sep 17 00:00:00 2001
From: "Au Chen Xi, Gabriel" <au.gabriel@u.nus.edu>
Date: Tue, 14 Nov 2023 00:02:06 +0800
Subject: [PATCH 6/6] Force timer to stop regardless when time exceeded

---
 src/pages/collab/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/collab/index.tsx b/src/pages/collab/index.tsx
index da287b2..008e677 100644
--- a/src/pages/collab/index.tsx
+++ b/src/pages/collab/index.tsx
@@ -149,6 +149,7 @@ const MatchRequestPage = () => {
       const { difficulty, category, matchType } = curUserMatchRequest;
       const sameRequest = { difficulty, category, matchType };
       deleteMatchRequest({ matchType: curUserMatchRequest.matchType });
+      stopTimer();
       toast(
         (t) => (
           <div className="flex flex-col justify-evenly text-slate-800">