error and load state

apps/website/app/leaderboards/drivers/DriverRankingsStatic.tsx

@@ -1,28 +1,75 @@
-import { ServiceFactory } from '@/lib/services/ServiceFactory';
-import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
-import DriverRankingsInteractive from './DriverRankingsInteractive';
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import DriverRankingsTemplate from '@/templates/DriverRankingsTemplate';
 import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
 
-// ============================================================================
-// SERVER COMPONENT - Fetches data and passes to Interactive wrapper
-// ============================================================================
+// Shared state components
+import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
+import { StateContainer } from '@/components/shared/state/StateContainer';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { Users } from 'lucide-react';
 
-export default async function DriverRankingsStatic() {
-  // Create services for server-side data fetching
-  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
-  const driverService = serviceFactory.createDriverService();
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
 
-  // Fetch data server-side
-  let drivers: DriverLeaderboardItemViewModel[] = [];
+export default function DriverRankingsStatic() {
+  const router = useRouter();
+  const { driverService } = useServices();
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('rank');
+  const [showFilters, setShowFilters] = useState(false);
 
-  try {
-    const driversViewModel = await driverService.getDriverLeaderboard();
-    drivers = driversViewModel.drivers;
-  } catch (error) {
-    console.error('Failed to load driver rankings:', error);
-    drivers = [];
-  }
+  const { data: driverData, isLoading, error, retry } = useDataFetching({
+    queryKey: ['driverLeaderboard'],
+    queryFn: () => driverService.getDriverLeaderboard(),
+  });
 
-  // Pass data to Interactive wrapper which handles client-side interactions
-  return <DriverRankingsInteractive drivers={drivers} />;
+  const handleDriverClick = (driverId: string) => {
+    if (driverId.startsWith('demo-')) return;
+    router.push(`/drivers/${driverId}`);
+  };
+
+  const handleBackToLeaderboards = () => {
+    router.push('/leaderboards');
+  };
+
+  const drivers = driverData?.drivers || [];
+
+  return (
+    <StateContainer
+      data={drivers}
+      isLoading={isLoading}
+      error={error}
+      retry={retry}
+      config={{
+        loading: { variant: 'spinner', message: 'Loading driver rankings...' },
+        error: { variant: 'full-screen' },
+        empty: {
+          icon: Users,
+          title: 'No drivers found',
+          description: 'There are no drivers in the system yet.',
+        }
+      }}
+    >
+      {(driversData) => (
+        <DriverRankingsTemplate
+          drivers={driversData}
+          searchQuery={searchQuery}
+          selectedSkill={selectedSkill}
+          sortBy={sortBy}
+          showFilters={showFilters}
+          onSearchChange={setSearchQuery}
+          onSkillChange={setSelectedSkill}
+          onSortChange={setSortBy}
+          onToggleFilters={() => setShowFilters(!showFilters)}
+          onDriverClick={handleDriverClick}
+          onBackToLeaderboards={handleBackToLeaderboards}
+        />
+      )}
+    </StateContainer>
+  );
 }