Add connection status of users

Author: njxue

frontend/src/domain/context/CollaborationContext.tsx

@@ -1,5 +1,4 @@
-import React, { createContext, useState, useContext, ReactNode, useEffect, useRef, useMemo } from "react";
-import { Monaco } from "@monaco-editor/react";
+import React, { createContext, useState, useContext, ReactNode, useEffect, useMemo } from "react";
 import * as Y from "yjs";
 import * as monaco from "monaco-editor";
 import { MonacoBinding } from "y-monaco";
@@ -20,6 +19,7 @@ interface CollaborationContextType {
     isExecuting: boolean;
     execResult: CodeExecResult | null;
     setRoomId: (roomId: string) => void;
+    connectedUsers: string[];
 }
 
 const CollaborationContext = createContext<CollaborationContextType | undefined>(undefined);
@@ -36,14 +36,17 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         version: "1.32.3",
         alias: "Javascript"
     });
-    const [languages, setLanguages] = useState<Language[]>([]);
-    const [execResult, setExecResult] = useState<CodeExecResult | null>(null);
-    const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
     const ydoc = useMemo(() => new Y.Doc(), []);
     const ymap: Y.Map<any> = useMemo(() => ydoc.getMap("sharedMap"), [ydoc]);
 
     const [roomId, setRoomId] = useState<string | null>(null);
+
+    const [languages, setLanguages] = useState<Language[]>([]);
+    const [execResult, setExecResult] = useState<CodeExecResult | null>(null);
+    const [isExecuting, setIsExecuting] = useState<boolean>(false);
+    const [connectedUsers, setConnectedUsers] = useState<string[]>([]);
+
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
     const [provider, setProvider] = useState<WebsocketProvider | null>(null);
     const [binding, setBinding] = useState<MonacoBinding | null>(null);
@@ -55,11 +58,14 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         }
         const provider = new WebsocketProvider("ws://localhost:1234", roomId, ydoc);
         setProvider(provider);
+
         provider.awareness.setLocalStateField(USERNAME, username);
         provider.awareness.on("change", (update: any) => {
-            const users = provider.awareness.getStates();
+            const users = Array.from(provider.awareness.getStates().values());
+            setConnectedUsers(users.map((user) => user[USERNAME]));
             // TODO: Some UI feedback about connection status of the other user
         });
+
         return () => {
             provider?.destroy();
             ydoc?.destroy();
@@ -156,7 +162,8 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
                 handleChangeLanguage,
                 handleExecuteCode,
                 isExecuting,
-                execResult
+                execResult,
+                connectedUsers
             }}
         >
             {children}

frontend/src/presentation/components/CodeEditor/CodeEditor.module.css

@@ -16,6 +16,15 @@
     align-items: center;
 }
 
+.toolbarLeft,
+.toolbarRight {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 8px;
+}
+
+.toolbarLeft,
 .editor {
     flex: 1;
 }
@@ -36,3 +45,30 @@
 .pendingExecution p {
     padding: 0;
 }
+
+.connectionStatusContainer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 24px;
+}
+
+.connectionStatus {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.statusUsername {
+    line-height: 100%;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.greenCircle {
+    width: 10px;
+    height: 10px;
+    background-color: rgb(18, 221, 18);
+    border-radius: 50%;
+}

frontend/src/presentation/components/CodeEditor/CodeEditor.tsx

@@ -13,7 +13,7 @@ interface CodeEditorProps {
 }
 
 const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
-    const { onEditorIsMounted, isExecuting, setRoomId } = useCollaboration();
+    const { onEditorIsMounted, isExecuting, setRoomId, connectedUsers } = useCollaboration();
     const [theme, setTheme] = useState("vs-light");
 
     const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
@@ -32,21 +32,34 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
     return (
         <div className={styles.container}>
             <div className={styles.toolbar}>
-                <LanguageSelector />
-                {isExecuting && (
-                    <div className={styles.pendingExecution}>
-                        <Spin />
-                        <p>Running...</p>
+                <div className={styles.toolbarLeft}>
+                    <LanguageSelector />
+                    {isExecuting && (
+                        <div className={styles.pendingExecution}>
+                            <Spin />
+                            <p>Running...</p>
+                        </div>
+                    )}
+                </div>
+                <div className={styles.toolbarRight}>
+                    <div className={styles.connectionStatusContainer}>
+                        {connectedUsers.map((user) => (
+                            <div key={user} className={styles.connectionStatus}>
+                                <div className={styles.greenCircle}></div>
+                                <div className={styles.statusUsername}>{user}</div>
+                            </div>
+                        ))}
                     </div>
-                )}
-                <div className={styles.buttonGroup}>
-                    <Button
-                        onClick={handleToggleTheme}
-                        type="text"
-                        icon={theme === "vs-light" ? <SunOutlined /> : <MoonFilled />}
-                    />
 
-                    <CodeActionButtons disabled={isExecuting} />
+                    <div className={styles.buttonGroup}>
+                        <Button
+                            onClick={handleToggleTheme}
+                            type="text"
+                            icon={theme === "vs-light" ? <SunOutlined /> : <MoonFilled />}
+                        />
+
+                        <CodeActionButtons disabled={isExecuting} />
+                    </div>
                 </div>
             </div>
             <div className={styles.editor}>