- added new websocket implementation

src/app/context/WebSocketContext.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import { ReadyState } from "react-use-websocket";
+import type { InfoBarData } from "../../types/types";
+
+type InfoSocketState = {
+  data: InfoBarData | null;
+  readyState: ReadyState;
+  sendJson: (msg: unknown) => void;
+};
+
+export type WebSocketConextValue = {
+  info: InfoSocketState;
+};
+
+export const WebsocketContext = createContext<WebSocketConextValue | null>(null);
+
+const useWebSocketContext = () => {
+  const ctx = useContext(WebsocketContext);
+  if (!ctx) throw new Error("useWebSocketContext must be used inside <WebSocketConext.Provider>");
+  return ctx;
+};
+
+export const useInfoSocket = () => useWebSocketContext().info;

src/app/providers/AppProviders.tsx

@@ -1,7 +1,11 @@
-import { QueryClientProvider } from "@tanstack/react-query";
-import { queryClient } from "../config/queryClient";
 import type { PropsWithChildren } from "react";
+import { QueryProvider } from "./QueryProviders";
+import { WebSocketProvider } from "./WebSocketProvider";
 
 export const AppProviders = ({ children }: PropsWithChildren) => {
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryProvider>
+      <WebSocketProvider>{children}</WebSocketProvider>
+    </QueryProvider>
+  );
 };

src/app/providers/WebSocketProvider.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { WebsocketContext, type WebSocketConextValue } from "../context/WebSocketContext";
+import useWebSocket from "react-use-websocket";
+import { wsConfig } from "../config/wsconfig";
+import type { InfoBarData } from "../../types/types";
+
+type WebSocketProviderProps = {
+  children: ReactNode;
+};
+
+export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
+  const [systemData, setSystemData] = useState<InfoBarData | null>(null);
+  const infoSocket = useWebSocket(wsConfig.infoBar, { share: true, shouldReconnect: () => true });
+
+  useEffect(() => {
+    async function parseData() {
+      if (infoSocket.lastMessage) {
+        const text = await infoSocket.lastMessage.data.text();
+        const data = JSON.parse(text);
+        setSystemData(data);
+      }
+    }
+    parseData();
+  }, [infoSocket.lastMessage]);
+
+  const value = useMemo<WebSocketConextValue>(
+    () => ({
+      info: {
+        data: systemData,
+        readyState: infoSocket.readyState,
+        sendJson: infoSocket.sendJsonMessage,
+      },
+    }),
+    [infoSocket.readyState, infoSocket.sendJsonMessage, systemData],
+  );
+
+  return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;
+};

src/features/dashboard/components/SystemStatusCard.tsx

@@ -1,9 +1,9 @@
-import { useInfoSocket } from "../../../hooks/useInfoWebSocket";
+import { useInfoSocket } from "../../../app/context/WebSocketContext";
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 
 const SystemStatusCard = () => {
-  const { stats } = useInfoSocket();
+  const { data: stats } = useInfoSocket();
 
   return (
     <Card className="p-4 w-[40%]">