Merge branch 'fix-timer' into frontend-changes

Author: chiaryan

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { 
     Form,
+    Button,
     Modal,
  } from 'antd';
 import 'typeface-montserrat';
@@ -13,6 +14,7 @@ import MatchNotFoundContent from './modalContent/MatchNotFoundContent';
 import MatchCancelledContent from './modalContent/MatchCancelledContent';
 import useMatching from '../services/use-matching';
 import { ValidateUser } from '../services/user';
+import { useTimer } from 'react-timer-hook';
 
 interface MatchingModalProps {
     isOpen: boolean;
@@ -23,12 +25,30 @@ export interface MatchParams {
     topics: string[],
     difficulties: string[],
 }
+const MATCH_TIMEOUT = 30;
+const JOIN_TIMEOUT = 5;
 
 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);
+    const { totalSeconds, pause: pauseTimer, restart: restartTimer } = useTimer({
+        expiryTimestamp: new Date(Date.now() + MATCH_TIMEOUT * 1000),
+        autoStart: false,
+        onExpire() {
+            if (matchingState.state === "matching") {
+                matchingState.timeout();
+                return;
+            }
+            if (matchingState.state === "found") {
+                matchingState.ok();
+                setClosedType("joined");
+                return;
+            }
+            console.warn(`matching is in ${matchingState.state}`)
+        },
+    });
+    const passed = MATCH_TIMEOUT - totalSeconds;
 
     function close() {
         // clean up matching and closedType State
@@ -49,42 +69,56 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
         });
     } : undefined;
 
+    useEffect(() => {
+        if (matchingState.state === "cancelling" || matchingState.state === "timeout") {
+            pauseTimer();
+            return;
+        }
+        if (matchingState.state === "found") {
+            restartTimer(
+                new Date(Date.now() + JOIN_TIMEOUT * 1000),
+            )
+        }
+    }, [matchingState])
+
     const renderModalContent = () => {
         switch (matchingState.state) {
             case 'closed':
                 switch (closedType) {
                     case "finding":
-                        return <FindMatchContent beginMatch={matchingState.start}/>;
+                        return <FindMatchContent beginMatch={params => {
+                            restartTimer(
+                                new Date(Date.now() + MATCH_TIMEOUT * 1000),
+                            );
+                            matchingState.start(params);
+                        }}/>;
                     case "cancelled":
                         return <MatchCancelledContent
                             reselect={() => {
                                 setClosedType("finding");
                             }}
-                            canceledIn={timeoutAfter}
+                            canceledIn={passed}
                         />;
                     case "joined":
                         return <JoinedMatchContent 
-                        cancel={() => {
-                            setClosedType("cancelled");
-                        }}
-                            name1={matchingState.info?.myName || ""}
-                            name2={matchingState.info?.partnerName || ""}
+                            cancel={() => {
+                                setClosedType("cancelled");
+                            }}
+                            name1={matchingState.info?.myName ?? ""}
+                            name2={matchingState.info?.partnerName ??""}
                         />;
                 }
             case 'matching':
                 return <MatchingInProgressContent 
-                    cancelMatch={(timeoutAfter: number) => {
+                    cancelMatch={() => {
                         setClosedType("cancelled");
-                        setTimeoutAfter(timeoutAfter);
                         matchingState.cancel();
+                        pauseTimer();
                     }}
-                    timeout={(timeoutAfter: number) => {
-                        matchingState.timeout()
-                        setTimeoutAfter(timeoutAfter);
-                    }}
+                    timePassed={passed}
                 />;
             case 'cancelling':
-                return <MatchingInProgressContent cancelMatch={() => {}} timeout={() => {}}/>;
+                return <MatchingInProgressContent cancelMatch={() => {}} timePassed={passed}/>;
             case 'starting':
                 return <FindMatchContent beginMatch={() => {}}/>
             case 'found':
@@ -99,9 +133,10 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                     }}
                     name1={matchingState.info.myName}
                     name2={matchingState.info.partnerName}
-                />
+                    joiningIn={totalSeconds}
+                    />
             case 'timeout':
-                return <MatchNotFoundContent reselect={matchingState.ok} timedOutIn={10}/>;
+                return <MatchNotFoundContent reselect={matchingState.ok} timedOutIn={passed}/>;
             default:
                 throw new Error('Invalid matching state.');
         }

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

@@ -41,7 +41,7 @@ const FindMatchContent: React.FC<Props> = ({ beginMatch }) => {
                 </Form.Item>
             </div>
             <button className="find-match-button" type="submit">
-                FIND
+                FIND MATCH
             </button>
         </div>
     )

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

@@ -9,6 +9,7 @@ import 'typeface-montserrat';
 import './styles.scss';
 import { handleCancelMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
+import { useStopwatch } from 'react-timer-hook';
 
 
 interface Props {
@@ -21,6 +22,9 @@ const JoinedMatchContent: React.FC<Props> = ({cancel, name1: me, name2: you}) =>
     const matchAlreadyJoined = () => {
         throw new Error('Match already joined.');
     }
+    const { totalSeconds } = useStopwatch({
+        autoStart: true
+    })
 
     return (
         <div className="joined-match-content">
@@ -45,7 +49,7 @@ const JoinedMatchContent: React.FC<Props> = ({cancel, name1: me, name2: you}) =>
             </div>
             <div className="match-status-label">Match Found!</div>
             <div className="match-status-message">
-                Waiting for others... {formatTime(83)}
+                Waiting for others... {formatTime(totalSeconds)}
             </div>
             <button className="joined-match-deactivated-button" 
                 disabled

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

@@ -5,22 +5,18 @@ import 'typeface-montserrat';
 import './styles.scss';
 import { handleCancelMatch, handleJoinMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
-import { useTimer } from "react-timer-hook"
 
 interface Props {
     join(): void,
     cancel(): void,
     name1: string, // user's username
     name2: string, // matched user's username
+    joiningIn: number,
 }
 
 const TIMEOUT = 10;
 
-const MatchFoundContent: React.FC<Props> = ({join, cancel, name1: me, name2: you}) => {
-    const { totalSeconds } = useTimer({
-        expiryTimestamp: new Date(Date.now() + 10 * 1000),
-        onExpire: join
-    });
+const MatchFoundContent: React.FC<Props> = ({join, cancel, name1: me, name2: you, joiningIn}) => {
 
     return (
         <div className="matching-found-content">
@@ -45,7 +41,7 @@ const MatchFoundContent: React.FC<Props> = ({join, cancel, name1: me, name2: you
             </div>
             <div className="match-status-label">Match Found!</div>
             <div className="match-status-message">
-                Joining in... {formatTime(totalSeconds)}
+                Joining in... {formatTime(joiningIn)}
             </div>
             <button className="join-match-button"
                 onClick={join}

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

@@ -6,30 +6,24 @@ import { handleCancelMatch } from '../handlers';
 import { useTimer } from "react-timer-hook"
 import {formatTime} from '@/utils/DateTime';
 
-const TIMEOUT = 10;
-
 interface Props {
-    cancelMatch(cancelledIn: number): void
-    timeout(timeoutIn: number): void
+    cancelMatch(): void
+    timePassed: number
 }
 
-const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel, timeout}) => {
-    const { totalSeconds } = useTimer({
-        expiryTimestamp: new Date(Date.now() + 10 * 1000),
-        onExpire: () => timeout(TIMEOUT - totalSeconds),
-    });
+const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel, timePassed}) => {
 
     return (
         <div className="matching-in-progess-content">
             <LoadingOutlined className="loading-icon"/>
             <div className="match-status-label">Matching in Progress</div>
             <div className="match-status-message">
                 Please be patient as we match you with other online users<br/><br/>
-                {formatTime(TIMEOUT - totalSeconds)}
+                {formatTime(timePassed)}
             </div>
             <button className="cancel-match-button"
                 onClick={() => {
-                    cancel(TIMEOUT - totalSeconds);
+                    cancel();
                 }}
             >
                 Cancel

apps/frontend/src/app/matching/modalContent/styles.scss

@@ -227,3 +227,12 @@ button:disabled, .joined-match-deactivated-button {
   height: 60px; 
   fill: #463F3A;
 }
+
+.user-caption {
+  display: flex;
+  justify-content: center;
+}
+
+.avatar-caption-container {
+  width: 64px;
+}