Fix loading code template bug and css

Author: ruiqi7

backend/collab-service/src/handlers/websocketHandler.ts

@@ -92,27 +92,24 @@ export const handleWebsocketCollabEvents = (socket: Socket) => {
     }
   );
 
-  socket.on(CollabEvents.LEAVE, (uid: string, roomId: string) => {
-    const connectionKey = `${uid}:${roomId}`;
-    if (!userConnections.has(connectionKey)) {
-      return;
-    }
-
-    clearTimeout(userConnections.get(connectionKey)!);
+  socket.on(
+    CollabEvents.LEAVE,
+    (uid: string, roomId: string, isImmediate: boolean) => {
+      const connectionKey = `${uid}:${roomId}`;
+      if (isImmediate || !userConnections.has(connectionKey)) {
+        handleUserLeave(uid, roomId, socket);
+        return;
+      }
 
-    const connectionTimeout = setTimeout(() => {
-      userConnections.delete(connectionKey);
-      socket.leave(roomId);
-      socket.disconnect();
+      clearTimeout(userConnections.get(connectionKey)!);
 
-      const room = io.sockets.adapter.rooms.get(roomId);
-      if (!room || room.size === 0) {
-        removeCollabSession(roomId);
-      }
-    }, CONNECTION_DELAY);
+      const connectionTimeout = setTimeout(() => {
+        handleUserLeave(uid, roomId, socket);
+      }, CONNECTION_DELAY);
 
-    userConnections.set(connectionKey, connectionTimeout);
-  });
+      userConnections.set(connectionKey, connectionTimeout);
+    }
+  );
 
   socket.on(CollabEvents.RECONNECT_REQUEST, async (roomId: string) => {
     // TODO: Handle recconnection
@@ -168,3 +165,19 @@ const saveDocument = async (roomId: string, doc: Doc) => {
     EX: EXPIRY_TIME,
   });
 };
+
+const handleUserLeave = (uid: string, roomId: string, socket: Socket) => {
+  const connectionKey = `${uid}:${roomId}`;
+  if (userConnections.has(connectionKey)) {
+    clearTimeout(userConnections.get(connectionKey)!);
+    userConnections.delete(connectionKey);
+  }
+
+  socket.leave(roomId);
+  socket.disconnect();
+
+  const room = io.sockets.adapter.rooms.get(roomId);
+  if (!room || room.size === 0) {
+    removeCollabSession(roomId);
+  }
+};

frontend/src/components/CodeEditor/index.tsx

@@ -76,7 +76,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
   return (
     <CodeMirror
       ref={onEditorReady}
-      style={{ height: "100%", width: "100%" }}
+      style={{ height: "100%", width: "100%", fontSize: "14px" }}
       height="100%"
       width="100%"
       basicSetup={false}
@@ -96,7 +96,12 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
         EditorView.editable.of(!isReadOnly && isDocumentLoaded),
         EditorState.readOnly.of(isReadOnly || !isDocumentLoaded),
       ]}
-      value={isReadOnly ? template : template ? "Loading code template..." : ""}
+      value={isReadOnly ? template : undefined}
+      placeholder={
+        !isReadOnly && !isDocumentLoaded
+          ? "Loading code template..."
+          : undefined
+      }
     />
   );
 };

frontend/src/contexts/CollabContext.tsx

@@ -62,7 +62,7 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   } = match;
 
   // eslint-disable-next-line
-  const [qnHistoryState, qnHistoryDispatch] = useReducer(
+  const [_qnHistoryState, qnHistoryDispatch] = useReducer(
     qnHistoryReducer,
     initialQHState
   );
@@ -120,8 +120,8 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     setIsEndSessionModalOpen(false);
 
     // Leave collaboration room
-    leave(matchUser?.id as string, getMatchId() as string);
-    leave(partner?.id as string, getMatchId() as string);
+    leave(matchUser?.id as string, getMatchId() as string, true);
+    leave(partner?.id as string, getMatchId() as string, true);
 
     // Leave chat room
     communicationSocket.emit(

frontend/src/pages/CollabSandbox/index.tsx

@@ -232,7 +232,8 @@ const CollabSandbox: React.FC = () => {
             sx={(theme) => ({
               flex: 1,
               width: "100%",
-              maxHeight: "50vh",
+              minHeight: "44vh",
+              maxHeight: "44vh",
               paddingTop: theme.spacing(2),
               paddingBottom: theme.spacing(2),
             })}
@@ -257,7 +258,7 @@ const CollabSandbox: React.FC = () => {
           <Box
             sx={{
               flex: 1,
-              maxHeight: "50vh",
+              maxHeight: "44vh",
               display: "flex",
               flexDirection: "column",
             }}

frontend/src/utils/collabSocket.ts

@@ -82,11 +82,11 @@ export const initDocument = (uid: string, roomId: string, template: string) => {
   });
 };
 
-export const leave = (uid: string, roomId: string) => {
+export const leave = (uid: string, roomId: string, isImmediate?: boolean) => {
   collabSocket.removeAllListeners();
   collabSocket.io.removeListener(CollabEvents.SOCKET_RECONNECT_SUCCESS);
   collabSocket.io.removeListener(CollabEvents.SOCKET_RECONNECT_FAILED);
-  collabSocket.emit(CollabEvents.LEAVE, uid, roomId);
+  collabSocket.emit(CollabEvents.LEAVE, uid, roomId, isImmediate);
   doc.destroy();
 };
 
@@ -135,10 +135,3 @@ const initConnectionStatusListeners = (roomId: string) => {
     });
   }
 };
-
-export const getDocumentContent = () => {
-  if (!doc.isDestroyed) {
-    return text.toString();
-  }
-  return "";
-};