page wrapper

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

@@ -1,3 +1,93 @@
-import LeagueDetailInteractive from './LeagueDetailInteractive';
+import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
+import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
+import { LeagueService } from '@/lib/services/leagues/LeagueService';
+import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient';
+import { DriversApiClient } from '@/lib/api/drivers/DriversApiClient';
+import { SponsorsApiClient } from '@/lib/api/sponsors/SponsorsApiClient';
+import { RacesApiClient } from '@/lib/api/races/RacesApiClient';
+import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
+import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import { notFound } from 'next/navigation';
+import type { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
 
-export default LeagueDetailInteractive;
+interface Props {
+  params: { id: string };
+}
+
+export default async function Page({ params }: Props) {
+  // Validate params
+  if (!params.id) {
+    notFound();
+  }
+
+  // Fetch data using PageDataFetcher.fetchManual for multiple dependencies
+  const data = await PageDataFetcher.fetchManual(async () => {
+    // Create dependencies
+    const baseUrl = getWebsiteApiBaseUrl();
+    const logger = new ConsoleLogger();
+    const errorReporter = new EnhancedErrorReporter(logger, {
+      showUserNotifications: true,
+      logToConsole: true,
+      reportToExternal: process.env.NODE_ENV === 'production',
+    });
+
+    // Create API clients
+    const leaguesApiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
+    const driversApiClient = new DriversApiClient(baseUrl, errorReporter, logger);
+    const sponsorsApiClient = new SponsorsApiClient(baseUrl, errorReporter, logger);
+    const racesApiClient = new RacesApiClient(baseUrl, errorReporter, logger);
+
+    // Create service
+    const service = new LeagueService(
+      leaguesApiClient,
+      driversApiClient,
+      sponsorsApiClient,
+      racesApiClient
+    );
+
+    // Fetch data
+    const result = await service.getLeagueDetailPageData(params.id);
+    if (!result) {
+      throw new Error('League not found');
+    }
+    return result;
+  });
+
+  if (!data) {
+    notFound();
+  }
+
+  // Create a wrapper component that passes data to the template
+  const TemplateWrapper = ({ data }: { data: LeagueDetailPageViewModel }) => {
+    // The LeagueDetailTemplate expects multiple props beyond just data
+    // We need to provide the additional props it requires
+    return (
+      <LeagueDetailTemplate
+        viewModel={data}
+        leagueId={data.id}
+        isSponsor={false}
+        membership={null}
+        currentDriverId={null}
+        onMembershipChange={() => {}}
+        onEndRaceModalOpen={() => {}}
+        onLiveRaceClick={() => {}}
+        onBackToLeagues={() => {}}
+      />
+    );
+  };
+
+  return (
+    <PageWrapper
+      data={data}
+      Template={TemplateWrapper}
+      loading={{ variant: 'skeleton', message: 'Loading league details...' }}
+      errorConfig={{ variant: 'full-screen' }}
+      empty={{
+        title: 'League not found',
+        description: 'The league you are looking for does not exist or has been removed.',
+      }}
+    />
+  );
+}