Frontend-Backend matching integration

frontend/components/matching/find-match.tsx

@@ -4,13 +4,18 @@ import { MatchForm } from "@/components/matching/matching-form";
 import { SearchProgress } from "@/components/matching/search-progress";
 import { SelectionSummary } from "@/components/matching/selection-summary";
 import { useToast } from "@/components/hooks/use-toast";
+import { useAuth } from "@/app/auth/auth-context";
+import { joinMatchQueue } from "@/lib/join-match-queue";
+import { leaveMatchQueue } from "@/lib/leave-match-queue";
+import { subscribeMatch } from "@/lib/subscribe-match";
 
 export default function FindMatch() {
   const [selectedDifficulty, setSelectedDifficulty] = useState<string>("");
   const [selectedTopic, setSelectedTopic] = useState<string>("");
   const [isSearching, setIsSearching] = useState<boolean>(false);
   const [waitTime, setWaitTime] = useState<number>(0);
   const { toast } = useToast();
+  const auth = useAuth();
 
   useEffect(() => {
     let interval: NodeJS.Timeout | undefined;
@@ -21,24 +26,147 @@ export default function FindMatch() {
     } else {
       setWaitTime(0);
     }
-    return () => clearInterval(interval);
+
+    return () => {
+      clearInterval(interval);
+    };
   }, [isSearching]);
 
-  const handleSearch = () => {
-    if (selectedDifficulty && selectedTopic) {
-      setIsSearching(true);
-    } else {
+  const handleSearch = async () => {
+    if (!selectedDifficulty || !selectedTopic) {
       toast({
         title: "Invalid Selection",
         description: "Please select both a difficulty level and a topic",
         variant: "destructive",
       });
+      return;
+    }
+
+    if (!auth || !auth.token) {
+      toast({
+        title: "Access denied",
+        description: "No authentication token found",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!auth.user) {
+      toast({
+        title: "Access denied",
+        description: "Not logged in",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const response = await joinMatchQueue(
+      auth.token,
+      auth?.user?.id,
+      selectedTopic,
+      selectedDifficulty
+    );
+    switch (response.status) {
+      case 201:
+        toast({
+          title: "Matched",
+          description: "Successfully matched",
+          variant: "success",
+        });
+        return;
+      case 202:
+      case 304:
+        setIsSearching(true);
+        const ws = await subscribeMatch(
+          auth?.user.id,
+          selectedTopic,
+          selectedDifficulty
+        );
+        const queueTimeout = setTimeout(() => {
+          handleCancel();
+        }, 60000);
+        ws.onmessage = () => {
+          setIsSearching(false);
+          clearTimeout(queueTimeout);
+          toast({
+            title: "Matched",
+            description: "Successfully matched",
+            variant: "success",
+          });
+          ws.onclose = () => null;
+        };
+        ws.onclose = () => {
+          setIsSearching(false);
+          clearTimeout(queueTimeout);
+          toast({
+            title: "Matching Stopped",
+            description: "Matching has been stopped",
+            variant: "destructive",
+          });
+        };
+        return;
+      default:
+        toast({
+          title: "Unknown Error",
+          description: "An unexpected error has occured",
+          variant: "destructive",
+        });
+        return;
     }
   };
 
-  const handleCancel = () => {
-    setIsSearching(false);
-    setWaitTime(0);
+  const handleCancel = async () => {
+    if (!selectedDifficulty || !selectedTopic) {
+      toast({
+        title: "Invalid Selection",
+        description: "Please select both a difficulty level and a topic",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!auth || !auth.token) {
+      toast({
+        title: "Access denied",
+        description: "No authentication token found",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!auth.user) {
+      toast({
+        title: "Access denied",
+        description: "Not logged in",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const response = await leaveMatchQueue(
+      auth.token,
+      auth.user?.id,
+      selectedTopic,
+      selectedDifficulty
+    );
+    switch (response.status) {
+      case 200:
+        setIsSearching(false);
+        setWaitTime(0);
+        toast({
+          title: "Success",
+          description: "Successfully left queue",
+          variant: "success",
+        });
+        return;
+      default:
+        toast({
+          title: "Unknown Error",
+          description: "An unexpected error has occured",
+          variant: "destructive",
+        });
+        return;
+    }
   };
 
   return (

frontend/lib/api-uri.ts

@@ -1,9 +1,16 @@
 const constructUri = (baseUri: string, port: string | undefined) =>
   `http://${process.env.NEXT_PUBLIC_BASE_URI || baseUri}:${port}`;
 
+const constructWebSockUri = (baseUri: string, port: string | undefined) =>
+  `ws://${process.env.NEXT_PUBLIC_BASE_URI || baseUri}:${port}`;
+
 export const userServiceUri: (baseUri: string) => string = (baseUri) =>
   constructUri(baseUri, process.env.NEXT_PUBLIC_USER_SVC_PORT);
 export const questionServiceUri: (baseUri: string) => string = (baseUri) =>
   constructUri(baseUri, process.env.NEXT_PUBLIC_QUESTION_SVC_PORT);
 export const matchingServiceUri: (baseUri: string) => string = (baseUri) =>
   constructUri(baseUri, process.env.NEXT_PUBLIC_MATCHING_SVC_PORT);
+
+export const matchingServiceWebSockUri: (baseUri: string) => string = (
+  baseUri
+) => constructWebSockUri(baseUri, process.env.NEXT_PUBLIC_MATCHING_SVC_PORT);

frontend/lib/join-match-queue.ts

@@ -0,0 +1,24 @@
+import { matchingServiceUri } from "@/lib/api-uri";
+
+export const joinMatchQueue = async (
+  jwtToken: string,
+  userId: string,
+  category: string,
+  complexity: string
+) => {
+  const params = new URLSearchParams({
+    topic: category,
+    difficulty: complexity,
+  }).toString();
+  const response = await fetch(
+    `${matchingServiceUri(window.location.hostname)}/match/queue/${userId}?${params}`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${jwtToken}`,
+        "Content-Type": "application/json",
+      },
+    }
+  );
+  return response;
+};

frontend/lib/leave-match-queue.ts

@@ -0,0 +1,24 @@
+import { matchingServiceUri } from "@/lib/api-uri";
+
+export const leaveMatchQueue = async (
+  jwtToken: string,
+  userId: string,
+  category: string,
+  complexity: string
+) => {
+  const params = new URLSearchParams({
+    topic: category,
+    difficulty: complexity,
+  }).toString();
+  const response = await fetch(
+    `${matchingServiceUri(window.location.hostname)}/match/queue/${userId}?${params}`,
+    {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${jwtToken}`,
+        "Content-Type": "application/json",
+      },
+    }
+  );
+  return response;
+};

frontend/lib/subscribe-match.ts

@@ -0,0 +1,15 @@
+import { matchingServiceWebSockUri } from "@/lib/api-uri";
+
+export const subscribeMatch = async (
+  userId: string,
+  category: string,
+  complexity: string
+) => {
+  const params = new URLSearchParams({
+    topic: category,
+    difficulty: complexity,
+  });
+  return new WebSocket(
+    `${matchingServiceWebSockUri(window.location.hostname)}/match/subscribe/${userId}?${params}`
+  );
+};

matching-service/app/exceptions/socket_exceptions.py

@@ -0,0 +1,2 @@
+class NoExistingConnectionException(Exception):
+    pass