Integrate with new matchmaking changes

Also some fixes for timer display

Author: chiaryan

apps/frontend/src/app/match/page.tsx

@@ -79,7 +79,7 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                     }}
                 />
             case 'timeout':
-                return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}}  timedOutIn={timeoutAfter}/>;
+                return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}}  timedOutIn={10}/>;
             default:
                 throw new Error('Invalid matching state.');
         }

apps/frontend/src/app/match/styles.scss

@@ -11,8 +11,8 @@ import {
 import type { SelectProps } from 'antd';
 import 'typeface-montserrat';
 import './styles.scss';
-import { handleFindMatch } from '../handlers';
-import useMatching, { type MatchRequestParams } from '@/app/services/use-matching';
+import { ValidateUser } from "@/app/services/user"
+import { type MatchRequestParams } from '@/app/services/use-matching';
 
 interface DifficultySelectorProps {
     className?: string;
@@ -33,6 +33,7 @@ interface Props {
 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);
@@ -60,13 +61,28 @@ const FindMatchContent: React.FC<Props> = ({ beginMatch }) => {
                 />          
             </div>
             <button className="find-match-button"
-                onClick={() => {
+                onClick={async () => {
+
+                    async function ValidateUser() {
+                        return {
+                            data: {
+                                email: "asda",
+                                username: "sajdhkas"
+                            }
+                        }
+                    }
+                    
+                    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>

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

@@ -16,7 +16,8 @@ const TIMEOUT = 10;
 
 const MatchFoundContent: React.FC<Props> = ({join, cancel}) => {
     const { totalSeconds } = useTimer({
-        expiryTimestamp: new Date(TIMEOUT * 1000),
+        expiryTimestamp: new Date(Date.now() + 10 * 1000),
+        onExpire: join
     });
 
     return (

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

@@ -14,11 +14,9 @@ interface Props {
 }
 
 const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel, timeout}) => {
-    const time = new Date();
-    time.setSeconds(time.getSeconds() + TIMEOUT);
     const { totalSeconds } = useTimer({
-        expiryTimestamp: time,
-        onExpire: () => timeout(TIMEOUT),
+        expiryTimestamp: new Date(Date.now() + 10 * 1000),
+        onExpire: () => timeout(TIMEOUT - totalSeconds),
     });
 
     return (
@@ -31,7 +29,7 @@ const MatchingInProgressContent: React.FC<Props> = ({cancelMatch: cancel, timeou
             </div>
             <button className="cancel-match-button"
                 onClick={() => {
-                    timeout(TIMEOUT);
+                    cancel(TIMEOUT - totalSeconds);
                 }}
             >
                 Cancel

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

@@ -10,6 +10,8 @@ if (MATCHING_SERVICE_URL == undefined) {
 
 export type MatchRequestParams = {
     type: "match_request",
+    username: string,
+    email: string,
     topics: string[],
     difficulties: string[],
 }
@@ -26,6 +28,11 @@ export type MatchTimeoutResponse = {
     message: string,
 }
 
+export type MatchRejectedResponse = {
+    type: "match_rejected",
+    message: string,
+}
+
 type MatchResponse = MatchFoundResponse | MatchTimeoutResponse;
 
 export default function useMatching(): MatchState {
@@ -41,7 +48,6 @@ export default function useMatching(): MatchState {
         },
         onMessage({data: response}) {
             const responseJson: MatchResponse = JSON.parse(response);
-            console.log("got here");
             if (responseJson.type == "timeout") {
                 timeout();
                 return;