Refactor frontend API calls into hooks and complete task states

frontend/src/pages/MapPage.tsx

@@ -29,7 +29,7 @@ import { ArrowCounterclockwiseRegular, DismissRegular } from "@fluentui/react-ic
 import { DashboardFilterBar } from "../components/DashboardFilterBar";
 import { WorldMap } from "../components/WorldMap";
 import { useMapData } from "../hooks/useMapData";
-import { fetchMapColorThresholds } from "../api/config";
+import { useMapColorThresholds } from "../hooks/useMapColorThresholds";
 import type { TimeRange } from "../types/map";
 import type { BanOriginFilter } from "../types/ban";
 
@@ -79,28 +79,25 @@ export function MapPage(): React.JSX.Element {
   const [range, setRange] = useState<TimeRange>("24h");
   const [originFilter, setOriginFilter] = useState<BanOriginFilter>("all");
   const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
-  const [thresholdLow, setThresholdLow] = useState<number>(20);
-  const [thresholdMedium, setThresholdMedium] = useState<number>(50);
-  const [thresholdHigh, setThresholdHigh] = useState<number>(100);
 
   const { countries, countryNames, bans, total, loading, error, refresh } =
     useMapData(range, originFilter);
 
-  // Fetch color thresholds on mount
+  const {
+    thresholds: mapThresholds,
+    error: mapThresholdError,
+  } = useMapColorThresholds();
+
+  const thresholdLow = mapThresholds?.threshold_low ?? 20;
+  const thresholdMedium = mapThresholds?.threshold_medium ?? 50;
+  const thresholdHigh = mapThresholds?.threshold_high ?? 100;
+
   useEffect(() => {
-    const loadThresholds = async (): Promise<void> => {
-      try {
-        const thresholds = await fetchMapColorThresholds();
-        setThresholdLow(thresholds.threshold_low);
-        setThresholdMedium(thresholds.threshold_medium);
-        setThresholdHigh(thresholds.threshold_high);
-      } catch (err) {
-        // Silently fall back to defaults if fetch fails
-        console.warn("Failed to load map color thresholds:", err);
-      }
-    };
-    void loadThresholds();
-  }, []);
+    if (mapThresholdError) {
+      // Silently fall back to defaults if fetch fails
+      console.warn("Failed to load map color thresholds:", mapThresholdError);
+    }
+  }, [mapThresholdError]);
 
   /** Bans visible in the companion table (filtered by selected country). */
   const visibleBans = useMemo(() => {