error and load state

apps/website/app/leagues/[id]/settings/page.tsx

@@ -9,47 +9,34 @@ import { useServices } from '@/lib/services/ServiceProvider';
 import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
 import { AlertTriangle, Settings } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+
+// Shared state components
+import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
+import { StateContainer } from '@/components/shared/state/StateContainer';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
 
 export default function LeagueSettingsPage() {
   const params = useParams();
   const leagueId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
   const { leagueMembershipService, leagueSettingsService } = useServices();
-
-  const [settings, setSettings] = useState<LeagueSettingsViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [isAdmin, setIsAdmin] = useState(false);
   const router = useRouter();
 
-  useEffect(() => {
-    async function checkAdmin() {
+  // Check admin status
+  const { data: isAdmin, isLoading: adminLoading } = useDataFetching({
+    queryKey: ['leagueMembership', leagueId, currentDriverId],
+    queryFn: async () => {
       const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
-      setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-    }
-    checkAdmin();
-  }, [leagueId, currentDriverId, leagueMembershipService]);
-
-  useEffect(() => {
-    async function loadSettings() {
-      setLoading(true);
-      try {
-        const settingsData = await leagueSettingsService.getLeagueSettings(leagueId);
-        if (settingsData) {
-          setSettings(settingsData);
-        }
-      } catch (err) {
-        console.error('Failed to load league settings:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    if (isAdmin) {
-      loadSettings();
-    }
-  }, [leagueId, isAdmin, leagueSettingsService]);
+      return membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
+    },
+  });
 
+  // Load settings (only if admin)
+  const { data: settings, isLoading: settingsLoading, error, retry } = useDataFetching({
+    queryKey: ['leagueSettings', leagueId],
+    queryFn: () => leagueSettingsService.getLeagueSettings(leagueId),
+    enabled: !!isAdmin,
+  });
 
   const handleTransferOwnership = async (newOwnerId: string) => {
     try {
@@ -60,6 +47,12 @@ export default function LeagueSettingsPage() {
     }
   };
 
+  // Show loading for admin check
+  if (adminLoading) {
+    return <LoadingWrapper variant="full-screen" message="Checking permissions..." />;
+  }
+
+  // Show access denied if not admin
   if (!isAdmin) {
     return (
       <Card>
@@ -76,49 +69,47 @@ export default function LeagueSettingsPage() {
     );
   }
 
-  if (loading) {
-    return (
-      <Card>
-        <div className="py-6 text-sm text-gray-400">Loading configuration…</div>
-      </Card>
-    );
-  }
-
-  if (!settings) {
-    return (
-      <Card>
-        <div className="py-6 text-sm text-gray-500">
-          Unable to load league configuration for this demo league.
-        </div>
-      </Card>
-    );
-  }
-
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
-          <Settings className="w-6 h-6 text-primary-blue" />
+    <StateContainer
+      data={settings}
+      isLoading={settingsLoading}
+      error={error}
+      retry={retry}
+      config={{
+        loading: { variant: 'spinner', message: 'Loading settings...' },
+        error: { variant: 'full-screen' },
+        empty: {
+          icon: Settings,
+          title: 'No settings available',
+          description: 'Unable to load league configuration.',
+        }
+      }}
+    >
+      {(settingsData) => (
+        <div className="space-y-6">
+          {/* Header */}
+          <div className="flex items-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
+              <Settings className="w-6 h-6 text-primary-blue" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-white">League Settings</h1>
+              <p className="text-sm text-gray-400">Manage your league configuration</p>
+            </div>
+          </div>
+
+          {/* READONLY INFORMATION SECTION - Compact */}
+          <div className="space-y-4">
+            <ReadonlyLeagueInfo league={settingsData.league} configForm={settingsData.config} />
+
+            <LeagueOwnershipTransfer
+              settings={settingsData}
+              currentDriverId={currentDriverId}
+              onTransferOwnership={handleTransferOwnership}
+            />
+          </div>
         </div>
-        <div>
-          <h1 className="text-2xl font-bold text-white">League Settings</h1>
-          <p className="text-sm text-gray-400">Manage your league configuration</p>
-        </div>
-      </div>
-
-
-
-      {/* READONLY INFORMATION SECTION - Compact */}
-      <div className="space-y-4">
-        <ReadonlyLeagueInfo league={settings.league} configForm={settings.config} />
-
-        <LeagueOwnershipTransfer
-          settings={settings}
-          currentDriverId={currentDriverId}
-          onTransferOwnership={handleTransferOwnership}
-        />
-      </div>
-    </div>
+      )}
+    </StateContainer>
   );
 }