Merge pull request #101 from ruiqi7/feature/coding-sandbox

Fix code template bug in editor

Author: feliciagan

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

@@ -18,8 +18,7 @@ enum CollabEvents {
   DOCUMENT_READY = "document_ready",
   UPDATE = "updateV2",
   UPDATE_CURSOR = "update_cursor",
-  // PARTNER_LEFT = "partner_left",
-  // PARTNER_DISCONNECTED = "partner_disconnected",
+  PARTNER_LEFT = "partner_left",
 }
 
 const EXPIRY_TIME = 3600;
@@ -92,27 +91,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 +164,21 @@ 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);
+  } else {
+    io.to(roomId).emit(CollabEvents.PARTNER_LEFT);
+  }
+};

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

@@ -32,7 +32,6 @@ enum MatchEvents {
   MATCH_FOUND = "match_found",
   MATCH_SUCCESSFUL = "match_successful",
   MATCH_UNSUCCESSFUL = "match_unsuccessful",
-  MATCH_ENDED = "match_ended",
   MATCH_REQUEST_EXISTS = "match_request_exists",
   MATCH_REQUEST_ERROR = "match_request_error",
 }
@@ -199,10 +198,7 @@ export const handleWebsocketMatchEvents = (socket: Socket) => {
 
   socket.on(MatchEvents.MATCH_END_REQUEST, (uid: string, matchId: string) => {
     userConnections.delete(uid);
-    const matchDeleted = handleMatchDelete(matchId);
-    if (matchDeleted) {
-      socket.to(matchId).emit(MatchEvents.MATCH_ENDED);
-    }
+    handleMatchDelete(matchId);
   });
 
   socket.on(
@@ -257,7 +253,6 @@ const endMatchOnUserDisconnect = (socket: Socket, uid: string) => {
     const matchDeleted = handleMatchDelete(matchId);
     if (matchDeleted) {
       socket.to(matchId).emit(MatchEvents.MATCH_UNSUCCESSFUL); // on matching page
-      socket.to(matchId).emit(MatchEvents.MATCH_ENDED); // on collab page
     }
   }
 };

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

@@ -6,6 +6,7 @@ import {
   FAILED_TESTCASE_MESSAGE,
   SUCCESS_TESTCASE_MESSAGE,
   FAILED_TO_SUBMIT_CODE_MESSAGE,
+  COLLAB_ENDED_MESSAGE,
 } from "../utils/constants";
 import { toast } from "react-toastify";
 
@@ -14,9 +15,10 @@ import { codeExecutionClient } from "../utils/api";
 import { useReducer } from "react";
 import { updateQnHistoryById } from "../reducers/qnHistoryReducer";
 import qnHistoryReducer, { initialQHState } from "../reducers/qnHistoryReducer";
-import { leave } from "../utils/collabSocket";
+import { CollabEvents, collabSocket, leave } from "../utils/collabSocket";
 import { CommunicationEvents } from "../components/Chat";
 import { communicationSocket } from "../utils/communicationSocket";
+import useAppNavigate from "../components/UseAppNavigate";
 
 type CompilerResult = {
   status: string;
@@ -35,14 +37,17 @@ type CollabContextType = {
   handleEndSessionClick: () => void;
   handleRejectEndSession: () => void;
   handleConfirmEndSession: () => void;
+  checkPartnerStatus: () => void;
   setCode: React.Dispatch<React.SetStateAction<string>>;
   compilerResult: CompilerResult[];
+  isEndSessionModalOpen: boolean;
 };
 
 const CollabContext = createContext<CollabContextType | null>(null);
 
 const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const { children } = props;
+  const appNavigate = useAppNavigate();
 
   const match = useMatch();
 
@@ -58,16 +63,17 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     stopMatch,
     questionId,
     qnHistoryId,
-    setIsEndSessionModalOpen,
   } = match;
 
   // eslint-disable-next-line
-  const [qnHistoryState, qnHistoryDispatch] = useReducer(
+  const [_qnHistoryState, qnHistoryDispatch] = useReducer(
     qnHistoryReducer,
     initialQHState
   );
   const [code, setCode] = useState<string>("");
   const [compilerResult, setCompilerResult] = useState<CompilerResult[]>([]);
+  const [isEndSessionModalOpen, setIsEndSessionModalOpen] =
+    useState<boolean>(false);
 
   const handleSubmitSessionClick = async (time: number) => {
     try {
@@ -121,8 +127,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(
@@ -136,8 +142,18 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
       partner?.username
     );
 
-    // End match
+    // Delete match data
     stopMatch();
+    appNavigate("/home");
+  };
+
+  const checkPartnerStatus = () => {
+    collabSocket.on(CollabEvents.PARTNER_LEFT, () => {
+      toast.error(COLLAB_ENDED_MESSAGE);
+      setIsEndSessionModalOpen(false);
+      stopMatch();
+      appNavigate("/home");
+    });
   };
 
   return (
@@ -147,8 +163,10 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         handleEndSessionClick,
         handleRejectEndSession,
         handleConfirmEndSession,
+        checkPartnerStatus,
         setCode,
         compilerResult,
+        isEndSessionModalOpen,
       }}
     >
       {children}

frontend/src/contexts/MatchContext.tsx

@@ -6,7 +6,6 @@ import {
   ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE,
   FAILED_MATCH_REQUEST_MESSAGE,
   MATCH_CONNECTION_ERROR,
-  MATCH_ENDED_MESSAGE,
   MATCH_LOGIN_REQUIRED_MESSAGE,
   MATCH_REQUEST_EXISTS_MESSAGE,
   MATCH_UNSUCCESSFUL_MESSAGE,
@@ -18,9 +17,6 @@ import useAppNavigate from "../components/UseAppNavigate";
 import { UNSAFE_NavigationContext } from "react-router-dom";
 import { Action, type History, type Transition } from "history";
 
-import { useReducer } from "react";
-import qnHistoryReducer, { initialQHState } from "../reducers/qnHistoryReducer";
-
 let matchUserId: string;
 let partnerUserId: string;
 
@@ -54,7 +50,6 @@ enum MatchEvents {
   MATCH_FOUND = "match_found",
   MATCH_SUCCESSFUL = "match_successful",
   MATCH_UNSUCCESSFUL = "match_unsuccessful",
-  MATCH_ENDED = "match_ended",
   MATCH_REQUEST_EXISTS = "match_request_exists",
   MATCH_REQUEST_ERROR = "match_request_error",
 
@@ -93,8 +88,6 @@ type MatchContextType = {
   partner: MatchUser | null;
   matchPending: boolean;
   loading: boolean;
-  isEndSessionModalOpen: boolean;
-  setIsEndSessionModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   questionId: string | null;
   qnHistoryId: string | null;
 };
@@ -124,15 +117,6 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const [questionId, setQuestionId] = useState<string | null>(null);
   const [qnHistoryId, setQnHistoryId] = useState<string | null>(null);
 
-  const [isEndSessionModalOpen, setIsEndSessionModalOpen] =
-    useState<boolean>(false);
-
-  // eslint-disable-next-line
-  const [qnHistoryState, qnHistoryDispatch] = useReducer(
-    qnHistoryReducer,
-    initialQHState
-  );
-
   const navigator = useContext(UNSAFE_NavigationContext).navigator as History;
 
   useEffect(() => {
@@ -233,9 +217,6 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
       case MatchPaths.MATCHED:
         initMatchedListeners();
         return;
-      case MatchPaths.COLLAB:
-        initCollabListeners();
-        return;
       default:
         return;
     }
@@ -318,14 +299,6 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     });
   };
 
-  const initCollabListeners = () => {
-    matchSocket.on(MatchEvents.MATCH_ENDED, () => {
-      toast.error(MATCH_ENDED_MESSAGE);
-      setIsEndSessionModalOpen(false);
-      appNavigate(MatchPaths.HOME);
-    });
-  };
-
   const handleMatchFound = (
     matchId: string,
     user1: MatchUser,
@@ -409,7 +382,6 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         return;
       case MatchPaths.COLLAB:
         matchSocket.emit(MatchEvents.MATCH_END_REQUEST, matchUser?.id, matchId);
-        appNavigate(MatchPaths.HOME);
         return;
       default:
         return;
@@ -539,8 +511,6 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         partner,
         matchPending,
         loading,
-        isEndSessionModalOpen,
-        setIsEndSessionModalOpen,
         questionId,
         qnHistoryId,
       }}