refactor use cases

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Trophy,
@@ -20,7 +20,7 @@ import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
 import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useDriverLeaderboard } from '@/hooks/useDriverService';
 import Image from 'next/image';
 
 // ============================================================================
@@ -173,23 +173,13 @@ function TopThreePodium({ drivers, onDriverClick }: TopThreePodiumProps) {
 
 export default function DriverLeaderboardPage() {
   const router = useRouter();
-  const [drivers, setDrivers] = useState<DriverListItem[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: leaderboardData, isLoading: loading } = useDriverLeaderboard();
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
   const [sortBy, setSortBy] = useState<SortBy>('rank');
   const [showFilters, setShowFilters] = useState(false);
 
-  useEffect(() => {
-    const load = async () => {
-      const { driverService } = useServices();
-      const viewModel = await driverService.getDriverLeaderboard();
-      setDrivers(viewModel.drivers);
-      setLoading(false);
-    };
-
-    void load();
-  }, []);
+  const drivers = leaderboardData?.drivers || [];
 
   const filteredDrivers = drivers.filter((driver) => {
     const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||