di usage in website

apps/website/components/leagues/LeagueSponsorshipsSection.tsx

@@ -1,13 +1,16 @@
 'use client';
 
 import { Award, DollarSign, Star, X } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useState } from 'react';
 import PendingSponsorshipRequests, { type PendingRequestDTO } from '../sponsors/PendingSponsorshipRequests';
 import Button from '../ui/Button';
 import Input from '../ui/Input';
 
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useLeagueSeasons } from '@/hooks/league/useLeagueSeasons';
+import { useSponsorshipRequests } from '@/hooks/league/useSponsorshipRequests';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { SPONSORSHIP_SERVICE_TOKEN } from '@/lib/di/tokens';
 
 interface SponsorshipSlot {
   tier: 'main' | 'secondary';
@@ -29,7 +32,8 @@ export function LeagueSponsorshipsSection({
   readOnly = false
 }: LeagueSponsorshipsSectionProps) {
   const currentDriverId = useEffectiveDriverId();
-  const { sponsorshipService, leagueService } = useServices();
+  const sponsorshipService = useInject(SPONSORSHIP_SERVICE_TOKEN);
+  
   const [slots, setSlots] = useState<SponsorshipSlot[]>([
     { tier: 'main', price: 500, isOccupied: false },
     { tier: 'secondary', price: 200, isOccupied: false },
@@ -37,73 +41,21 @@ export function LeagueSponsorshipsSection({
   ]);
   const [editingIndex, setEditingIndex] = useState<number | null>(null);
   const [tempPrice, setTempPrice] = useState<string>('');
-  const [pendingRequests, setPendingRequests] = useState<PendingRequestDTO[]>([]);
-  const [requestsLoading, setRequestsLoading] = useState(false);
-  const [seasonId, setSeasonId] = useState<string | undefined>(propSeasonId);
 
   // Load season ID if not provided
-  useEffect(() => {
-    async function loadSeasonId() {
-      if (propSeasonId) {
-        setSeasonId(propSeasonId);
-        return;
-      }
-      try {
-        const seasons = await leagueService.getLeagueSeasons(leagueId);
-        const activeSeason = seasons.find((s) => s.status === 'active') ?? seasons[0];
-        if (activeSeason) setSeasonId(activeSeason.seasonId);
-      } catch (err) {
-        console.error('Failed to load season:', err);
-      }
-    }
-    loadSeasonId();
-  }, [leagueId, propSeasonId, leagueService]);
+  const { data: seasons = [], isLoading: seasonsLoading } = useLeagueSeasons(leagueId);
+  const activeSeason = seasons.find((s) => s.status === 'active') ?? seasons[0];
+  const seasonId = propSeasonId || activeSeason?.seasonId;
 
   // Load pending sponsorship requests
-  const loadPendingRequests = useCallback(async () => {
-    if (!seasonId) return;
-    
-    setRequestsLoading(true);
-    try {
-      const requests = await sponsorshipService.getPendingSponsorshipRequests({
-        entityType: 'season',
-        entityId: seasonId,
-      });
-
-      // Convert service view-models to component DTO type (UI-only)
-      setPendingRequests(
-        requests.map(
-          (r): PendingRequestDTO => ({
-            id: r.id,
-            sponsorId: r.sponsorId,
-            sponsorName: r.sponsorName,
-            sponsorLogo: r.sponsorLogo,
-            tier: r.tier,
-            offeredAmount: r.offeredAmount,
-            currency: r.currency,
-            formattedAmount: r.formattedAmount,
-            message: r.message,
-            createdAt: r.createdAt,
-            platformFee: r.platformFee,
-            netAmount: r.netAmount,
-          }),
-        ),
-      );
-    } catch (err) {
-      console.error('Failed to load pending requests:', err);
-    } finally {
-      setRequestsLoading(false);
-    }
-  }, [seasonId, sponsorshipService]);
-
-  useEffect(() => {
-    loadPendingRequests();
-  }, [loadPendingRequests]);
+  const { data: pendingRequests = [], isLoading: requestsLoading, refetch: refetchRequests } = useSponsorshipRequests('season', seasonId || '');
 
   const handleAcceptRequest = async (requestId: string) => {
+    if (!currentDriverId) return;
+    
     try {
       await sponsorshipService.acceptSponsorshipRequest(requestId, currentDriverId);
-      await loadPendingRequests();
+      await refetchRequests();
     } catch (err) {
       console.error('Failed to accept request:', err);
       alert(err instanceof Error ? err.message : 'Failed to accept request');
@@ -111,9 +63,11 @@ export function LeagueSponsorshipsSection({
   };
 
   const handleRejectRequest = async (requestId: string, reason?: string) => {
+    if (!currentDriverId) return;
+    
     try {
       await sponsorshipService.rejectSponsorshipRequest(requestId, currentDriverId, reason);
-      await loadPendingRequests();
+      await refetchRequests();
     } catch (err) {
       console.error('Failed to reject request:', err);
       alert(err instanceof Error ? err.message : 'Failed to reject request');