264 lines
9.7 KiB
TypeScript
264 lines
9.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Race } from '@gridpilot/racing/domain/entities/Race';
|
|
import { getRaceRepository } from '@/lib/di-container';
|
|
import {
|
|
getCurrentDriverId,
|
|
isRegistered,
|
|
registerForRace,
|
|
withdrawFromRace,
|
|
} from '@/lib/racingLegacyFacade';
|
|
|
|
interface LeagueScheduleProps {
|
|
leagueId: string;
|
|
}
|
|
|
|
export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
|
|
const router = useRouter();
|
|
const [races, setRaces] = useState<Race[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');
|
|
const [registrationStates, setRegistrationStates] = useState<Record<string, boolean>>({});
|
|
const [processingRace, setProcessingRace] = useState<string | null>(null);
|
|
|
|
const currentDriverId = getCurrentDriverId();
|
|
|
|
useEffect(() => {
|
|
loadRaces();
|
|
}, [leagueId]);
|
|
|
|
const loadRaces = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const raceRepo = getRaceRepository();
|
|
const allRaces = await raceRepo.findAll();
|
|
const leagueRaces = allRaces
|
|
.filter(race => race.leagueId === leagueId)
|
|
.sort((a, b) => new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime());
|
|
setRaces(leagueRaces);
|
|
|
|
// Load registration states
|
|
const states: Record<string, boolean> = {};
|
|
leagueRaces.forEach(race => {
|
|
states[race.id] = isRegistered(race.id, currentDriverId);
|
|
});
|
|
setRegistrationStates(states);
|
|
} catch (error) {
|
|
console.error('Failed to load races:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRegister = async (race: Race, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
const confirmed = window.confirm(
|
|
`Register for ${race.track}?`
|
|
);
|
|
|
|
if (!confirmed) return;
|
|
|
|
setProcessingRace(race.id);
|
|
try {
|
|
registerForRace(race.id, currentDriverId, leagueId);
|
|
setRegistrationStates(prev => ({ ...prev, [race.id]: true }));
|
|
} catch (err) {
|
|
alert(err instanceof Error ? err.message : 'Failed to register');
|
|
} finally {
|
|
setProcessingRace(null);
|
|
}
|
|
};
|
|
|
|
const handleWithdraw = async (race: Race, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
const confirmed = window.confirm(
|
|
'Withdraw from this race?'
|
|
);
|
|
|
|
if (!confirmed) return;
|
|
|
|
setProcessingRace(race.id);
|
|
try {
|
|
withdrawFromRace(race.id, currentDriverId);
|
|
setRegistrationStates(prev => ({ ...prev, [race.id]: false }));
|
|
} catch (err) {
|
|
alert(err instanceof Error ? err.message : 'Failed to withdraw');
|
|
} finally {
|
|
setProcessingRace(null);
|
|
}
|
|
};
|
|
|
|
const now = new Date();
|
|
const upcomingRaces = races.filter(race => race.status === 'scheduled' && new Date(race.scheduledAt) > now);
|
|
const pastRaces = races.filter(race => race.status === 'completed' || new Date(race.scheduledAt) <= now);
|
|
|
|
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();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="text-center py-8 text-gray-400">
|
|
Loading schedule...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Filter Controls */}
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<p className="text-sm text-gray-400">
|
|
{displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<button
|
|
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
|
|
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
|
|
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>
|
|
|
|
{/* Race List */}
|
|
{displayRaces.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-400">
|
|
<p className="mb-2">No {filter} races</p>
|
|
{filter === 'upcoming' && (
|
|
<p className="text-sm text-gray-500">Schedule your first race to get started</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{displayRaces.map((race) => {
|
|
const isPast = race.status === 'completed' || new Date(race.scheduledAt) <= now;
|
|
const isUpcoming = race.status === 'scheduled' && new Date(race.scheduledAt) > now;
|
|
|
|
return (
|
|
<div
|
|
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}`)}
|
|
>
|
|
<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">{race.track}</h3>
|
|
{isUpcoming && !registrationStates[race.id] && (
|
|
<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>
|
|
)}
|
|
{isUpcoming && registrationStates[race.id] && (
|
|
<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>
|
|
)}
|
|
{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>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-400">{race.car}</p>
|
|
<div className="flex items-center gap-3 mt-2">
|
|
<p className="text-xs text-gray-500 uppercase">{race.sessionType}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="text-right">
|
|
<p className="text-white font-medium">
|
|
{new Date(race.scheduledAt).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})}
|
|
</p>
|
|
<p className="text-sm text-gray-400">
|
|
{new Date(race.scheduledAt).toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})}
|
|
</p>
|
|
{isPast && race.status === 'completed' && (
|
|
<p className="text-xs text-primary-blue mt-1">View Results →</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Registration Actions */}
|
|
{isUpcoming && (
|
|
<div onClick={(e) => e.stopPropagation()}>
|
|
{!registrationStates[race.id] ? (
|
|
<button
|
|
onClick={(e) => handleRegister(race, e)}
|
|
disabled={processingRace === race.id}
|
|
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"
|
|
>
|
|
{processingRace === race.id ? 'Registering...' : 'Register'}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={(e) => handleWithdraw(race, e)}
|
|
disabled={processingRace === race.id}
|
|
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"
|
|
>
|
|
{processingRace === race.id ? 'Withdrawing...' : 'Withdraw'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |