78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
|
|
import { ViewData } from '@/lib/contracts/view-data/ViewData';
|
|
import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
|
import { TeamLeaderboardTemplate } from '@/templates/TeamLeaderboardTemplate';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useMemo, useState } from 'react';
|
|
import type { TeamListItemDTO } from '@/lib/types/generated/TeamListItemDTO';
|
|
|
|
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
|
type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
|
|
|
|
export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<{ teams: TeamListItemDTO[] }>) {
|
|
const router = useRouter();
|
|
|
|
// 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');
|
|
|
|
// Instantiate ViewModels on the client to wrap plain DTOs with logic
|
|
const teamViewModels = useMemo(() =>
|
|
(viewData.teams || []).map(dto => new TeamSummaryViewModel(dto)),
|
|
[viewData.teams]
|
|
);
|
|
|
|
if (teamViewModels.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const handleTeamClick = (teamId: string) => {
|
|
router.push(`/teams/${teamId}`);
|
|
};
|
|
|
|
const handleBackToTeams = () => {
|
|
router.push('/teams');
|
|
};
|
|
|
|
// Apply filtering and sorting using ViewModel logic
|
|
const filteredAndSortedTeams = teamViewModels
|
|
.filter((team) => {
|
|
const matchesSearch = team.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchesLevel = filterLevel === 'all' || team.performanceLevel === filterLevel;
|
|
return matchesSearch && matchesLevel;
|
|
})
|
|
.sort((a, b) => {
|
|
if (sortBy === 'rating') return (b.rating || 0) - (a.rating || 0);
|
|
if (sortBy === 'wins') return b.totalWins - a.totalWins;
|
|
if (sortBy === 'winRate') {
|
|
const rateA = a.totalRaces > 0 ? a.totalWins / a.totalRaces : 0;
|
|
const rateB = b.totalRaces > 0 ? b.totalWins / b.totalRaces : 0;
|
|
return rateB - rateA;
|
|
}
|
|
if (sortBy === 'races') return b.totalRaces - a.totalRaces;
|
|
return 0;
|
|
});
|
|
|
|
const templateViewData = {
|
|
teams: teamViewModels,
|
|
searchQuery,
|
|
filterLevel,
|
|
sortBy,
|
|
filteredAndSortedTeams,
|
|
};
|
|
|
|
return (
|
|
<TeamLeaderboardTemplate
|
|
viewData={templateViewData}
|
|
onSearchChange={setSearchQuery}
|
|
filterLevelChange={setFilterLevel}
|
|
onSortChange={setSortBy}
|
|
onTeamClick={handleTeamClick}
|
|
onBackToTeams={handleBackToTeams}
|
|
/>
|
|
);
|
|
}
|