Refactor frontend API calls into hooks and complete task states

frontend/src/components/SetupGuard.tsx

@@ -6,12 +6,13 @@
  * While the status is loading a full-screen spinner is shown.
  */
 
-import { useEffect, useState } from "react";
 import { Navigate } from "react-router-dom";
 import { Spinner } from "@fluentui/react-components";
-import { getSetupStatus } from "../api/setup";
+import { useSetup } from "../hooks/useSetup";
 
-type Status = "loading" | "done" | "pending";
+/**
+ * Component is intentionally simple; status load is handled by the hook.
+ */
 
 interface SetupGuardProps {
   /** The protected content to render when setup is complete. */
@@ -24,25 +25,9 @@ interface SetupGuardProps {
  * Redirects to `/setup` if setup is still pending.
  */
 export function SetupGuard({ children }: SetupGuardProps): React.JSX.Element {
-  const [status, setStatus] = useState<Status>("loading");
+  const { status, loading } = useSetup();
 
-  useEffect(() => {
-    let cancelled = false;
-    getSetupStatus()
-      .then((res): void => {
-        if (!cancelled) setStatus(res.completed ? "done" : "pending");
-      })
-      .catch((): void => {
-        // A failed check conservatively redirects to /setup — a crashed
-        // backend cannot serve protected routes anyway.
-        if (!cancelled) setStatus("pending");
-      });
-    return (): void => {
-      cancelled = true;
-    };
-  }, []);
-
-  if (status === "loading") {
+  if (loading) {
     return (
       <div
         style={{
@@ -57,7 +42,7 @@ export function SetupGuard({ children }: SetupGuardProps): React.JSX.Element {
     );
   }
 
-  if (status === "pending") {
+  if (!status?.completed) {
     return <Navigate to="/setup" replace />;
   }