fix e2e

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState, useEffect, useCallback } 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 { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+import EndRaceModal from '@/components/leagues/EndRaceModal';
+
+export default function LeagueDetailInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const leagueId = params.id as string;
+  const isSponsor = useSponsorMode();
+  const { leagueService, leagueMembershipService, raceService } = useServices();
+
+  const [viewModel, setViewModel] = useState<LeagueDetailPageViewModel | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [endRaceModalRaceId, setEndRaceModalRaceId] = useState<string | null>(null);
+
+  const currentDriverId = useEffectiveDriverId();
+  const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
+
+  const loadLeagueData = async () => {
+    try {
+      const viewModelData = await leagueService.getLeagueDetailPageData(leagueId);
+
+      if (!viewModelData) {
+        setError('League not found');
+        setLoading(false);
+        return;
+      }
+
+      setViewModel(viewModelData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load league');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadLeagueData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leagueId]);
+
+  const handleMembershipChange = () => {
+    loadLeagueData();
+  };
+
+  const handleEndRaceModalOpen = (raceId: string) => {
+    setEndRaceModalRaceId(raceId);
+  };
+
+  const handleLiveRaceClick = (raceId: string) => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleBackToLeagues = () => {
+    router.push('/leagues');
+  };
+
+  const handleEndRaceConfirm = async () => {
+    if (!endRaceModalRaceId) return;
+    
+    try {
+      await raceService.completeRace(endRaceModalRaceId);
+      await loadLeagueData();
+      setEndRaceModalRaceId(null);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to complete race');
+    }
+  };
+
+  const handleEndRaceCancel = () => {
+    setEndRaceModalRaceId(null);
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">Loading league...</div>
+    );
+  }
+
+  if (error || !viewModel) {
+    return (
+      <div className="text-center text-warning-amber">
+        {error || 'League not found'}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <LeagueDetailTemplate
+        viewModel={viewModel}
+        leagueId={leagueId}
+        isSponsor={isSponsor}
+        membership={membership}
+        currentDriverId={currentDriverId}
+        onMembershipChange={handleMembershipChange}
+        onEndRaceModalOpen={handleEndRaceModalOpen}
+        onLiveRaceClick={handleLiveRaceClick}
+        onBackToLeagues={handleBackToLeagues}
+      >
+        {/* End Race Modal */}
+        {endRaceModalRaceId && viewModel && (() => {
+          const race = viewModel.runningRaces.find(r => r.id === endRaceModalRaceId);
+          return race ? (
+            <EndRaceModal
+              raceId={race.id}
+              raceName={race.name}
+              onConfirm={handleEndRaceConfirm}
+              onCancel={handleEndRaceCancel}
+            />
+          ) : null;
+        })()}
+      </LeagueDetailTemplate>
+    </>
+  );
+}