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>
79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
/**
|
|
* React hook for fetching a single jail's detailed metadata.
|
|
*
|
|
* Reads jail data: configuration, ignore list, ignore self flag, and related state.
|
|
* Does not handle mutations — use `useJailCommands` for write operations.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { fetchJail } from "../api/jails";
|
|
import { handleFetchError, createStringErrorAdapter } from "../utils/fetchError";
|
|
import type { Jail } from "../types/jail";
|
|
|
|
export interface UseJailDataResult {
|
|
jail: Jail | null;
|
|
ignoreList: string[];
|
|
ignoreSelf: boolean;
|
|
loading: boolean;
|
|
error: string | null;
|
|
refresh: () => void;
|
|
}
|
|
|
|
/**
|
|
* Fetch and manage the detail view for a single jail.
|
|
*
|
|
* @param name - The name of the jail to fetch.
|
|
* @returns Jail data and refresh function.
|
|
*/
|
|
export function useJailData(name: string): UseJailDataResult {
|
|
const [jail, setJail] = useState<Jail | null>(null);
|
|
const [ignoreList, setIgnoreList] = useState<string[]>([]);
|
|
const [ignoreSelf, setIgnoreSelf] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const abortRef = useRef<AbortController | null>(null);
|
|
|
|
const refresh = useCallback(() => {
|
|
abortRef.current?.abort();
|
|
const ctrl = new AbortController();
|
|
abortRef.current = ctrl;
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
fetchJail(name)
|
|
.then((res) => {
|
|
if (!ctrl.signal.aborted) {
|
|
setJail(res.jail);
|
|
setIgnoreList(res.ignore_list);
|
|
setIgnoreSelf(res.ignore_self);
|
|
}
|
|
})
|
|
.catch((err: unknown) => {
|
|
if (!ctrl.signal.aborted) {
|
|
handleFetchError(err, createStringErrorAdapter(setError), "Failed to fetch jail detail");
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!ctrl.signal.aborted) {
|
|
setLoading(false);
|
|
}
|
|
});
|
|
}, [name]);
|
|
|
|
useEffect(() => {
|
|
refresh();
|
|
return (): void => {
|
|
abortRef.current?.abort();
|
|
};
|
|
}, [refresh]);
|
|
|
|
return {
|
|
jail,
|
|
ignoreList,
|
|
ignoreSelf,
|
|
loading,
|
|
error,
|
|
refresh,
|
|
};
|
|
}
|