di usage in website

apps/website/app/drivers/DriversInteractive.tsx

@@ -1,29 +1,23 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { DriversTemplate } from '@/templates/DriversTemplate';
 import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+import { DriversTemplate } from '@/templates/DriversTemplate';
 
 // Shared state components
-import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
 import { StateContainer } from '@/components/shared/state/StateContainer';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useDriverLeaderboard } from '@/hooks/driver/useDriverLeaderboard';
 import { Users } from 'lucide-react';
 
 export function DriversInteractive() {
-  const router = useRouter();
-  const { driverService } = useServices();
   
-  const { data: viewModel, isLoading: loading, error, retry } = useDataFetching({
-    queryKey: ['driverLeaderboard'],
-    queryFn: () => driverService.getDriverLeaderboard(),
-  });
+  const { data: viewModel, isLoading: loading, error, retry } = useDriverLeaderboard();
   
   const drivers = viewModel?.drivers || [];
   const totalRaces = viewModel?.totalRaces || 0;
   const totalWins = viewModel?.totalWins || 0;
   const activeCount = viewModel?.activeCount || 0;
 
+  // TODO this should not be done in a page, thats part of the service??
   // Transform data for template
   const driverViewModels = drivers.map((driver, index) =>
     new DriverLeaderboardItemViewModel(driver, index + 1)
@@ -45,7 +39,7 @@ export function DriversInteractive() {
         }
       }}
     >
-      {(leaderboardData) => (
+      {() => (
         <DriversTemplate
           drivers={driverViewModels}
           totalRaces={totalRaces}