website refactor

apps/website/client-wrapper/TeamLeaderboardPageWrapper.tsx

@@ -4,11 +4,17 @@ import { useRouter } from 'next/navigation';
 import { TeamLeaderboardTemplate } from '@/templates/TeamLeaderboardTemplate';
 import { useState } from 'react';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
+import { ViewData } from '@/lib/contracts/view-data/ViewData';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
 
-export function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewModel[] | null }) {
+interface TeamLeaderboardViewData extends ViewData {
+  teams: TeamSummaryViewModel[];
+}
+
+export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<TeamLeaderboardViewData>) {
   const router = useRouter();
   
   // Client-side UI state only (no business logic)
@@ -16,7 +22,7 @@ export function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewMode
   const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
   const [sortBy, setSortBy] = useState<SortBy>('rating');
 
-  if (!data || data.length === 0) {
+  if (!viewData.teams || viewData.teams.length === 0) {
     return null;
   }
 
@@ -28,17 +34,17 @@ export function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewMode
     router.push('/teams');
   };
 
-  const viewData = {
-    teams: data,
+  const templateViewData = {
+    teams: viewData.teams,
     searchQuery,
     filterLevel,
     sortBy,
-    filteredAndSortedTeams: data,
+    filteredAndSortedTeams: viewData.teams,
   };
 
   return (
     <TeamLeaderboardTemplate
-      viewData={viewData}
+      viewData={templateViewData}
       onSearchChange={setSearchQuery}
       filterLevelChange={setFilterLevel}
       onSortChange={setSortBy}