website refactor

apps/website/lib/builders/view-models/LeagueSummaryViewModelBuilder.ts

@@ -0,0 +1,26 @@
+import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+import { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
+
+export class LeagueSummaryViewModelBuilder {
+  static build(league: LeaguesViewData['leagues'][number]): LeagueSummaryViewModel {
+    return {
+      id: league.id,
+      name: league.name,
+      description: league.description ?? '',
+      logoUrl: league.logoUrl,
+      ownerId: league.ownerId,
+      createdAt: league.createdAt,
+      maxDrivers: league.maxDrivers,
+      usedDriverSlots: league.usedDriverSlots,
+      maxTeams: league.maxTeams ?? 0,
+      usedTeamSlots: league.usedTeamSlots ?? 0,
+      structureSummary: league.structureSummary,
+      timingSummary: league.timingSummary,
+      category: league.category ?? undefined,
+      scoring: league.scoring ? {
+        ...league.scoring,
+        primaryChampionshipType: league.scoring.primaryChampionshipType as 'driver' | 'team' | 'nations' | 'trophy',
+      } : undefined,
+    };
+  }
+}

apps/website/lib/display-objects/DateDisplay.ts

@@ -0,0 +1,47 @@
+/**
+ * DateDisplay
+ * 
+ * Deterministic date formatting for display.
+ * Avoids Intl and toLocaleString to prevent SSR/hydration mismatches.
+ */
+
+export class DateDisplay {
+  private static readonly MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  private static readonly FULL_MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  private static readonly DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  private static readonly FULL_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+  /**
+   * Formats a date as "MMM D, YYYY" (e.g., "Jan 1, 2024")
+   */
+  static formatShort(date: Date | string): string {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return `${this.MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+  }
+
+  /**
+   * Formats a date as "YYYY-MM-DD"
+   */
+  static formatIso(date: Date | string): string {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    const month = (d.getMonth() + 1).toString().padStart(2, '0');
+    const day = d.getDate().toString().padStart(2, '0');
+    return `${d.getFullYear()}-${month}-${day}`;
+  }
+
+  /**
+   * Formats a date as "Weekday, Month Day, Year"
+   */
+  static formatFull(date: Date | string): string {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return `${this.FULL_DAYS[d.getDay()]}, ${this.FULL_MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+  }
+
+  /**
+   * Formats a date as "MMM YYYY" (e.g., "Jan 2024")
+   */
+  static formatMonthYear(date: Date | string): string {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return `${this.MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+  }
+}

apps/website/lib/display-objects/NumberDisplay.ts

@@ -0,0 +1,18 @@
+/**
+ * NumberDisplay
+ * 
+ * Deterministic number formatting for display.
+ * Avoids Intl and toLocaleString to prevent SSR/hydration mismatches.
+ */
+
+export class NumberDisplay {
+  /**
+   * Formats a number with thousands separators (commas).
+   * Example: 1234567 -> "1,234,567"
+   */
+  static format(value: number): string {
+    const parts = value.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+  }
+}

apps/website/lib/page-queries/LeagueDetailPageQuery.ts

@@ -1,6 +1,6 @@
 import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
 import { Result } from '@/lib/contracts/Result';
-import { LeagueService } from '@/lib/services/leagues/LeagueService';
+import { LeagueService, type LeagueDetailData } from '@/lib/services/leagues/LeagueService';
 import { type PresentationError, mapToPresentationError } from '@/lib/contracts/page-queries/PresentationError';
 
 /**
@@ -8,8 +8,8 @@ import { type PresentationError, mapToPresentationError } from '@/lib/contracts/
  * Returns the raw API DTO for the league detail page
  * No DI container usage - constructs dependencies explicitly
  */
-export class LeagueDetailPageQuery implements PageQuery<unknown, string, PresentationError> {
-  async execute(leagueId: string): Promise<Result<unknown, PresentationError>> {
+export class LeagueDetailPageQuery implements PageQuery<LeagueDetailData, string, PresentationError> {
+  async execute(leagueId: string): Promise<Result<LeagueDetailData, PresentationError>> {
     const service = new LeagueService();
     const result = await service.getLeagueDetailData(leagueId);
 
@@ -21,7 +21,7 @@ export class LeagueDetailPageQuery implements PageQuery<unknown, string, Present
   }
 
   // Static method to avoid object construction in server code
-  static async execute(leagueId: string): Promise<Result<unknown, PresentationError>> {
+  static async execute(leagueId: string): Promise<Result<LeagueDetailData, PresentationError>> {
     const query = new LeagueDetailPageQuery();
     return query.execute(leagueId);
   }

apps/website/lib/page/usePageData.ts

@@ -105,6 +105,9 @@ export function usePageDataMultiple<T extends Record<string, unknown>>(
  * Mutation hook wrapper - STANDARDIZED PATTERN
  * Use for: All mutation operations
  *
+ * @deprecated Use Next.js Server Actions instead for all write operations.
+ * See docs/architecture/website/FORM_SUBMISSION.md
+ *
  * @example
  * const mutation = usePageMutation(
  *   (variables) => service.mutateData(variables),