feat: add draft board link visibility for all season statuses

This commit is contained in:
Chris Parsons 2025-10-20 15:53:38 -07:00
parent 6c5c9f709b
commit cf90bf52ec

View file

@ -38,7 +38,9 @@ export async function loader(args: Route.LoaderArgs) {
// Fetch current season with sports
const season = await findCurrentSeason(leagueId);
const seasonWithSports = season ? await findSeasonWithSportsSeasons(season.id) : null;
const seasonWithSports = season
? await findSeasonWithSportsSeasons(season.id)
: null;
// Fetch commissioners
const commissioners = await findCommissionersByLeagueId(leagueId);
@ -71,9 +73,10 @@ export async function loader(args: Route.LoaderArgs) {
const teams = season ? await findTeamsBySeasonId(season.id) : [];
// Fetch draft slots if season is in pre_draft or draft status
const draftSlots = season && (season.status === "pre_draft" || season.status === "draft")
? await findDraftSlotsBySeasonId(season.id)
: [];
const draftSlots =
season && (season.status === "pre_draft" || season.status === "draft")
? await findDraftSlotsBySeasonId(season.id)
: [];
// Fetch user data for team owners
const ownerIds = teams
@ -297,45 +300,58 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
{/* Right Column - 1/3 width on desktop */}
<div className="space-y-6">
{/* Draft Order Display - Only show during pre_draft and draft */}
{season && (season.status === "pre_draft" || season.status === "draft") && draftSlots.length > 0 && (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>Draft Order</CardTitle>
<CardDescription>
{season.status === "pre_draft" ? "Upcoming draft order" : "Current draft order"}
</CardDescription>
{season &&
(season.status === "pre_draft" || season.status === "draft") &&
draftSlots.length > 0 && (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>Draft Order</CardTitle>
<CardDescription>
{season.status === "pre_draft"
? "Upcoming draft order"
: "Current draft order"}
</CardDescription>
</div>
<Button asChild size="sm">
<Link to={`/leagues/${league.id}/draft/${season.id}`}>
Enter Draft Room
</Link>
</Button>
</div>
<Button asChild size="sm">
<Link to={`/leagues/${league.id}/draft/${season.id}`}>
Enter Draft Room
</Link>
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-2">
{draftSlots.map((slot: any, index: number) => {
const ownerName = slot.team.ownerId ? ownerMap[slot.team.ownerId] : null;
return (
<div key={slot.id} className="flex items-center gap-3 py-2 border-b last:border-0">
<div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground font-bold text-xs">
{index + 1}
</CardHeader>
<CardContent>
<div className="space-y-2">
{draftSlots.map((slot: any, index: number) => {
const ownerName = slot.team.ownerId
? ownerMap[slot.team.ownerId]
: null;
return (
<div
key={slot.id}
className="flex items-center gap-3 py-2 border-b last:border-0"
>
<div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground font-bold text-xs">
{index + 1}
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-sm truncate">
{slot.team.name}
</p>
{ownerName && (
<p className="text-xs text-muted-foreground truncate">
{ownerName}
</p>
)}
</div>
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-sm truncate">{slot.team.name}</p>
{ownerName && (
<p className="text-xs text-muted-foreground truncate">{ownerName}</p>
)}
</div>
</div>
);
})}
</div>
</CardContent>
</Card>
)}
);
})}
</div>
</CardContent>
</Card>
)}
<Card>
<CardHeader>
@ -351,30 +367,34 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
{season && (
<>
<div>
<p className="text-sm text-muted-foreground">Season Status</p>
<p className="text-sm text-muted-foreground">
Season Status
</p>
<p className="font-medium capitalize">
{season.status.replace("_", " ")}
</p>
</div>
<div>
<p className="text-sm text-muted-foreground">Draft Rounds</p>
<p className="text-sm text-muted-foreground">
Draft Rounds
</p>
<p className="font-medium">{season.draftRounds}</p>
</div>
<div>
<p className="text-sm text-muted-foreground">Sports Selected</p>
<p className="text-sm text-muted-foreground">
Sports Selected
</p>
<p className="font-medium">{sportsCount}</p>
</div>
{(season.status === "active" || season.status === "completed") && (
<div>
<p className="text-sm text-muted-foreground">Draft Board</p>
<Link
to={`/leagues/${league.id}/draft-board/${season.id}`}
className="text-blue-600 hover:underline font-medium"
>
View Draft Board
</Link>
</div>
)}
<div>
<p className="text-sm text-muted-foreground">Draft Board</p>
<Link
to={`/leagues/${league.id}/draft-board/${season.id}`}
className="text-blue-600 hover:underline font-medium"
>
View Draft Board
</Link>
</div>
<div>
<p className="text-sm text-muted-foreground">Flex Spots</p>
<p className="font-medium text-primary">
@ -383,7 +403,9 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
</div>
{season.draftDateTime && (
<div>
<p className="text-sm text-muted-foreground">Draft Date</p>
<p className="text-sm text-muted-foreground">
Draft Date
</p>
<p className="font-medium">
{format(new Date(season.draftDateTime), "PPP 'at' p")}
</p>