Implement functionality for finding a match from message

Author: chiaryan

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

@@ -11,9 +11,6 @@ import { WebSocketContext } from "@/contexts/websocketcontext";
 
 export default function ProfilePage(): JSX.Element {
   const matcher = useContext(WebSocketContext)! // ! is a null-check
-  if (matcher.state == "matching") {
-    
-  }
   let button;
   switch (matcher.state) {
     case "closed":
@@ -29,9 +26,9 @@ export default function ProfilePage(): JSX.Element {
       button = <Button loading>{matcher.state}</Button>
       break;
 
-    case "ready":
-      button = <Button disabled>Ok</Button>
-      break;
+    // case "ready":
+    //   button = <Button disabled>Ok</Button>
+    //   break;
   }
 
 
@@ -40,6 +37,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>
         </Content>
     </Layout>

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { ReactNode, useEffect, useState } from "react"
-import { type SocketState, WebSocketContext } from "@/contexts/websocketcontext";
+import { type FoundState, type SocketState, WebSocketContext } from "@/contexts/websocketcontext";
 import useWebSocket, { ReadyState } from "react-use-websocket"
 const MATCHING_SERVICE_URL = process.env.NEXT_PUBLIC_MATCHING_SERVICE_URL;
 
@@ -11,33 +11,46 @@ if (MATCHING_SERVICE_URL == undefined) {
 
 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 ret: SocketState;
+    let matchState: SocketState;
     switch (socketState) {
         case ReadyState.CLOSED:
         case ReadyState.UNINSTANTIATED:
-            ret = {state: "closed", start}
+            matchState = {state: "closed", start}
             break;
         case ReadyState.OPEN:
-            ret = {state: "matching", cancel}
+            matchState = {state: "matching", cancel}
             break;
         case ReadyState.CONNECTING:
-            ret = {state: "starting"}
+            matchState = {state: "starting"}
             break;
         case ReadyState.CLOSING:
-            ret = {state: "cancelling"}
+            matchState = {state: "cancelling"}
             break;
     }
 
-    return <WebSocketContext.Provider value={ret}>
+    return <WebSocketContext.Provider value={{...found, ...matchState}}>
         {children}
     </WebSocketContext.Provider>
 }

apps/frontend/src/contexts/websocketcontext.tsx

@@ -8,11 +8,14 @@ export type SocketState = {
 } | {
     state: "matching";
     cancel(): void;
-} | {
-    state: "ready";
-    id: string;
+};
+
+export type FoundState = {} | {
+    found: string;
     ok(): void;
 };
 
-export const WebSocketContext = createContext<SocketState | null>(null);
+type MatchState = SocketState & FoundState;
+
+export const WebSocketContext = createContext<MatchState | null>(null);