website refactor

apps/website/app/teams/TeamsPageClient.tsx

@@ -1,43 +1,29 @@
 'use client';
 
-import type { TeamsPageDto } from '@/lib/page-queries/page-queries/TeamsPageQuery';
-import { TeamsPresenter } from '@/lib/presenters/TeamsPresenter';
-import type { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
+import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
 import { TeamsTemplate } from '@/templates/TeamsTemplate';
 import { useRouter } from 'next/navigation';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
-interface TeamsPageClientProps {
-  pageDto: TeamsPageDto;
+interface TeamsPageClientProps extends TeamsViewData {
+  searchQuery?: string;
+  showCreateForm?: boolean;
+  onSearchChange?: (query: string) => void;
+  onShowCreateForm?: () => void;
+  onHideCreateForm?: () => void;
+  onTeamClick?: (teamId: string) => void;
+  onCreateSuccess?: (teamId: string) => void;
+  onBrowseTeams?: () => void;
+  onSkillLevelClick?: (level: string) => void;
 }
 
-export function TeamsPageClient({ pageDto }: TeamsPageClientProps) {
+export function TeamsPageClient({ teams }: TeamsPageClientProps) {
   const router = useRouter();
   
-  // Use presenter to create ViewData
-  const viewData = TeamsPresenter.createViewData(pageDto);
-  
-  // UI state
+  // UI state only (no business logic)
   const [searchQuery, setSearchQuery] = useState('');
   const [showCreateForm, setShowCreateForm] = useState(false);
   
-  // Filter teams based on search query
-  const filteredTeams = useMemo(() => {
-    if (!searchQuery) return viewData.teams;
-    
-    const query = searchQuery.toLowerCase();
-    return viewData.teams.filter((team: TeamSummaryData) =>
-      team.teamName.toLowerCase().includes(query) ||
-      team.leagueName.toLowerCase().includes(query)
-    );
-  }, [viewData.teams, searchQuery]);
-  
-  // Update viewData with filtered teams
-  const templateViewData = {
-    ...viewData,
-    teams: filteredTeams,
-  };
-  
   // Event handlers
   const handleSearchChange = (query: string) => {
     setSearchQuery(query);
@@ -76,7 +62,7 @@ export function TeamsPageClient({ pageDto }: TeamsPageClientProps) {
   
   return (
     <TeamsTemplate
-      teams={templateViewData.teams}
+      teams={teams}
       searchQuery={searchQuery}
       showCreateForm={showCreateForm}
       onSearchChange={handleSearchChange}

apps/website/app/teams/[id]/TeamDetailPageClient.tsx

@@ -2,23 +2,19 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import type { TeamDetailPageDto } from '@/lib/page-queries/page-queries/TeamDetailPageQuery';
-import { TeamDetailPresenter } from '@/lib/view-models/TeamDetailPresenter';
+import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
 import { TeamDetailTemplate } from '@/templates/TeamDetailTemplate';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
 
 interface TeamDetailPageClientProps {
-  pageDto: TeamDetailPageDto;
+  viewData: TeamDetailViewData;
 }
 
-export function TeamDetailPageClient({ pageDto }: TeamDetailPageClientProps) {
+export function TeamDetailPageClient({ viewData }: TeamDetailPageClientProps) {
   const router = useRouter();
   
-  // Use presenter to create ViewData
-  const viewData = TeamDetailPresenter.createViewData(pageDto);
-  
-  // UI state
+  // UI state only (no business logic)
   const [activeTab, setActiveTab] = useState<Tab>('overview');
   const [loading] = useState(false);
   

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

@@ -1,5 +1,6 @@
 import { notFound } from 'next/navigation';
 import { TeamDetailPageQuery } from '@/lib/page-queries/page-queries/TeamDetailPageQuery';
+import { TeamDetailViewDataBuilder } from '@/lib/builders/view-data/TeamDetailViewDataBuilder';
 import { TeamDetailPageClient } from './TeamDetailPageClient';
 
 export default async function Page({ params }: { params: { id: string } }) {
@@ -7,7 +8,8 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   switch (result.status) {
     case 'ok':
-      return <TeamDetailPageClient pageDto={result.dto} />;
+      const viewData = TeamDetailViewDataBuilder.build(result.dto);
+      return <TeamDetailPageClient viewData={viewData} />;
     case 'notFound':
       notFound();
     case 'redirect':

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

@@ -11,7 +11,7 @@ type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
 export function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewModel[] | null }) {
   const router = useRouter();
   
-  // Client-side state for filtering and sorting
+  // Client-side UI state only (no business logic)
   const [searchQuery, setSearchQuery] = useState('');
   const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
   const [sortBy, setSortBy] = useState<SortBy>('rating');

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

@@ -1,11 +1,8 @@
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { TeamsApiClient } from '@/lib/api/teams/TeamsApiClient';
-import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
-import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
-import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import { TeamService } from '@/lib/services/teams/TeamService';
 import { Trophy } from 'lucide-react';
 import { redirect } from 'next/navigation';
-import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { routes } from '@/lib/routing/RouteConfig';
 import { TeamLeaderboardPageWrapper } from './TeamLeaderboardPageWrapper';
 
 // ============================================================================
@@ -14,34 +11,29 @@ import { TeamLeaderboardPageWrapper } from './TeamLeaderboardPageWrapper';
 
 export default async function TeamLeaderboardPage() {
   // Manual wiring: create dependencies
-  const baseUrl = getWebsiteApiBaseUrl();
-  const logger = new ConsoleLogger();
-  const errorReporter = new EnhancedErrorReporter(logger, {
-    showUserNotifications: true,
-    logToConsole: true,
-    reportToExternal: process.env.NODE_ENV === 'production',
-  });
+  const service = new TeamService();
 
-  // Create API client
-  const apiClient = new TeamsApiClient(baseUrl, errorReporter, logger);
+  // Fetch data through service
+  const result = await service.getAllTeams();
 
-  // Fetch data
-  const result = await apiClient.getAll();
+  // Handle result
+  let data = null;
+  let error = null;
+  
+  if (result.isOk()) {
+    data = result.unwrap();
+  } else {
+    const domainError = result.getError();
+    error = new Error(domainError.message);
+  }
 
-  // Transform DTO to ViewModel
-  const teamsData: TeamSummaryViewModel[] = result.teams.map(team => new TeamSummaryViewModel(team));
-
-  // Prepare data for template
-  const data: TeamSummaryViewModel[] | null = teamsData;
-
-  const hasData = (teamsData?.length ?? 0) > 0;
+  const hasData = (data?.length ?? 0) > 0;
 
   // Handle loading state (should be fast since we're using async/await)
   const isLoading = false;
-  const error = null;
-  const retry = async () => {
+  const retry = () => {
     // In server components, we can't retry without a reload
-    redirect('/teams/leaderboard');
+    redirect(routes.team.detail('leaderboard'));
   };
 
   return (

apps/website/app/teams/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from 'next/navigation';
 import { TeamsPageQuery } from '@/lib/page-queries/page-queries/TeamsPageQuery';
+import { TeamsViewDataBuilder } from '@/lib/builders/view-data/TeamsViewDataBuilder';
 import { TeamsPageClient } from './TeamsPageClient';
 
 export default async function Page() {
@@ -7,7 +8,8 @@ export default async function Page() {
 
   switch (result.status) {
     case 'ok':
-      return <TeamsPageClient pageDto={result.dto} />;
+      const viewData = TeamsViewDataBuilder.build(result.dto);
+      return <TeamsPageClient teams={viewData.teams} />;
     case 'notFound':
       notFound();
     case 'redirect':