di usage in website

apps/website/app/leagues/[id]/stewarding/protests/[protestId]/page.tsx

@@ -4,7 +4,8 @@ import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { PROTEST_SERVICE_TOKEN } from '@/lib/di/tokens';
 import type { ProtestDetailViewModel } from '@/lib/view-models/ProtestDetailViewModel';
 import { ProtestDriverViewModel } from '@/lib/view-models/ProtestDriverViewModel';
 import { ProtestDecisionCommandModel } from '@/lib/command-models/protests/ProtestDecisionCommandModel';
@@ -35,9 +36,10 @@ import { useParams, useRouter } from 'next/navigation';
 import { useMemo, useState } from 'react';
 
 // Shared state components
-import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
 import { StateContainer } from '@/components/shared/state/StateContainer';
 import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { useLeagueAdminStatus } from '@/hooks/league/useLeagueAdminStatus';
+import { useProtestDetail } from '@/hooks/league/useProtestDetail';
 
 // Timeline event types
 interface TimelineEvent {
@@ -108,7 +110,7 @@ export default function ProtestReviewPage() {
   const leagueId = params.id as string;
   const protestId = params.protestId as string;
   const currentDriverId = useEffectiveDriverId();
-  const { leagueStewardingService, protestService, leagueMembershipService } = useServices();
+  const protestService = useInject(PROTEST_SERVICE_TOKEN);
 
   // Decision state
   const [showDecisionPanel, setShowDecisionPanel] = useState(false);
@@ -119,28 +121,19 @@ export default function ProtestReviewPage() {
   const [submitting, setSubmitting] = useState(false);
   const [newComment, setNewComment] = useState('');
 
-  // Check admin status
-  const { data: isAdmin, isLoading: adminLoading } = useDataFetching({
-    queryKey: ['leagueMembership', leagueId, currentDriverId],
-    queryFn: async () => {
-      await leagueMembershipService.fetchLeagueMemberships(leagueId);
-      const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
-      return membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
-    },
-  });
+  // Check admin status using hook
+  const { data: isAdmin, isLoading: adminLoading } = useLeagueAdminStatus(leagueId, currentDriverId || '');
 
-  // Load protest detail
-  const { data: detail, isLoading: detailLoading, error, retry } = useDataFetching({
-    queryKey: ['protestDetail', leagueId, protestId],
-    queryFn: () => leagueStewardingService.getProtestDetailViewModel(leagueId, protestId),
-    enabled: !!isAdmin,
-    onSuccess: (protestDetail) => {
-      if (protestDetail.initialPenaltyType) {
-        setPenaltyType(protestDetail.initialPenaltyType);
-        setPenaltyValue(protestDetail.initialPenaltyValue);
-      }
-    },
-  });
+  // Load protest detail using hook
+  const { data: detail, isLoading: detailLoading, error, retry } = useProtestDetail(leagueId, protestId, isAdmin || false);
+
+  // Set initial penalty values when data loads
+  useMemo(() => {
+    if (detail?.initialPenaltyType) {
+      setPenaltyType(detail.initialPenaltyType);
+      setPenaltyValue(detail.initialPenaltyValue);
+    }
+  }, [detail]);
 
   const penaltyTypes = useMemo(() => {
     const referenceItems = detail?.penaltyTypes ?? [];
@@ -315,6 +308,8 @@ export default function ProtestReviewPage() {
       }}
     >
       {(protestDetail) => {
+        if (!protestDetail) return null;
+        
         const protest = protestDetail.protest;
         const race = protestDetail.race;
         const protestingDriver = protestDetail.protestingDriver;