Add Belgium and North Sea coverage foundation

frontend/src/hooks/useCoverageResolver.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import { externalApi } from '../services/api'
+import type { CoverageResolveResponse, VectorSelectionBBox } from '../types'
+
+interface CoverageResolverOptions {
+  projectId: string | null
+  bbox: VectorSelectionBBox | null
+}
+
+export function useCoverageResolver({ projectId, bbox }: CoverageResolverOptions) {
+  const [coverage, setCoverage] = useState<CoverageResolveResponse | null>(null)
+  const [loadingCoverage, setLoadingCoverage] = useState(false)
+  const [coverageError, setCoverageError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!projectId || !bbox) {
+      setCoverage(null)
+      setCoverageError(null)
+      setLoadingCoverage(false)
+      return
+    }
+    let cancelled = false
+    const timer = window.setTimeout(() => {
+      setLoadingCoverage(true)
+      setCoverageError(null)
+      externalApi.resolveCoverage({
+        projectId,
+        bbox: {
+          minx: bbox.min_x,
+          miny: bbox.min_y,
+          maxx: bbox.max_x,
+          maxy: bbox.max_y,
+        },
+      })
+        .then((result) => {
+          if (!cancelled) {
+            setCoverage(result)
+          }
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            setCoverage(null)
+            setCoverageError(error instanceof Error ? error.message : 'Dekking kon niet worden bepaald')
+          }
+        })
+        .finally(() => {
+          if (!cancelled) {
+            setLoadingCoverage(false)
+          }
+        })
+    }, 250)
+    return () => {
+      cancelled = true
+      window.clearTimeout(timer)
+    }
+  }, [projectId, bbox?.min_x, bbox?.min_y, bbox?.max_x, bbox?.max_y])
+
+  return {
+    coverage,
+    loadingCoverage,
+    coverageError,
+  }
+}