Virtualize available participants list, memoize draft room props
Adds @tanstack/react-virtual to replace separate mobile/desktop lists with a single unified virtual scroll loop. Also memoizes miniDraftGrid and availableParticipantsSectionProps, and switches pick lookup from Array.find to a Map for O(1) access. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Chris Parsons
parent
27ee876fd1
commit
e3bc3c1ce2
5 changed files with 286 additions and 236 deletions
|
|
@ -3,6 +3,29 @@ import { render, screen, within } from "@testing-library/react";
|
|||
import userEvent from "@testing-library/user-event";
|
||||
import { AvailableParticipantsSection } from "~/components/draft/AvailableParticipantsSection";
|
||||
|
||||
vi.mock("@tanstack/react-virtual", () => ({
|
||||
useVirtualizer: ({
|
||||
count,
|
||||
estimateSize,
|
||||
}: {
|
||||
count: number;
|
||||
estimateSize: () => number;
|
||||
}) => {
|
||||
const size = estimateSize();
|
||||
const items = Array.from({ length: count }, (_, i) => ({
|
||||
index: i,
|
||||
start: i * size,
|
||||
size,
|
||||
key: i,
|
||||
}));
|
||||
return {
|
||||
getTotalSize: () => count * size,
|
||||
getVirtualItems: () => items,
|
||||
measureElement: vi.fn(),
|
||||
};
|
||||
},
|
||||
}));
|
||||
|
||||
const defaultProps = {
|
||||
participants: [
|
||||
{ id: "1", name: "Player A", sport: { id: "s1", name: "NFL" } },
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { memo, useCallback, useMemo } from "react";
|
||||
import { memo, useCallback, useMemo, useRef } from "react";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Checkbox } from "~/components/ui/checkbox";
|
||||
|
|
@ -271,6 +272,19 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
|
||||
const hasActiveFilters = sportFilters.length > 0 || hideCompletedSports;
|
||||
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const virtualizer = useVirtualizer({
|
||||
count: participants.length,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize: () => 72,
|
||||
overscan: 5,
|
||||
getItemKey: (index) => participants[index]?.id ?? index,
|
||||
});
|
||||
|
||||
const desktopGridClass = hasTeam
|
||||
? "grid-cols-[60px_60px_1fr_140px]"
|
||||
: "grid-cols-[60px_60px_1fr]";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{miniDraftGrid && (
|
||||
|
|
@ -280,7 +294,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
)}
|
||||
<div className="px-4 pt-4 pb-2 flex-shrink-0">
|
||||
<div className="space-y-2">
|
||||
{/* Search Input */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search participants..."
|
||||
|
|
@ -290,9 +303,7 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
/>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{/* Sport Filter Multi-Select */}
|
||||
<div className="flex-1 min-w-[120px]">
|
||||
{/* Mobile: bottom sheet */}
|
||||
<div className="md:hidden">
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
|
|
@ -334,7 +345,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
</Sheet>
|
||||
</div>
|
||||
|
||||
{/* Desktop: popover */}
|
||||
<div className="hidden md:block">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
|
|
@ -374,7 +384,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Show/Hide Drafted Toggle */}
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer whitespace-nowrap px-3 py-2 border rounded-md">
|
||||
<Checkbox
|
||||
checked={!hideDrafted}
|
||||
|
|
@ -383,7 +392,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
<span>Show Drafted</span>
|
||||
</label>
|
||||
|
||||
{/* Show/Hide Ineligible Toggle - only show if user has a team */}
|
||||
{hasTeam && eligibility && (
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer whitespace-nowrap px-3 py-2 border rounded-md">
|
||||
<Checkbox
|
||||
|
|
@ -398,169 +406,65 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Card List - visible on mobile only */}
|
||||
<div className="flex md:hidden flex-1 overflow-y-auto flex-col gap-2 px-4 py-2">
|
||||
<div className={`hidden md:grid ${desktopGridClass} bg-muted border-b text-sm font-semibold flex-shrink-0 px-4`}>
|
||||
<span className="text-center p-3 px-0">OVR</span>
|
||||
<span className="text-center p-3 px-0">SPR</span>
|
||||
<span className="text-left p-3">Participant</span>
|
||||
</div>
|
||||
|
||||
<div ref={parentRef} className="flex-1 overflow-y-auto">
|
||||
{participants.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||
{emptyMessage}
|
||||
</div>
|
||||
) : (
|
||||
participants.map((participant) => {
|
||||
const { isDrafted, isInQueue, isEligible, ineligibleReason } =
|
||||
getParticipantState(participant, draftedParticipantIds, queueMap, eligibility);
|
||||
<div
|
||||
style={{
|
||||
height: virtualizer.getTotalSize(),
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const participant = participants[virtualItem.index];
|
||||
const { isDrafted, isInQueue, isEligible, ineligibleReason } =
|
||||
getParticipantState(participant, draftedParticipantIds, queueMap, eligibility);
|
||||
const rank = participantRanks.get(participant.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={participant.id}
|
||||
className={`bg-card border rounded-lg p-3 flex items-start justify-between gap-3 transition-colors ${
|
||||
isDrafted
|
||||
? "bg-muted/50 opacity-60"
|
||||
: !isEligible
|
||||
? "bg-destructive/10 opacity-75"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<span
|
||||
className={`font-semibold text-sm truncate ${!isEligible && !isDrafted ? "text-muted-foreground" : ""}`}
|
||||
>
|
||||
{participant.name}
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1 items-center">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{participant.sport.name}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">
|
||||
OVR {participantRanks.get(participant.id)?.overallRank} · SPR {participantRanks.get(participant.id)?.sportRank}
|
||||
</span>
|
||||
{isDrafted && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
Drafted
|
||||
</Badge>
|
||||
)}
|
||||
{!isDrafted && !isEligible && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-xs"
|
||||
title={ineligibleReason}
|
||||
>
|
||||
Ineligible
|
||||
</Badge>
|
||||
)}
|
||||
{isInQueue && !isDrafted && isEligible && (
|
||||
<Badge variant="default" className="text-xs">
|
||||
Queued
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{hasTeam && !isDrafted && (
|
||||
<div className="flex gap-2 flex-shrink-0">
|
||||
{!isInQueue ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="min-h-[44px] min-w-[44px]"
|
||||
onClick={() => onAddToQueue(participant.id)}
|
||||
title={!isEligible ? ineligibleReason : "Add to queue"}
|
||||
disabled={!isEligible}
|
||||
>
|
||||
<ListPlus className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="min-h-[44px] min-w-[44px]"
|
||||
onClick={() => {
|
||||
const queueId = queueMap.get(participant.id);
|
||||
if (queueId) onRemoveFromQueue(queueId);
|
||||
}}
|
||||
title="Remove from queue"
|
||||
>
|
||||
<ListX className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="min-h-[44px]"
|
||||
onClick={() => onMakePick(participant.id)}
|
||||
disabled={!canPick || !isEligible}
|
||||
title={
|
||||
!canPick
|
||||
? "Not your turn"
|
||||
: !isEligible
|
||||
? ineligibleReason
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Draft
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Desktop Table - hidden on mobile */}
|
||||
<div className="hidden md:flex flex-1 overflow-hidden">
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted sticky top-0">
|
||||
<tr>
|
||||
<th className="text-center p-3 px-0 font-semibold">OVR</th>
|
||||
<th className="text-center p-3 px-0 font-semibold">SPR</th>
|
||||
<th className="text-left p-3 font-semibold">Participant</th>
|
||||
<th className="text-left p-3 font-semibold">Sport</th>
|
||||
{hasTeam && (
|
||||
<th className="text-right p-3 font-semibold">Queue</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{participants.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={hasTeam ? 5 : 4}
|
||||
className="text-center py-8 text-muted-foreground"
|
||||
>
|
||||
{emptyMessage}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
participants.map((participant) => {
|
||||
const { isDrafted, isInQueue, isEligible, ineligibleReason } =
|
||||
getParticipantState(participant, draftedParticipantIds, queueMap, eligibility);
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={participant.id}
|
||||
className={`border-t transition-colors ${
|
||||
return (
|
||||
<div
|
||||
key={virtualItem.key}
|
||||
data-index={virtualItem.index}
|
||||
ref={virtualizer.measureElement}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: virtualItem.start,
|
||||
left: 0,
|
||||
right: 0,
|
||||
}}
|
||||
>
|
||||
<div className="md:hidden px-4 py-1">
|
||||
<div
|
||||
className={`bg-card border rounded-lg p-3 flex items-start justify-between gap-3 transition-colors ${
|
||||
isDrafted
|
||||
? "bg-muted/50 opacity-60"
|
||||
: !isEligible
|
||||
? "bg-destructive/10 opacity-75"
|
||||
: "hover:bg-muted/50"
|
||||
: ""
|
||||
}`}
|
||||
title={
|
||||
!isEligible && !isDrafted ? ineligibleReason : undefined
|
||||
}
|
||||
>
|
||||
<td className="p-3 px-0 text-center text-muted-foreground tabular-nums">
|
||||
{participantRanks.get(participant.id)?.overallRank}
|
||||
</td>
|
||||
<td className="p-3 px-0 text-center text-muted-foreground tabular-nums">
|
||||
{participantRanks.get(participant.id)?.sportRank}
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`font-medium ${!isEligible && !isDrafted ? "text-muted-foreground" : ""}`}
|
||||
>
|
||||
{participant.name}
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<span
|
||||
className={`font-semibold text-sm truncate ${!isEligible && !isDrafted ? "text-muted-foreground" : ""}`}
|
||||
>
|
||||
{participant.name}
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1 items-center">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{participant.sport.name}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">
|
||||
OVR {rank?.overallRank} · SPR {rank?.sportRank}
|
||||
</span>
|
||||
{isDrafted && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
|
|
@ -582,71 +486,162 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-3 text-muted-foreground">
|
||||
{participant.sport.name}
|
||||
</td>
|
||||
{hasTeam && (
|
||||
<td className="p-3 text-right">
|
||||
<div className="flex gap-2 justify-end items-center">
|
||||
{!isDrafted && (
|
||||
<>
|
||||
{/* Queue icon button */}
|
||||
{!isInQueue ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onAddToQueue(participant.id)}
|
||||
title={
|
||||
!isEligible
|
||||
? ineligibleReason
|
||||
: "Add to queue"
|
||||
}
|
||||
disabled={!isEligible}
|
||||
>
|
||||
<ListPlus className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const queueId = queueMap.get(participant.id);
|
||||
if (queueId) onRemoveFromQueue(queueId);
|
||||
}}
|
||||
title="Remove from queue"
|
||||
>
|
||||
<ListX className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{/* Draft button - always visible, disabled when not your turn */}
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => onMakePick(participant.id)}
|
||||
disabled={!canPick || !isEligible}
|
||||
title={
|
||||
!canPick
|
||||
? "Not your turn"
|
||||
: !isEligible
|
||||
? ineligibleReason
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Draft
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
{hasTeam && !isDrafted && (
|
||||
<div className="flex gap-2 flex-shrink-0">
|
||||
{!isInQueue ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="min-h-[44px] min-w-[44px]"
|
||||
onClick={() => onAddToQueue(participant.id)}
|
||||
title={!isEligible ? ineligibleReason : "Add to queue"}
|
||||
disabled={!isEligible}
|
||||
>
|
||||
<ListPlus className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="min-h-[44px] min-w-[44px]"
|
||||
onClick={() => {
|
||||
const queueId = queueMap.get(participant.id);
|
||||
if (queueId) onRemoveFromQueue(queueId);
|
||||
}}
|
||||
title="Remove from queue"
|
||||
>
|
||||
<ListX className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="min-h-[44px]"
|
||||
onClick={() => onMakePick(participant.id)}
|
||||
disabled={!canPick || !isEligible}
|
||||
title={
|
||||
!canPick
|
||||
? "Not your turn"
|
||||
: !isEligible
|
||||
? ineligibleReason
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Draft
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`hidden md:grid ${desktopGridClass} items-center px-4 transition-colors border-t ${
|
||||
isDrafted
|
||||
? "bg-muted/50 opacity-60"
|
||||
: !isEligible
|
||||
? "bg-destructive/10 opacity-75"
|
||||
: "hover:bg-muted/50"
|
||||
}`}
|
||||
title={
|
||||
!isEligible && !isDrafted ? ineligibleReason : undefined
|
||||
}
|
||||
>
|
||||
<span className="text-center text-muted-foreground tabular-nums p-3 px-0">
|
||||
{rank?.overallRank}
|
||||
</span>
|
||||
<span className="text-center text-muted-foreground tabular-nums p-3 px-0">
|
||||
{rank?.sportRank}
|
||||
</span>
|
||||
<div className="p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`font-medium ${!isEligible && !isDrafted ? "text-muted-foreground" : ""}`}
|
||||
>
|
||||
{participant.name}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{participant.sport.name}
|
||||
</Badge>
|
||||
{isDrafted && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
Drafted
|
||||
</Badge>
|
||||
)}
|
||||
{!isDrafted && !isEligible && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-xs"
|
||||
title={ineligibleReason}
|
||||
>
|
||||
Ineligible
|
||||
</Badge>
|
||||
)}
|
||||
{isInQueue && !isDrafted && isEligible && (
|
||||
<Badge variant="default" className="text-xs">
|
||||
Queued
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{hasTeam && (
|
||||
<div className="p-3">
|
||||
<div className="flex gap-2 justify-end items-center">
|
||||
{!isDrafted && (
|
||||
<>
|
||||
{!isInQueue ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onAddToQueue(participant.id)}
|
||||
title={
|
||||
!isEligible
|
||||
? ineligibleReason
|
||||
: "Add to queue"
|
||||
}
|
||||
disabled={!isEligible}
|
||||
>
|
||||
<ListPlus className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const queueId = queueMap.get(participant.id);
|
||||
if (queueId) onRemoveFromQueue(queueId);
|
||||
}}
|
||||
title="Remove from queue"
|
||||
>
|
||||
<ListX className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => onMakePick(participant.id)}
|
||||
disabled={!canPick || !isEligible}
|
||||
title={
|
||||
!canPick
|
||||
? "Not your turn"
|
||||
: !isEligible
|
||||
? ineligibleReason
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Draft
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1395,6 +1395,7 @@ export default function DraftRoom() {
|
|||
const draftGrid = useMemo(() => {
|
||||
const teamCount = draftSlots.length;
|
||||
const rounds = season.draftRounds;
|
||||
const pickMap = new Map(picks.map((p) => [p.pickNumber, p]));
|
||||
const grid: Array<
|
||||
Array<{
|
||||
pickNumber: number;
|
||||
|
|
@ -1415,7 +1416,7 @@ export default function DraftRoom() {
|
|||
const pickNumber = (round - 1) * teamCount + pickInRound;
|
||||
const teamId = draftSlots[teamIndex]?.team.id;
|
||||
|
||||
const pick = picks.find((p) => p.pickNumber === pickNumber);
|
||||
const pick = pickMap.get(pickNumber);
|
||||
|
||||
roundPicks.push({ pickNumber, round, pickInRound, teamId, pick });
|
||||
}
|
||||
|
|
@ -1502,20 +1503,22 @@ export default function DraftRoom() {
|
|||
}
|
||||
}, [userDraftedSportNames]);
|
||||
|
||||
const availableParticipantsSectionProps = {
|
||||
const miniDraftGrid = useMemo(() => ({
|
||||
draftSlots,
|
||||
draftGrid,
|
||||
currentPick,
|
||||
currentRound,
|
||||
ownerMap,
|
||||
onForceAutopick: isCommissioner ? handleForceAutopick : undefined,
|
||||
onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined,
|
||||
onReplacePick: isCommissioner ? handleReplacePickOpen : undefined,
|
||||
onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined,
|
||||
}), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, isCommissioner, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
|
||||
|
||||
const availableParticipantsSectionProps = useMemo(() => ({
|
||||
participants: filteredParticipants,
|
||||
participantRanks,
|
||||
miniDraftGrid: {
|
||||
draftSlots,
|
||||
draftGrid,
|
||||
currentPick,
|
||||
currentRound,
|
||||
ownerMap,
|
||||
onForceAutopick: isCommissioner ? handleForceAutopick : undefined,
|
||||
onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined,
|
||||
onReplacePick: isCommissioner ? handleReplacePickOpen : undefined,
|
||||
onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined,
|
||||
},
|
||||
miniDraftGrid,
|
||||
searchQuery,
|
||||
sportFilters,
|
||||
hideDrafted,
|
||||
|
|
@ -1536,7 +1539,7 @@ export default function DraftRoom() {
|
|||
onMakePick: handleMakePick,
|
||||
onAddToQueue: handleAddToQueue,
|
||||
onRemoveFromQueue: handleRemoveFromQueue,
|
||||
};
|
||||
}), [filteredParticipants, participantRanks, miniDraftGrid, searchQuery, sportFilters, hideDrafted, hideIneligible, uniqueSports, draftedParticipantIds, queue, eligibility, canPick, userTeam, hideCompletedSports, userDraftedSportNames, handleHideCompletedSportsChange, handleMakePick, handleAddToQueue, handleRemoveFromQueue]);
|
||||
|
||||
const draftGridSectionProps = {
|
||||
draftSlots,
|
||||
|
|
|
|||
28
package-lock.json
generated
28
package-lock.json
generated
|
|
@ -29,6 +29,7 @@
|
|||
"@react-router/express": "^7.7.1",
|
||||
"@react-router/node": "^7.7.1",
|
||||
"@sentry/react-router": "^10.43.0",
|
||||
"@tanstack/react-virtual": "^3.13.24",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
|
|
@ -6491,6 +6492,33 @@
|
|||
"vite": "^5.2.0 || ^6 || ^7"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-virtual": {
|
||||
"version": "3.13.24",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.24.tgz",
|
||||
"integrity": "sha512-aIJvz5OSkhNIhZIpYivrxrPTKYsjW9Uzy+sP/mx0S3sev2HyvPb7xmjbYvokzEpfgYHy/HjzJ2zFAETuUfgCpg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/virtual-core": "3.14.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/virtual-core": {
|
||||
"version": "3.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.14.0.tgz",
|
||||
"integrity": "sha512-JLANqGy/D6k4Ujmh8Tr25lGimuOXNiaVyXaCAZS0W+1390sADdGnyUdSWNIfd49gebtIxGMij4IktRVzrdr12Q==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/cypress": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@
|
|||
"@react-router/express": "^7.7.1",
|
||||
"@react-router/node": "^7.7.1",
|
||||
"@sentry/react-router": "^10.43.0",
|
||||
"@tanstack/react-virtual": "^3.13.24",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue