95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import type { DashboardViewData } from './DashboardViewData';
|
|
import type { DashboardOverviewViewModelData } from '@/lib/view-models/DashboardOverviewViewModelData';
|
|
import { DashboardOverviewViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
|
|
import { DashboardTemplate } from '@/templates/DashboardTemplate';
|
|
|
|
interface DashboardPageClientProps {
|
|
initialViewData: DashboardViewData;
|
|
dto: DashboardOverviewViewModelData;
|
|
}
|
|
|
|
/**
|
|
* Dashboard Page Client Component
|
|
*
|
|
* Two-phase render:
|
|
* 1. Initial SSR: Uses ViewData built directly from DTO (no ViewModel)
|
|
* 2. Post-hydration: Instantiates ViewModel and re-renders with enhanced data
|
|
*/
|
|
export function DashboardPageClient({ initialViewData, dto }: DashboardPageClientProps) {
|
|
const [viewData, setViewData] = useState<DashboardViewData>(initialViewData);
|
|
|
|
useEffect(() => {
|
|
// Phase 2: After hydration, instantiate ViewModel and enhance data
|
|
const viewModel = new DashboardOverviewViewModel(dto);
|
|
|
|
const enhancedViewData: DashboardViewData = {
|
|
currentDriver: {
|
|
name: viewModel.currentDriverName,
|
|
avatarUrl: viewModel.currentDriverAvatarUrl,
|
|
country: viewModel.currentDriverCountry,
|
|
rating: viewModel.currentDriverRating,
|
|
rank: viewModel.currentDriverRank,
|
|
totalRaces: viewModel.currentDriverTotalRaces,
|
|
wins: viewModel.currentDriverWins,
|
|
podiums: viewModel.currentDriverPodiums,
|
|
consistency: viewModel.currentDriverConsistency,
|
|
},
|
|
nextRace: viewModel.nextRace ? {
|
|
id: viewModel.nextRace.id,
|
|
track: viewModel.nextRace.track,
|
|
car: viewModel.nextRace.car,
|
|
scheduledAt: viewModel.nextRace.scheduledAt,
|
|
formattedDate: viewModel.nextRace.formattedDate,
|
|
formattedTime: viewModel.nextRace.formattedTime,
|
|
timeUntil: viewModel.nextRace.timeUntil,
|
|
isMyLeague: viewModel.nextRace.isMyLeague,
|
|
} : null,
|
|
upcomingRaces: viewModel.upcomingRaces.map((race) => ({
|
|
id: race.id,
|
|
track: race.track,
|
|
car: race.car,
|
|
scheduledAt: race.scheduledAt,
|
|
formattedDate: race.formattedDate,
|
|
formattedTime: race.formattedTime,
|
|
timeUntil: race.timeUntil,
|
|
isMyLeague: race.isMyLeague,
|
|
})),
|
|
leagueStandings: viewModel.leagueStandings.map((standing) => ({
|
|
leagueId: standing.leagueId,
|
|
leagueName: standing.leagueName,
|
|
position: standing.position,
|
|
points: standing.points,
|
|
totalDrivers: standing.totalDrivers,
|
|
})),
|
|
feedItems: viewModel.feedItems.map((item) => ({
|
|
id: item.id,
|
|
type: item.type,
|
|
headline: item.headline,
|
|
body: item.body,
|
|
timestamp: item.timestamp,
|
|
formattedTime: item.formattedTime,
|
|
ctaHref: item.ctaHref,
|
|
ctaLabel: item.ctaLabel,
|
|
})),
|
|
friends: viewModel.friends.map((friend) => ({
|
|
id: friend.id,
|
|
name: friend.name,
|
|
avatarUrl: friend.avatarUrl,
|
|
country: friend.country,
|
|
})),
|
|
activeLeaguesCount: viewModel.activeLeaguesCount,
|
|
friendCount: viewModel.friendCount,
|
|
hasUpcomingRaces: viewModel.hasUpcomingRaces,
|
|
hasLeagueStandings: viewModel.hasLeagueStandings,
|
|
hasFeedItems: viewModel.hasFeedItems,
|
|
hasFriends: viewModel.hasFriends,
|
|
};
|
|
|
|
setViewData(enhancedViewData);
|
|
}, [dto]);
|
|
|
|
return <DashboardTemplate data={viewData} />;
|
|
} |