@actuate-media/cms-admin 0.19.0 → 0.20.0

package/src/views/seo/useSeoResource.ts

@@ -0,0 +1,52 @@
+'use client'
+
+/**
+ * Small async-resource hook for the SEO tabs: wraps a service fetcher with
+ * loading / error / data / refetch and abort-on-unmount safety. Keeps each
+ * tab declarative without re-implementing fetch plumbing.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export interface SeoResource<T> {
+  data: T | null
+  loading: boolean
+  error: string | null
+  refetch: () => void
+}
+
+export function useSeoResource<T>(
+  fetcher: () => Promise<T>,
+  deps: ReadonlyArray<unknown> = [],
+): SeoResource<T> {
+  const [data, setData] = useState<T | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const aliveRef = useRef(true)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableFetcher = useCallback(fetcher, deps)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await stableFetcher()
+      if (aliveRef.current) setData(result)
+    } catch (err) {
+      if (aliveRef.current) {
+        setError(err instanceof Error ? err.message : 'Failed to load data')
+      }
+    } finally {
+      if (aliveRef.current) setLoading(false)
+    }
+  }, [stableFetcher])
+
+  useEffect(() => {
+    aliveRef.current = true
+    load()
+    return () => {
+      aliveRef.current = false
+    }
+  }, [load])
+
+  return { data, loading, error, refetch: load }
+}