Shift end session logic to collab context

Author: ruiqi7

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;
@@ -179,5 +178,7 @@ const handleUserLeave = (uid: string, roomId: string, socket: Socket) => {
   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/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,7 +63,6 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     stopMatch,
     questionId,
     qnHistoryId,
-    setIsEndSessionModalOpen,
   } = match;
 
   // eslint-disable-next-line
@@ -68,6 +72,8 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   );
   const [code, setCode] = useState<string>("");
   const [compilerResult, setCompilerResult] = useState<CompilerResult[]>([]);
+  const [isEndSessionModalOpen, setIsEndSessionModalOpen] =
+    useState<boolean>(false);
 
   const handleSubmitSessionClick = async (time: number) => {
     try {
@@ -135,8 +141,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 (
@@ -146,8 +162,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,
       }}

frontend/src/pages/CollabSandbox/index.tsx

@@ -76,7 +76,6 @@ const CollabSandbox: React.FC = () => {
     partner,
     matchCriteria,
     loading,
-    isEndSessionModalOpen,
     questionId,
   } = match;
 
@@ -85,7 +84,12 @@ const CollabSandbox: React.FC = () => {
     throw new Error(USE_COLLAB_ERROR_MESSAGE);
   }
 
-  const { handleRejectEndSession, handleConfirmEndSession } = collab;
+  const {
+    handleRejectEndSession,
+    handleConfirmEndSession,
+    checkPartnerStatus,
+    isEndSessionModalOpen,
+  } = collab;
 
   const [state, dispatch] = useReducer(reducer, initialState);
   const { selectedQuestion } = state;
@@ -110,6 +114,7 @@ const CollabSandbox: React.FC = () => {
         const editorState = await join(matchUser.id, matchId);
         if (editorState.ready) {
           setEditorState(editorState);
+          checkPartnerStatus();
         } else {
           toast.error(COLLAB_CONNECTION_ERROR);
           setIsConnecting(false);

frontend/src/utils/collabSocket.ts

@@ -4,7 +4,7 @@ import { updateCursor, Cursor } from "./collabCursor";
 import { Doc, Text, applyUpdateV2 } from "yjs";
 import { Awareness } from "y-protocols/awareness";
 
-enum CollabEvents {
+export enum CollabEvents {
   // Send
   JOIN = "join",
   LEAVE = "leave",
@@ -18,6 +18,7 @@ enum CollabEvents {
   DOCUMENT_READY = "document_ready",
   UPDATE = "updateV2",
   UPDATE_CURSOR = "update_cursor",
+  PARTNER_LEFT = "partner_left",
   SOCKET_DISCONNECT = "disconnect",
   SOCKET_CLIENT_DISCONNECT = "io client disconnect",
   SOCKET_SERVER_DISCONNECT = "io server disconnect",
@@ -32,7 +33,7 @@ export type CollabSessionData = {
 };
 
 const COLLAB_SOCKET_URL = "http://localhost:3003";
-const collabSocket = io(COLLAB_SOCKET_URL, {
+export const collabSocket = io(COLLAB_SOCKET_URL, {
   reconnectionAttempts: 3,
   autoConnect: false,
 });

frontend/src/utils/constants.ts

@@ -92,7 +92,6 @@ export const FAILED_MATCH_REQUEST_MESSAGE =
   "Failed to send match request! Please try again from the home page.";
 export const MATCH_UNSUCCESSFUL_MESSAGE =
   "Unfortunately, your partner did not accept the match.";
-export const MATCH_ENDED_MESSAGE = "Your partner has left the match.";
 export const MATCH_LOGIN_REQUIRED_MESSAGE =
   "Please login first to find a match.";
 export const MATCH_OFFER_TIMEOUT_MESSAGE = "Match offer timeout!";
@@ -102,6 +101,8 @@ export const QUESTION_DOES_NOT_EXIST_ERROR =
   "There are no questions with the specified complexity and category. Please try another combination.";
 
 // Collab
+export const COLLAB_ENDED_MESSAGE =
+  "Your partner has left the collaboration session.";
 export const COLLAB_CONNECTION_ERROR =
   "Error connecting you to the collaboration session! Please try again.";