react-query

apps/website/app/races/page.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { RacesPageViewModel } from '@/lib/view-models/RacesPageViewModel';
+import { useRacesPageData } from '@/hooks/useRaceService';
 import {
   Calendar,
   Clock,
@@ -31,31 +30,13 @@ type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'a
 
 export default function RacesPage() {
   const router = useRouter();
-  const { raceService } = useServices();
-
-  const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
+  const { data: pageData, isLoading: loading } = useRacesPageData();
 
   // Filters
   const [statusFilter, setStatusFilter] = useState<RaceStatusFilter | 'all'>('all');
   const [leagueFilter, setLeagueFilter] = useState<string>('all');
   const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
 
-  const loadRaces = async () => {
-    try {
-      const data = await raceService.getRacesPageData();
-      setPageData(data);
-    } catch (err) {
-      console.error('Failed to load races:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadRaces();
-  }, []);
-
   // Filter races
   const filteredRaces = useMemo(() => {
     if (!pageData) return [];