Lukas
5166789b68
Introduce discriminated FetchError union type to replace weak string error handling in API calls and hooks. Enables actionable error diagnostics. Changes: - Create types/api.ts with FetchError discriminated union (api_error, network_error, abort_error) - Export type guards: isAuthError, isAbortError, isNetworkError, isApiError - Update useListData and usePolledData to expose typed FetchError instead of string - Add getErrorMessage() helper to extract displayable messages from FetchError - Add createStringErrorAdapter() for backward compatibility with string error state - Update handleFetchError() to work with both FetchError and string setters - Update all consumer hooks to expose typed errors - Update components to use getErrorMessage() when displaying errors - Update tests to mock FetchError instead of strings - Add comprehensive typed error model documentation to Web-Development.md This enables better error handling patterns: - Check error.type to distinguish between API, network, and abort errors - Extract status codes for specific handling (401/403 auth, 50x server errors) - Maintain backward compatibility with existing string-based error states All TypeScript compilation passes with no errors. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { fetchMapColorThresholds, updateMapColorThresholds } from "../api/config";
|
|
import { handleFetchError, createStringErrorAdapter } from "../utils/fetchError";
|
|
import type {
|
|
MapColorThresholdsResponse,
|
|
MapColorThresholdsUpdate,
|
|
} from "../types/config";
|
|
|
|
export interface UseMapColorThresholdsResult {
|
|
thresholds: MapColorThresholdsResponse | null;
|
|
loading: boolean;
|
|
error: string | null;
|
|
refresh: () => Promise<void>;
|
|
updateThresholds: (payload: MapColorThresholdsUpdate) => Promise<MapColorThresholdsResponse>;
|
|
}
|
|
|
|
export function useMapColorThresholds(): UseMapColorThresholdsResult {
|
|
const [thresholds, setThresholds] = useState<MapColorThresholdsResponse | null>(null);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const load = useCallback(async (signal?: AbortSignal): Promise<void> => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const data = await fetchMapColorThresholds(signal);
|
|
if (signal?.aborted) return;
|
|
setThresholds(data);
|
|
} catch (err: unknown) {
|
|
if (signal?.aborted) return;
|
|
handleFetchError(err, createStringErrorAdapter(setError), "Failed to fetch map color thresholds");
|
|
} finally {
|
|
if (!signal?.aborted) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
void load(controller.signal);
|
|
return (): void => {
|
|
controller.abort();
|
|
};
|
|
}, [load]);
|
|
|
|
const updateThresholds = useCallback(
|
|
async (payload: MapColorThresholdsUpdate): Promise<MapColorThresholdsResponse> => {
|
|
const updated = await updateMapColorThresholds(payload);
|
|
setThresholds(updated);
|
|
return updated;
|
|
},
|
|
[],
|
|
);
|
|
|
|
return {
|
|
thresholds,
|
|
loading,
|
|
error,
|
|
refresh: load,
|
|
updateThresholds,
|
|
};
|
|
}
|