From adc452f2c0ffd153184ad29ad63f30854c84c673 Mon Sep 17 00:00:00 2001
From: Evan Yan <103996156+evanyan13@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:00:27 +0800
Subject: [PATCH] Fix connection between FE and Yjs (#133)

* Install ESLint for Github Action

* Fix issue connecting to yjs from fe
---
 .../workflows/docker-build-push-gcloud.yaml   |  2 +-
 .../y-websocket-service/src/yjs.gateway.ts    | 25 +++++++++++++------
 .../CollaborativeEditor.tsx                   |  8 +++---
 .../CollaborativeEditorTab.tsx                |  2 +-
 .../CollaborativeWhiteboardTab.tsx            |  4 +--
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/docker-build-push-gcloud.yaml b/.github/workflows/docker-build-push-gcloud.yaml
index ae35162387..4e7f04454a 100644
--- a/.github/workflows/docker-build-push-gcloud.yaml
+++ b/.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
diff --git a/backend/y-websocket-service/src/yjs.gateway.ts b/backend/y-websocket-service/src/yjs.gateway.ts
index 67fac6bf9d..eb22703e6d 100644
--- a/backend/y-websocket-service/src/yjs.gateway.ts
+++ b/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,
diff --git a/frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditor.tsx b/frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditor.tsx
index 30669ec73c..3a691830f5 100644
--- a/frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditor.tsx
+++ b/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>
   );
diff --git a/frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditorTab.tsx b/frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditorTab.tsx
index 65901cabcf..8da6a0d5be 100644
--- a/frontend/src/app/collaboration/_components/Editor/CollaborativeEditor/CollaborativeEditorTab.tsx
+++ b/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>;
diff --git a/frontend/src/app/collaboration/_components/Editor/CollaborativeWhiteboard/CollaborativeWhiteboardTab.tsx b/frontend/src/app/collaboration/_components/Editor/CollaborativeWhiteboard/CollaborativeWhiteboardTab.tsx
index 92325d1190..ce290c6bff 100644
--- a/frontend/src/app/collaboration/_components/Editor/CollaborativeWhiteboard/CollaborativeWhiteboardTab.tsx
+++ b/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>;