From 97d47fae813c5f0b76e83da999ed979019d5035b Mon Sep 17 00:00:00 2001
From: Lukas <lukas.pupkalipinski@lpl-mind.de>
Date: Thu, 23 Apr 2026 08:12:31 +0200
Subject: [PATCH] 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>
---
 frontend/src/pages/JailsPage.tsx               | 15 +++++++++++++--
 .../src/pages/jails/JailOverviewSection.tsx    | 18 +++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/JailsPage.tsx b/frontend/src/pages/JailsPage.tsx
index 7eaf6f7..337470f 100644
--- a/frontend/src/pages/JailsPage.tsx
+++ b/frontend/src/pages/JailsPage.tsx
@@ -8,7 +8,7 @@ import { useJails } from "../hooks/useJailList";
 
 export function JailsPage(): React.JSX.Element {
   const styles = useJailsPageStyles();
-  const { jails } = useJails();
+  const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
   const { banIp, unbanIp } = useActiveBans();
 
   const jailNames = jails.map((j) => j.name);
@@ -19,7 +19,18 @@ export function JailsPage(): React.JSX.Element {
         Jails
       </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} />
 
diff --git a/frontend/src/pages/jails/JailOverviewSection.tsx b/frontend/src/pages/jails/JailOverviewSection.tsx
index f613c53..e30a9c6 100644
--- a/frontend/src/pages/jails/JailOverviewSection.tsx
+++ b/frontend/src/pages/jails/JailOverviewSection.tsx
@@ -27,7 +27,6 @@ import {
 } from "@fluentui/react-icons";
 import { useCommonSectionStyles } from "../../components/commonStyles";
 import { useJailsPageStyles } from "./jailsPageStyles";
-import { useJails } from "../../hooks/useJailList";
 import type { JailSummary } from "../../types/jail";
 
 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 overviewStyles = useOverviewStyles();
   const sectionStyles = useCommonSectionStyles();
-  const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
   const [opError, setOpError] = useState<string | null>(null);
 
   const handle = (fn: () => Promise<void>): void => {