Lift form state to Modal, add retry button

chiaryan · chiaryan · commit d32a60171fdd · 2024-10-25T13:25:43.000+08:00
diff --git a/apps/frontend/src/app/matching/MatchingModal.tsx b/apps/frontend/src/app/matching/MatchingModal.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { 
+    Form,
     Modal,
  } from 'antd';
 import 'typeface-montserrat';
@@ -11,12 +12,18 @@ import JoinedMatchContent from './modalContent/JoinedMatchContent';
 import MatchNotFoundContent from './modalContent/MatchNotFoundContent';
 import MatchCancelledContent from './modalContent/MatchCancelledContent';
 import useMatching from '../services/use-matching';
+import { ValidateUser } from '../services/user';
 
 interface MatchingModalProps {
     isOpen: boolean;
     close: () => void;
 }
 
+export interface MatchParams {
+    topics: string[],
+    difficulties: string[],
+}
+
 const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close }) => {
     const matchingState = useMatching();
     const [closedType, setClosedType] = useState<"finding" | "cancelled" | "joined">("finding");
@@ -32,6 +39,16 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
         _close();
     }
 
+    const startMatch = matchingState.state == "closed" || matchingState.state == "timeout" ? async (params: MatchParams): Promise<void> => {
+        const user = await ValidateUser();
+        matchingState.start({
+            email: user.data.email,
+            username: user.data.username,
+            type: "match_request",
+            ...params
+        });
+    } : undefined;
+    
     const renderModalContent = () => {
         switch (matchingState.state) {
             case 'closed':
@@ -43,7 +60,6 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                             reselect={() => {
                                 setClosedType("finding");
                             }}
-                            retry={() => {}}
                             canceledIn={timeoutAfter}
                         />;
                     case "joined":
@@ -72,7 +88,7 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
             case 'starting':
                 return <FindMatchContent beginMatch={() => {}}/>
             case 'found':
-                return <MatchFoundContent 
+                return <MatchFoundContent
                     cancel={() => {
                         matchingState.ok();
                         setClosedType("cancelled");
@@ -85,7 +101,7 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                     name2={matchingState.info.partnerName}
                 />
             case 'timeout':
-                return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}}  timedOutIn={10}/>;
+                return <MatchNotFoundContent reselect={matchingState.ok} timedOutIn={10}/>;
             default:
                 throw new Error('Invalid matching state.');
         }
@@ -99,7 +115,15 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
             maskClosable={false}
             className="modal"
         >
-            {renderModalContent()}
+            <Form<MatchParams> 
+                name="match"
+                onFinish={startMatch}
+                initialValues={{
+                    topics: [],
+                    difficulties: [],
+                }}>
+                {renderModalContent()}
+            </Form>
             {isClosable && (
                 <button className="close-button" onClick={close}>Close</button>
             )}
diff --git a/apps/frontend/src/app/matching/modalContent/FindMatchContent.tsx b/apps/frontend/src/app/matching/modalContent/FindMatchContent.tsx
@@ -3,6 +3,8 @@ import {
     Tag,
     Select,
     Space,
+    Form,
+    Button,
  } from 'antd';
 import {
     DifficultyOption,
@@ -13,119 +15,60 @@ import 'typeface-montserrat';
 import './styles.scss';
 import { ValidateUser } from "@/app/services/user"
 import { type MatchRequestParams } from '@/app/services/use-matching';
-
-interface DifficultySelectorProps {
-    className?: string;
-    selectedDifficulties: string[];
-    onChange: (difficulties: string[]) => void;
-}
-
-interface TopicSelectorProps {
-    className?: string;
-    selectedTopics: string[];
-    onChange: (topics: string[]) => void;
-}
+import { MatchParams } from '../MatchingModal';
 
 interface Props {
     beginMatch(request: MatchRequestParams): void
 }
 
 const FindMatchContent: React.FC<Props> = ({ beginMatch }) => {
-    const [selectedDifficulties, setSelectedDifficulties] = useState<string[]>([]);
-    const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
-    const [isLoading, setIsLoading] = useState(false);
-
-    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}
-                />
+                <Form.Item<MatchParams> name="difficulties">
+                    {/* @ts-ignore Not required to pass value and onChange as since this is handled by Form.Item wrapper*/}
+                    <TagInput/>
+                </Form.Item>
             </div>
             <div className="topic-label">Topic</div>
             <div className="topic-selector">
-                <TopicSelector
-                    selectedTopics={selectedTopics}
-                    onChange={handleTopicChange}
-                />          
+                <Form.Item<MatchParams>
+                    name="topics"
+                    >
+                    <Select mode="multiple" allowClear placeholder="Select Topic(s)" options={CategoriesOption}/>
+                </Form.Item>
             </div>
-            <button className="find-match-button"
-                onClick={async () => {
-                    setIsLoading(true);
-                    const user = await ValidateUser();
-                    beginMatch({
-                        email: user.data.email,
-                        username: user.data.username,
-                        type: "match_request",
-                        difficulties: selectedDifficulties,
-                        topics: selectedTopics,
-                    })
-                }}
-                disabled={isLoading}
-            >
-                Find Match
+            <button className="find-match-button" type="submit">
+                FIND
             </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.label)}
-                    onChange={() => handleChange(difficultyOption.label)}
-                >
-                    {difficultyOption.label}
-                </Tag.CheckableTag>
-            ))}
-        </div>
-    )
-}
-
-const TopicSelector: React.FC<TopicSelectorProps> = ({ selectedTopics, onChange}) => {
-    const topicOptions: SelectProps[] = CategoriesOption;
-    
-    const handleChange = (topics: string[]) => {
-        onChange(topics);
-    }
-
-    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>
-    )
+const TagInput: React.FC<{
+    value: string[],
+    onChange(value: string[]): void,
+}> = ({ value, onChange }) => {
+    return <>
+        {DifficultyOption.map(difficultyOption => (
+            <Tag.CheckableTag
+                className={`difficulty-tag ${difficultyOption.value}-tag`}
+                key={difficultyOption.value}
+                checked={value.includes(difficultyOption.label)}
+                onChange={(enabled) => {
+                    onChange(
+                        enabled 
+                            ? [...value, difficultyOption.label] 
+                            : value.filter(diff => diff !== difficultyOption.label)
+                    )
+                }}
+            >
+                {difficultyOption.label}
+            </Tag.CheckableTag>
+        ))}
+    </>
 }
 
 export default FindMatchContent;
diff --git a/apps/frontend/src/app/matching/modalContent/MatchCancelledContent.tsx b/apps/frontend/src/app/matching/modalContent/MatchCancelledContent.tsx
@@ -3,14 +3,14 @@ import 'typeface-montserrat';
 import './styles.scss';
 import { handleReselectMatchOptions, handleRetryMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
+import { Button, Form } from 'antd';
 
 interface Props {
-    retry(): void,
     reselect(): void,
     canceledIn: number,
 }
 
-const MatchCancelledContent: React.FC<Props> = ({retry, reselect, canceledIn}) => {
+const MatchCancelledContent: React.FC<Props> = ({reselect, canceledIn}) => {
     return (
         <div className="match-cancelled-content">
             <div className="cancel-icon-container">
@@ -28,11 +28,11 @@ const MatchCancelledContent: React.FC<Props> = ({retry, reselect, canceledIn}) =
             <div className="match-status-message">
                 Your match request has been cancelled after waiting {formatTime(canceledIn)}
             </div>
-            {/* <button className="retry-match-button"
-                onClick={retry}
-            >
-                Retry
-            </button> */}
+            <Form.Item noStyle>
+                <button className="retry-match-button" type="submit">
+                    Retry
+                </button>
+            </Form.Item>
             <button className="reselect-match-options-button"
                 onClick={reselect}
             >
diff --git a/apps/frontend/src/app/matching/modalContent/MatchNotFoundContent.tsx b/apps/frontend/src/app/matching/modalContent/MatchNotFoundContent.tsx
@@ -3,13 +3,14 @@ import 'typeface-montserrat';
 import './styles.scss';
 import { handleReselectMatchOptions, handleRetryMatch } from '../handlers';
 import { formatTime } from '@/utils/DateTime';
+import { Button, Form } from 'antd';
+import { MatchParams } from '../MatchingModal';
 
 const MatchNotFoundContent: React.FC<{
-    retry(): void,
     reselect(): void,
     timedOutIn: number,
 }> = ({
-    retry, reselect, timedOutIn
+    reselect, timedOutIn
 }) => {
     return (
         <div className="joined-match-content">
@@ -28,11 +29,11 @@ const MatchNotFoundContent: React.FC<{
             <div className="match-status-message">
                 Sorry, we could not find a match after {formatTime(timedOutIn)}
             </div>
-            {/* <button className="retry-match-button"
-                onClick={retry}
-            >
-                Retry
-            </button> */}
+            <Form.Item<MatchParams> noStyle>
+                <button className="retry-match-button" type="submit">
+                    Retry
+                </button>
+            </Form.Item>
             <button className="reselect-match-options-button"
                 onClick={reselect}
             >
diff --git a/apps/frontend/src/app/services/use-matching.ts b/apps/frontend/src/app/services/use-matching.ts
@@ -98,6 +98,7 @@ export default function useMatching(): MatchState {
         setSte({
             state: "timeout",
             ok: cancel,
+            start
         });
     }
 
diff --git a/apps/frontend/src/contexts/websocketcontext.tsx b/apps/frontend/src/contexts/websocketcontext.tsx
@@ -26,6 +26,7 @@ export type MatchState = SocketState | {
 } | {
     state: "timeout";
     ok(): void;
+    start(req: MatchRequestParams): void;
 };
 
 export const WebSocketContext = createContext<MatchState | null>(null);

Original file line number	Diff line number	Diff line change
`@@ -98,6 +98,7 @@ export default function useMatching(): MatchState {`
`98`	`98`	`setSte({`
`99`	`99`	`state: "timeout",`
`100`	`100`	`ok: cancel,`
	`101`	`+ start`
`101`	`102`	`});`
`102`	`103`	`}`
`103`	`104`