react-query

apps/website/app/races/all/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useRouter, useSearchParams } 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 Breadcrumbs from '@/components/layout/Breadcrumbs';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { RacesPageViewModel } from '@/lib/view-models/RacesPageViewModel';
+import { useAllRacesPageData } from '@/hooks/useRaceService';
 import {
   Calendar,
   Clock,
@@ -34,10 +33,7 @@ type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 export default function AllRacesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { raceService } = useServices();
-
-  const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
+  const { data: pageData, isLoading: loading } = useAllRacesPageData();
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -48,21 +44,6 @@ export default function AllRacesPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [showFilters, setShowFilters] = useState(false);
 
-  const loadRaces = async () => {
-    try {
-      const viewModel = await raceService.getAllRacesPageData();
-      setPageData(viewModel);
-    } catch (err) {
-      console.error('Failed to load races:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    void loadRaces();
-  }, []);
-
   const races = pageData?.races ?? [];
 
   const filteredRaces = useMemo(() => {