Files
BanGUI/frontend/src/hooks/useHistory.ts
Lukas 5166789b68 feat: Implement typed error contracts in generic hooks
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>
2026-04-28 09:13:47 +02:00

144 lines
4.0 KiB
TypeScript

/**
* `useHistory` hook — fetches and manages ban history data.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { fetchHistory, fetchIpHistory } from "../api/history";
import { handleFetchError, createStringErrorAdapter } from "../utils/fetchError";
import { useListData } from "./useListData";
import type { HistoryBanItem, IpDetailResponse, HistoryListResponse } from "../types/history";
import type { BanOriginFilter, TimeRange } from "../types/ban";
import type { FetchError } from "../types/api";
export interface UseHistoryResult {
items: HistoryBanItem[];
total: number;
page: number;
loading: boolean;
error: FetchError | null;
setPage: (page: number) => void;
refresh: () => void;
}
/**
* Fetch and manage paginated ban history with optional filters.
*
* @param page - Current page number (1-indexed)
* @param pageSize - Items per page
* @param range - Time range filter (e.g., "7d", "30d")
* @param origin - Ban origin filter (e.g., "fail2ban", "blocklist")
* @param jail - Jail name filter (optional)
* @param ip - IP address filter (optional)
* @param source - Data source ("fail2ban" | "archive")
* @returns History data with pagination and error state
*/
export function useHistory(
page: number = 1,
pageSize: number = 50,
range?: TimeRange,
origin?: BanOriginFilter,
jail?: string,
ip?: string,
source: "fail2ban" | "archive" = "archive",
): UseHistoryResult {
const [total, setTotal] = useState(0);
const [currentPage, setCurrentPage] = useState(page);
const fetcher = useCallback(
(signal: AbortSignal) =>
fetchHistory(
{
page: currentPage,
page_size: pageSize,
range,
origin,
jail,
ip,
source,
},
signal,
),
[currentPage, pageSize, range, origin, jail, ip, source],
);
const selector = useCallback((response: HistoryListResponse) => response.items, []);
const onSuccess = useCallback((response: HistoryListResponse) => {
setTotal(response.total);
}, []);
const { items, loading, error, refresh } = useListData<HistoryListResponse, HistoryBanItem>({
fetcher,
selector,
errorMessage: "Failed to fetch history",
onSuccess,
});
return {
items,
total,
page: currentPage,
loading,
error,
setPage: setCurrentPage,
refresh,
};
}
// ---------------------------------------------------------------------------
// useIpHistory — per-IP detail
// ---------------------------------------------------------------------------
export interface UseIpHistoryResult {
detail: IpDetailResponse | null;
loading: boolean;
error: string | null;
refresh: () => void;
}
/**
* Fetch and manage IP detail history.
*
* @param ip - IP address to fetch history for
* @returns IP detail response, loading state, error, and refresh callback
*/
export function useIpHistory(ip: string): UseIpHistoryResult {
const [detail, setDetail] = useState<IpDetailResponse | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const abortRef = useRef<AbortController | null>(null);
const load = useCallback((): void => {
abortRef.current?.abort();
abortRef.current = new AbortController();
setLoading(true);
setError(null);
fetchIpHistory(ip, abortRef.current.signal)
.then((resp) => {
if (!abortRef.current?.signal.aborted) {
setDetail(resp);
}
})
.catch((err: unknown) => {
if (!abortRef.current?.signal.aborted) {
handleFetchError(err, createStringErrorAdapter(setError), "Failed to fetch IP history");
}
})
.finally((): void => {
if (!abortRef.current?.signal.aborted) {
setLoading(false);
}
});
}, [ip]);
useEffect((): (() => void) => {
load();
return (): void => {
abortRef.current?.abort();
};
}, [load]);
return { detail, loading, error, refresh: load };
}