Fix connection between FE and Yjs (#133)

* Install ESLint for Github Action

* Fix issue connecting to yjs from fe

Author: evanyan13

.github/workflows/docker-build-push-gcloud.yaml

@@ -41,5 +41,5 @@ jobs:
             
             # Build and push the Docker image
             echo "Building and pushing image for $service..."
-            docker buildx build --platform linux/amd64 -t $IMAGE_NAME -f ./backend/$service/Dockerfile ./backend/$service --push
+            docker build --platform linux/amd64 -t $IMAGE_NAME -f ./backend/$service/Dockerfile ./backend/$service --push
           done

backend/y-websocket-service/src/yjs.gateway.ts

@@ -29,16 +29,18 @@ export class YjsGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
   async handleConnection(client: WebSocket, request: Request) {
     try {
+      console.log('New connection:', request.url);
       const url = new URL(request.url, 'http://${request.headers.host}');
       const sessionId = url.searchParams.get('sessionId');
-      // roomId is appended to the end of the URL like so /yjs?sessionId=123&userId=456/roomId789
-      // Thus the reason to split the userIdParam by '/' to get the userId and roomId
-      // Very hacky. App might break if param order changes
       const userIdParam = url.searchParams.get('userId');
-      const userId = userIdParam.split('/')[0];
-      const roomId = userIdParam.split('/')[1];
 
-      setupWSConnection(client, request, { docName: roomId, gc: true });
+      if (!userIdParam || !userIdParam.includes('/')) {
+        console.error('Invalid user ID parameter');
+        client.close(1008, 'Invalid user ID parameter');
+        return;
+      }
+
+      const [userId, roomId] = userIdParam.split('/');
 
       if (!sessionId) {
         console.error('No session ID provided');
@@ -52,7 +54,16 @@ export class YjsGateway implements OnGatewayConnection, OnGatewayDisconnect {
         return;
       }
 
-      console.log('Session ID:', sessionId, 'User ID:', userId);
+      console.log(
+        'Session ID:',
+        sessionId,
+        'User ID:',
+        userId,
+        'Room ID:',
+        roomId,
+      );
+
+      setupWSConnection(client, request, { docName: roomId, gc: true });
 
       const sessionDetails = await this.validateSessionDetails(
         sessionId,

frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditor.tsx

@@ -163,10 +163,10 @@ export default function CollaborativeEditor({
           minimap: { enabled: false },
         }}
         defaultValue={defaultEditorValues[language]}
-        // value={code[language]}
-        // onChange={(value) => {
-        //   setCode((prevCode) => ({ ...prevCode, [language]: value || "" }));
-        // }}
+      // value={code[language]}
+      // onChange={(value) => {
+      //   setCode((prevCode) => ({ ...prevCode, [language]: value || "" }));
+      // }}
       />
     </div>
   );

frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditorTab.tsx

@@ -5,7 +5,7 @@ import { useSessionContext } from "@/contexts/SessionContext";
 export default function CollaborativeEditorTab() {
   const {sessionId, userProfile} = useSessionContext();
 
-  const socketUrl = process.env.PUBLIC_Y_WEBSOCKET_URL || "ws://localhost:4001";
+  const socketUrl = process.env.NEXT_PUBLIC_Y_WEBSOCKET_URL || "ws://localhost:4001";
 
   if (!userProfile) {
     return <div>Loading user profile...</div>;

frontend/src/app/collaboration/_components/Editor/CollaborativeWhiteboard/CollaborativeWhiteboardTab.tsx

@@ -2,9 +2,9 @@ import CollaborativeWhiteboard from "./CollaborativeWhiteboard";
 import { useSessionContext } from "@/contexts/SessionContext";
 
 export default function CollaborativeEditorTab() {
-  const {userProfile, sessionId} = useSessionContext()
+  const { userProfile, sessionId } = useSessionContext()
 
-  const socketUrl = process.env.PUBLIC_Y_WEBSOCKET_URL || "ws://localhost:4001";
+  const socketUrl = process.env.NEXT_PUBLIC_Y_WEBSOCKET_URL || "ws://localhost:4001";
 
   if (!userProfile) {
     return <div>Loading user profile...</div>;