react-query

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

@@ -8,7 +8,8 @@ import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import Heading from '@/components/ui/Heading';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useRaceDetail, useRegisterForRace, useWithdrawFromRace, useCancelRace, useCompleteRace, useReopenRace } from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
 import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
 import type { RaceDetailViewModel } from '@/lib/view-models/RaceDetailViewModel';
 import {
@@ -37,54 +38,29 @@ export default function RaceDetailPage() {
   const router = useRouter();
   const params = useParams();
   const raceId = params.id as string;
-  const { raceService, leagueMembershipService } = useServices();
+  const currentDriverId = useEffectiveDriverId();
+  const isSponsorMode = useSponsorMode();
+
+  const { data: viewModel, isLoading: loading, error } = useRaceDetail(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(viewModel?.league?.id || '', currentDriverId);
 
-  const [viewModel, setViewModel] = useState<RaceDetailViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [cancelling, setCancelling] = useState(false);
-  const [registering, setRegistering] = useState(false);
-  const [reopening, setReopening] = useState(false);
   const [ratingChange, setRatingChange] = useState<number | null>(null);
   const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
   const [showProtestModal, setShowProtestModal] = useState(false);
   const [showEndRaceModal, setShowEndRaceModal] = useState(false);
-  const [membership, setMembership] = useState<any>(null);
 
-  const currentDriverId = useEffectiveDriverId();
-  const isSponsorMode = useSponsorMode();
-
-  const loadRaceData = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const vm = await raceService.getRaceDetail(raceId, currentDriverId);
-      setViewModel(vm);
-
-      // Fetch league membership for admin controls
-      if (vm.league) {
-        await leagueMembershipService.fetchLeagueMemberships(vm.league.id);
-        const leagueMembership = leagueMembershipService.getMembership(vm.league.id, currentDriverId);
-        setMembership(leagueMembership);
-      }
-
-      const userResultRatingChange = vm.userResult?.ratingChange ?? null;
-      setRatingChange(userResultRatingChange);
-      if (userResultRatingChange === null) {
-        setAnimatedRatingChange(0);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load race');
-      setViewModel(null);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const registerMutation = useRegisterForRace();
+  const withdrawMutation = useWithdrawFromRace();
+  const cancelMutation = useCancelRace();
+  const completeMutation = useCompleteRace();
+  const reopenMutation = useReopenRace();
 
+  // Set rating change when viewModel changes
   useEffect(() => {
-    loadRaceData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [raceId]);
+    if (viewModel?.userResult?.ratingChange !== undefined) {
+      setRatingChange(viewModel.userResult.ratingChange);
+    }
+  }, [viewModel?.userResult?.ratingChange]);
 
   // Animate rating change when it changes
   useEffect(() => {