di usage in website

apps/website/app/leagues/LeaguesInteractive.tsx

@@ -3,22 +3,17 @@
 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 { useAllLeagues } from '@/hooks/league/useAllLeagues';
 import { Trophy } from 'lucide-react';
 
 export default function LeaguesInteractive() {
   const router = useRouter();
-  const { leagueService } = useServices();
 
-  const { data: realLeagues = [], isLoading: loading, error, retry } = useDataFetching({
-    queryKey: ['allLeagues'],
-    queryFn: () => leagueService.getAllLeagues(),
-  });
+  const { data: realLeagues = [], isLoading: loading, error, retry } = useAllLeagues();
 
   const handleLeagueClick = (leagueId: string) => {
     router.push(`/leagues/${leagueId}`);