diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx index 80a3f0d..d24c829 100644 --- a/src/pages/Devices.tsx +++ b/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(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)