diff --git a/frontend/src/components/CollabSessionControls/index.tsx b/frontend/src/components/CollabSessionControls/index.tsx index 88bc3115f5..3f261e0077 100644 --- a/frontend/src/components/CollabSessionControls/index.tsx +++ b/frontend/src/components/CollabSessionControls/index.tsx @@ -13,7 +13,7 @@ const CollabSessionControls: React.FC = () => { const [time, setTime] = useState(0); useEffect(() => { - let intervalId = setInterval( + const intervalId = setInterval( () => setTime((prevTime) => prevTime + 1), 1000 ); diff --git a/frontend/src/contexts/MatchContext.tsx b/frontend/src/contexts/MatchContext.tsx index 57a4ecb1cd..c15a0f5e52 100644 --- a/frontend/src/contexts/MatchContext.tsx +++ b/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 ( diff --git a/frontend/src/pages/CollabSandbox/index.tsx b/frontend/src/pages/CollabSandbox/index.tsx index 7b328a4662..274f762470 100644 --- a/frontend/src/pages/CollabSandbox/index.tsx +++ b/frontend/src/pages/CollabSandbox/index.tsx @@ -11,7 +11,7 @@ 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, { @@ -19,8 +19,11 @@ import reducer, { initialState, } from "../../reducers/questionReducer"; import QuestionDetailComponent from "../../components/QuestionDetail"; +import { Navigate } from "react-router-dom"; const CollabSandbox: React.FC = () => { + const [showErrorScreen, setShowErrorScreen] = useState(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 ; } - if (!partner || !questionId || !selectedQuestion) { + if (!partner) { + return ; + } + + if (showErrorScreen) { return ( { ); } + if (!selectedQuestion) { + return ; + } + return ( {/*