Integrate useMatching interface with UI modals

TODO: retry matching

Author: chiaryan

apps/frontend/package.json

@@ -16,6 +16,7 @@
     "next": "14.2.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-timer-hook": "^3.0.7",
     "react-use-websocket": "^4.9.0",
     "sass": "^1.79.2",
     "typeface-montserrat": "^1.1.13"

apps/frontend/pnpm-lock.yaml

@@ -6,66 +6,86 @@ import 'typeface-montserrat';
 import './styles.scss';
 import FindMatchContent from './modalContent/FindMatchContent';
 import MatchingInProgressContent from './modalContent/MatchingInProgressContent';
-import MatchFound from './modalContent/MatchFoundContent';
+import MatchFoundContent from './modalContent/MatchFoundContent';
 import JoinedMatchContent from './modalContent/JoinedMatchContent';
 import MatchNotFoundContent from './modalContent/MatchNotFoundContent';
 import MatchCancelledContent from './modalContent/MatchCancelledContent';
+import useMatching from '../services/use-matching';
 
 interface MatchingModalProps {
     isOpen: boolean;
-    onClose: () => void;
+    close: () => void;
 }
 
-const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, onClose }) => {
-    // TODO: placehoder for now, to be replaced my useContext
-    const [matchingState, setMatchingState] = useState('finding');
+const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close }) => {
+    const matchingState = useMatching();
+    const [closedType, setClosedType] = useState<"finding" | "cancelled" | "joined">("finding");
+    const isClosable = ["timeout", "closed"].includes(matchingState.state);
 
-    // TODO: remove this after testing
-    useEffect(() => {
-        // Uncomment the following lines to test the different matching states
-        // setMatchingState('finding');
-        // setMatchingState('matching');
-        // setMatchingState('found');
-        // setMatchingState('joined');
-        // setMatchingState('notFound');
-        // setMatchingState('cancelled');
-    }, []);
-
-    // TODO: modify by using matchingState via useContext
-    const isClosableMatchingState = () => {
-        return matchingState === 'finding' || matchingState === 'notFound' || matchingState === 'cancelled';
-    };
+    function close() {
+        // clean up matching and closedType State
+        if (matchingState.state === "timeout") {
+            matchingState.ok();
+        }
+        _close();
+    }
 
     const renderModalContent = () => {
-        switch (matchingState) {
-            case 'finding':
-                return <FindMatchContent/>;
+        switch (matchingState.state) {
+            case 'closed':
+                switch (closedType) {
+                    case "finding":
+                        return <FindMatchContent beginMatch={matchingState.start}/>;
+                    case "cancelled":
+                        return <MatchCancelledContent
+                            reselect={() => {
+                                setClosedType("finding");
+                            }}
+                            retry={() => {}}
+                        />;
+                    case "joined":
+                        return <JoinedMatchContent cancel={() => {
+                            setClosedType("cancelled");
+                        }}/>;
+                }
             case 'matching':
-                return <MatchingInProgressContent />;
+                return <MatchingInProgressContent cancelMatch={() => {
+                    matchingState.cancel();
+                    setClosedType("cancelled");
+                }}/>;
+            case 'cancelling':
+                return <MatchingInProgressContent cancelMatch={() => {}}/>;
+            case 'starting':
+                return <FindMatchContent beginMatch={() => {}}/>
             case 'found':
-                return <MatchFound />;
-            case 'joined':
-                return <JoinedMatchContent />;
-            case 'notFound':
-                return <MatchNotFoundContent />;
-            case 'cancelled':
-                return <MatchCancelledContent />;
+                return <MatchFoundContent 
+                    cancel={() => {
+                        matchingState.ok();
+                        setClosedType("cancelled");
+                    }}
+                    join={() => {
+                        matchingState.ok();
+                        setClosedType("joined");
+                    }}
+                />
+            case 'timeout':
+                return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}}/>;
             default:
                 throw new Error('Invalid matching state.');
         }
     };
 
     return (
         <Modal open={isOpen}
-            onCancel={onClose}
+            onCancel={close}
             footer={null}
             closable={false}
             maskClosable={false}
             className="modal"
         >
             {renderModalContent()}
-            {isClosableMatchingState() && (
-                <button className="close-button" onClick={onClose}>Close</button>
+            {isClosable && (
+                <button className="close-button" onClick={close}>Close</button>
             )}
         </Modal>
     )

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

@@ -12,6 +12,7 @@ import type { SelectProps } from 'antd';
 import 'typeface-montserrat';
 import './styles.scss';
 import { handleFindMatch } from '../handlers';
+import useMatching, { type MatchRequestParams } from '@/app/services/use-matching';
 
 interface DifficultySelectorProps {
     className?: string;
@@ -25,7 +26,11 @@ interface TopicSelectorProps {
     onChange: (topics: string[]) => void;
 }
 
-const FindMatchContent: React.FC = () => {
+interface Props {
+    beginMatch(request: MatchRequestParams): void
+}
+
+const FindMatchContent: React.FC<Props> = ({ beginMatch }) => {
     const [selectedDifficulties, setSelectedDifficulties] = useState<string[]>([]);
     const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
 
@@ -55,7 +60,13 @@ const FindMatchContent: React.FC = () => {
                 />          
             </div>
             <button className="find-match-button"
-                onClick={handleFindMatch}
+                onClick={() => {
+                    beginMatch({
+                        type: "match_request",
+                        difficulties: selectedDifficulties,
+                        topics: selectedTopics,
+                    })
+                }}
             >
                 Find Match
             </button>
@@ -77,8 +88,8 @@ const DifficultySelector: React.FC<DifficultySelectorProps> = ({ selectedDifficu
                 <Tag.CheckableTag
                     className={`difficulty-tag ${difficultyOption.value}-tag`}
                     key={difficultyOption.value}
-                    checked={selectedDifficulties.includes(difficultyOption.value)}
-                    onChange={() => handleChange(difficultyOption.value)}
+                    checked={selectedDifficulties.includes(difficultyOption.label)}
+                    onChange={() => handleChange(difficultyOption.label)}
                 >
                     {difficultyOption.label}
                 </Tag.CheckableTag>
@@ -90,11 +101,8 @@ const DifficultySelector: React.FC<DifficultySelectorProps> = ({ selectedDifficu
 const TopicSelector: React.FC<TopicSelectorProps> = ({ selectedTopics, onChange}) => {
     const topicOptions: SelectProps[] = CategoriesOption;
 
-    const handleChange = (topic: string) => {
-        const newSelectedTopics = selectedTopics.includes(topic)
-            ? selectedTopics.filter(selectedTopic => selectedTopic !== topic)
-            : [...selectedTopics, topic];
-        onChange(newSelectedTopics);
+    const handleChange = (topics: string[]) => {
+        onChange(topics);
     }
 
     return (

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

@@ -10,7 +10,12 @@ import './styles.scss';
 import { handleCancelMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
 
-const JoinedMatchContent: React.FC = () => {
+
+interface Props {
+    cancel(): void
+}
+
+const JoinedMatchContent: React.FC<Props> = ({cancel}) => {
     const matchAlreadyJoined = () => {
         throw new Error('Match already joined.');
     }
@@ -36,12 +41,11 @@ const JoinedMatchContent: React.FC = () => {
             </div>
             <button className="joined-match-deactivated-button" 
                 disabled
-                onClick={() => matchAlreadyJoined()}
             >
                 Joined
             </button>
             <button className="cancel-match-button"
-                onClick={() => handleCancelMatch()}
+                onClick={cancel}
             >
                 Cancel
             </button>

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

@@ -4,7 +4,12 @@ import './styles.scss';
 import { handleReselectMatchOptions, handleRetryMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
 
-const MatchCancelledContent: React.FC = () => {
+interface Props {
+    retry(): void,
+    reselect(): void,
+}
+
+const MatchCancelledContent: React.FC<Props> = ({retry, reselect}) => {
     return (
         <div className="match-cancelled-content">
             <div className="cancel-icon-container">
@@ -23,12 +28,12 @@ const MatchCancelledContent: React.FC = () => {
                 Your match request has been cancelled after waiting {formatTime(83)}
             </div>
             <button className="retry-match-button"
-                onClick={() => handleRetryMatch()}
+                onClick={retry}
             >
                 Retry
             </button>
             <button className="reselect-match-options-button"
-                onClick={() => handleReselectMatchOptions()}
+                onClick={reselect}
             >
                 Reselect Options
             </button>

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

@@ -5,8 +5,20 @@ import 'typeface-montserrat';
 import './styles.scss';
 import { handleCancelMatch, handleJoinMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
+import { useTimer } from "react-timer-hook"
 
-const MatchFoundContent: React.FC = () => {
+interface Props {
+    join(): void,
+    cancel(): void,
+}
+
+const TIMEOUT = 10;
+
+const MatchFoundContent: React.FC<Props> = ({join, cancel}) => {
+    const { totalSeconds } = useTimer({
+        expiryTimestamp: new Date(TIMEOUT * 1000),
+    });
+    
     return (
         <div className="matching-found-content">
             <div className="matched-profiles">
@@ -24,15 +36,15 @@ const MatchFoundContent: React.FC = () => {
             </div>
             <div className="match-status-label">Match Found!</div>
             <div className="match-status-message">
-                Joining in... {formatTime(83)}
+                Joining in... {formatTime(totalSeconds)}
             </div>
             <button className="join-match-button"
-                onClick={() => handleJoinMatch()}
+                onClick={join}
             >
                 Join
             </button>
             <button className="cancel-match-button"
-                onClick={() => handleCancelMatch()}
+                onClick={cancel}
             >
                 Cancel
             </button>

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

@@ -4,7 +4,12 @@ import './styles.scss';
 import { handleReselectMatchOptions, handleRetryMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
 
-const MatchNotFoundContent: React.FC = () => {
+const MatchNotFoundContent: React.FC<{
+    retry(): void
+    reselect(): void
+}> = ({
+    retry, reselect
+}) => {
     return (
         <div className="joined-match-content">
             <div className="dissatisfied-icon-container">
@@ -23,12 +28,12 @@ const MatchNotFoundContent: React.FC = () => {
                 Sorry, we could not find a match after {formatTime(83)}
             </div>
             <button className="retry-match-button"
-                onClick={() => handleRetryMatch()}
+                onClick={retry}
             >
                 Retry
             </button>
             <button className="reselect-match-options-button"
-                onClick={() => handleReselectMatchOptions()}
+                onClick={reselect}
             >
                 Reselect Options
             </button>

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

@@ -1,21 +1,35 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import 'typeface-montserrat';
 import './styles.scss';
 import { handleCancelMatch } from '../handlers';
+import { useTimer } from "react-timer-hook"
 import {formatTime} from '@/utils/DateTime';
 
-const MatchingInProgressContent: React.FC = () => {
+const TIMEOUT = 10;
+
+interface Props {
+    cancelMatch(): void
+}
+
+const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel}) => {
+    const time = new Date();
+    time.setSeconds(time.getSeconds() + TIMEOUT);
+    const { totalSeconds } = useTimer({
+        expiryTimestamp: time,
+        onExpire: cancel,
+    });
+
     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(83)}
+                {formatTime(TIMEOUT - totalSeconds)}
             </div>
             <button className="cancel-match-button"
-                onClick={() => handleCancelMatch()}
+                onClick={cancel}
             >
                 Cancel
             </button>

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

@@ -20,7 +20,7 @@ const HomePage = () => {
     <Layout className="layout">
       <Header selectedKey={undefined} />
       <Content className="content">
-        <MatchingModal isOpen={matchingModalOpen} onClose={closeMatchingModal}/>
+        <MatchingModal isOpen={matchingModalOpen} close={closeMatchingModal}/>
         <div className="home-content-card">
           <div className="left-panel">
             <div className="logo-container">