PEER-234: Add userId

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/entrypoint.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
 
-envsubst '${FRONTEND_PORT} ${VITE_USER_SERVICE} ${VITE_QUESTION_SERVICE} ${VITE_COLLAB_SERVICE} ${VITE_COLLAB_WS} ${VITE_MATCHING}' < /etc/nginx/nginx.conf.template > /etc/nginx/conf.d/default.conf
+envsubst '${FRONTEND_PORT} ${VITE_USER_SERVICE} ${VITE_QUESTION_SERVICE} ${VITE_COLLAB_SERVICE} ${VITE_COLLAB_WS} ${VITE_MATCHING_SERVICE}' < /etc/nginx/nginx.conf.template > /etc/nginx/conf.d/default.conf
 
 nginx -g 'daemon off;'

frontend/package.json

@@ -23,8 +23,8 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.56.2",
     "@tanstack/react-table": "^8.20.5",

frontend/src/components/blocks/interview/editor.tsx

@@ -1,8 +1,10 @@
+import { ChevronLeftIcon } from '@radix-ui/react-icons';
 import { useWindowSize } from '@uidotdev/usehooks';
 import type { LanguageName } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
 import { useMemo, useState } from 'react';
 
+import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import {
   Select,
@@ -13,8 +15,6 @@ import {
 } from '@/components/ui/select';
 import { getTheme, type IEditorTheme, languages, themeOptions } from '@/lib/editor/extensions';
 import { useCollab } from '@/lib/hooks/use-collab';
-import { Button } from '@/components/ui/button';
-import { ChevronLeftIcon } from '@radix-ui/react-icons';
 
 const EXTENSION_HEIGHT = 250;
 const MIN_EDITOR_HEIGHT = 350;
@@ -77,7 +77,7 @@ export const Editor = ({ room }: EditorProps) => {
                 }}
                 key={index}
               >
-                <span className='translate-x-[calc(-50%+12px)]'>{member.name}</span>
+                <span className='translate-x-[calc(-50%+12px)]'>{member.userId}</span>
               </div>
             ))}
           </div>

frontend/src/lib/hooks/use-collab.ts

@@ -7,6 +7,7 @@ import * as Y from 'yjs';
 
 import { extensions as baseExtensions, getLanguage } from '@/lib/editor/extensions';
 import { COLLAB_WS } from '@/services/api-clients';
+import { getUserId } from '@/services/user-service';
 
 // credit: https://github.com/yjs/y-websocket
 const usercolors = [
@@ -28,6 +29,7 @@ type IYjsUserState = { user: { name: string; userId: string; color: string; colo
 
 // TODO: Test if collab logic works
 export const useCollab = (roomId: string) => {
+  const [userId] = useState(getUserId());
   const [code, setCode] = useState('');
   const editorRef = useRef<ReactCodeMirrorRef>(null);
   const [extensions, setExtensions] = useState<Array<Extension>>(baseExtensions);
@@ -44,6 +46,7 @@ export const useCollab = (roomId: string) => {
     if (editorRef.current) {
       const doc = new Y.Doc();
       let provider = null;
+
       try {
         provider = new WebsocketProvider(COLLAB_WS, roomId, doc);
         provider.connect();
@@ -54,6 +57,7 @@ export const useCollab = (roomId: string) => {
         );
         return;
       }
+
       const ytext = doc.getText('codemirror');
       const undoManager = new Y.UndoManager(ytext);
       const awareness = provider.awareness;
@@ -72,7 +76,7 @@ export const useCollab = (roomId: string) => {
       // TODO: Get user name, ID
       const userState: IYjsUserState['user'] = {
         name: `Anon`,
-        userId: '',
+        userId: userId ?? 'null',
         color,
         colorLight: light,
       };
@@ -81,12 +85,14 @@ export const useCollab = (roomId: string) => {
       const collabExt = yCollab(ytext, awareness, { undoManager });
       setCode(ytext.toString());
       setExtensions([...extensions, collabExt]);
+
       return () => {
         doc.destroy();
-        provider.disconnect();
+        provider.destroy();
       };
     }
   }, [editorRef, roomId]);
+
   return {
     editorRef,
     extensions: [...extensions, langExtension],