From 7508ae21b8d564aecc1f09a44a8d508b3d659029 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Mon, 8 Apr 2024 01:13:56 -0700
Subject: [PATCH] websocket show real connected

---
 frontend/src/components/tags/index.tsx | 15 +++++++++------
 frontend/src/lib/socket.tsx            | 20 ++++++++++++++++----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/tags/index.tsx b/frontend/src/components/tags/index.tsx
index e2d768bb1..5ada1e919 100644
--- a/frontend/src/components/tags/index.tsx
+++ b/frontend/src/components/tags/index.tsx
@@ -239,12 +239,15 @@ export const AddTags = ({ target }: { target: TargetExcludingSystem }) => {
             }}
           />
           <CommandList>
-            <CommandEmpty
-              className="justify-between cursor-pointer hover:bg-accent m-1"
-              onClick={create_tag}
-            >
-              Create Tag
-              <PlusCircle className="w-4" />
+            <CommandEmpty className="m-1">
+              <Button
+                variant="ghost"
+                onClick={create_tag}
+                className="w-full flex items-center justify-between hover:bg-accent"
+              >
+                Create Tag
+                <PlusCircle className="w-4" />
+              </Button>
             </CommandEmpty>
             <CommandGroup>
               {all_tags
diff --git a/frontend/src/lib/socket.tsx b/frontend/src/lib/socket.tsx
index 2aaedc53f..796ffe59e 100644
--- a/frontend/src/lib/socket.tsx
+++ b/frontend/src/lib/socket.tsx
@@ -12,6 +12,9 @@ import { AUTH_TOKEN_STORAGE_KEY } from "@main";
 const rws_atom = atom<Rws | null>(null);
 const useWebsocket = () => useAtom(rws_atom);
 
+const ws_connected = atom(false);
+export const useWebsocketConnected = () => useAtom(ws_connected);
+
 const on_message = (
   { data }: MessageEvent,
   invalidate: ReturnType<typeof useInvalidate>
@@ -108,12 +111,19 @@ export const WebsocketProvider = ({
 }) => {
   const invalidate = useInvalidate();
   const [ws, set] = useWebsocket();
+  const setConnected = useWebsocketConnected()[1];
 
-  const on_open_fn = useCallback(() => on_open(ws), [ws]);
+  const on_open_fn = useCallback(() => {
+    on_open(ws);
+    setConnected(true);
+  }, [ws, setConnected]);
   const on_message_fn = useCallback(
     (e: MessageEvent) => on_message(e, invalidate),
     [invalidate]
   );
+  const on_close_fn = useCallback(() => {
+    setConnected(false);
+  }, [setConnected]);
 
   useEffect(() => {
     if (!ws) set(new Rws(url));
@@ -125,18 +135,20 @@ export const WebsocketProvider = ({
   useEffect(() => {
     ws?.addEventListener("open", on_open_fn);
     ws?.addEventListener("message", on_message_fn);
+    ws?.addEventListener("close", on_close_fn);
     return () => {
       ws?.close();
       ws?.removeEventListener("open", on_open_fn);
       ws?.removeEventListener("message", on_message_fn);
+      ws?.removeEventListener("close", on_close_fn);
     };
-  }, [on_message_fn, on_open_fn, ws]);
+  }, [on_message_fn, on_open_fn, on_close_fn, ws]);
 
   return <>{children}</>;
 };
 
 export const WsStatusIndicator = () => {
-  const [ws] = useWebsocket();
+  const [connected] = useWebsocketConnected();
   const onclick = () =>
     toast({ title: "surprise", description: "motherfucker" });
 
@@ -150,7 +162,7 @@ export const WsStatusIndicator = () => {
       <Circle
         className={cn(
           "w-4 h-4 stroke-none",
-          ws ? "fill-green-500" : "fill-red-500"
+          connected ? "fill-green-500" : "fill-red-500"
         )}
       />
     </Button>