website refactor
This commit is contained in:
@@ -3,22 +3,25 @@
|
||||
import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
|
||||
import { useRegisterForRace } from "@/hooks/race/useRegisterForRace";
|
||||
import { useWithdrawFromRace } from "@/hooks/race/useWithdrawFromRace";
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
|
||||
|
||||
// Shared state components
|
||||
import { StateContainer } from '@/components/shared/state/StateContainer';
|
||||
import { EmptyState } from '@/components/shared/state/EmptyState';
|
||||
import { StateContainer } from '@/ui/StateContainer';
|
||||
import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Button } from '@/ui/Button';
|
||||
|
||||
interface LeagueScheduleProps {
|
||||
leagueId: string;
|
||||
onRaceClick?: (raceId: string) => void;
|
||||
}
|
||||
|
||||
export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
|
||||
const router = useRouter();
|
||||
export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
|
||||
const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');
|
||||
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
@@ -28,10 +31,6 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
|
||||
const registerMutation = useRegisterForRace();
|
||||
const withdrawMutation = useWithdrawFromRace();
|
||||
|
||||
const races = useMemo(() => {
|
||||
return schedule?.races ?? [];
|
||||
}, [schedule]);
|
||||
|
||||
const handleRegister = async (race: LeagueScheduleRaceViewModel, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
|
||||
@@ -62,24 +61,6 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const upcomingRaces = races.filter((race) => race.isUpcoming);
|
||||
const pastRaces = races.filter((race) => race.isPast);
|
||||
|
||||
const getDisplayRaces = () => {
|
||||
switch (filter) {
|
||||
case 'upcoming':
|
||||
return upcomingRaces;
|
||||
case 'past':
|
||||
return [...pastRaces].reverse();
|
||||
case 'all':
|
||||
return [...upcomingRaces, ...[...pastRaces].reverse()];
|
||||
default:
|
||||
return races;
|
||||
}
|
||||
};
|
||||
|
||||
const displayRaces = getDisplayRaces();
|
||||
|
||||
return (
|
||||
<StateContainer
|
||||
data={schedule}
|
||||
@@ -106,8 +87,10 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
|
||||
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;
|
||||
@@ -117,56 +100,47 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
|
||||
const displayRaces = getDisplayRaces();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Stack gap={4}>
|
||||
{/* Filter Controls */}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<p className="text-sm text-gray-400">
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Text size="sm" color="text-gray-400">
|
||||
{displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
</Text>
|
||||
<Box display="flex" gap={2}>
|
||||
<Button
|
||||
variant={filter === 'upcoming' ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('upcoming')}
|
||||
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
|
||||
filter === 'upcoming'
|
||||
? 'bg-primary-blue text-white'
|
||||
: 'bg-iron-gray text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Upcoming ({upcomingRaces.length})
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'past' ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('past')}
|
||||
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
|
||||
filter === 'past'
|
||||
? 'bg-primary-blue text-white'
|
||||
: 'bg-iron-gray text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Past ({pastRaces.length})
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'all' ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('all')}
|
||||
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
|
||||
filter === 'all'
|
||||
? 'bg-primary-blue text-white'
|
||||
: 'bg-iron-gray text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
All ({races.length})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Race List */}
|
||||
{displayRaces.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
<p className="mb-2">No {filter} races</p>
|
||||
<Box textAlign="center" py={8}>
|
||||
<Text color="text-gray-400" block mb={2}>No {filter} races</Text>
|
||||
{filter === 'upcoming' && (
|
||||
<p className="text-sm text-gray-500">Schedule your first race to get started</p>
|
||||
<Text size="sm" color="text-gray-500" block>Schedule your first race to get started</Text>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<Stack gap={3}>
|
||||
{displayRaces.map((race) => {
|
||||
const isPast = race.isPast;
|
||||
const isUpcoming = race.isUpcoming;
|
||||
@@ -178,91 +152,103 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
|
||||
registerMutation.isPending || withdrawMutation.isPending;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
key={race.id}
|
||||
className={`p-4 rounded-lg border transition-all duration-200 cursor-pointer hover:scale-[1.02] ${
|
||||
isPast
|
||||
? 'bg-iron-gray/50 border-charcoal-outline/50 opacity-75'
|
||||
: 'bg-deep-graphite border-charcoal-outline hover:border-primary-blue'
|
||||
}`}
|
||||
onClick={() => router.push(`/races/${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)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<h3 className="text-white font-medium">{trackLabel}</h3>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" gap={4}>
|
||||
<Box flexGrow={1}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={1} flexWrap="wrap">
|
||||
<Heading level={3} fontSize="base" weight="medium" color="text-white">{trackLabel}</Heading>
|
||||
{isUpcoming && !isRegistered && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
|
||||
Upcoming
|
||||
</span>
|
||||
<Box 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>
|
||||
</Box>
|
||||
)}
|
||||
{isUpcoming && isRegistered && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-green-500/10 text-green-400 rounded border border-green-500/30">
|
||||
✓ Registered
|
||||
</span>
|
||||
<Box 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>
|
||||
</Box>
|
||||
)}
|
||||
{isPast && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50">
|
||||
Completed
|
||||
</span>
|
||||
<Box 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>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">{carLabel}</p>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<p className="text-xs text-gray-500 uppercase">{sessionTypeLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
<Text size="sm" color="text-gray-400" block>{carLabel}</Text>
|
||||
<Box mt={2}>
|
||||
<Text size="xs" color="text-gray-500" transform="uppercase">{sessionTypeLabel}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-right">
|
||||
<p className="text-white font-medium">
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box textAlign="right">
|
||||
<Text color="text-white" weight="medium" block>
|
||||
{race.scheduledAt.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
</Text>
|
||||
<Text size="sm" color="text-gray-400" block>
|
||||
{race.scheduledAt.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</Text>
|
||||
{isPast && race.status === 'completed' && (
|
||||
<p className="text-xs text-primary-blue mt-1">View Results →</p>
|
||||
<Text size="xs" color="text-primary-blue" mt={1} block>View Results →</Text>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Registration Actions */}
|
||||
{isUpcoming && (
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<Box onClick={(e: React.MouseEvent) => e.stopPropagation()}>
|
||||
{!isRegistered ? (
|
||||
<button
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={(e) => handleRegister(race, e)}
|
||||
disabled={isProcessing}
|
||||
className="px-3 py-1.5 text-sm font-medium bg-primary-blue hover:bg-primary-blue/80 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{registerMutation.isPending ? 'Registering...' : 'Register'}
|
||||
</button>
|
||||
</Button>
|
||||
) : (
|
||||
<button
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={(e) => handleWithdraw(race, e)}
|
||||
disabled={isProcessing}
|
||||
className="px-3 py-1.5 text-sm font-medium bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||
color="text-gray-300"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{withdrawMutation.isPending ? 'Withdrawing...' : 'Withdraw'}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
}}
|
||||
</StateContainer>
|
||||
|
||||
Reference in New Issue
Block a user