finish ui

ui/src/hooks/useWebsocket.tsx

@@ -0,0 +1,25 @@
+import type { WebsocketStatus } from "@/components/ConnectionStatus";
+import type { StatusMessage } from "@/services/types";
+import { initializeConnection } from "@/services/websocket";
+import { useEffect, useState } from "react";
+
+export function useWebsocket(url: string) {
+    const [status, setStatus] = useState<WebsocketStatus>();
+    const [message, setMessage] = useState<StatusMessage | null>();
+
+    useEffect(() => {
+        initializeConnection(url, {
+            onMessage: (data) => {
+                const parsed = JSON.parse(data);
+
+                setStatus("connected");
+                setMessage(parsed);
+            },
+            onOpen: () => setStatus("connecting"),
+            onClose: () => setStatus("disconnected"),
+            onError: () => setStatus("error"),
+        });
+    }, [url]);
+
+    return { status, message };
+}