di usage in website

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

@@ -5,6 +5,11 @@ import '@testing-library/jest-dom';
 
 import ProtestReviewPage from './page';
 
+// Mock useEffectiveDriverId
+vi.mock('@/hooks/useEffectiveDriverId', () => ({
+  useEffectiveDriverId: () => 'driver-1',
+}));
+
 // Mocks for Next.js navigation
 const mockPush = vi.fn();
 
@@ -24,22 +29,56 @@ const mockGetProtestDetailViewModel = vi.fn();
 const mockFetchLeagueMemberships = vi.fn();
 const mockGetMembership = vi.fn();
 
-vi.mock('@/lib/services/ServiceProvider', () => ({
-  useServices: () => ({
-    leagueStewardingService: {
-      getProtestDetailViewModel: mockGetProtestDetailViewModel,
-    },
-    protestService: {
-      applyPenalty: vi.fn(),
-      requestDefense: vi.fn(),
-    },
-    leagueMembershipService: {
-      fetchLeagueMemberships: mockFetchLeagueMemberships,
-      getMembership: mockGetMembership,
-    },
+// Mock useLeagueAdminStatus hook
+vi.mock('@/hooks/league/useLeagueAdminStatus', () => ({
+  useLeagueAdminStatus: (leagueId: string, driverId: string) => ({
+    data: mockGetMembership.mock.results[0]?.value ?
+      (mockGetMembership.mock.results[0].value.role === 'admin' || mockGetMembership.mock.results[0].value.role === 'owner') : false,
+    isLoading: false,
+    isError: false,
+    isSuccess: true,
+    refetch: vi.fn(),
   }),
 }));
 
+// Mock useProtestDetail hook
+vi.mock('@/hooks/league/useProtestDetail', () => ({
+  useProtestDetail: (leagueId: string, protestId: string, enabled: boolean = true) => ({
+    data: mockGetProtestDetailViewModel.mock.results[0]?.value || null,
+    isLoading: false,
+    isError: false,
+    isSuccess: !!mockGetProtestDetailViewModel.mock.results[0]?.value,
+    refetch: vi.fn(),
+    retry: vi.fn(),
+  }),
+}));
+
+// Mock useInject for protest service
+vi.mock('@/lib/di/hooks/useInject', () => ({
+  useInject: (token: symbol) => {
+    if (token.toString().includes('PROTEST_SERVICE_TOKEN')) {
+      return {
+        applyPenalty: vi.fn(),
+        requestDefense: vi.fn(),
+      };
+    }
+    return {};
+  },
+}));
+
+// Mock the static LeagueMembershipService for LeagueRoleUtility
+vi.mock('@/lib/services/leagues/LeagueMembershipService', () => ({
+  LeagueMembershipService: {
+    getMembership: mockGetMembership,
+    fetchLeagueMemberships: mockFetchLeagueMemberships,
+    setLeagueMemberships: vi.fn(),
+    clearLeagueMemberships: vi.fn(),
+    getCachedMembershipsIterator: vi.fn(() => [][Symbol.iterator]()),
+    getAllMembershipsForDriver: vi.fn(() => []),
+    getLeagueMembers: vi.fn(() => []),
+  },
+}));
+
 const mockIsLeagueAdminOrHigherRole = vi.fn();
 
 vi.mock('@/lib/utilities/LeagueRoleUtility', () => ({
@@ -56,6 +95,7 @@ describe('ProtestReviewPage', () => {
     mockGetMembership.mockReset();
     mockIsLeagueAdminOrHigherRole.mockReset();
 
+    // Set up default mock implementations
     mockFetchLeagueMemberships.mockResolvedValue(undefined);
     mockGetMembership.mockReturnValue({ role: 'admin' });
     mockIsLeagueAdminOrHigherRole.mockReturnValue(true);

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;