react-query

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

@@ -4,8 +4,8 @@ import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { RaceStewardingViewModel } from '@/lib/view-models/RaceStewardingViewModel';
+import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
 import {
   AlertCircle,
@@ -20,42 +20,20 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export default function RaceStewardingPage() {
   const params = useParams();
   const router = useRouter();
-  const { raceStewardingService, leagueMembershipService } = useServices();
   const raceId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
 
-  const [stewardingData, setStewardingData] = useState<RaceStewardingViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [isAdmin, setIsAdmin] = useState(false);
+  const { data: stewardingData, isLoading: loading } = useRaceStewardingData(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
+
   const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
 
-  useEffect(() => {
-    async function loadData() {
-      setLoading(true);
-      try {
-        const data = await raceStewardingService.getRaceStewardingData(raceId, currentDriverId);
-        setStewardingData(data);
-
-        if (data.league?.id) {
-          const membership = await leagueMembershipService.getMembership(data.league.id, currentDriverId);
-          setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-        } else {
-          setIsAdmin(false);
-        }
-      } catch (err) {
-        console.error('Failed to load data:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadData();
-  }, [raceId, currentDriverId, raceStewardingService, leagueMembershipService]);
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
 
   const pendingProtests = stewardingData?.pendingProtests ?? [];
   const resolvedProtests = stewardingData?.resolvedProtests ?? [];
@@ -153,7 +131,7 @@ export default function RaceStewardingPage() {
           <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
           <Button
             variant="secondary"
-            onClick={() => router.push(`/races/${race.id}`)}
+            onClick={() => router.push(`/races/${raceId}`)}
             className="flex items-center gap-2 text-sm"
           >
             <ArrowLeft className="w-4 h-4" />
@@ -393,7 +371,7 @@ export default function RaceStewardingPage() {
 
         {activeTab === 'penalties' && (
           <div className="space-y-4">
-            {penalties.length === 0 ? (
+            {stewardingData?.penalties.length === 0 ? (
               <Card className="text-center py-12">
                 <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
                   <Gavel className="w-8 h-8 text-gray-500" />