error and load state

apps/website/app/leagues/LeaguesInteractive.tsx

@@ -1,32 +1,24 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
 import { useServices } from '@/lib/services/ServiceProvider';
 import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 
+// Shared state components
+import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
+import { StateContainer } from '@/components/shared/state/StateContainer';
+import { Trophy } from 'lucide-react';
+
 export default function LeaguesInteractive() {
   const router = useRouter();
-  const [realLeagues, setRealLeagues] = useState<LeagueSummaryViewModel[]>([]);
-  const [loading, setLoading] = useState(true);
-
   const { leagueService } = useServices();
 
-  const loadLeagues = useCallback(async () => {
-    try {
-      const leagues = await leagueService.getAllLeagues();
-      setRealLeagues(leagues);
-    } catch (error) {
-      console.error('Failed to load leagues:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [leagueService]);
-
-  useEffect(() => {
-    void loadLeagues();
-  }, [loadLeagues]);
+  const { data: realLeagues = [], isLoading: loading, error, retry } = useDataFetching({
+    queryKey: ['allLeagues'],
+    queryFn: () => leagueService.getAllLeagues(),
+  });
 
   const handleLeagueClick = (leagueId: string) => {
     router.push(`/leagues/${leagueId}`);
@@ -37,11 +29,30 @@ export default function LeaguesInteractive() {
   };
 
   return (
-    <LeaguesTemplate
-      leagues={realLeagues}
-      loading={loading}
-      onLeagueClick={handleLeagueClick}
-      onCreateLeagueClick={handleCreateLeagueClick}
-    />
+    <StateContainer
+      data={realLeagues}
+      isLoading={loading}
+      error={error}
+      retry={retry}
+      config={{
+        loading: { variant: 'spinner', message: 'Loading leagues...' },
+        error: { variant: 'full-screen' },
+        empty: {
+          icon: Trophy,
+          title: 'No leagues yet',
+          description: 'Create your first league to start organizing races and events.',
+          action: { label: 'Create League', onClick: handleCreateLeagueClick }
+        }
+      }}
+    >
+      {(leaguesData) => (
+        <LeaguesTemplate
+          leagues={leaguesData}
+          loading={false}
+          onLeagueClick={handleLeagueClick}
+          onCreateLeagueClick={handleCreateLeagueClick}
+        />
+      )}
+    </StateContainer>
   );
 }