Fix lint error and bugs in specific scenarios

Author: jolynloh

frontend/src/components/CollabSessionControls/index.tsx

@@ -13,7 +13,7 @@ const CollabSessionControls: React.FC = () => {
   const [time, setTime] = useState<number>(0);
 
   useEffect(() => {
-    let intervalId = setInterval(
+    const intervalId = setInterval(
       () => setTime((prevTime) => prevTime + 1),
       1000
     );

frontend/src/contexts/MatchContext.tsx

@@ -281,8 +281,8 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const initMatchedListeners = () => {
     matchSocket.on(MatchEvents.MATCH_SUCCESSFUL, (id: string) => {
       setMatchPending(false);
-      appNavigate(MatchPaths.COLLAB);
       setQuestionId(id);
+      appNavigate(MatchPaths.COLLAB);
     });
 
     matchSocket.on(MatchEvents.MATCH_UNSUCCESSFUL, () => {
@@ -302,6 +302,7 @@ 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);
     });
   };
@@ -501,8 +502,8 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   };
 
   const handleConfirmEndSession = () => {
-    stopMatch();
     setIsEndSessionModalOpen(false);
+    stopMatch();
   };
 
   return (

frontend/src/pages/CollabSandbox/index.tsx

@@ -11,16 +11,19 @@ import {
 import classes from "./index.module.css";
 import { useMatch } from "../../contexts/MatchContext";
 import { USE_MATCH_ERROR_MESSAGE } from "../../utils/constants";
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useState } from "react";
 import Loader from "../../components/Loader";
 import ServerError from "../../components/ServerError";
 import reducer, {
   getQuestionById,
   initialState,
 } from "../../reducers/questionReducer";
 import QuestionDetailComponent from "../../components/QuestionDetail";
+import { Navigate } from "react-router-dom";
 
 const CollabSandbox: React.FC = () => {
+  const [showErrorScreen, setShowErrorScreen] = useState<boolean>(false);
+
   const match = useMatch();
   if (!match) {
     throw new Error(USE_MATCH_ERROR_MESSAGE);
@@ -40,6 +43,10 @@ const CollabSandbox: React.FC = () => {
   const { selectedQuestion } = state;
 
   useEffect(() => {
+    if (!partner) {
+      return;
+    }
+
     verifyMatchStatus();
 
     if (!questionId) {
@@ -54,11 +61,29 @@ const CollabSandbox: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    let timeout: number | undefined;
+
+    if (!selectedQuestion) {
+      timeout = setTimeout(() => {
+        setShowErrorScreen(true);
+      }, 2000);
+    } else {
+      setShowErrorScreen(false);
+    }
+
+    return () => clearTimeout(timeout);
+  }, [selectedQuestion]);
+
   if (loading) {
     return <Loader />;
   }
 
-  if (!partner || !questionId || !selectedQuestion) {
+  if (!partner) {
+    return <Navigate to="/home" replace />;
+  }
+
+  if (showErrorScreen) {
     return (
       <ServerError
         title="Oops, match ended..."
@@ -67,6 +92,10 @@ const CollabSandbox: React.FC = () => {
     );
   }
 
+  if (!selectedQuestion) {
+    return <Loader />;
+  }
+
   return (
     <AppMargin classname={`${classes.fullheight} ${classes.flex}`}>
       {/* <Stack spacing={2} alignItems={"center"}>