Task 11: Remove direct API calls from components

frontend/src/components/config/ServerHealthSection.tsx

@@ -34,9 +34,8 @@ import {
   DocumentBulletList24Regular,
   Filter24Regular,
 } from "@fluentui/react-icons";
-import { fetchFail2BanLog, fetchServiceStatus } from "../../api/config";
+import { useServerHealth } from "../../hooks/useServerHealth";
 import { useConfigStyles } from "./configStyles";
-import type { Fail2BanLogResponse, ServiceStatusResponse } from "../../types/config";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -176,16 +175,14 @@ export function ServerHealthSection(): React.JSX.Element {
   const styles = useStyles();
 
   // ---- data state ----------------------------------------------------------
-  const [status, setStatus] = useState<ServiceStatusResponse | null>(null);
-  const [logData, setLogData] = useState<Fail2BanLogResponse | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
 
   // ---- toolbar state -------------------------------------------------------
   const [linesCount, setLinesCount] = useState<number>(200);
   const [filterRaw, setFilterRaw] = useState<string>("");
   const [filterValue, setFilterValue] = useState<string>("");
+  const { status, logData, error, refresh } = useServerHealth(linesCount, filterValue);
   const [autoRefresh, setAutoRefresh] = useState(false);
   const [refreshInterval, setRefreshInterval] = useState(10);
 
@@ -204,33 +201,20 @@ export function ServerHealthSection(): React.JSX.Element {
   // ---- fetch logic ---------------------------------------------------------
   const fetchData = useCallback(
     async (showSpinner: boolean): Promise<void> => {
-      if (showSpinner) setIsRefreshing(true);
+      if (showSpinner) {
+        setIsRefreshing(true);
+      }
+
       try {
-        // Use allSettled so a log-read failure doesn't hide the service status.
-        const [svcResult, logResult] = await Promise.allSettled([
-          fetchServiceStatus(),
-          fetchFail2BanLog(linesCount, filterValue || undefined),
-        ]);
-
-        if (svcResult.status === "fulfilled") {
-          setStatus(svcResult.value);
-        } else {
-          setStatus(null);
-        }
-
-        if (logResult.status === "fulfilled") {
-          setLogData(logResult.value);
-          setError(null);
-        } else {
-          const reason: unknown = logResult.reason;
-          setError(reason instanceof Error ? reason.message : "Failed to load log data.");
-        }
+        await refresh();
       } finally {
-        if (showSpinner) setIsRefreshing(false);
+        if (showSpinner) {
+          setIsRefreshing(false);
+        }
         setLoading(false);
       }
     },
-    [linesCount, filterValue],
+    [refresh],
   );
 
   // ---- initial load --------------------------------------------------------