Merge branch 'staging' into frontend-websocket

Author: chiaryan

apps/frontend/package.json

@@ -17,7 +17,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use-websocket": "^4.9.0",
-    "sass": "^1.79.2"
+    "sass": "^1.79.2",
+    "typeface-montserrat": "^1.1.13"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/frontend/pnpm-lock.yaml

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    Modal,
+ } from 'antd';
+import 'typeface-montserrat';
+import './styles.scss';
+import FindMatchContent from './modalContent/FindMatchContent';
+import MatchingInProgressContent from './modalContent/MatchingInProgressContent';
+import MatchFound from './modalContent/MatchFoundContent';
+import JoinedMatchContent from './modalContent/JoinedMatchContent';
+import MatchNotFoundContent from './modalContent/MatchNotFoundContent';
+import MatchCancelledContent from './modalContent/MatchCancelledContent';
+
+interface MatchingModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, onClose }) => {
+    // TODO: placehoder for now, to be replaced my useContext
+    const [matchingState, setMatchingState] = useState('finding');
+
+    // 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';
+    };
+
+    const renderModalContent = () => {
+        switch (matchingState) {
+            case 'finding':
+                return <FindMatchContent/>;
+            case 'matching':
+                return <MatchingInProgressContent />;
+            case 'found':
+                return <MatchFound />;
+            case 'joined':
+                return <JoinedMatchContent />;
+            case 'notFound':
+                return <MatchNotFoundContent />;
+            case 'cancelled':
+                return <MatchCancelledContent />;
+            default:
+                throw new Error('Invalid matching state.');
+        }
+    };
+
+    return (
+        <Modal open={isOpen}
+            onCancel={onClose}
+            footer={null}
+            closable={false}
+            maskClosable={false}
+            className="modal"
+        >
+            {renderModalContent()}
+            {isClosableMatchingState() && (
+                <button className="close-button" onClick={onClose}>Close</button>
+            )}
+        </Modal>
+    )
+}
+
+export default MatchingModal;

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

@@ -0,0 +1,27 @@
+export const handleFindMatch = () => {
+    // start timer
+    // open socket connection
+    // change matching state to 'matching'
+}
+
+export const handleCancelMatch = () => {
+    // close socket connection
+    // stop timer
+    // change matching state to 'cancelled'
+}
+
+// TODO: wait for collaboration service
+export const handleJoinMatch = () => {
+    // notify server that user has joined the match (close connection?)
+    // change matching state to 'joined'
+}
+
+export const handleRetryMatch = () => {
+    // retain current difficulty and topics
+    // same as handleFindMatch
+}
+
+export const handleReselectMatchOptions = () => {
+    // reset selected difficulties and topics
+    // same as handleFindMatch
+}

apps/frontend/src/app/matching/handlers.ts

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import {
+    Tag,
+    Select,
+    Space,
+ } from 'antd';
+import {
+    DifficultyOption,
+    CategoriesOption,
+} from '@/utils/SelectOptions';
+import type { SelectProps } from 'antd';
+import 'typeface-montserrat';
+import './styles.scss';
+import { handleFindMatch } from '../handlers';
+
+interface DifficultySelectorProps {
+    className?: string;
+    selectedDifficulties: string[];
+    onChange: (difficulties: string[]) => void;
+}
+
+interface TopicSelectorProps {
+    className?: string;
+    selectedTopics: string[];
+    onChange: (topics: string[]) => void;
+}
+
+const FindMatchContent: React.FC = () => {
+    const [selectedDifficulties, setSelectedDifficulties] = useState<string[]>([]);
+    const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
+
+    const handleDifficultyChange = (difficulties: string[]) => {
+        setSelectedDifficulties(difficulties);
+    };
+
+    const handleTopicChange = (topics: string[]) => {
+        setSelectedTopics(topics);
+    };
+
+    return (
+        <div>
+            <div className="find-match-title">Find Match</div>
+            <div className="difficulty-label">Difficulty</div>
+            <div className="difficulty-selector">
+                <DifficultySelector
+                    selectedDifficulties={selectedDifficulties}
+                    onChange={handleDifficultyChange}
+                />
+            </div>
+            <div className="topic-label">Topic</div>
+            <div className="topic-selector">
+                <TopicSelector
+                    selectedTopics={selectedTopics}
+                    onChange={handleTopicChange}
+                />          
+            </div>
+            <button className="find-match-button"
+                onClick={handleFindMatch}
+            >
+                Find Match
+            </button>
+        </div>
+    )
+}
+
+const DifficultySelector: React.FC<DifficultySelectorProps> = ({ selectedDifficulties, onChange}) => {
+    const handleChange = (difficulty: string) => {
+        const newSelectedDifficulties = selectedDifficulties.includes(difficulty)
+            ? selectedDifficulties.filter(selectedDifficulty => selectedDifficulty !== difficulty)
+            : [...selectedDifficulties, difficulty];
+        onChange(newSelectedDifficulties);
+    }
+
+    return (
+        <div>
+            {DifficultyOption.map(difficultyOption => (
+                <Tag.CheckableTag
+                    className={`difficulty-tag ${difficultyOption.value}-tag`}
+                    key={difficultyOption.value}
+                    checked={selectedDifficulties.includes(difficultyOption.value)}
+                    onChange={() => handleChange(difficultyOption.value)}
+                >
+                    {difficultyOption.label}
+                </Tag.CheckableTag>
+            ))}
+        </div>
+    )
+}
+
+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);
+    }
+
+    return (
+       <div className="find-match-content">
+            <Space className="select-space" direction="vertical">
+                <Select
+                    className="select-topic"
+                    mode="multiple"
+                    allowClear
+                    style={{ width: '100%' }}
+                    placeholder="Select Topic(s)"
+                    onChange={handleChange}
+                    options={topicOptions}
+                />
+            </Space>
+       </div>
+    )
+}
+
+export default FindMatchContent;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+    Avatar,
+ } from 'antd';
+import {
+    UserOutlined,
+} from '@ant-design/icons';
+import 'typeface-montserrat';
+import './styles.scss';
+import { handleCancelMatch } from '../handlers';
+import { formatTime } from '@/utils/DateTime';
+
+const JoinedMatchContent: React.FC = () => {
+    const matchAlreadyJoined = () => {
+        throw new Error('Match already joined.');
+    }
+
+    return (
+        <div className="joined-match-content">
+            <div className="matched-profiles">
+                <Avatar size={64} icon={<UserOutlined />} />
+                <svg xmlns="http://www.w3.org/2000/svg" 
+                    height="24px" 
+                    viewBox="0 -960 960 960" 
+                    width="24px" 
+                    fill="#e8eaed"
+                    className="bolt-icon"
+                >
+                    <path d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z"/>
+                </svg>
+                <Avatar size={64} icon={<UserOutlined />} />
+            </div>
+            <div className="match-status-label">Match Found!</div>
+            <div className="match-status-message">
+                Waiting for others... {formatTime(83)}
+            </div>
+            <button className="joined-match-deactivated-button" 
+                disabled
+                onClick={() => matchAlreadyJoined()}
+            >
+                Joined
+            </button>
+            <button className="cancel-match-button"
+                onClick={() => handleCancelMatch()}
+            >
+                Cancel
+            </button>
+        </div>
+    )
+}
+
+export default JoinedMatchContent;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import 'typeface-montserrat';
+import './styles.scss';
+import { handleReselectMatchOptions, handleRetryMatch } from '../handlers';
+import { formatTime } from '@/utils/DateTime';
+
+const MatchCancelledContent: React.FC = () => {
+    return (
+        <div className="match-cancelled-content">
+            <div className="cancel-icon-container">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                    height="24px" 
+                    viewBox="0 -960 960 960" 
+                    width="24px"
+                    fill="#e8eaed"
+                    className="cancel-icon"
+                >
+                    <path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+                </svg>
+            </div>
+            <div className="match-status-label">Match Cancelled!</div>
+            <div className="match-status-message">
+                Your match request has been cancelled after waiting {formatTime(83)}
+            </div>
+            <button className="retry-match-button"
+                onClick={() => handleRetryMatch()}
+            >
+                Retry
+            </button>
+            <button className="reselect-match-options-button"
+                onClick={() => handleReselectMatchOptions()}
+            >
+                Reselect Options
+            </button>
+        </div>
+    )
+}
+
+export default MatchCancelledContent;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Avatar } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+import 'typeface-montserrat';
+import './styles.scss';
+import { handleCancelMatch, handleJoinMatch } from '../handlers';
+import { formatTime } from '@/utils/DateTime';
+
+const MatchFoundContent: React.FC = () => {
+    return (
+        <div className="matching-found-content">
+            <div className="matched-profiles">
+                <Avatar size={64} icon={<UserOutlined />} />
+                <svg xmlns="http://www.w3.org/2000/svg" 
+                    height="24px" 
+                    viewBox="0 -960 960 960" 
+                    width="24px" 
+                    fill="#e8eaed"
+                    className="bolt-icon"
+                >
+                    <path d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z"/>
+                </svg>
+                <Avatar size={64} icon={<UserOutlined />} />
+            </div>
+            <div className="match-status-label">Match Found!</div>
+            <div className="match-status-message">
+                Joining in... {formatTime(83)}
+            </div>
+            <button className="join-match-button"
+                onClick={() => handleJoinMatch()}
+            >
+                Join
+            </button>
+            <button className="cancel-match-button"
+                onClick={() => handleCancelMatch()}
+            >
+                Cancel
+            </button>
+        </div>
+    )
+}
+
+export default MatchFoundContent;