linked room and user logic

frontend/src/hooks/useCollaboration.tsx

@@ -53,21 +53,21 @@ const useCollaboration = ({
   const router = useRouter();
   const { id } = router.query;
 
-  useEffect(() => {
-    if (id && currentUser) {
-      try {
-        const response = fetchRoomData(id?.toString(), currentUser);
-        response.then((res) => {
-          if (res.message === "Room exists") {
-            console.log(res);
-            setQuestionId(res.questionId);
-          }
-        });
-      } catch (err) {
-        toast.error((err as Error).message);
-      }
-    }
-  }, [id, currentUser]);
+  // useEffect(() => {
+  //   if (id && currentUser) {
+  //     try {
+  //       const response = fetchRoomData(id?.toString(), currentUser);
+  //       response.then((res) => {
+  //         if (res.message === "Room exists") {
+  //           console.log(res);
+  //           setQuestionId(res.questionId);
+  //         }
+  //       });
+  //     } catch (err) {
+  //       toast.error((err as Error).message);
+  //     }
+  //   }
+  // }, [id, currentUser]);
 
   useEffect(() => {
     if (currentUser) {

frontend/src/pages/room/[id].tsx

@@ -9,15 +9,17 @@ import { Difficulty, Question } from "../../types/QuestionTypes";
 import { Match } from "../../types/MatchTypes";
 import { useQuestions } from "@/hooks/useQuestions";
 import { useMatch } from "@/hooks/useMatch";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { MrMiyagi } from "@uiball/loaders";
 import { useMatchmaking } from "@/hooks/useMatchmaking";
 import Solution from "@/components/room/solution";
+import { AuthContext } from "@/contexts/AuthContext";
 
 export default function Room() {
   const router = useRouter();
   const roomId = router.query.id as string;
-  const userId = (router.query.userId as string) || "user1";
+  const { user: currentUser } = useContext(AuthContext);
+  const userId = (currentUser.uid as string) || "user1";
   const disableVideo =
     (router.query.disableVideo as string)?.toLowerCase() === "true";
 
@@ -145,9 +147,7 @@ export default function Room() {
                   </div>
                 ) : question != null && "solution" in question ? (
                   <TabsContent value="solution">
-                    <Solution
-                      question={question}
-                    />
+                    <Solution question={question} />
                   </TabsContent>
                 ) : (
                   <div className="flex h-full justify-center items-center">

frontend/src/providers/MatchmakingProvider.tsx

@@ -9,6 +9,8 @@ import { io, Socket } from "socket.io-client";
 import { Match } from "@prisma/client";
 import { AuthContext } from "@/contexts/AuthContext";
 import { wsMatchProxyGatewayAddress } from "@/gateway-address/gateway-address";
+import { useRouter } from "next/router";
+import { toast } from "react-toastify";
 
 const SERVER_URL = wsMatchProxyGatewayAddress;
 
@@ -40,6 +42,7 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
   const [error, setError] = useState<string>("");
 
   const { user: currentUser, authIsReady } = useContext(AuthContext);
+  const router = useRouter();
 
   const generateRandomNumber = () => {
     // Return a random number either 0 or 1 as a string
@@ -70,6 +73,20 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
     }
   }, [currentUser]);
 
+  useEffect(() => {
+    if (!socket) return;
+
+    // else we should join the room if they are in an exsiting match
+    // (i.e. they refreshed the page)
+    if (
+      match &&
+      router.route !== "/interviews/match-found" &&
+      router.route !== "/interviews/find-match"
+    ) {
+      router.push(`/room/${match?.roomId}`);
+    }
+  }, [match]);
+
   useEffect(() => {
     if (!socket) return;
 
@@ -87,7 +104,7 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
     socket.on("matchLeft", (match: Match) => {
       console.log("Match left:", match);
       setMatch(null);
-    })
+    });
 
     socket.on("receiveMessage", (message: string) => {
       console.log("Message received:", message);