Revert "Collab Service"

Author: rjkoh

backend/user-service/services/tokenService.js

@@ -7,7 +7,7 @@ import { UnauthorisedError } from "../utils/httpErrors.js";
 class TokenService {
   static generateAccessToken(user) {
     const accessToken = jwt.sign(
-      { id: user.id, isAdmin: user.isAdmin, username: user.username },
+      { id: user.id, isAdmin: user.isAdmin },
       jwtConfig.accessTokenSecret,
       jwtConfig.accessTokenOptions
     );
@@ -16,7 +16,7 @@ class TokenService {
 
   static generateRefreshToken(user) {
     const refreshToken = jwt.sign(
-      { id: user.id, jti: uuidv4(), username: user.username },
+      { id: user.id, jti: uuidv4() },
       jwtConfig.refreshTokenSecret,
       jwtConfig.refreshTokenOptions
     );

frontend/src/domain/context/CollaborationContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, ReactNode, useEffect, useMemo, useCallback } from "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,7 +20,6 @@ interface CollaborationContextType {
     execResult: CodeExecResult | null;
     setRoomId: (roomId: string) => void;
     connectedUsers: string[];
-    disconnect: () => void;
 }
 
 const CollaborationContext = createContext<CollaborationContextType | undefined>(undefined);
@@ -42,81 +41,86 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
     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);
 
-    const disconnect = useCallback(() => {
-        binding?.destroy();
-        provider?.destroy();
-        ydoc?.destroy();
-        setConnectedUsers([]);
-        setProvider(null);
-        setBinding(null);
-        setRoomId(null);
-    }, [binding, provider, ydoc]);
-
+    // This effect manages the lifetime of the yjs doc and the provider
     useEffect(() => {
-        if (!roomId) return;
-
-        const newProvider = new WebsocketProvider("ws://localhost:1234", roomId, ydoc);
-        setProvider(newProvider);
-
-        newProvider.awareness.setLocalStateField(USERNAME, username);
-        newProvider.awareness.on("change", () => {
-            const users = Array.from(newProvider.awareness.getStates().values());
-            const uniqueUsers = new Set(users.map((user) => user[USERNAME])); // Use Set for uniqueness
-            setConnectedUsers(Array.from(uniqueUsers)); // Convert Set back to Array
+        if (roomId == null) {
+            return;
+        }
+        const provider = new WebsocketProvider("ws://localhost:1234", roomId, ydoc);
+        setProvider(provider);
+
+        provider.awareness.setLocalStateField(USERNAME, username);
+        provider.awareness.on("change", (update: any) => {
+            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 () => {
-            disconnect();
+            provider?.destroy();
+            ydoc?.destroy();
         };
-    }, [ydoc, roomId, username, USERNAME, disconnect]);
+    }, [ydoc, roomId]);
 
+    // This effect manages the lifetime of the editor binding
     useEffect(() => {
-        if (!provider || !editor?.getModel()) return;
+        if (provider == null || editor == null || editor.getModel() == null) {
+            return;
+        }
 
-        const newBinding = new MonacoBinding(
+        const binding = new MonacoBinding(
             ydoc.getText("monaco"),
             editor.getModel()!,
             new Set([editor]),
-            provider.awareness
+            provider?.awareness
         );
-        setBinding(newBinding);
+
+        setBinding(binding);
 
         ymap.observe((event) => {
             event.changes.keys.forEach((change, key) => {
                 if (key === SELECTED_LANGUAGE) {
                     const language: Language = ymap.get(SELECTED_LANGUAGE);
                     setSelectedLanguage(language);
-                    monaco.editor.setModelLanguage(editor.getModel()!, language.language);
+                    const model = editor.getModel();
+                    monaco.editor.setModelLanguage(model!, language.language);
                 }
             });
         });
 
+        // Set the editor's language
         const language: Language = ymap.get(SELECTED_LANGUAGE);
-        monaco.editor.setModelLanguage(editor.getModel()!, language?.language ?? "javascript");
+        const model = editor.getModel();
+        monaco.editor.setModelLanguage(model!, language?.language ?? "javascript");
 
-        return () => newBinding.destroy();
-    }, [ydoc, provider, editor, ymap, SELECTED_LANGUAGE]);
+        return () => {
+            binding.destroy();
+        };
+    }, [ydoc, provider, editor, ymap]);
 
     useEffect(() => {
         initialiseLanguages();
     }, []);
 
     const initialiseLanguages = async () => {
+        // Initialise language dropdown
         const allLanguages = monaco.languages.getLanguages();
         const pistonLanguageVersions = await PistonClient.getLanguageVersions();
         setLanguages(
             allLanguages
                 .filter((lang) => pistonLanguageVersions.some((pistonLang: any) => pistonLang.language === lang.id))
                 .map((lang) => ({
-                    alias: lang.aliases?.[0] || lang.id,
+                    alias: lang.aliases && lang.aliases.length > 0 ? lang.aliases[0] : lang.id,
                     language: lang.id,
                     version: pistonLanguageVersions.find((pistonLang: any) => pistonLang.language === lang.id)?.version
                 }))
@@ -131,9 +135,11 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         try {
             setIsExecuting(true);
             const sourceCode = editor?.getValue();
-            if (!sourceCode) return;
-
-            const output = await PistonClient.executeCode(selectedLanguage, sourceCode);
+            if (!sourceCode) {
+                // TODO
+                return;
+            }
+            const output: CodeExecResult = await PistonClient.executeCode(selectedLanguage, sourceCode);
             setExecResult(output);
         } catch (e) {
             toast.error("There was an issue running the code");
@@ -157,8 +163,7 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
                 handleExecuteCode,
                 isExecuting,
                 execResult,
-                connectedUsers,
-                disconnect
+                connectedUsers
             }}
         >
             {children}

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

@@ -1,22 +1,12 @@
 .submitButton {
-    background-color: #ffa500 !important;
-    color: black !important;
-    font-weight: bold !important;
+    background-color: #ffa500;
 }
 
 .runButton {
-    background-color: #1a1a1a !important;
-    color: white !important;
-}
-
-.runButton:hover {
-    background-color: #333 !important;
-}
-
-.submitButton:hover {
-    background-color: #ffb52e !important;
+    background-color: black;
+    color: white;
 }
 
 button {
     width: fit-content;
-}
+}

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

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState } from "react";
 import styles from "./CodeEditor.module.css";
-import Editor from "@monaco-editor/react";
+import Editor, { Monaco } from "@monaco-editor/react";
 import { Button, Spin } from "antd";
 import { useCollaboration } from "domain/context/CollaborationContext";
 import * as monaco from "monaco-editor";
@@ -15,47 +15,22 @@ interface CodeEditorProps {
 const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
     const { onEditorIsMounted, isExecuting, setRoomId, connectedUsers } = useCollaboration();
     const [theme, setTheme] = useState("vs-light");
-    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        let resizeObserver: ResizeObserver | null = null;
-        let resizeTimeout: NodeJS.Timeout;
-
-        if (containerRef.current && editorRef.current) {
-            resizeObserver = new ResizeObserver((entries) => {
-                // Debounce resize events
-                clearTimeout(resizeTimeout);
-                resizeTimeout = setTimeout(() => {
-                    if (editorRef.current) {
-                        editorRef.current.layout();
-                    }
-                }, 100);
-            });
-
-            resizeObserver.observe(containerRef.current);
-        }
-
-        return () => {
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-            clearTimeout(resizeTimeout);
-        };
-    }, []);
 
     const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
-        editorRef.current = editor;
         onEditorIsMounted(editor);
         setRoomId(roomId);
     };
 
     const handleToggleTheme = () => {
-        setTheme(theme === "vs-light" ? "vs-dark" : "vs-light");
+        if (theme === "vs-light") {
+            setTheme("vs-dark");
+        } else {
+            setTheme("vs-light");
+        }
     };
 
     return (
-        <div className={styles.container} ref={containerRef}>
+        <div className={styles.container}>
             <div className={styles.toolbar}>
                 <div className={styles.toolbarLeft}>
                     <LanguageSelector />
@@ -94,8 +69,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
                     options={{
                         minimap: { enabled: false },
                         scrollbar: { verticalScrollbarSize: 4 },
-                        formatOnPaste: true,
-                        automaticLayout: false // Disable automatic layout
+                        formatOnPaste: true
                     }}
                 />
             </div>