存客宝 React

Cunkebao/hooks/useDeviceStatusPolling.ts

@@ -0,0 +1,47 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import type { Device } from "@/components/device-grid"
+
+interface DeviceStatus {
+  status: "online" | "offline"
+  battery: number
+}
+
+async function fetchDeviceStatuses(deviceIds: string[]): Promise<Record<string, DeviceStatus>> {
+  // 模拟API调用
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return deviceIds.reduce(
+    (acc, id) => {
+      acc[id] = {
+        status: Math.random() > 0.3 ? "online" : "offline",
+        battery: Math.floor(Math.random() * 100),
+      }
+      return acc
+    },
+    {} as Record<string, DeviceStatus>,
+  )
+}
+
+export function useDeviceStatusPolling(devices: Device[]) {
+  const [statuses, setStatuses] = useState<Record<string, DeviceStatus>>({})
+
+  useEffect(() => {
+    const pollStatus = async () => {
+      try {
+        const newStatuses = await fetchDeviceStatuses(devices.map((d) => d.id))
+        setStatuses((prevStatuses) => ({ ...prevStatuses, ...newStatuses }))
+      } catch (error) {
+        console.error("Failed to fetch device statuses:", error)
+      }
+    }
+
+    pollStatus() // 立即执行一次
+    const intervalId = setInterval(pollStatus, 30000) // 每30秒更新一次
+
+    return () => clearInterval(intervalId)
+  }, [devices])
+
+  return statuses
+}
+