feat: show sport name in draft queue items (#36)
- Display sport name as muted subtitle under participant name to distinguish players across sports (e.g. Florida NCAAM vs Florida NCAAW) - Remove unused eligibility prop from QueueSection - Deduplicate double .find() per queue item into a single lookup Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
3343e7a405
commit
b0521bb7f3
2 changed files with 19 additions and 25 deletions
|
|
@ -27,17 +27,8 @@ interface QueueSectionProps {
|
|||
availableParticipants: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
sport: { name: string };
|
||||
}>;
|
||||
eligibility: {
|
||||
flexPicksUsed: number;
|
||||
flexPicksAvailable: number;
|
||||
picksBySport: Record<string, number>;
|
||||
sportAvailability: Record<
|
||||
string,
|
||||
{ sportName: string; sportId: string }
|
||||
>;
|
||||
ineligibleReasons: Record<string, string>;
|
||||
} | null;
|
||||
seasonId: string;
|
||||
teamId: string;
|
||||
isMyTurn: boolean;
|
||||
|
|
@ -55,11 +46,13 @@ function SortableQueueItem({
|
|||
item,
|
||||
index,
|
||||
participantName,
|
||||
sportName,
|
||||
onRemove,
|
||||
}: {
|
||||
item: { id: string; participantId: string };
|
||||
index: number;
|
||||
participantName: string;
|
||||
sportName?: string;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const {
|
||||
|
|
@ -104,6 +97,7 @@ function SortableQueueItem({
|
|||
<Badge variant="default" className="text-xs">{index + 1}</Badge>
|
||||
<div>
|
||||
<p className="font-semibold text-sm">{participantName}</p>
|
||||
{sportName && <p className="text-xs text-muted-foreground">{sportName}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
|
|
@ -122,7 +116,6 @@ function SortableQueueItem({
|
|||
export function QueueSection({
|
||||
queue,
|
||||
availableParticipants,
|
||||
eligibility,
|
||||
seasonId,
|
||||
teamId,
|
||||
isMyTurn,
|
||||
|
|
@ -169,19 +162,21 @@ export function QueueSection({
|
|||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="space-y-1.5 mb-4">
|
||||
{queue.map((item, index) => (
|
||||
<SortableQueueItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
index={index}
|
||||
participantName={
|
||||
availableParticipants.find(
|
||||
(p) => p.id === item.participantId
|
||||
)?.name || "Unknown"
|
||||
}
|
||||
onRemove={() => onRemoveFromQueue(item.id)}
|
||||
/>
|
||||
))}
|
||||
{queue.map((item, index) => {
|
||||
const participant = availableParticipants.find(
|
||||
(p) => p.id === item.participantId
|
||||
);
|
||||
return (
|
||||
<SortableQueueItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
index={index}
|
||||
participantName={participant?.name || "Unknown"}
|
||||
sportName={participant?.sport.name}
|
||||
onRemove={() => onRemoveFromQueue(item.id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
|
|
|
|||
|
|
@ -1090,7 +1090,6 @@ export default function DraftRoom() {
|
|||
? {
|
||||
queue,
|
||||
availableParticipants,
|
||||
eligibility,
|
||||
seasonId: season.id,
|
||||
teamId: userTeam.id,
|
||||
isMyTurn,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue