page wrapper

apps/website/app/teams/leaderboard/TeamLeaderboardInteractive.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import TeamLeaderboardTemplate from '@/templates/TeamLeaderboardTemplate';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
-
-interface TeamLeaderboardInteractiveProps {
-  teams: TeamSummaryViewModel[];
-}
-
-export default function TeamLeaderboardInteractive({ teams }: TeamLeaderboardInteractiveProps) {
-  const router = useRouter();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
-  const [sortBy, setSortBy] = useState<SortBy>('rating');
-
-  const handleTeamClick = (teamId: string) => {
-    if (teamId.startsWith('demo-team-')) {
-      return;
-    }
-    router.push(`/teams/${teamId}`);
-  };
-
-  const handleBackToTeams = () => {
-    router.push('/teams');
-  };
-
-  return (
-    <TeamLeaderboardTemplate
-      teams={teams}
-      searchQuery={searchQuery}
-      filterLevel={filterLevel}
-      sortBy={sortBy}
-      onSearchChange={setSearchQuery}
-      onFilterLevelChange={setFilterLevel}
-      onSortChange={setSortBy}
-      onTeamClick={handleTeamClick}
-      onBackToTeams={handleBackToTeams}
-    />
-  );
-}

apps/website/app/teams/leaderboard/TeamLeaderboardStatic.tsx

@@ -1,27 +0,0 @@
-import { ServiceFactory } from '@/lib/services/ServiceFactory';
-import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
-import TeamLeaderboardInteractive from './TeamLeaderboardInteractive';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-
-// ============================================================================
-// SERVER COMPONENT - Fetches data and passes to Interactive wrapper
-// ============================================================================
-
-export default async function TeamLeaderboardStatic() {
-  // Create services for server-side data fetching
-  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
-  const teamService = serviceFactory.createTeamService();
-
-  // Fetch data server-side
-  let teams: TeamSummaryViewModel[] = [];
-
-  try {
-    teams = await teamService.getAllTeams();
-  } catch (error) {
-    console.error('Failed to load team leaderboard:', error);
-    teams = [];
-  }
-
-  // Pass data to Interactive wrapper which handles client-side interactions
-  return <TeamLeaderboardInteractive teams={teams} />;
-}

apps/website/app/teams/leaderboard/page.tsx

@@ -1,9 +1,97 @@
-import TeamLeaderboardStatic from './TeamLeaderboardStatic';
+import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import TeamLeaderboardTemplate from '@/templates/TeamLeaderboardTemplate';
+import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
+import { TEAM_SERVICE_TOKEN } from '@/lib/di/tokens';
+import { TeamService } from '@/lib/services/teams/TeamService';
+import { Trophy } from 'lucide-react';
+import { redirect , useRouter } from 'next/navigation';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { useState } from 'react';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
+
+// ============================================================================
+// WRAPPER COMPONENT (Client-side state management)
+// ============================================================================
+
+function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewModel[] | null }) {
+  const router = useRouter();
+  
+  // Client-side state for filtering and sorting
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('rating');
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  const handleTeamClick = (teamId: string) => {
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleBackToTeams = () => {
+    router.push('/teams');
+  };
+
+  return (
+    <TeamLeaderboardTemplate
+      teams={data}
+      searchQuery={searchQuery}
+      filterLevel={filterLevel}
+      sortBy={sortBy}
+      onSearchChange={setSearchQuery}
+      onFilterLevelChange={setFilterLevel}
+      onSortChange={setSortBy}
+      onTeamClick={handleTeamClick}
+      onBackToTeams={handleBackToTeams}
+    />
+  );
+}
 
 // ============================================================================
 // MAIN PAGE COMPONENT
 // ============================================================================
 
-export default function TeamLeaderboardPage() {
-  return <TeamLeaderboardStatic />;
+export default async function TeamLeaderboardPage() {
+  // Fetch data using PageDataFetcher
+  const teamsData = await PageDataFetcher.fetch<TeamService, 'getAllTeams'>(
+    TEAM_SERVICE_TOKEN,
+    'getAllTeams'
+  );
+
+  // Prepare data for template
+  const data: TeamSummaryViewModel[] | null = teamsData as TeamSummaryViewModel[] | null;
+
+  const hasData = (teamsData as any)?.length > 0;
+
+  // Handle loading state (should be fast since we're using async/await)
+  const isLoading = false;
+  const error = null;
+  const retry = async () => {
+    // In server components, we can't retry without a reload
+    redirect('/teams/leaderboard');
+  };
+
+  return (
+    <PageWrapper
+      data={hasData ? data : null}
+      isLoading={isLoading}
+      error={error}
+      retry={retry}
+      Template={TeamLeaderboardPageWrapper}
+      loading={{ variant: 'full-screen', message: 'Loading team leaderboard...' }}
+      errorConfig={{ variant: 'full-screen' }}
+      empty={{
+        icon: Trophy,
+        title: 'No teams found',
+        description: 'There are no teams in the system yet.',
+      }}
+    />
+  );
 }