256 lines
11 KiB
TypeScript
256 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useRegisterForRace } from "@/hooks/race/useRegisterForRace";
|
|
import { useWithdrawFromRace } from "@/hooks/race/useWithdrawFromRace";
|
|
import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
|
|
import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
|
|
import { useState } from 'react';
|
|
|
|
// Shared state components
|
|
import { StateContainer } from '@/components/shared/state/StateContainer';
|
|
import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Calendar } from 'lucide-react';
|
|
|
|
interface LeagueScheduleProps {
|
|
leagueId: string;
|
|
onRaceClick?: (raceId: string) => void;
|
|
}
|
|
|
|
export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
|
|
const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');
|
|
|
|
const currentDriverId = useEffectiveDriverId();
|
|
|
|
const { data: schedule, isLoading, error, retry } = useLeagueSchedule(leagueId);
|
|
|
|
const registerMutation = useRegisterForRace();
|
|
const withdrawMutation = useWithdrawFromRace();
|
|
|
|
const handleRegister = async (race: LeagueScheduleRaceViewModel, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
const confirmed = window.confirm(`Register for ${race.track ?? race.name}?`);
|
|
|
|
if (!confirmed) return;
|
|
if (!currentDriverId) return;
|
|
|
|
try {
|
|
await registerMutation.mutateAsync({ raceId: race.id, leagueId, driverId: currentDriverId });
|
|
} catch (err) {
|
|
alert(err instanceof Error ? err.message : 'Failed to register');
|
|
}
|
|
};
|
|
|
|
const handleWithdraw = async (race: LeagueScheduleRaceViewModel, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
const confirmed = window.confirm('Withdraw from this race?');
|
|
|
|
if (!confirmed) return;
|
|
if (!currentDriverId) return;
|
|
|
|
try {
|
|
await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
|
|
} catch (err) {
|
|
alert(err instanceof Error ? err.message : 'Failed to withdraw');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<StateContainer
|
|
data={schedule}
|
|
isLoading={isLoading}
|
|
error={error}
|
|
retry={retry}
|
|
config={{
|
|
loading: { variant: 'skeleton', message: 'Loading schedule...' },
|
|
error: { variant: 'inline' },
|
|
empty: {
|
|
icon: Calendar,
|
|
title: 'No races scheduled',
|
|
description: 'This league has no races yet',
|
|
}
|
|
}}
|
|
>
|
|
{(scheduleData) => {
|
|
const races = scheduleData?.races ?? [];
|
|
const upcomingRaces = races.filter((race) => race.isUpcoming);
|
|
const pastRaces = races.filter((race) => race.isPast);
|
|
|
|
const getDisplayRaces = () => {
|
|
switch (filter) {
|
|
case 'upcoming':
|
|
return upcomingRaces;
|
|
case 'past':
|
|
// eslint-disable-next-line gridpilot-rules/component-no-data-manipulation
|
|
return [...pastRaces].reverse();
|
|
case 'all':
|
|
// eslint-disable-next-line gridpilot-rules/component-no-data-manipulation
|
|
return [...upcomingRaces, ...[...pastRaces].reverse()];
|
|
default:
|
|
return races;
|
|
}
|
|
};
|
|
|
|
const displayRaces = getDisplayRaces();
|
|
|
|
return (
|
|
<Stack gap={4}>
|
|
{/* Filter Controls */}
|
|
<Stack display="flex" alignItems="center" justifyContent="between">
|
|
<Text size="sm" color="text-gray-400">
|
|
{displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
|
|
</Text>
|
|
<Stack display="flex" gap={2}>
|
|
<Button
|
|
variant={filter === 'upcoming' ? 'primary' : 'secondary'}
|
|
size="sm"
|
|
onClick={() => setFilter('upcoming')}
|
|
>
|
|
Upcoming ({upcomingRaces.length})
|
|
</Button>
|
|
<Button
|
|
variant={filter === 'past' ? 'primary' : 'secondary'}
|
|
size="sm"
|
|
onClick={() => setFilter('past')}
|
|
>
|
|
Past ({pastRaces.length})
|
|
</Button>
|
|
<Button
|
|
variant={filter === 'all' ? 'primary' : 'secondary'}
|
|
size="sm"
|
|
onClick={() => setFilter('all')}
|
|
>
|
|
All ({races.length})
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Race List */}
|
|
{displayRaces.length === 0 ? (
|
|
<Stack textAlign="center" py={8}>
|
|
<Text color="text-gray-400" block mb={2}>No {filter} races</Text>
|
|
{filter === 'upcoming' && (
|
|
<Text size="sm" color="text-gray-500" block>Schedule your first race to get started</Text>
|
|
)}
|
|
</Stack>
|
|
) : (
|
|
<Stack gap={3}>
|
|
{displayRaces.map((race) => {
|
|
const isPast = race.isPast;
|
|
const isUpcoming = race.isUpcoming;
|
|
const isRegistered = Boolean(race.isRegistered);
|
|
const trackLabel = race.track ?? race.name;
|
|
const carLabel = race.car ?? '—';
|
|
const sessionTypeLabel = (race.sessionType ?? 'race').toLowerCase();
|
|
const isProcessing =
|
|
registerMutation.isPending || withdrawMutation.isPending;
|
|
|
|
return (
|
|
<Stack
|
|
key={race.id}
|
|
p={4}
|
|
rounded="lg"
|
|
border
|
|
transition
|
|
cursor="pointer"
|
|
hoverScale
|
|
bg={isPast ? 'bg-iron-gray/50' : 'bg-deep-graphite'}
|
|
borderColor={isPast ? 'border-charcoal-outline/50' : 'border-charcoal-outline'}
|
|
hoverBorderColor={!isPast ? 'border-primary-blue' : undefined}
|
|
opacity={isPast ? 0.75 : 1}
|
|
onClick={() => onRaceClick?.(race.id)}
|
|
>
|
|
<Stack display="flex" alignItems="center" justifyContent="between" gap={4}>
|
|
<Stack flexGrow={1}>
|
|
<Stack display="flex" alignItems="center" gap={2} mb={1} flexWrap="wrap">
|
|
<Heading level={3} fontSize="base" weight="medium" color="text-white">{trackLabel}</Heading>
|
|
{isUpcoming && !isRegistered && (
|
|
<Stack as="span" px={2} py={0.5} bg="bg-primary-blue/10" border borderColor="border-primary-blue/30" rounded="sm">
|
|
<Text size="xs" weight="medium" color="text-primary-blue">Upcoming</Text>
|
|
</Stack>
|
|
)}
|
|
{isUpcoming && isRegistered && (
|
|
<Stack as="span" px={2} py={0.5} bg="bg-green-500/10" border borderColor="border-green-500/30" rounded="sm">
|
|
<Text size="xs" weight="medium" color="text-green-400">✓ Registered</Text>
|
|
</Stack>
|
|
)}
|
|
{isPast && (
|
|
<Stack as="span" px={2} py={0.5} bg="bg-gray-700/50" border borderColor="border-gray-600/50" rounded="sm">
|
|
<Text size="xs" weight="medium" color="text-gray-400">Completed</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-400" block>{carLabel}</Text>
|
|
<Stack mt={2}>
|
|
<Text size="xs" color="text-gray-500" transform="uppercase">{sessionTypeLabel}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack display="flex" alignItems="center" gap={3}>
|
|
<Stack textAlign="right">
|
|
<Text color="text-white" weight="medium" block>
|
|
{race.scheduledAt.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})}
|
|
</Text>
|
|
<Text size="sm" color="text-gray-400" block>
|
|
{race.scheduledAt.toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})}
|
|
</Text>
|
|
{isPast && race.status === 'completed' && (
|
|
<Text size="xs" color="text-primary-blue" mt={1} block>View Results →</Text>
|
|
)}
|
|
</Stack>
|
|
|
|
{/* Registration Actions */}
|
|
{isUpcoming && (
|
|
<Stack onClick={(e: React.MouseEvent) => e.stopPropagation()}>
|
|
{!isRegistered ? (
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={(e) => handleRegister(race, e)}
|
|
disabled={isProcessing}
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
className="whitespace-nowrap"
|
|
>
|
|
{registerMutation.isPending ? 'Registering...' : 'Register'}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={(e) => handleWithdraw(race, e)}
|
|
disabled={isProcessing}
|
|
color="text-gray-300"
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
className="whitespace-nowrap"
|
|
>
|
|
{withdrawMutation.isPending ? 'Withdrawing...' : 'Withdraw'}
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}}
|
|
</StateContainer>
|
|
);
|
|
}
|