65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { RacesTemplate, type TimeFilter, type RaceStatusFilter } from '@/templates/RacesTemplate';
|
|
import type { RacesViewData } from '@/lib/view-data/RacesViewData';
|
|
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
|
|
|
|
export function RacesPageClient({ viewData }: ClientWrapperProps<RacesViewData>) {
|
|
const router = useRouter();
|
|
const [statusFilter, setStatusFilter] = useState<RaceStatusFilter>('all');
|
|
const [leagueFilter, setLeagueFilter] = useState<string>('all');
|
|
const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
|
|
const [showFilterModal, setShowFilterModal] = useState(false);
|
|
|
|
const filteredRaces = useMemo(() => {
|
|
return viewData.races.filter((race) => {
|
|
if (statusFilter !== 'all' && race.status !== statusFilter) return false;
|
|
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) return false;
|
|
if (timeFilter === 'upcoming' && !race.isUpcoming) return false;
|
|
if (timeFilter === 'live' && !race.isLive) return false;
|
|
if (timeFilter === 'past' && !race.isPast) return false;
|
|
return true;
|
|
});
|
|
}, [viewData.races, statusFilter, leagueFilter, timeFilter]);
|
|
|
|
const racesByDate = useMemo(() => {
|
|
const grouped = new Map<string, typeof filteredRaces[0][]>();
|
|
filteredRaces.forEach((race) => {
|
|
const dateKey = race.scheduledAt.split('T')[0]!;
|
|
if (!grouped.has(dateKey)) {
|
|
grouped.set(dateKey, []);
|
|
}
|
|
grouped.get(dateKey)!.push(race);
|
|
});
|
|
return Array.from(grouped.entries()).map(([dateKey, dayRaces]) => ({
|
|
dateKey,
|
|
dateLabel: dayRaces[0]?.scheduledAtLabel || '',
|
|
races: dayRaces,
|
|
}));
|
|
}, [filteredRaces]);
|
|
|
|
return (
|
|
<RacesTemplate
|
|
viewData={{
|
|
...viewData,
|
|
races: filteredRaces,
|
|
racesByDate,
|
|
}}
|
|
statusFilter={statusFilter}
|
|
setStatusFilter={setStatusFilter}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
timeFilter={timeFilter}
|
|
setTimeFilter={setTimeFilter}
|
|
showFilterModal={showFilterModal}
|
|
setShowFilterModal={setShowFilterModal}
|
|
onRaceClick={(id) => router.push(`/races/${id}`)}
|
|
onLeagueClick={(id) => router.push(`/leagues/${id}`)}
|
|
onWithdraw={(id) => console.log('Withdraw', id)}
|
|
onCancel={(id) => console.log('Cancel', id)}
|
|
/>
|
|
);
|
|
}
|