Refactor map page

frontend/src/hooks/usePOIData.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect, useRef } from 'react';
+import type { Bounds, POI, POIResponse } from '../types';
+import { apiUrl, logNonAbortError } from '../lib/api';
+
+const DEBOUNCE_MS = 150;
+
+export function usePOIData(bounds: Bounds | null, selectedCategories: Set<string>) {
+  const [pois, setPois] = useState<POI[]>([]);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!bounds || selectedCategories.size === 0) {
+      setPois([]);
+      return;
+    }
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(async () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+
+      try {
+        const boundsStr = `${bounds.south},${bounds.west},${bounds.north},${bounds.east}`;
+        const categoriesStr = Array.from(selectedCategories).join(',');
+        const params = new URLSearchParams({
+          categories: categoriesStr,
+          bounds: boundsStr,
+        });
+        const res = await fetch(apiUrl('pois', params), {
+          signal: abortControllerRef.current.signal,
+        });
+        const json: POIResponse = await res.json();
+        setPois(json.pois || []);
+      } catch (err) {
+        logNonAbortError('Failed to fetch POIs', err);
+      }
+    }, DEBOUNCE_MS);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [bounds, selectedCategories]);
+
+  return pois;
+}