website refactor

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

@@ -1,45 +1,40 @@
-'use client';
+import { notFound } from 'next/navigation';
+import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
+import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import LeagueHeader from '@/components/leagues/LeagueHeader';
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
-import { useLeagueDetail } from "@/lib/hooks/league/useLeagueDetail";
-import { useParams, usePathname, useRouter } from 'next/navigation';
-import React from 'react';
-
-export default function LeagueLayout({
+export default async function LeagueLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: { id: string };
 }) {
-  const params = useParams();
-  const pathname = usePathname();
-  const router = useRouter();
-  const leagueId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-
-  const { data: leagueDetail, isLoading: loading } = useLeagueDetail({ leagueId });
-
-  if (loading) {
+  const leagueId = params.id;
+  
+  // Execute PageQuery to get league data
+  const result = await LeagueDetailPageQuery.execute(leagueId);
+  
+  if (result.isErr()) {
+    const error = result.getError();
+    if (error === 'notFound' || error === 'redirect') {
+      notFound();
+    }
+    // Return error state
     return (
-      <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">Loading league...</div>
-        </div>
-      </div>
+      <LeagueDetailTemplate
+        leagueId={leagueId}
+        leagueName="Error"
+        leagueDescription="Failed to load league"
+        tabs={[]}
+      >
+        <div className="text-center text-gray-400">Failed to load league</div>
+      </LeagueDetailTemplate>
     );
   }
-
-  if (!leagueDetail) {
-    return (
-      <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">League not found</div>
-        </div>
-      </div>
-    );
-  }
-
+  
+  const data = result.unwrap();
+  const league = data.league;
+  
   // Define tab configuration
   const baseTabs = [
     { label: 'Overview', href: `/leagues/${leagueId}`, exact: true },
@@ -61,46 +56,13 @@ export default function LeagueLayout({
   const tabs = [...baseTabs, ...adminTabs];
 
   return (
-    <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">
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Leagues', href: '/leagues' },
-            { label: leagueDetail.name },
-          ]}
-        />
-
-        <LeagueHeader
-          leagueId={leagueDetail.id}
-          leagueName={leagueDetail.name}
-          description={leagueDetail.description}
-          ownerId={leagueDetail.ownerId}
-          ownerName={''}
-          mainSponsor={null}
-        />
-
-        {/* Tab Navigation */}
-        <div className="mb-6 border-b border-charcoal-outline">
-          <div className="flex gap-6 overflow-x-auto">
-            {tabs.map((tab) => (
-              <button
-                key={tab.href}
-                onClick={() => router.push(tab.href)}
-                className={`pb-3 px-1 font-medium whitespace-nowrap transition-colors ${
-                  (tab.exact ? pathname === tab.href : pathname.startsWith(tab.href))
-                    ? 'text-primary-blue border-b-2 border-primary-blue'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div>{children}</div>
-      </div>
-    </div>
+    <LeagueDetailTemplate
+      leagueId={leagueId}
+      leagueName={league.name}
+      leagueDescription={league.description}
+      tabs={tabs}
+    >
+      {children}
+    </LeagueDetailTemplate>
   );
-}
+}

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} />;
 }

apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import type { Mocked } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import type { LeagueAdminRosterJoinRequestViewModel } from '@/lib/view-models/LeagueAdminRosterJoinRequestViewModel';
 import type { LeagueAdminRosterMemberViewModel } from '@/lib/view-models/LeagueAdminRosterMemberViewModel';
@@ -26,61 +27,68 @@ vi.mock('next/navigation', () => ({
 let mockJoinRequests: any[] = [];
 let mockMembers: any[] = [];
 
-// Mock the new DI hooks
-vi.mock('@/hooks/league/useLeagueRosterAdmin', () => ({
-  useLeagueRosterJoinRequests: (leagueId: string) => ({
+// Mock the hooks directly
+vi.mock('@/lib/hooks/league/useLeagueRosterAdmin', () => ({
+  useLeagueJoinRequests: (leagueId: string) => ({
     data: [...mockJoinRequests],
     isLoading: false,
     isError: false,
     isSuccess: true,
     refetch: vi.fn(),
   }),
-  useLeagueRosterMembers: (leagueId: string) => ({
+  useLeagueRosterAdmin: (leagueId: string) => ({
     data: [...mockMembers],
     isLoading: false,
     isError: false,
     isSuccess: true,
     refetch: vi.fn(),
   }),
-  useApproveJoinRequest: () => ({
+  useApproveJoinRequest: (options?: any) => ({
     mutate: (params: any) => {
-      // Remove from join requests
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
     },
     mutateAsync: async (params: any) => {
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
       return { success: true };
     },
     isPending: false,
   }),
-  useRejectJoinRequest: () => ({
+  useRejectJoinRequest: (options?: any) => ({
     mutate: (params: any) => {
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
     },
     mutateAsync: async (params: any) => {
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
       return { success: true };
     },
     isPending: false,
   }),
-  useUpdateMemberRole: () => ({
+  useUpdateMemberRole: (options?: any) => ({
     mutate: (params: any) => {
       const member = mockMembers.find(m => m.driverId === params.driverId);
-      if (member) member.role = params.role;
+      if (member) member.role = params.newRole;
+      if (options?.onError) options.onError();
     },
     mutateAsync: async (params: any) => {
       const member = mockMembers.find(m => m.driverId === params.driverId);
-      if (member) member.role = params.role;
+      if (member) member.role = params.newRole;
+      if (options?.onError) options.onError();
       return { success: true };
     },
     isPending: false,
   }),
-  useRemoveMember: () => ({
+  useRemoveMember: (options?: any) => ({
     mutate: (params: any) => {
       mockMembers = mockMembers.filter(m => m.driverId !== params.driverId);
+      if (options?.onSuccess) options.onSuccess();
     },
     mutateAsync: async (params: any) => {
       mockMembers = mockMembers.filter(m => m.driverId !== params.driverId);
+      if (options?.onSuccess) options.onSuccess();
       return { success: true };
     },
     isPending: false,
@@ -91,9 +99,11 @@ function makeJoinRequest(overrides: Partial<LeagueAdminRosterJoinRequestViewMode
   return {
     id: 'jr-1',
     leagueId: 'league-1',
-    driverId: 'driver-1',
-    driverName: 'Driver One',
-    requestedAtIso: '2025-01-01T00:00:00.000Z',
+    driver: {
+      id: 'driver-1',
+      name: 'Driver One',
+    },
+    requestedAt: '2025-01-01T00:00:00.000Z',
     message: 'Please let me in',
     ...overrides,
   };
@@ -102,14 +112,19 @@ function makeJoinRequest(overrides: Partial<LeagueAdminRosterJoinRequestViewMode
 function makeMember(overrides: Partial<LeagueAdminRosterMemberViewModel> = {}): LeagueAdminRosterMemberViewModel {
   return {
     driverId: 'driver-10',
-    driverName: 'Member Ten',
+    driver: {
+      id: 'driver-10',
+      name: 'Member Ten',
+    },
     role: 'member',
-    joinedAtIso: '2025-01-01T00:00:00.000Z',
+    joinedAt: '2025-01-01T00:00:00.000Z',
     ...overrides,
   };
 }
 
 describe('RosterAdminPage', () => {
+  let queryClient: QueryClient;
+
   beforeEach(() => {
     // Reset mock data
     mockJoinRequests = [];
@@ -123,24 +138,44 @@ describe('RosterAdminPage', () => {
       updateMemberRole: vi.fn(),
       removeMember: vi.fn(),
     } as any;
+
+    // Create a new QueryClient for each test
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+        mutations: {
+          retry: false,
+        },
+      },
+    });
   });
 
+  const renderWithProviders = (component: React.ReactNode) => {
+    return render(
+      <QueryClientProvider client={queryClient}>
+        {component}
+      </QueryClientProvider>
+    );
+  };
+
   it('renders join requests + members from service ViewModels', async () => {
     const joinRequests: LeagueAdminRosterJoinRequestViewModel[] = [
-      makeJoinRequest({ id: 'jr-1', driverName: 'Driver One' }),
-      makeJoinRequest({ id: 'jr-2', driverName: 'Driver Two', driverId: 'driver-2' }),
+      makeJoinRequest({ id: 'jr-1', driver: { id: 'driver-1', name: 'Driver One' } }),
+      makeJoinRequest({ id: 'jr-2', driver: { id: 'driver-2', name: 'Driver Two' } }),
     ];
 
     const members: LeagueAdminRosterMemberViewModel[] = [
-      makeMember({ driverId: 'driver-10', driverName: 'Member Ten', role: 'member' }),
-      makeMember({ driverId: 'driver-11', driverName: 'Member Eleven', role: 'admin' }),
+      makeMember({ driverId: 'driver-10', driver: { id: 'driver-10', name: 'Member Ten' }, role: 'member' }),
+      makeMember({ driverId: 'driver-11', driver: { id: 'driver-11', name: 'Member Eleven' }, role: 'admin' }),
     ];
 
     // Set mock data for hooks
     mockJoinRequests = joinRequests;
     mockMembers = members;
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Roster Admin')).toBeInTheDocument();
 
@@ -152,10 +187,10 @@ describe('RosterAdminPage', () => {
   });
 
   it('approves a join request and removes it from the pending list', async () => {
-    mockJoinRequests = [makeJoinRequest({ id: 'jr-1', driverName: 'Driver One' })];
-    mockMembers = [makeMember({ driverId: 'driver-10', driverName: 'Member Ten' })];
+    mockJoinRequests = [makeJoinRequest({ id: 'jr-1', driver: { id: 'driver-1', name: 'Driver One' } })];
+    mockMembers = [makeMember({ driverId: 'driver-10', driver: { id: 'driver-10', name: 'Member Ten' } })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Driver One')).toBeInTheDocument();
 
@@ -167,10 +202,10 @@ describe('RosterAdminPage', () => {
   });
 
   it('rejects a join request and removes it from the pending list', async () => {
-    mockJoinRequests = [makeJoinRequest({ id: 'jr-2', driverName: 'Driver Two' })];
-    mockMembers = [makeMember({ driverId: 'driver-10', driverName: 'Member Ten' })];
+    mockJoinRequests = [makeJoinRequest({ id: 'jr-2', driver: { id: 'driver-2', name: 'Driver Two' } })];
+    mockMembers = [makeMember({ driverId: 'driver-10', driver: { id: 'driver-10', name: 'Member Ten' } })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Driver Two')).toBeInTheDocument();
 
@@ -183,9 +218,9 @@ describe('RosterAdminPage', () => {
 
   it('changes a member role via service and updates the displayed role', async () => {
     mockJoinRequests = [];
-    mockMembers = [makeMember({ driverId: 'driver-11', driverName: 'Member Eleven', role: 'member' })];
+    mockMembers = [makeMember({ driverId: 'driver-11', driver: { id: 'driver-11', name: 'Member Eleven' }, role: 'member' })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Member Eleven')).toBeInTheDocument();
 
@@ -201,9 +236,9 @@ describe('RosterAdminPage', () => {
 
   it('removes a member via service and removes them from the list', async () => {
     mockJoinRequests = [];
-    mockMembers = [makeMember({ driverId: 'driver-12', driverName: 'Member Twelve', role: 'member' })];
+    mockMembers = [makeMember({ driverId: 'driver-12', driver: { id: 'driver-12', name: 'Member Twelve' }, role: 'member' })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Member Twelve')).toBeInTheDocument();
 

apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import Card from '@/components/ui/Card';
 import type { MembershipRole } from '@/lib/types/MembershipRole';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
@@ -12,6 +11,7 @@ import {
   useUpdateMemberRole,
   useRemoveMember,
 } from "@/lib/hooks/league/useLeagueRosterAdmin";
+import { RosterAdminTemplate } from '@/templates/RosterAdminTemplate';
 
 const ROLE_OPTIONS: MembershipRole[] = ['owner', 'admin', 'steward', 'member'];
 
@@ -72,114 +72,16 @@ export function RosterAdminPage() {
   };
 
   return (
-    <div className="space-y-6">
-      <Card>
-        <div className="space-y-4">
-          <div>
-            <h1 className="text-2xl font-bold text-white">Roster Admin</h1>
-            <p className="text-sm text-gray-400">Manage join requests and member roles.</p>
-          </div>
-
-          <div className="border-t border-charcoal-outline pt-4 space-y-3">
-            <div className="flex items-center justify-between gap-3">
-              <h2 className="text-lg font-semibold text-white">Pending join requests</h2>
-              <p className="text-xs text-gray-500">{pendingCountLabel}</p>
-            </div>
-
-            {loading ? (
-              <div className="py-4 text-sm text-gray-400">Loading…</div>
-            ) : joinRequests.length ? (
-              <div className="space-y-2">
-                {joinRequests.map((req) => (
-                  <div
-                    key={req.id}
-                    className="flex items-center justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
-                  >
-                    <div className="min-w-0">
-                      <p className="text-white font-medium truncate">{(req.driver as any)?.name || 'Unknown'}</p>
-                      <p className="text-xs text-gray-400 truncate">{req.requestedAt}</p>
-                      {req.message ? <p className="text-xs text-gray-500 truncate">{req.message}</p> : null}
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        data-testid={`join-request-${req.id}-approve`}
-                        onClick={() => handleApprove(req.id)}
-                        className="px-3 py-1.5 rounded bg-primary-blue text-white"
-                      >
-                        Approve
-                      </button>
-                      <button
-                        type="button"
-                        data-testid={`join-request-${req.id}-reject`}
-                        onClick={() => handleReject(req.id)}
-                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
-                      >
-                        Reject
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="py-4 text-sm text-gray-500">No pending join requests.</div>
-            )}
-          </div>
-
-          <div className="border-t border-charcoal-outline pt-4 space-y-3">
-            <h2 className="text-lg font-semibold text-white">Members</h2>
-
-            {loading ? (
-              <div className="py-4 text-sm text-gray-400">Loading…</div>
-            ) : members.length ? (
-              <div className="space-y-2">
-                {members.map((member) => (
-                  <div
-                    key={member.driverId}
-                    className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
-                  >
-                    <div className="min-w-0">
-                      <p className="text-white font-medium truncate">{member.driver.name}</p>
-                      <p className="text-xs text-gray-400 truncate">{member.joinedAt}</p>
-                    </div>
-
-                    <div className="flex flex-col md:flex-row md:items-center gap-2">
-                      <label className="text-xs text-gray-400" htmlFor={`role-${member.driverId}`}>
-                        Role for {member.driver.name}
-                      </label>
-                      <select
-                        id={`role-${member.driverId}`}
-                        aria-label={`Role for ${member.driver.name}`}
-                        value={member.role}
-                        onChange={(e) => handleRoleChange(member.driverId, e.target.value as MembershipRole)}
-                        className="bg-iron-gray text-white px-3 py-2 rounded"
-                      >
-                        {ROLE_OPTIONS.map((role) => (
-                          <option key={role} value={role}>
-                            {role}
-                          </option>
-                        ))}
-                      </select>
-
-                      <button
-                        type="button"
-                        data-testid={`member-${member.driverId}-remove`}
-                        onClick={() => handleRemove(member.driverId)}
-                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
-                      >
-                        Remove
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="py-4 text-sm text-gray-500">No members found.</div>
-            )}
-          </div>
-        </div>
-      </Card>
-    </div>
+    <RosterAdminTemplate
+      joinRequests={joinRequests}
+      members={members}
+      loading={loading}
+      pendingCountLabel={pendingCountLabel}
+      onApprove={handleApprove}
+      onReject={handleReject}
+      onRoleChange={handleRoleChange}
+      onRemove={handleRemove}
+      roleOptions={ROLE_OPTIONS}
+    />
   );
 }

apps/website/app/leagues/page.tsx

@@ -1,8 +1,6 @@
 import { notFound } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
 import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
 import { LeaguesPageQuery } from '@/lib/page-queries/page-queries/LeaguesPageQuery';
-import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
 
 export default async function Page() {
   // Execute the PageQuery
@@ -21,19 +19,12 @@ export default async function Page() {
       case 'LEAGUES_FETCH_FAILED':
       case 'UNKNOWN_ERROR':
       default:
-        // Return error state that PageWrapper can handle
-        return (
-          <PageWrapper
-            data={undefined}
-            error={new Error('Failed to fetch leagues')}
-            Template={LeaguesTemplate}
-            errorConfig={{ variant: 'full-screen' }}
-          />
-        );
+        // Return error state - use LeaguesTemplate with empty data
+        return <LeaguesTemplate data={{ leagues: [] }} />;
     }
   }
   
   const viewData = result.unwrap();
   
-  return <PageWrapper data={viewData} Template={LeaguesTemplate} />;
+  return <LeaguesTemplate data={viewData} />;
 }