Update Match found alert and collab server down feedback

Author: modembcc

matching-service-api/log/matching_service_api.log

@@ -166,3 +166,5 @@ time="2024-10-28T22:07:05+08:00" level=info msg="request from user 67188e6ebe712
 time="2024-10-28T22:07:05+08:00" level=info msg="request from user 6702c9a3f1217a1b2123575b successfully published"
 time="2024-10-28T22:07:25+08:00" level=info msg="request from user 67188e6ebe7127ec5d472f15 successfully published"
 time="2024-10-28T22:07:25+08:00" level=info msg="request from user 6702c9a3f1217a1b2123575b successfully published"
+time="2024-10-28T22:09:51+08:00" level=info msg="request from user 671f1bdf0b0e2619aaa4dd85 successfully published"
+time="2024-10-28T22:09:52+08:00" level=info msg="request from user 67188e6ebe7127ec5d472f15 successfully published"

peerprep/components/questionpage/CollabEditor.tsx

@@ -56,6 +56,7 @@ export default function CollabEditor({ question, roomID, authToken }: Props) {
   const [language, setLanguage] = useState("python");
   const [value, setValue] = useState("def foo:\n  pass");
   const [socket, setSocket] = useState<WebSocket | null>(null);
+  const [connected, setconnected] = useState(false);
   const router = useRouter();
 
   const handleOnChange = (newValue: string) => {
@@ -74,10 +75,13 @@ export default function CollabEditor({ question, roomID, authToken }: Props) {
   useEffect(() => {
     if (!roomID) return;
 
+    console.log("Yep");
+
     const newSocket = new WebSocket(`ws://localhost:4000/ws?roomID=${roomID}`);
 
     newSocket.onopen = () => {
       console.log("WebSocket connection established");
+      setconnected(true);
 
       const authMessage = {
         type: "auth",
@@ -168,12 +172,21 @@ export default function CollabEditor({ question, roomID, authToken }: Props) {
           }
         />
 
-        {roomID && (
+        {roomID && connected ? (
           <div className="h-full align-middle">
             <PeerprepButton onClick={handleCloseConnection}>
               Close Room
             </PeerprepButton>
           </div>
+        ) : (
+          <div className="h-full align-middle">
+            <PeerprepButton
+              onClick={handleCloseConnection}
+              className="disabled"
+            >
+              Disconnected. Check logs.
+            </PeerprepButton>
+          </div>
         )}
       </div>
       <AceEditor

peerprep/components/questionpage/Matchmaking.tsx

@@ -129,11 +129,12 @@ const Matchmaking = () => {
     const matchRes: MatchResponse = res as MatchResponse;
     console.log("Match found!");
     // display in a popup for now
-    const message = `Room ID: ${matchRes.data.roomId}
-    User1: ${matchRes.data.user1}
-    User2: ${matchRes.data.user2}
-    Question: ${matchRes.data.questionId}
-    `;
+    // const message = `Room ID: ${matchRes.data.roomId}
+    // User1: ${matchRes.data.user1}
+    // User2: ${matchRes.data.user2}
+    // Question: ${matchRes.data.questionId}
+    // `;
+    const message = "Match found! Redirecting to collab page...";
     window.alert(message);
     // redirect to question page
     router.push(

storage-blob-api/log/matching_service_api.log

@@ -178,3 +178,5 @@ time="2024-10-28T22:07:10+08:00" level=info msg="Request handled successfully"
 time="2024-10-28T22:07:10+08:00" level=info msg="Request handled successfully"
 time="2024-10-28T22:07:30+08:00" level=info msg="Request handled successfully"
 time="2024-10-28T22:07:30+08:00" level=info msg="Request handled successfully"
+time="2024-10-28T22:09:56+08:00" level=info msg="Request handled successfully"
+time="2024-10-28T22:09:57+08:00" level=info msg="Request handled successfully"