90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { RacesIndexTemplate } from '@/templates/RacesIndexTemplate';
|
|
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<string>('all');
|
|
const [leagueFilter, setLeagueFilter] = useState<string>('all');
|
|
const [timeFilter, setTimeFilter] = useState<string>('upcoming');
|
|
const [showFilterModal, setShowFilterModal] = useState(false);
|
|
|
|
const filteredRaces = useMemo(() => {
|
|
const now = new Date();
|
|
return viewData.races.filter((race) => {
|
|
// Status filter: case-insensitive match
|
|
if (statusFilter !== 'all' && race.status.toLowerCase() !== statusFilter.toLowerCase()) return false;
|
|
|
|
// League filter
|
|
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) return false;
|
|
|
|
// Time filter: ensure we are checking the correct flags
|
|
// Note: we also check the actual date to be safe against stale API flags
|
|
const scheduledAt = new Date(race.scheduledAt);
|
|
const isActuallyUpcoming = scheduledAt > now && race.status.toLowerCase() === 'scheduled';
|
|
const isActuallyLive = race.status.toLowerCase() === 'running';
|
|
const isActuallyPast = scheduledAt < now || race.status.toLowerCase() === 'completed' || race.status.toLowerCase() === 'cancelled';
|
|
|
|
if (timeFilter === 'upcoming' && !isActuallyUpcoming) return false;
|
|
if (timeFilter === 'live' && !isActuallyLive) return false;
|
|
if (timeFilter === 'past' && !isActuallyPast) return false;
|
|
|
|
return true;
|
|
});
|
|
}, [viewData.races, statusFilter, leagueFilter, timeFilter]);
|
|
|
|
const nextUpRace = useMemo(() => {
|
|
const now = new Date();
|
|
// Find the first upcoming race in the filtered list
|
|
return filteredRaces.find(r => new Date(r.scheduledAt) > now && r.status.toLowerCase() === 'scheduled');
|
|
}, [filteredRaces]);
|
|
|
|
const racesByDate = useMemo(() => {
|
|
const grouped = new Map<string, typeof filteredRaces[0][]>();
|
|
|
|
// If we have a "Next Up" race and we are in upcoming view, we might want to exclude it from the list
|
|
// to avoid duplication, but usually it's better to keep the list complete.
|
|
// For this redesign, we keep the list complete for scanning.
|
|
|
|
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())
|
|
.sort(([a], [b]) => timeFilter === 'past' ? b.localeCompare(a) : a.localeCompare(b))
|
|
.map(([dateKey, dayRaces]) => ({
|
|
dateKey,
|
|
dateLabel: dayRaces[0]?.scheduledAtLabel || '',
|
|
races: dayRaces,
|
|
}));
|
|
}, [filteredRaces, timeFilter]);
|
|
|
|
return (
|
|
<RacesIndexTemplate
|
|
viewData={{
|
|
...viewData,
|
|
races: filteredRaces,
|
|
racesByDate,
|
|
nextUpRace,
|
|
}}
|
|
statusFilter={statusFilter}
|
|
setStatusFilter={setStatusFilter}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
timeFilter={timeFilter}
|
|
setTimeFilter={setTimeFilter}
|
|
showFilterModal={showFilterModal}
|
|
setShowFilterModal={setShowFilterModal}
|
|
onRaceClick={(id) => router.push(`/races/${id}`)}
|
|
/>
|
|
);
|
|
}
|