react-query

apps/website/app/races/[id]/results/page.tsx

@@ -7,7 +7,8 @@ import ResultsTable from '@/components/races/ResultsTable';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
 import type { RaceResultsDetailViewModel } from '@/lib/view-models';
 import { ArrowLeft, Calendar, Trophy, Users, Zap } from 'lucide-react';
@@ -19,54 +20,18 @@ export default function RaceResultsPage() {
   const params = useParams();
   const raceId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
-  const { raceResultsService, leagueMembershipService } = useServices();
 
-  const [raceData, setRaceData] = useState<RaceResultsDetailViewModel | null>(null);
-  const [raceSOF, setRaceSOF] = useState<number | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const { data: raceData, isLoading: loading, error } = useRaceResultsDetail(raceId, currentDriverId);
+  const { data: sofData } = useRaceWithSOF(raceId);
+  const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
+
   const [importing, setImporting] = useState(false);
   const [importSuccess, setImportSuccess] = useState(false);
-  const [isAdmin, setIsAdmin] = useState(false);
   const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
   const [preSelectedDriver, setPreSelectedDriver] = useState<{ id: string; name: string } | undefined>(undefined);
 
-  const loadData = async () => {
-    try {
-      const raceData = await raceResultsService.getResultsDetail(raceId, currentDriverId);
-      setRaceData(raceData);
-      setError(null);
-
-      try {
-        const sofData = await raceResultsService.getWithSOF(raceId);
-        setRaceSOF(sofData.strengthOfField);
-      } catch (sofErr) {
-        console.error('Failed to load SOF:', sofErr);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load race data');
-      setRaceData(null);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [raceId]);
-
-  useEffect(() => {
-    const leagueId = raceData?.league?.id;
-    if (leagueId && currentDriverId) {
-      const checkAdmin = async () => {
-        await leagueMembershipService.fetchLeagueMemberships(leagueId);
-        const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
-        setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-      };
-      checkAdmin();
-    }
-  }, [raceData?.league?.id, currentDriverId, leagueMembershipService]);
+  const raceSOF = sofData?.strengthOfField || null;
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
 
   const handleImportSuccess = async (importedResults: any[]) => {
     setImporting(true);