di usage in website

apps/website/app/leagues/[id]/LeagueDetailInteractive.tsx

@@ -1,16 +1,17 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
-import { useServices } from '@/lib/services/ServiceProvider';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
 import EndRaceModal from '@/components/leagues/EndRaceModal';
 
 // Shared state components
-import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
 import { StateContainer } from '@/components/shared/state/StateContainer';
+import { useLeagueDetailWithSponsors } from '@/hooks/league/useLeagueDetailWithSponsors';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { LEAGUE_MEMBERSHIP_SERVICE_TOKEN, RACE_SERVICE_TOKEN } from '@/lib/di/tokens';
 import { Trophy } from 'lucide-react';
 
 export default function LeagueDetailInteractive() {
@@ -18,17 +19,15 @@ export default function LeagueDetailInteractive() {
   const params = useParams();
   const leagueId = params.id as string;
   const isSponsor = useSponsorMode();
-  const { leagueService, leagueMembershipService, raceService } = useServices();
+  const leagueMembershipService = useInject(LEAGUE_MEMBERSHIP_SERVICE_TOKEN);
+  const raceService = useInject(RACE_SERVICE_TOKEN);
 
   const [endRaceModalRaceId, setEndRaceModalRaceId] = useState<string | null>(null);
 
   const currentDriverId = useEffectiveDriverId();
   const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
 
-  const { data: viewModel, isLoading, error, retry } = useDataFetching({
-    queryKey: ['leagueDetailPage', leagueId],
-    queryFn: () => leagueService.getLeagueDetailPageData(leagueId),
-  });
+  const { data: viewModel, isLoading, error, retry } = useLeagueDetailWithSponsors(leagueId);
 
   const handleMembershipChange = () => {
     retry();
@@ -82,7 +81,7 @@ export default function LeagueDetailInteractive() {
       {(leagueData) => (
         <>
           <LeagueDetailTemplate
-            viewModel={leagueData}
+            viewModel={leagueData!}
             leagueId={leagueId}
             isSponsor={isSponsor}
             membership={membership}