bugfix: timeout did not direct correct model; hide retry buttons

Author: chiaryan

apps/frontend/src/app/matching/MatchingModal.tsx

@@ -20,13 +20,15 @@ interface MatchingModalProps {
 const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close }) => {
     const matchingState = useMatching();
     const [closedType, setClosedType] = useState<"finding" | "cancelled" | "joined">("finding");
+    const [timeoutAfter, setTimeoutAfter] = useState<number>(9999);
     const isClosable = ["timeout", "closed"].includes(matchingState.state);
 
     function close() {
         // clean up matching and closedType State
         if (matchingState.state === "timeout") {
             matchingState.ok();
         }
+        setClosedType("finding");
         _close();
     }
 
@@ -42,19 +44,27 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                                 setClosedType("finding");
                             }}
                             retry={() => {}}
+                            canceledIn={timeoutAfter}
                         />;
                     case "joined":
                         return <JoinedMatchContent cancel={() => {
                             setClosedType("cancelled");
                         }}/>;
                 }
             case 'matching':
-                return <MatchingInProgressContent cancelMatch={() => {
-                    matchingState.cancel();
-                    setClosedType("cancelled");
-                }}/>;
+                return <MatchingInProgressContent 
+                    cancelMatch={(timeoutAfter: number) => {
+                        setClosedType("cancelled");
+                        setTimeoutAfter(timeoutAfter);
+                        matchingState.cancel();
+                    }}
+                    timeout={(timeoutAfter: number) => {
+                        matchingState.timeout()
+                        setTimeoutAfter(timeoutAfter);
+                    }}
+                />;
             case 'cancelling':
-                return <MatchingInProgressContent cancelMatch={() => {}}/>;
+                return <MatchingInProgressContent cancelMatch={() => {}} timeout={() => {}}/>;
             case 'starting':
                 return <FindMatchContent beginMatch={() => {}}/>
             case 'found':
@@ -69,7 +79,7 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                     }}
                 />
             case 'timeout':
-                return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}}/>;
+                return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}}  timedOutIn={timeoutAfter}/>;
             default:
                 throw new Error('Invalid matching state.');
         }

apps/frontend/src/app/matching/modalContent/MatchCancelledContent.tsx

@@ -7,9 +7,10 @@ import { formatTime } from '@/utils/DateTime';
 interface Props {
     retry(): void,
     reselect(): void,
+    canceledIn: number,
 }
 
-const MatchCancelledContent: React.FC<Props> = ({retry, reselect}) => {
+const MatchCancelledContent: React.FC<Props> = ({retry, reselect, canceledIn}) => {
     return (
         <div className="match-cancelled-content">
             <div className="cancel-icon-container">
@@ -25,13 +26,13 @@ const MatchCancelledContent: React.FC<Props> = ({retry, reselect}) => {
             </div>
             <div className="match-status-label">Match Cancelled!</div>
             <div className="match-status-message">
-                Your match request has been cancelled after waiting {formatTime(83)}
+                Your match request has been cancelled after waiting {formatTime(canceledIn)}
             </div>
-            <button className="retry-match-button"
+            {/* <button className="retry-match-button"
                 onClick={retry}
             >
                 Retry
-            </button>
+            </button> */}
             <button className="reselect-match-options-button"
                 onClick={reselect}
             >

apps/frontend/src/app/matching/modalContent/MatchNotFoundContent.tsx

@@ -5,10 +5,11 @@ import { handleReselectMatchOptions, handleRetryMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
 
 const MatchNotFoundContent: React.FC<{
-    retry(): void
-    reselect(): void
+    retry(): void,
+    reselect(): void,
+    timedOutIn: number,
 }> = ({
-    retry, reselect
+    retry, reselect, timedOutIn
 }) => {
     return (
         <div className="joined-match-content">
@@ -25,13 +26,13 @@ const MatchNotFoundContent: React.FC<{
             </div>
             <div className="match-status-label">Match Not Found!</div>
             <div className="match-status-message">
-                Sorry, we could not find a match after {formatTime(83)}
+                Sorry, we could not find a match after {formatTime(timedOutIn)}
             </div>
-            <button className="retry-match-button"
+            {/* <button className="retry-match-button"
                 onClick={retry}
             >
                 Retry
-            </button>
+            </button> */}
             <button className="reselect-match-options-button"
                 onClick={reselect}
             >

apps/frontend/src/app/matching/modalContent/MatchingInProgressContent.tsx

@@ -6,18 +6,19 @@ import { handleCancelMatch } from '../handlers';
 import { useTimer } from "react-timer-hook"
 import {formatTime} from '@/utils/DateTime';
 
-const TIMEOUT = 10;
+const TIMEOUT = 5;
 
 interface Props {
-    cancelMatch(): void
+    cancelMatch(cancelledIn: number): void
+    timeout(timeoutIn: number): void
 }
 
-const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel}) => {
+const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel, timeout}) => {
     const time = new Date();
     time.setSeconds(time.getSeconds() + TIMEOUT);
     const { totalSeconds } = useTimer({
         expiryTimestamp: time,
-        onExpire: cancel,
+        onExpire: () => timeout(TIMEOUT),
     });
 
     return (
@@ -29,7 +30,9 @@ const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel}) => {
                 {formatTime(TIMEOUT - totalSeconds)}
             </div>
             <button className="cancel-match-button"
-                onClick={cancel}
+                onClick={() => {
+                    timeout(TIMEOUT);
+                }}
             >
                 Cancel
             </button>

apps/frontend/src/app/services/use-matching.ts

@@ -43,12 +43,7 @@ export default function useMatching(): MatchState {
             const responseJson: MatchResponse = JSON.parse(response);
             console.log("got here");
             if (responseJson.type == "timeout") {
-                
-                setIsSocket(false);
-                setSte({
-                    state: "timeout",
-                    ok: cancel,
-                })
+                timeout();
                 return;
             }
 
@@ -73,13 +68,22 @@ export default function useMatching(): MatchState {
         sendJsonMessage, 
     } = useWebSocket<MatchResponse>(MATCHING_SERVICE_URL as string, options, isSocket);
 
+    function timeout() {
+        setIsSocket(false);
+        setSte({
+            state: "timeout",
+            ok: cancel,
+        });
+    }
+
     function cancel() {
         setIsSocket(false)
         setSte({
             state: "closed",
             start,
         })
     }
+    
     function start(request: MatchRequestParams) {
         setIsSocket(true)
         sendJsonMessage(request);
@@ -92,7 +96,7 @@ export default function useMatching(): MatchState {
             matchState = {state: "closed", start}
             break;
         case ReadyState.OPEN:
-            matchState = {state: "matching", cancel}
+            matchState = {state: "matching", cancel, timeout}
             break;
         case ReadyState.CONNECTING:
             matchState = {state: "starting"}

apps/frontend/src/contexts/websocketcontext.tsx

@@ -10,6 +10,7 @@ export type SocketState = {
 } | {
     state: "matching";
     cancel(): void;
+    timeout(): void;
 };
 
 export type MatchState = SocketState | {