Change connected user status to fetch using provider awareness

Author: bensohh

apps/frontend/src/app/collaboration/[id]/page.tsx

@@ -50,7 +50,7 @@ export default function CollaborationPage(props: CollaborationProps) {
     undefined
   );
   const [currentUser, setCurrentUser] = useState<string | undefined>(undefined);
-  const [matchedUser, setMatchedUser] = useState<string | undefined>(undefined);
+  const [matchedUser, setMatchedUser] = useState<string>("Not Connected");
   const [sessionDuration, setSessionDuration] = useState<number>(() => {
     const storedTime = localStorage.getItem("session-duration");
     return storedTime ? parseInt(storedTime) : 0;
@@ -121,7 +121,7 @@ export default function CollaborationPage(props: CollaborationProps) {
 
     // Set states from localstorage
     setCollaborationId(collabId);
-    setMatchedUser(matchedUser);
+    // setMatchedUser(matchedUser); // TODO: remove after being handled in collabeditor
     setCurrentUser(currentUser);
 
     // Fetch question and set question states
@@ -169,13 +169,10 @@ export default function CollaborationPage(props: CollaborationProps) {
   const handleCloseCollaboration = () => {
     // Stop stopwatch
     stopStopwatch();
-    // Remove localstorage variable for stored session duration
-    localStorage.removeItem("session-duration"); // TODO: Remove this after collaboration backend data stored
-
     // Remove localstorage variables for collaboration
+    localStorage.removeItem("session-duration"); // TODO: Remove this after collaboration backend data stored
     localStorage.removeItem("user");
-    localStorage.removeItem("matchedUser");
-    localStorage.removeItem("collaId");
+    localStorage.removeItem("collabId");
     localStorage.removeItem("docRefId");
 
     // Redirect back to matching page
@@ -260,6 +257,7 @@ export default function CollaborationPage(props: CollaborationProps) {
                     user={currentUser}
                     collaborationId={collaborationId}
                     language={selectedLanguage}
+                    setMatchedUser={setMatchedUser}
                   />
                 )}
               </div>

apps/frontend/src/app/matching/MatchingModal.tsx

@@ -98,10 +98,6 @@ const MatchingModal: React.FC<MatchingModalProps> = ({
               matchingState.ok();
               setClosedType("joined");
               localStorage.setItem("user", matchingState.info.myName);
-              localStorage.setItem(
-                "matchedUser",
-                matchingState.info.partnerName
-              );
               localStorage.setItem("collabId", matchingState.info.matchId);
               localStorage.setItem("docRefId", matchingState.info.docRefId);
 

apps/frontend/src/components/CollaborativeEditor/CollaborativeEditor.tsx

@@ -1,5 +1,11 @@
 // Referenced from example in https://www.npmjs.com/package/y-codemirror.next
-import React, { useEffect, useRef, useState } from "react";
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import * as Y from "yjs";
 import { yCollab } from "y-codemirror.next";
 import { WebrtcProvider } from "y-webrtc";
@@ -19,6 +25,7 @@ interface CollaborativeEditorProps {
   user: string;
   collaborationId: string;
   language: string;
+  setMatchedUser: Dispatch<SetStateAction<string>>;
 }
 
 export const usercolors = [
@@ -148,6 +155,7 @@ const CollaborativeEditor = (props: CollaborativeEditorProps) => {
     const ydoc = new Y.Doc();
     const provider = new WebrtcProvider(props.collaborationId, ydoc, {
       signaling: [process.env.NEXT_PUBLIC_SIGNALLING_SERVICE_URL],
+      maxConns: 2,
     });
     const ytext = ydoc.getText("codemirror");
     const undoManager = new Y.UndoManager(ytext);
@@ -158,6 +166,26 @@ const CollaborativeEditor = (props: CollaborativeEditorProps) => {
       colorLight: userColor.light,
     });
 
+    // Check initial awareness states
+    const states = provider.awareness.getStates();
+    for (const [clientID, state] of Array.from(states)) {
+      if (state.user && state.user.name !== props.user) {
+        props.setMatchedUser(state.user.name);
+        break;
+      }
+    }
+
+    // Listen for awareness changes
+    provider.awareness.on("change", () => {
+      const updatedStates = provider.awareness.getStates();
+      for (const [clientID, state] of Array.from(updatedStates)) {
+        if (state.user && state.user.name !== props.user) {
+          props.setMatchedUser(state.user.name);
+          break;
+        }
+      }
+    });
+
     const state = EditorState.create({
       doc: ytext.toString(),
       extensions: [
@@ -173,11 +201,6 @@ const CollaborativeEditor = (props: CollaborativeEditorProps) => {
       parent: editorRef.current || undefined,
     });
 
-    // viewRef.current = new EditorView({
-    //   state: state,
-    //   parent: editorRef.current || undefined,
-    // });
-
     return () => {
       // Cleanup on component unmount
       console.log("unmounting collaboration editor"); // TODO: remove