fix(jails): consolidate useJails() calls to eliminate double HTTP request
TASK-BUG-07: Remove duplicate useJails() hook call on JailsPage Previously, useJails() was called twice on page load: 1. In JailsPage to extract jailNames for BanUnbanForm 2. In JailOverviewSection to manage the jail table This caused two parallel GET /api/jails requests on every page load. Changes: - Lift useJails() to JailsPage as the single source of truth - Accept jail state as props in JailOverviewSection - Thread all required state (jails, total, loading, error, and action handlers) down from JailsPage to JailOverviewSection - Remove useJails hook import from JailOverviewSection This consolidation reduces unnecessary HTTP requests and improves page load performance, especially with many jails. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -8,7 +8,7 @@ import { useJails } from "../hooks/useJailList";
|
|||||||
|
|
||||||
export function JailsPage(): React.JSX.Element {
|
export function JailsPage(): React.JSX.Element {
|
||||||
const styles = useJailsPageStyles();
|
const styles = useJailsPageStyles();
|
||||||
const { jails } = useJails();
|
const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
|
||||||
const { banIp, unbanIp } = useActiveBans();
|
const { banIp, unbanIp } = useActiveBans();
|
||||||
|
|
||||||
const jailNames = jails.map((j) => j.name);
|
const jailNames = jails.map((j) => j.name);
|
||||||
@@ -19,7 +19,18 @@ export function JailsPage(): React.JSX.Element {
|
|||||||
Jails
|
Jails
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<JailOverviewSection />
|
<JailOverviewSection
|
||||||
|
jails={jails}
|
||||||
|
total={total}
|
||||||
|
loading={loading}
|
||||||
|
error={error}
|
||||||
|
refresh={refresh}
|
||||||
|
startJail={startJail}
|
||||||
|
stopJail={stopJail}
|
||||||
|
setIdle={setIdle}
|
||||||
|
reloadJail={reloadJail}
|
||||||
|
reloadAll={reloadAll}
|
||||||
|
/>
|
||||||
|
|
||||||
<BanUnbanForm jailNames={jailNames} onBan={banIp} onUnban={unbanIp} />
|
<BanUnbanForm jailNames={jailNames} onBan={banIp} onUnban={unbanIp} />
|
||||||
|
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ import {
|
|||||||
} from "@fluentui/react-icons";
|
} from "@fluentui/react-icons";
|
||||||
import { useCommonSectionStyles } from "../../components/commonStyles";
|
import { useCommonSectionStyles } from "../../components/commonStyles";
|
||||||
import { useJailsPageStyles } from "./jailsPageStyles";
|
import { useJailsPageStyles } from "./jailsPageStyles";
|
||||||
import { useJails } from "../../hooks/useJailList";
|
|
||||||
import type { JailSummary } from "../../types/jail";
|
import type { JailSummary } from "../../types/jail";
|
||||||
|
|
||||||
const useOverviewStyles = makeStyles({
|
const useOverviewStyles = makeStyles({
|
||||||
@@ -48,11 +47,24 @@ const useOverviewStyles = makeStyles({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export function JailOverviewSection(): React.JSX.Element {
|
interface JailOverviewSectionProps {
|
||||||
|
jails: JailSummary[];
|
||||||
|
total: number;
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
refresh: () => void;
|
||||||
|
startJail: (name: string) => Promise<void>;
|
||||||
|
stopJail: (name: string) => Promise<void>;
|
||||||
|
setIdle: (name: string, on: boolean) => Promise<void>;
|
||||||
|
reloadJail: (name: string) => Promise<void>;
|
||||||
|
reloadAll: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function JailOverviewSection(props: JailOverviewSectionProps): React.JSX.Element {
|
||||||
|
const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = props;
|
||||||
const pageStyles = useJailsPageStyles();
|
const pageStyles = useJailsPageStyles();
|
||||||
const overviewStyles = useOverviewStyles();
|
const overviewStyles = useOverviewStyles();
|
||||||
const sectionStyles = useCommonSectionStyles();
|
const sectionStyles = useCommonSectionStyles();
|
||||||
const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
|
|
||||||
const [opError, setOpError] = useState<string | null>(null);
|
const [opError, setOpError] = useState<string | null>(null);
|
||||||
|
|
||||||
const handle = (fn: () => Promise<void>): void => {
|
const handle = (fn: () => Promise<void>): void => {
|
||||||
|
|||||||
Reference in New Issue
Block a user