syco.me Homelab Dashboard

src/hooks/useApi.ts

@@ -0,0 +1,46 @@
+import { useState, useEffect, useCallback } from 'react'
+
+interface ApiState<T> {
+  data: T | null
+  loading: boolean
+  error: string | null
+  lastUpdated: Date | null
+}
+
+export function useApi<T>(url: string, intervalMs = 30_000): ApiState<T> {
+  const [state, setState] = useState<ApiState<T>>({
+    data: null,
+    loading: true,
+    error: null,
+    lastUpdated: null,
+  })
+  const hasData = state.data !== null
+
+  const fetch_ = useCallback(async () => {
+    try {
+      const res = await fetch(url)
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: res.statusText }))
+        throw new Error(body.error ?? res.statusText)
+      }
+      const data: T = await res.json()
+      setState({ data, loading: false, error: null, lastUpdated: new Date() })
+    } catch (err: unknown) {
+      setState(prev => ({
+        ...prev,
+        loading: false,
+        error: err instanceof Error ? err.message : 'Unknown error',
+      }))
+    }
+  }, [url])
+
+  useEffect(() => {
+    fetch_()
+    // Retry every 3s while we have no data yet (startup race / transient error),
+    // then slow down to the normal interval once data is flowing.
+    const id = setInterval(fetch_, hasData ? intervalMs : 3_000)
+    return () => clearInterval(id)
+  }, [fetch_, intervalMs, hasData])
+
+  return state
+}