implemented live web socket on the devices page for status readings

src/pages/Devices.tsx

@@ -6,7 +6,9 @@ import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
 import { pond } from "protobuf-ts/pond";
 import { useDeviceAPI, useGlobalState, useGroupAPI, useTeamAPI } from "providers";
-import { useCallback, useEffect, useState } from "react";
+import { useHTTP } from "hooks";
+import { useDeviceStatusStreams } from "hooks/useDeviceStatusStreams";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import PageContainer from "./PageContainer";
 import { useMobile } from "hooks";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -191,6 +193,26 @@ export default function Devices() {
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
   const [{ as, team }] = useGlobalState()
+  const { token } = useHTTP()
+
+  const deviceIds = useMemo(() => devices.map((d) => d.id().toString()), [devices])
+  const handleStatusUpdate = useCallback((deviceId: string, status: pond.DeviceStatus) => {
+    setDevices((prev) =>
+      prev.map((d) => {
+        if (d.id().toString() !== deviceId) return d
+        const updated = Device.clone(d)
+        updated.status = status
+        return updated
+      })
+    )
+  }, [])
+
+  useDeviceStatusStreams({
+    deviceIds,
+    onStatusUpdate: handleStatusUpdate,
+    token,
+    enabled: devices.length > 0 && !!token,
+  })
 
   const updateGroups = (newGroups: Group[]) => {
     setGroups(newGroups);
@@ -242,7 +264,7 @@ export default function Devices() {
         const now = new Date();
         const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
         if (compareTimestamps(device.status.sen5x?.timestamp, oneDayAgo.toISOString()) > 0) {
-          // console.log("timestamp success " + device.settings?.deviceId)
+          // console.log("timestamp success " + device.settings?.deviceId + ": " + device.status.sen5x?.timestamp)
           return true
         } else {
           // console.log("timestamp fail " + device.settings?.deviceId)