Move websocket logic into services file, add states for finding match and timeout

Author: chiaryan

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

@@ -9,12 +9,19 @@ import "./styles.scss";
 import { useContext } from "react";
 import { WebSocketContext } from "@/contexts/websocketcontext";
 
-export default function ProfilePage(): JSX.Element {
+export default function MatchPage(): JSX.Element {
   const matcher = useContext(WebSocketContext)! // ! is a null-check
+
   let button;
   switch (matcher.state) {
     case "closed":
-      button = <Button onClick={matcher.start}>Start Match</Button>
+      button = <Button onClick={() => {
+        matcher.start({
+          "type": "match_request",
+          "topics": ["Algorithms", "Arrays"],
+          "difficulties": ["Easy", "Medium"]
+        })
+      }}>Start Match</Button>
       break;
 
     case "matching":
@@ -26,9 +33,13 @@ export default function ProfilePage(): JSX.Element {
       button = <Button loading>{matcher.state}</Button>
       break;
 
-    // case "ready":
-    //   button = <Button disabled>Ok</Button>
-    //   break;
+    case "found":
+      button = <Button onClick={matcher.ok}>Your Partner is {matcher.info.partnerName}</Button>
+      break;
+      
+    case "timeout":
+      button = <Button onClick={matcher.ok}>Timered Out</Button>
+      break;
   }
 
 
@@ -37,8 +48,7 @@ export default function ProfilePage(): JSX.Element {
       <Header selectedKey={["0"]} />
         <Content className="content">
           {button}
-          {"found" in matcher && <Button onClick={matcher.ok}>Found: {matcher.found}</Button>}
-          <p>{matcher.state.toUpperCase()}</p>
+          <p>{matcher.state}</p>
         </Content>
     </Layout>
   )

apps/frontend/src/app/services/use-matching.ts

@@ -0,0 +1,104 @@
+import { MatchState } from "@/contexts/websocketcontext";
+import { useEffect, useState } from "react";
+import useWebSocket, { Options, ReadyState } from "react-use-websocket";
+
+const MATCHING_SERVICE_URL = process.env.NEXT_PUBLIC_MATCHING_SERVICE_URL;
+
+if (MATCHING_SERVICE_URL == undefined) {
+    throw "NEXT_PUBLIC_MATCHING_SERVICE_URL was not defined in .env";
+}
+
+export type MatchRequestParams = {
+    type: "match_request",
+    topics: string[],
+    difficulties: string[],
+}
+
+export type MatchFoundResponse = {
+    type: "match_found",
+    matchId: number,
+    partnerId: number,
+    partnerName: string,
+}
+
+export type MatchTimeoutResponse = {
+    type: "timeout",
+    message: string,
+}
+
+type MatchResponse = MatchFoundResponse | MatchTimeoutResponse;
+
+export default function useMatching(): MatchState {
+    const [isSocket, setIsSocket] = useState<boolean>(false);
+    const [ste, setSte] = useState<MatchState>({
+        state: "closed",
+        start,
+    });
+
+    const options: Options = {
+        onClose() {
+            setIsSocket(false);
+        },
+        onMessage({data: response}) {
+            const responseJson: MatchResponse = JSON.parse(response);
+            if (responseJson.type == "timeout") {
+                setIsSocket(false);
+                setSte({
+                    state: "timeout",
+                    ok: cancel,
+                })
+                return;
+            }
+
+            if (responseJson.type == "match_found") {
+                setIsSocket(false);
+                setSte({
+                    state: "found",
+                    info: {
+                        matchId: responseJson.matchId.toString(),
+                        partnerId: responseJson.partnerId.toString(),
+                        partnerName: responseJson.partnerName,
+                    },
+                    ok: cancel
+                })
+                return;
+            }
+        }
+    }
+
+    const { 
+        readyState: socketState, 
+        sendJsonMessage, 
+    } = useWebSocket<MatchResponse>(MATCHING_SERVICE_URL as string, options, isSocket);
+    
+    function cancel() {
+        setIsSocket(false)
+        setSte({
+            state: "closed",
+            start,
+        })
+    }
+    function start(request: MatchRequestParams) {
+        setIsSocket(true)
+        sendJsonMessage(request);
+    }
+    
+    let matchState: MatchState;
+    switch (socketState) {
+        case ReadyState.CLOSED:
+        case ReadyState.UNINSTANTIATED:
+            matchState = {state: "closed", start}
+            break;
+        case ReadyState.OPEN:
+            matchState = {state: "matching", cancel}
+            break;
+        case ReadyState.CONNECTING:
+            matchState = {state: "starting"}
+            break;
+        case ReadyState.CLOSING:
+            matchState = {state: "cancelling"}
+            break;
+    }
+
+    return isSocket ? matchState : ste;
+}

apps/frontend/src/components/WebSocketProvider/websocketprovider.tsx

@@ -1,56 +1,18 @@
 "use client"
 
-import { ReactNode, useEffect, useState } from "react"
-import { type FoundState, type SocketState, WebSocketContext } from "@/contexts/websocketcontext";
-import useWebSocket, { ReadyState } from "react-use-websocket"
+import { ReactNode } from "react"
+import { WebSocketContext } from "@/contexts/websocketcontext";
+import useMatching from "@/app/services/use-matching";
 const MATCHING_SERVICE_URL = process.env.NEXT_PUBLIC_MATCHING_SERVICE_URL;
 
 if (MATCHING_SERVICE_URL == undefined) {
     throw "NEXT_PUBLIC_MATCHING_SERVICE_URL was not defined in .env";
 }
 
 export default function WebSocketProvider({children}: {children: ReactNode}) {
-    const [open, setOpen] = useState(false)
-    const [found, setFound] = useState<FoundState>({})
-    const { readyState: socketState, lastMessage, sendMessage } = useWebSocket(MATCHING_SERVICE_URL as string, {}, open);
-    
-    function cancel() {
-        setOpen(false)
-    }
-    function start() {
-        setOpen(true)
-        sendMessage("do match");
-    }
-    function ok() {
-        setFound({});
-    }
-    
-    // Acts as a message event hook 
-    useEffect(() => {
-        if (lastMessage == null) {
-            return;
-        }
-        setFound({found: lastMessage.data, ok })
-    }, [lastMessage])
-    
-    let matchState: SocketState;
-    switch (socketState) {
-        case ReadyState.CLOSED:
-        case ReadyState.UNINSTANTIATED:
-            matchState = {state: "closed", start}
-            break;
-        case ReadyState.OPEN:
-            matchState = {state: "matching", cancel}
-            break;
-        case ReadyState.CONNECTING:
-            matchState = {state: "starting"}
-            break;
-        case ReadyState.CLOSING:
-            matchState = {state: "cancelling"}
-            break;
-    }
+    const matchState = useMatching();
 
-    return <WebSocketContext.Provider value={{...found, ...matchState}}>
+    return <WebSocketContext.Provider value={matchState}>
         {children}
     </WebSocketContext.Provider>
 }

apps/frontend/src/contexts/websocketcontext.tsx

@@ -1,21 +1,29 @@
+import { MatchRequestParams } from "@/app/services/use-matching";
 import { createContext } from "react";
 
+
 export type SocketState = {
     state: "cancelling" | "starting"
 } | {
     state: "closed";
-    start(): void;
+    start(req: MatchRequestParams): void;
 } | {
     state: "matching";
     cancel(): void;
 };
 
-export type FoundState = {} | {
-    found: string;
+export type MatchState = SocketState | {
+    state: "found";
+    info: {
+        matchId: string;
+        partnerId: string;
+        partnerName: string;
+    };
+    ok(): void;
+} | {
+    state: "timeout";
     ok(): void;
 };
 
-type MatchState = SocketState & FoundState;
-
 export const WebSocketContext = createContext<MatchState | null>(null);