fix: session end event handling

Author: brennalaurentan

feature-collaboration-ui/frontend/peerprep-collab/src/app/collab/page.tsx

@@ -132,15 +132,21 @@ function CollabPage() {
     ws.onmessage = (e) => {
       const msg = JSON.parse(e.data);
       console.log("[CollabPage] Received message:", msg.type);
+      // if (msg.type === "session:end") {
+      //   console.log("[CollabPage] Received session:end message:", msg);
+      //   document.body.style.transition = "opacity 0.4s ease";
+      //   document.body.style.opacity = "0";
+      //   setTimeout(() => {
+      //     const dashboardUrl =
+      //       process.env.NEXT_PUBLIC_DASHBOARD_URL || "http://localhost:3000/dashboard";
+      //     window.location.href = dashboardUrl;
+      //   }, 400);
+      // }
       if (msg.type === "session:end") {
         console.log("[CollabPage] Received session:end message:", msg);
-        document.body.style.transition = "opacity 0.4s ease";
-        document.body.style.opacity = "0";
-        setTimeout(() => {
-          const dashboardUrl =
-            process.env.NEXT_PUBLIC_DASHBOARD_URL || "http://localhost:3000/dashboard";
-          window.location.href = dashboardUrl;
-        }, 400);
+        if ((window as any).__sessionEndDispatched) return;
+        (window as any).__sessionEndDispatched = true;
+        window.dispatchEvent(new CustomEvent("session-end", { detail: msg }));
       }
     };
 
@@ -214,6 +220,27 @@ function CollabPage() {
     })();
   }, [sessionId, paramUserId]);
 
+  // handle session end event
+  useEffect(() => {
+    const onSessionEnd = () => {
+      if ((window as any).__sessionEndHandled) return;
+      (window as any).__sessionEndHandled = true;
+
+      alert("Your partner has ended the session. Returning to dashboard...");
+      document.body.style.transition = "opacity 0.4s ease";
+      document.body.style.opacity = "0";
+
+      setTimeout(() => {
+        const dashboardUrl =
+          process.env.NEXT_PUBLIC_DASHBOARD_URL || "http://localhost:3000/dashboard";
+        window.location.href = dashboardUrl;
+      }, 400);
+    };
+
+    window.addEventListener("session-end", onSessionEnd);
+    return () => window.removeEventListener("session-end", onSessionEnd);
+  }, []);
+
 
   // Show loading state during hydration
   if (!isClient) {

feature-collaboration-ui/frontend/peerprep-collab/src/components/collab/ChatPane.tsx

@@ -41,11 +41,18 @@ export default function ChatPane() {
       setIsAILoading(false);
     }
 
-    // Handle session end
+    // // Handle session end
+    // if (msg.type === "session:end") {
+    //   console.log("[ChatPane] Session ended, broadcasting to page");
+    //   // Trigger session end event that the collab page listens to
+    //   window.dispatchEvent(new CustomEvent('session-end', { detail: msg }));
+    // }
+
+    // Handle session end (dispatch only, no alert/redirect)
     if (msg.type === "session:end") {
-      console.log("[ChatPane] Session ended, broadcasting to page");
-      // Trigger session end event that the collab page listens to
-      window.dispatchEvent(new CustomEvent('session-end', { detail: msg }));
+      if ((window as any).__sessionEndDispatched) return;
+      (window as any).__sessionEndDispatched = true;
+      window.dispatchEvent(new CustomEvent("session-end", { detail: msg }));
     }
 
     // Initialize chat history
@@ -60,11 +67,11 @@ export default function ChatPane() {
       }
     }
 
-    if (msg.type === "session:end") {
-        alert("Your partner has ended the session. Returning to dashboard...");
-        const dashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL || "http://localhost:3000/dashboard";
-        window.location.href = dashboardUrl;
-    }
+    // if (msg.type === "session:end") {
+    //     alert("Your partner has ended the session. Returning to dashboard...");
+    //     const dashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL || "http://localhost:3000/dashboard";
+    //     window.location.href = dashboardUrl;
+    // }
   }
 
   // Initialize WebSocket

feature-collaboration-ui/frontend/peerprep-collab/src/components/collab/CodePane.tsx

@@ -219,9 +219,15 @@ export default function CodePane({ question }: { question: any }) {
             if (typeof evt.data === "string") {
                 try {
                     const msg = JSON.parse(evt.data);
+                    // if (msg.type === "session:end") {
+                    //     console.log("[CodePane] Received session:end via YJS WebSocket");
+                    //     window.dispatchEvent(new CustomEvent('session-end', { detail: msg }));
+                    // }
                     if (msg.type === "session:end") {
                         console.log("[CodePane] Received session:end via YJS WebSocket");
-                        window.dispatchEvent(new CustomEvent('session-end', { detail: msg }));
+                        if ((window as any).__sessionEndDispatched) return;
+                        (window as any).__sessionEndDispatched = true;
+                        window.dispatchEvent(new CustomEvent("session-end", { detail: msg }));
                     }
                 } catch (e) {
                     // Not JSON, ignore