fix e2e

apps/website/app/leagues/[id]/standings/LeagueStandingsInteractive.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'next/navigation';
+import { LeagueStandingsTemplate } from '@/templates/LeagueStandingsTemplate';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+import { useServices } from '@/lib/services/ServiceProvider';
+import type { LeagueMembership } from '@/lib/types/LeagueMembership';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
+
+export default function LeagueStandingsInteractive() {
+  const params = useParams();
+  const leagueId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+  const { leagueService } = useServices();
+
+  const [standings, setStandings] = useState<StandingEntryViewModel[]>([]);
+  const [drivers, setDrivers] = useState<DriverViewModel[]>([]);
+  const [memberships, setMemberships] = useState<LeagueMembership[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  const loadData = useCallback(async () => {
+    try {
+      const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId);
+      setStandings(vm.standings);
+      setDrivers(vm.drivers.map((d) => new DriverViewModel({ ...d, avatarUrl: (d as any).avatarUrl ?? null })));
+      setMemberships(vm.memberships);
+
+      // Check if current user is admin
+      const membership = vm.memberships.find(m => m.driverId === currentDriverId);
+      setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load standings');
+    } finally {
+      setLoading(false);
+    }
+  }, [leagueId, currentDriverId, leagueService]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleRemoveMember = async (driverId: string) => {
+    if (!confirm('Are you sure you want to remove this member?')) {
+      return;
+    }
+
+    try {
+      await leagueService.removeMember(leagueId, currentDriverId, driverId);
+      await loadData();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to remove member');
+    }
+  };
+
+  const handleUpdateRole = async (driverId: string, newRole: string) => {
+    try {
+      await leagueService.updateMemberRole(leagueId, currentDriverId, driverId, newRole);
+      await loadData();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update role');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">
+        Loading standings...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-warning-amber">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <LeagueStandingsTemplate
+      standings={standings}
+      drivers={drivers}
+      memberships={memberships}
+      leagueId={leagueId}
+      currentDriverId={currentDriverId}
+      isAdmin={isAdmin}
+      onRemoveMember={handleRemoveMember}
+      onUpdateRole={handleUpdateRole}
+    />
+  );
+}

apps/website/app/leagues/[id]/standings/LeagueStandingsStatic.tsx

@@ -0,0 +1,71 @@
+import { LeagueStandingsTemplate } from '@/templates/LeagueStandingsTemplate';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import type { LeagueMembership } from '@/lib/types/LeagueMembership';
+import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
+
+interface LeagueStandingsStaticProps {
+  leagueId: string;
+  currentDriverId?: string | null;
+}
+
+export default async function LeagueStandingsStatic({ leagueId, currentDriverId }: LeagueStandingsStaticProps) {
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const leagueService = serviceFactory.createLeagueService();
+  
+  let standings: StandingEntryViewModel[] = [];
+  let drivers: DriverViewModel[] = [];
+  let memberships: LeagueMembership[] = [];
+  let loading = false;
+  let error: string | null = null;
+  let isAdmin = false;
+
+  try {
+    loading = true;
+    const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId || '');
+    standings = vm.standings;
+    drivers = vm.drivers.map((d) => new DriverViewModel({ ...d, avatarUrl: (d as any).avatarUrl ?? null }));
+    memberships = vm.memberships;
+
+    // Check if current user is admin
+    const membership = vm.memberships.find(m => m.driverId === currentDriverId);
+    isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Failed to load standings';
+  } finally {
+    loading = false;
+  }
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">
+        Loading standings...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-warning-amber">
+        {error}
+      </div>
+    );
+  }
+
+  // Server components can't have event handlers, so we provide empty functions
+  // The Interactive wrapper will add the actual handlers
+  return (
+    <LeagueStandingsTemplate
+      standings={standings}
+      drivers={drivers}
+      memberships={memberships}
+      leagueId={leagueId}
+      currentDriverId={currentDriverId ?? null}
+      isAdmin={isAdmin}
+      onRemoveMember={() => {}}
+      onUpdateRole={() => {}}
+    />
+  );
+}

apps/website/app/leagues/[id]/standings/page.tsx

@@ -1,129 +1,3 @@
-'use client';
+import LeagueStandingsInteractive from './LeagueStandingsInteractive';
 
-import StandingsTable from '@/components/leagues/StandingsTable';
-import LeagueChampionshipStats from '@/components/leagues/LeagueChampionshipStats';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import type { LeagueMembership } from '@/lib/types/LeagueMembership';
-import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { LeagueStandingsViewModel } from '@/lib/view-models/LeagueStandingsViewModel';
-import { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
-import { useParams } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
-
-export default function LeagueStandingsPage() {
-  const params = useParams();
-  const leagueId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-  const { leagueService } = useServices();
-
-  const [standings, setStandings] = useState<StandingEntryViewModel[]>([]);
-  const [drivers, setDrivers] = useState<DriverViewModel[]>([]);
-  const [memberships, setMemberships] = useState<LeagueMembership[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isAdmin, setIsAdmin] = useState(false);
-
-  const loadData = useCallback(async () => {
-    try {
-      const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId);
-      setStandings(vm.standings);
-      setDrivers(vm.drivers.map((d) => new DriverViewModel({ ...d, avatarUrl: (d as any).avatarUrl ?? null })));
-      setMemberships(vm.memberships);
-
-      // Check if current user is admin
-      const membership = vm.memberships.find(m => m.driverId === currentDriverId);
-      setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load standings');
-    } finally {
-      setLoading(false);
-    }
-  }, [leagueId, currentDriverId, leagueService]);
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  const handleRemoveMember = async (driverId: string) => {
-    if (!confirm('Are you sure you want to remove this member?')) {
-      return;
-    }
-
-    try {
-      await leagueService.removeMember(leagueId, currentDriverId, driverId);
-      await loadData();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to remove member');
-    }
-  };
-
-  const handleUpdateRole = async (driverId: string, newRole: string) => {
-    try {
-      await leagueService.updateMemberRole(leagueId, currentDriverId, driverId, newRole);
-      await loadData();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update role');
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="text-center text-gray-400">
-        Loading standings...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="text-center text-warning-amber">
-        {error}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Championship Stats */}
-      <LeagueChampionshipStats standings={standings} drivers={drivers} />
-
-      <Card>
-        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
-        <StandingsTable
-          standings={standings.map((s) => ({
-            leagueId,
-            driverId: s.driverId,
-            position: s.position,
-            totalPoints: s.points,
-            racesFinished: s.races,
-            racesStarted: s.races,
-            avgFinish: null,
-            penaltyPoints: 0,
-            bonusPoints: 0,
-          }) satisfies {
-            leagueId: string;
-            driverId: string;
-            position: number;
-            totalPoints: number;
-            racesFinished: number;
-            racesStarted: number;
-            avgFinish: number | null;
-            penaltyPoints: number;
-            bonusPoints: number;
-            teamName?: string;
-          })}
-          drivers={drivers}
-          leagueId={leagueId}
-          memberships={memberships}
-          currentDriverId={currentDriverId}
-          isAdmin={isAdmin}
-          onRemoveMember={handleRemoveMember}
-          onUpdateRole={handleUpdateRole}
-        />
-      </Card>
-    </div>
-  );
-}
+export default LeagueStandingsInteractive;