From 0cc53fadf049a3ccc0ce3fcaf5699cf5838d03f4 Mon Sep 17 00:00:00 2001
From: Ong Jun Xiong <junxiongong2@gmail.com>
Date: Thu, 12 Oct 2023 01:42:08 +0800
Subject: [PATCH] update logic

---
 frontend/providers/MatchmakingProvider.tsx    |  13 +-
 frontend/src/hooks/useMatchmaking.tsx         | 137 ++----------------
 frontend/src/pages/interviews/find-match.tsx  |   2 +-
 frontend/src/pages/interviews/index.tsx       |   2 +-
 frontend/src/pages/interviews/match-found.tsx |  68 ++++++---
 5 files changed, 60 insertions(+), 162 deletions(-)

diff --git a/frontend/providers/MatchmakingProvider.tsx b/frontend/providers/MatchmakingProvider.tsx
index 2a5edf90..cae79f38 100644
--- a/frontend/providers/MatchmakingProvider.tsx
+++ b/frontend/providers/MatchmakingProvider.tsx
@@ -9,9 +9,8 @@ import { io, Socket } from "socket.io-client";
 import { Match } from "@prisma/client";
 import { AuthContext } from "@/contexts/AuthContext";
 
-const SERVER_URL = "http://localhost:5002"; // Replace with your server's URL
+const SERVER_URL = "http://localhost:5002";
 
-// Define the context
 interface MatchmakingContextValue {
   socket: Socket | null;
   match: Match | null;
@@ -42,7 +41,7 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
   const { user: currentUser, authIsReady } = useContext(AuthContext);
 
   const generateRandomNumber = () => {
-    // return a random number either 0 or 1 as a string
+    // Return a random number either 0 or 1 as a string
     return Math.floor(Math.random() * 2).toString();
   };
 
@@ -147,11 +146,3 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
     </MatchmakingContext.Provider>
   );
 };
-
-export function useMatchmaking() {
-  const context = useContext(MatchmakingContext);
-  if (!context) {
-    throw new Error("useMatchmaking must be used within a MatchmakingProvider");
-  }
-  return context;
-}
diff --git a/frontend/src/hooks/useMatchmaking.tsx b/frontend/src/hooks/useMatchmaking.tsx
index be603148..b5f252dc 100644
--- a/frontend/src/hooks/useMatchmaking.tsx
+++ b/frontend/src/hooks/useMatchmaking.tsx
@@ -1,127 +1,10 @@
-// import { AuthContext } from "@/contexts/AuthContext";
-// import { useEffect, useState, useCallback, useContext } from "react";
-// import { io, Socket } from "socket.io-client";
-
-// const SERVER_URL = "http://localhost:5002/"; // Replace with your server's URL
-
-// interface Match {
-//   // Define the properties of a Match based on your backend structure
-//   userId1: string;
-//   userId2: string;
-//   chosenDifficulty: string;
-//   chosenProgrammingLang: string;
-//   // Add other properties as needed
-// }
-
-// interface UseMatchmakingHook {
-//   socket: Socket | null;
-//   match: Match | null;
-//   message: string;
-//   error: string;
-//   joinQueue: (difficulties: string[], programmingLang: string) => void;
-//   sendMessage: (message: string) => void;
-//   leaveMatch: () => void;
-//   cancelLooking: () => void;
-// }
-
-// export function useMatchmaking(): UseMatchmakingHook {
-//   const [socket, setSocket] = useState<Socket | null>(null);
-//   const [match, setMatch] = useState<Match | null>(null);
-//   const [message, setMessage] = useState<string>("");
-//   const [error, setError] = useState<string>("");
-
-//   const { user: currentUser, authIsReady } = useContext(AuthContext);
-
-//   // Initialize socket connection
-//   useEffect(() => {
-//     const newSocket = io(SERVER_URL, {
-//       autoConnect: false,
-//       query: { username: currentUser?.email },
-//     });
-//     setSocket(newSocket);
-//     newSocket.connect();
-
-//     return () => {
-//       newSocket.close();
-//     };
-//   }, []);
-
-//   // Setup socket event listeners
-//   useEffect(() => {
-//     if (!socket) return;
-
-//     socket.on("connect", () => {
-//       console.log("Connected to server");
-//     });
-
-//     socket.on("matchFound", (match: Match) => {
-//       console.log("Match found:", match);
-//       setMatch(match);
-//     });
-
-//     socket.on("receiveMessage", (userId: string, message: string) => {
-//       console.log("Message received:", message);
-//       setMessage(message);
-//     });
-
-//     socket.on("error", (error: string) => {
-//       console.error("An error occurred:", error);
-//       setError(error);
-//     });
-
-//     socket.on("disconnect", () => {
-//       console.log("Disconnected from server");
-//     });
-
-//     return () => {
-//       socket.off("connect");
-//       socket.off("matchFound");
-//       socket.off("receiveMessage");
-//       socket.off("error");
-//       socket.off("disconnect");
-//     };
-//   }, [socket]);
-
-//   const joinQueue = useCallback(
-//     (difficulties: string[], programmingLang: string) => {
-//       if (!socket) return;
-
-//       socket.emit("lookingForMatch", difficulties, programmingLang);
-//     },
-//     [socket]
-//   );
-
-//   const sendMessage = useCallback(
-//     (message: string) => {
-//       if (!socket) return;
-
-//       socket.emit("sendMessage", message);
-//     },
-//     [socket]
-//   );
-
-//   const leaveMatch = useCallback(() => {
-//     if (!socket) return;
-
-//     socket.emit("leaveMatch");
-//   }, [socket]);
-
-//   const cancelLooking = useCallback(() => {
-//     if (!socket) return;
-
-//     socket.emit("cancelLooking");
-//   }, [socket]);
-
-//   return {
-//     socket,
-//     match,
-//     message,
-//     error,
-//     joinQueue,
-//     sendMessage,
-//     leaveMatch,
-//     cancelLooking,
-//   };
-// }
-
-// export default useMatchmaking;
+import { useContext } from "react";
+import { MatchmakingContext } from "../../providers/MatchmakingProvider";
+
+export function useMatchmaking() {
+  const context = useContext(MatchmakingContext);
+  if (!context) {
+    throw new Error("useMatchmaking must be used within a MatchmakingProvider");
+  }
+  return context;
+}
diff --git a/frontend/src/pages/interviews/find-match.tsx b/frontend/src/pages/interviews/find-match.tsx
index 43a5f770..e35303d5 100644
--- a/frontend/src/pages/interviews/find-match.tsx
+++ b/frontend/src/pages/interviews/find-match.tsx
@@ -4,8 +4,8 @@ import { TypographyBody, TypographyH2 } from "@/components/ui/typography";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import { useMatchmaking } from "../../../providers/MatchmakingProvider";
 import InterviewsLayout from "@/components/interviews/InterviewsLayout";
+import { useMatchmaking } from "@/hooks/useMatchmaking";
 
 export default function FindMatch() {
   const router = useRouter();
diff --git a/frontend/src/pages/interviews/index.tsx b/frontend/src/pages/interviews/index.tsx
index 18450962..7e12f6bd 100644
--- a/frontend/src/pages/interviews/index.tsx
+++ b/frontend/src/pages/interviews/index.tsx
@@ -18,11 +18,11 @@ import {
   TypographyH2,
   TypographySmall,
 } from "@/components/ui/typography";
+import { useMatchmaking } from "@/hooks/useMatchmaking";
 import { cn } from "@/lib/utils";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { useMatchmaking } from "../../../providers/MatchmakingProvider";
 
 type Difficulty = "easy" | "medium" | "hard" | "any";
 
diff --git a/frontend/src/pages/interviews/match-found.tsx b/frontend/src/pages/interviews/match-found.tsx
index 45212569..0f1b7614 100644
--- a/frontend/src/pages/interviews/match-found.tsx
+++ b/frontend/src/pages/interviews/match-found.tsx
@@ -1,33 +1,57 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { TypographyCode, TypographyH2, TypographyH3 } from "@/components/ui/typography";
+import {
+  TypographyCode,
+  TypographyH2,
+  TypographyH3,
+} from "@/components/ui/typography";
+import { useMatchmaking } from "@/hooks/useMatchmaking";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 type UserInfo = {
-  name: string
-  username: string
-  avatar: string
-}
+  name: string;
+  username: string;
+  avatar: string;
+};
 
 const defaultUser: UserInfo = {
   name: "John Doe",
   username: "johndoe",
-  avatar: "https://github.com/shadcn.png"
-}
+  avatar: "https://github.com/shadcn.png",
+};
 
 export default function MatchFound() {
+  const router = useRouter();
+  const { match, leaveMatch, joinQueue, cancelLooking } = useMatchmaking();
+
+  const onClickCancel = () => {
+    leaveMatch();
+    router.push("/interviews");
+  };
+
+  const onClickRetry = () => {
+    cancelLooking();
+    joinQueue(["easy", "medium", "hard"], "python");
+    router.push("/interviews/find-match");
+  };
+
+  const onClickAccept = () => {
+    router.push(`/room/${match?.roomId}`);
+  };
+
   return (
-    <div className='min-h-screen p-12 mx-auto max-w-7xl flex flex-col justify-evenly items-center'>
-      <TypographyH2>
-        Match Found!
-      </TypographyH2>
+    <div className="min-h-screen p-12 mx-auto max-w-7xl flex flex-col justify-evenly items-center">
+      <TypographyH2>Match Found!</TypographyH2>
 
       <Card className="flex flex-col justify-center items-center gap-y-6">
         <div className="flex items-center w-full justify-center gap-x-4 p-16 shadow-2xl shadow-secondary/50">
           <Avatar className="h-24 w-24">
             <AvatarImage src={defaultUser.avatar} />
-            <AvatarFallback>{defaultUser.name.charAt(0).toUpperCase()}</AvatarFallback>
+            <AvatarFallback>
+              {defaultUser.name.charAt(0).toUpperCase()}
+            </AvatarFallback>
           </Avatar>
           <div>
             <TypographyH3>{defaultUser?.name}</TypographyH3>
@@ -37,16 +61,16 @@ export default function MatchFound() {
       </Card>
 
       <div className="flex gap-x-6">
-        <Link href="/interviews">
-          <Button variant="secondary">Cancel Search</Button>
-        </Link>
-        <Link href="/interviews/1/find-match">
-          <Button variant="secondary">Retry Match</Button>
-        </Link>
-        <Link href="/room">
-          <Button variant="default">Accept Interview</Button>
-        </Link>
+        <Button variant="secondary" onClick={onClickCancel}>
+          Cancel Search
+        </Button>
+        <Button variant="secondary" onClick={onClickRetry}>
+          Retry Match
+        </Button>
+        <Button variant="default" onClick={onClickAccept}>
+          Accept Interview
+        </Button>
       </div>
     </div>
-  )
+  );
 }