101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { RacesIndexTemplate } from '@/templates/RacesIndexTemplate';
|
|
import { useAllRacesPageData } from '@/hooks/race/useAllRacesPageData';
|
|
import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
|
|
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
|
|
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
|
|
import { Flag } from 'lucide-react';
|
|
|
|
export function RacesAllPageClient({ viewData: initialViewData }: 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);
|
|
|
|
// Use React Query hook
|
|
const { data: pageData, isLoading, error, refetch } = useAllRacesPageData(initialViewData);
|
|
|
|
const filteredRaces = useMemo(() => {
|
|
const now = new Date();
|
|
const races: RaceViewData[] = pageData?.races ?? [];
|
|
return races.filter((race) => {
|
|
if (statusFilter !== 'all' && race.status.toLowerCase() !== statusFilter.toLowerCase()) return false;
|
|
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) return false;
|
|
|
|
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;
|
|
});
|
|
}, [pageData?.races, statusFilter, leagueFilter, timeFilter]);
|
|
|
|
const nextUpRace = useMemo(() => {
|
|
const now = new Date();
|
|
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][]>();
|
|
|
|
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 (
|
|
<StatefulPageWrapper
|
|
data={pageData}
|
|
isLoading={isLoading}
|
|
error={error as Error | null}
|
|
retry={refetch}
|
|
Template={() => pageData ? (
|
|
<RacesIndexTemplate
|
|
viewData={{
|
|
...pageData,
|
|
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}`)}
|
|
/>
|
|
) : null}
|
|
loading={{ variant: 'skeleton', message: 'Loading races...' }}
|
|
errorConfig={{ variant: 'full-screen' }}
|
|
empty={{
|
|
icon: Flag,
|
|
title: 'No races found',
|
|
description: 'There are no races available at the moment',
|
|
}}
|
|
/>
|
|
);
|
|
}
|