- updated websocket context and add heatmap support; refactor CameraSettingFields and SightingWidget components

src/components/CameraSettings/CameraSettingFields.tsx

@@ -44,7 +44,7 @@ const CameraSettingFields = ({
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
       id: initialData?.id,
-      mode: cameraMode ?? "day",
+      mode: cameraMode ?? "",
       zoom: apiZoom,
     }),
 

src/components/SightingsWidget/SightingWidget.tsx

@@ -186,7 +186,6 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       const isNPEDHitC = cat === "C";
       const isNPEDHitD = cat === "D";
       if (isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD) {
-        console.log("first");
         dispatch({
           type: "ADD",
           payload: obj,

src/components/UI/Header.tsx

@@ -13,11 +13,8 @@ import {
 import { useState } from "react";
 import SoundBtn from "./SoundBtn";
 import { useIntegrationsContext } from "../../context/IntegrationsContext";
-import { useInfoBarSocket } from "../../context/WebsocketContext";
 
 export default function Header() {
-  const { data: stats } = useInfoBarSocket();
-  console.log(stats);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { state } = useIntegrationsContext();

src/context/WebsocketContext.ts

@@ -9,8 +9,16 @@ type InfoSocketState = {
   send?: (msg: string) => void;
 };
 
+type heatmapSocketState = {
+  data: null;
+  readyState: ReadyState;
+  sendJson: (msg: unknown) => void;
+  send?: (msg: string) => void;
+};
+
 export type WebsocketContextValue = {
   info: InfoSocketState;
+  heatmap?: heatmapSocketState;
 };
 
 export const WebsocketContext = createContext<WebsocketContextValue | null>(null);
@@ -22,3 +30,4 @@ const useWebSocketContext = () => {
 };
 
 export const useInfoBarSocket = () => useWebSocketContext().info;
+export const useHeatmapSocket = () => useWebSocketContext().heatmap;

src/context/providers/WebSocketProvider.tsx

@@ -32,7 +32,7 @@ const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         sendJson: infoSocket.sendJsonMessage,
       },
     }),
-    [infoSocket.readyState, infoSocket.sendJsonMessage, systemData]
+    [systemData, infoSocket.readyState, infoSocket.sendJsonMessage]
   );
   return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;
 };

src/utils/ws_config.ts

@@ -2,4 +2,5 @@ import { CAM_BASE } from "./config";
 
 export const ws_config = {
   infoBar: `${CAM_BASE.replace("http", "ws")}/websocket-infobar`,
+  heatmap: `${CAM_BASE.replace("http", "ws")}/websocket-SystemConfig`,
 };