refactor use cases

apps/website/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import {
@@ -24,8 +24,7 @@ import {
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 
-import { useServices } from '@/lib/services/ServiceProvider';
-import { DashboardOverviewViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
+import { useDashboardOverview } from '@/hooks/useDashboardService';
 
 
 // Helper functions
@@ -80,26 +79,7 @@ function getGreeting(): string {
 import { DashboardFeedItemSummaryViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
 
 export default function DashboardPage() {
-    const { dashboardService } = useServices();
-    const [dashboardData, setDashboardData] = useState<DashboardOverviewViewModel | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-      const fetchDashboardData = async () => {
-        try {
-          const data = await dashboardService.getDashboardOverview();
-          setDashboardData(data);
-        } catch (err) {
-          console.error('Failed to fetch dashboard data:', err);
-          setError('Failed to load dashboard data');
-        } finally {
-          setIsLoading(false);
-        }
-      };
-
-      fetchDashboardData();
-    }, [dashboardService]);
+    const { data: dashboardData, isLoading, error } = useDashboardOverview();
 
    if (isLoading) {
      return (
@@ -112,7 +92,7 @@ export default function DashboardPage() {
    if (error || !dashboardData) {
      return (
        <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-         <div className="text-red-400">{error || 'Failed to load dashboard'}</div>
+         <div className="text-red-400">Failed to load dashboard</div>
        </main>
      );
    }

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()) ||