From b3eb5dc6ec0f745cb043b78aad958c69db35e7bc Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 21 Apr 2026 19:12:43 +0200 Subject: [PATCH] Standardise loading state naming across dashboard hooks --- Docs/Tasks.md | 2 +- frontend/src/components/BanTrendChart.tsx | 4 ++-- frontend/src/components/JailDistributionChart.tsx | 4 ++-- .../src/components/__tests__/BanTrendChart.test.tsx | 4 ++-- .../__tests__/JailDistributionChart.test.tsx | 4 ++-- frontend/src/hooks/useBanTrend.ts | 10 +++++----- frontend/src/hooks/useDashboardCountryData.ts | 10 +++++----- frontend/src/hooks/useJailDistribution.ts | 10 +++++----- frontend/src/pages/DashboardPage.tsx | 2 +- 9 files changed, 25 insertions(+), 25 deletions(-) diff --git a/Docs/Tasks.md b/Docs/Tasks.md index 315bcf0..7b30165 100644 --- a/Docs/Tasks.md +++ b/Docs/Tasks.md @@ -399,7 +399,7 @@ const source = timeRange === "24h" ? "fail2ban" : "archive"; --- -### TASK-020 — Standardise `loading` vs `isLoading` naming across hooks +### TASK-020 — Standardise `loading` vs `isLoading` naming across hooks (done) **Where found:** Dashboard and country-data hooks (`useBans`, `useBanTrend`, `useDashboardCountryData`) return `isLoading`. All other hooks (`useActiveBans`, `useJails`, `useBlocklists`, `useFilterList`, `useActionList`, etc.) return `loading`. diff --git a/frontend/src/components/BanTrendChart.tsx b/frontend/src/components/BanTrendChart.tsx index ac4a834..5434cbf 100644 --- a/frontend/src/components/BanTrendChart.tsx +++ b/frontend/src/components/BanTrendChart.tsx @@ -200,7 +200,7 @@ export const BanTrendChart = memo(function BanTrendChart({ source = "fail2ban", }: BanTrendChartProps): React.JSX.Element { const styles = useStyles(); - const { buckets, isLoading, error, reload } = useBanTrend(timeRange, origin, source); + const { buckets, loading, error, reload } = useBanTrend(timeRange, origin, source); const isEmpty = buckets.every((b) => b.count === 0); const entries = buildEntries(buckets, timeRange); @@ -227,7 +227,7 @@ export const BanTrendChart = memo(function BanTrendChart({ return ( { describe("BanTrendChart", () => { it("shows a spinner while loading", () => { - mockHook({ isLoading: true }); + mockHook({ loading: true }); wrap(); expect(screen.getByRole("progressbar")).toBeInTheDocument(); }); diff --git a/frontend/src/components/__tests__/JailDistributionChart.test.tsx b/frontend/src/components/__tests__/JailDistributionChart.test.tsx index 17ff3bb..5dffcc9 100644 --- a/frontend/src/components/__tests__/JailDistributionChart.test.tsx +++ b/frontend/src/components/__tests__/JailDistributionChart.test.tsx @@ -33,7 +33,7 @@ function wrap(ui: React.ReactElement) { const defaultResult: UseJailDistributionResult = { jails: [], total: 0, - isLoading: false, + loading: false, error: null, reload: vi.fn(), }; @@ -53,7 +53,7 @@ beforeEach(() => { describe("JailDistributionChart", () => { it("shows a spinner while loading", () => { - mockHook({ isLoading: true }); + mockHook({ loading: true }); wrap(); expect(screen.getByRole("progressbar")).toBeInTheDocument(); }); diff --git a/frontend/src/hooks/useBanTrend.ts b/frontend/src/hooks/useBanTrend.ts index 39713a7..0ee4168 100644 --- a/frontend/src/hooks/useBanTrend.ts +++ b/frontend/src/hooks/useBanTrend.ts @@ -21,7 +21,7 @@ export interface UseBanTrendResult { /** Human-readable bucket size label, e.g. `"1h"`. */ bucketSize: string; /** True while a fetch is in flight. */ - isLoading: boolean; + loading: boolean; /** Error message or `null`. */ error: string | null; /** Re-fetch the data immediately. */ @@ -46,7 +46,7 @@ export function useBanTrend( ): UseBanTrendResult { const [buckets, setBuckets] = useState([]); const [bucketSize, setBucketSize] = useState("1h"); - const [isLoading, setIsLoading] = useState(true); + const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const abortRef = useRef(null); @@ -56,7 +56,7 @@ export function useBanTrend( const controller = new AbortController(); abortRef.current = controller; - setIsLoading(true); + setLoading(true); setError(null); fetchBanTrend(timeRange, origin, source, controller.signal) @@ -71,7 +71,7 @@ export function useBanTrend( }) .finally(() => { if (!controller.signal.aborted) { - setIsLoading(false); + setLoading(false); } }); }, [timeRange, origin, source]); @@ -83,5 +83,5 @@ export function useBanTrend( }; }, [load]); - return { buckets, bucketSize, isLoading, error, reload: load }; + return { buckets, bucketSize, loading, error, reload: load }; } diff --git a/frontend/src/hooks/useDashboardCountryData.ts b/frontend/src/hooks/useDashboardCountryData.ts index 029033d..51730da 100644 --- a/frontend/src/hooks/useDashboardCountryData.ts +++ b/frontend/src/hooks/useDashboardCountryData.ts @@ -27,7 +27,7 @@ export interface UseDashboardCountryDataResult { /** Total ban count in the window. */ total: number; /** True while a fetch is in flight. */ - isLoading: boolean; + loading: boolean; /** Error message or `null`. */ error: string | null; /** Re-fetch the data immediately. */ @@ -54,7 +54,7 @@ export function useDashboardCountryData( const [countryNames, setCountryNames] = useState>({}); const [bans, setBans] = useState([]); const [total, setTotal] = useState(0); - const [isLoading, setIsLoading] = useState(true); + const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const abortRef = useRef(null); @@ -65,7 +65,7 @@ export function useDashboardCountryData( const controller = new AbortController(); abortRef.current = controller; - setIsLoading(true); + setLoading(true); setError(null); fetchBansByCountry(timeRange, origin, source) @@ -82,7 +82,7 @@ export function useDashboardCountryData( }) .finally(() => { if (!controller.signal.aborted) { - setIsLoading(false); + setLoading(false); } }); }, [timeRange, origin, source]); @@ -94,5 +94,5 @@ export function useDashboardCountryData( }; }, [load]); - return { countries, countryNames, bans, total, isLoading, error, reload: load }; + return { countries, countryNames, bans, total, loading, error, reload: load }; } diff --git a/frontend/src/hooks/useJailDistribution.ts b/frontend/src/hooks/useJailDistribution.ts index 56715ae..386e24a 100644 --- a/frontend/src/hooks/useJailDistribution.ts +++ b/frontend/src/hooks/useJailDistribution.ts @@ -21,7 +21,7 @@ export interface UseJailDistributionResult { /** Total ban count for the selected window. */ total: number; /** True while a fetch is in flight. */ - isLoading: boolean; + loading: boolean; /** Error message or `null`. */ error: string | null; /** Re-fetch the data immediately. */ @@ -45,7 +45,7 @@ export function useJailDistribution( ): UseJailDistributionResult { const [jails, setJails] = useState([]); const [total, setTotal] = useState(0); - const [isLoading, setIsLoading] = useState(true); + const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const abortRef = useRef(null); @@ -55,7 +55,7 @@ export function useJailDistribution( const controller = new AbortController(); abortRef.current = controller; - setIsLoading(true); + setLoading(true); setError(null); fetchBansByJail(timeRange, origin, "fail2ban", controller.signal) @@ -70,7 +70,7 @@ export function useJailDistribution( }) .finally(() => { if (!controller.signal.aborted) { - setIsLoading(false); + setLoading(false); } }); }, [timeRange, origin]); @@ -82,5 +82,5 @@ export function useJailDistribution( }; }, [load]); - return { jails, total, isLoading, error, reload: load }; + return { jails, total, loading, error, reload: load }; } diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx index a4c3d56..63a5815 100644 --- a/frontend/src/pages/DashboardPage.tsx +++ b/frontend/src/pages/DashboardPage.tsx @@ -80,7 +80,7 @@ export function DashboardPage(): React.JSX.Element { const source = getDataSource(timeRange); - const { countries, countryNames, isLoading: countryLoading, error: countryError, reload: reloadCountry } = + const { countries, countryNames, loading: countryLoading, error: countryError, reload: reloadCountry } = useDashboardCountryData(timeRange, originFilter, source); const sectionStyles = useCommonSectionStyles();