website refactor

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

@@ -1,20 +1,13 @@
 import { notFound } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
-import { LeagueDetailPresenter } from '@/lib/presenters/LeagueDetailPresenter';
-import type { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDetailViewDataBuilder';
 
 interface Props {
   params: { id: string };
 }
 
 export default async function Page({ params }: Props) {
-  // Validate params
-  if (!params.id) {
-    notFound();
-  }
-
   // Execute the PageQuery
   const result = await LeagueDetailPageQuery.execute(params.id);
   
@@ -31,56 +24,29 @@ export default async function Page({ params }: Props) {
       case 'LEAGUE_FETCH_FAILED':
       case 'UNKNOWN_ERROR':
       default:
-        // Return error state that PageWrapper can handle
-        // For error state, we need a simple template that just renders an error
-        const ErrorTemplate: React.ComponentType<{ data: any }> = ({ data }) => (
-          <div>Error state</div>
-        );
+        // Return error state
         return (
-          <PageWrapper
-            data={undefined}
-            error={new Error('Failed to fetch league')}
-            Template={ErrorTemplate}
-            errorConfig={{ variant: 'full-screen' }}
-          />
+          <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-6xl mx-auto">
+              <div className="text-center text-gray-400">Failed to load league details</div>
+            </div>
+          </div>
         );
     }
   }
   
   const data = result.unwrap();
   
-  // Convert the API DTO to ViewModel using the existing presenter
-  // This maintains compatibility with the existing template
-  const viewModel = data.apiDto as unknown as LeagueDetailPageViewModel;
+  // Build ViewData using the builder
+  // Note: This would need additional data (owner, scoring config, etc.) in real implementation
+  const viewData = LeagueDetailViewDataBuilder.build({
+    league: data.league,
+    owner: null,
+    scoringConfig: null,
+    memberships: { members: [] },
+    races: [],
+    sponsors: [],
+  });
   
-  // Create a wrapper component that passes ViewData to the template
-  const TemplateWrapper: React.ComponentType<{ data: typeof data }> = ({ data }) => {
-    // Convert ViewModel to ViewData using Presenter
-    const viewData = LeagueDetailPresenter.createViewData(viewModel, params.id, false);
-    
-    return (
-      <LeagueDetailTemplate
-        viewData={viewData}
-        leagueId={params.id}
-        isSponsor={false}
-        membership={null}
-        onMembershipChange={() => {}}
-        onEndRaceModalOpen={() => {}}
-        onLiveRaceClick={() => {}}
-      />
-    );
-  };
-
-  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.',
-      }}
-    />
-  );
+  return <LeagueDetailTemplate viewData={viewData} />;
 }