feat(workbench): integrate runtime data and map tooling

src/features/workbench/hooks/use-element-gis-properties.ts

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import type { AccessTokenProvider } from "@/shared/auth/keycloak-auth";
+import {
+  fetchElementGisProperties,
+  fetchSourceGisFeatureProperties,
+  type GisAttributeGroup
+} from "../api/gis-properties-client";
+import { isSourceGisSourceId } from "../map/sources";
+import type { DetailFeature } from "../types";
+
+type GisPropertiesState = {
+  status: "idle" | "loading" | "ready" | "error";
+  groups: GisAttributeGroup[];
+};
+
+const INITIAL_STATE: GisPropertiesState = { status: "idle", groups: [] };
+
+export function useElementGisProperties(
+  feature: DetailFeature | null,
+  projectId: string | null,
+  getAccessToken?: AccessTokenProvider
+) {
+  const [state, setState] = useState<GisPropertiesState>(INITIAL_STATE);
+
+  useEffect(() => {
+    if (!feature) {
+      setState(INITIAL_STATE);
+      return;
+    }
+    if (feature.layer === "water_quality_monitoring_points") {
+      setState({ status: "ready", groups: [] });
+      return;
+    }
+    const controller = new AbortController();
+    setState({ status: "loading", groups: [] });
+    const sourceLayerKey = feature.properties.source_layer_key;
+    const rawSourceFid = feature.properties.source_fid;
+    const sourceFid = typeof rawSourceFid === "number"
+      ? rawSourceFid
+      : Number(rawSourceFid);
+    const request = isSourceGisSourceId(feature.layer)
+      && typeof sourceLayerKey === "string"
+      && Number.isSafeInteger(sourceFid)
+      && sourceFid >= 0
+      ? fetchSourceGisFeatureProperties(
+          sourceLayerKey,
+          sourceFid,
+          projectId,
+          getAccessToken,
+          controller.signal
+        )
+      : fetchElementGisProperties(
+          feature.layer,
+          feature.id,
+          projectId,
+          getAccessToken,
+          controller.signal
+        );
+    void request.then((groups) => {
+      if (!controller.signal.aborted) setState({ status: "ready", groups });
+    }).catch(() => {
+      if (!controller.signal.aborted) setState({ status: "error", groups: [] });
+    });
+    return () => controller.abort();
+  }, [feature, getAccessToken, projectId]);
+
+  return state;
+}