From d38685a0c1e0fa0f34651ddc93d72d2abdc9decd Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Thu, 2 Jan 2025 12:27:58 -0500
Subject: [PATCH 1/9] Started full drag and drop

---
 components/stats/Picklist.tsx                 | 385 +++++++++++-------
 lib/Types.ts                                  |   2 +-
 lib/api/AccessLevels.ts                       |   4 +-
 lib/api/ApiUtils.ts                           |   9 +-
 lib/api/ClientApi.ts                          |  14 +-
 lib/client/CollectionId.ts                    |   4 +-
 .../[seasonSlug]/[competitonSlug]/index.tsx   |   2 +-
 .../[seasonSlug]/[competitonSlug]/stats.tsx   |  12 +-
 tests/lib/api/AccessLevels.test.ts            |   6 +-
 9 files changed, 261 insertions(+), 177 deletions(-)

diff --git a/components/stats/Picklist.tsx b/components/stats/Picklist.tsx
index b0eaff88..20b83fd8 100644
--- a/components/stats/Picklist.tsx
+++ b/components/stats/Picklist.tsx
@@ -1,112 +1,170 @@
-import { DbPicklist, Report } from "@/lib/Types";
+import { CompPicklistGroup, Report } from "@/lib/Types";
 
-import { useDrag, useDrop } from "react-dnd";
+import { ConnectDropTarget, useDrag, useDrop } from "react-dnd";
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import { FaArrowDown, FaArrowUp, FaPlus } from "react-icons/fa";
+import { FaPlus } from "react-icons/fa";
 import ClientApi from "@/lib/api/ClientApi";
 
-type CardData = {
-	number: number;
-	picklistIndex?: number;
-};
+const SHOW_PICKLISTS_ON_TEAM_CARDS = true;
 
 type Picklist = {
 	index: number;
 	name: string;
-	teams: CardData[];
+	head: PicklistEntry | undefined;
 	update: (picklist: Picklist) => void;
 };
 
-const Includes = (bucket: any[], item: CardData) => {
-	let result = false;
-	bucket.forEach((i: { number: number }) => {
-		if (i.number === item.number) {
-			result = true;
-		}
-	});
-
-	return result;
+type PicklistEntry = {
+	number: number;
+	next?: PicklistEntry;
+	picklist?: Picklist;
 };
 
-function removeTeamFromPicklist(team: CardData, picklists: Picklist[]) {
-	if (team.picklistIndex === undefined) return;
+function removeEntryFromItsPicklist(entry: PicklistEntry) {
+	if (entry.picklist) {
+		const picklist = entry.picklist;
+		if (picklist.head?.number === entry.number) {
+			picklist.head = picklist.head.next;
+		} else {
+			let curr: PicklistEntry | undefined = picklist.head;
+			while (curr) {
+				if (curr.next?.number === entry.number) {
+					curr.next = curr.next.next;
+				}
+
+				curr = curr.next;
+			}
+		}
+
+		entry.picklist = undefined;
 
-	const picklist = picklists[team.picklistIndex];
-	if (!picklist) return;
+		picklist.update(picklist);
 
-	picklist.teams = picklist.teams.filter((t) => t.number !== team.number);
-	picklist.update(picklist);
+		return picklist;
+	}
 }
 
 function TeamCard(props: {
-	cardData: CardData;
+	entry: PicklistEntry;
 	draggable: boolean;
 	picklist?: Picklist;
 	rank?: number;
-	lastRank?: number;
 	width?: string;
-	height?: string;
+	preview?: boolean;
 }) {
-	const { number: teamNumber, picklistIndex: picklist } = props.cardData;
+	const { entry, width, rank, preview } = props;
 
-	const [{ isDragging }, dragRef] = useDrag({
+	const [, dragRef] = useDrag({
 		type: "team",
-		item: props.cardData,
-		collect: (monitor) => ({
-			isDragging: monitor.isDragging(),
-		}),
+		item: () => {
+			return props.entry;
+		},
 	});
 
-	function changeTeamRank(change: number) {
-		const picklist = props.picklist;
-		if (
-			picklist === undefined ||
-			props.rank === undefined ||
-			props.lastRank === undefined
-		)
-			return;
-
-		const newRank = props.rank + change;
-		if (newRank < 0 || newRank > props.lastRank) return;
-
-		const otherTeam = picklist.teams[newRank];
-		picklist.teams[newRank] = picklist.teams[props.rank];
-		picklist.teams[props.rank] = otherTeam;
+	// We have the useDrop for the InsertDropSite here because we need to know if the dragged item is over the insert site
+	const [{ isOverInsert, draggedEntry: draggedInsertEntry }, insertRef] =
+		useDrop({
+			accept: "team",
+			drop: (dragged: PicklistEntry) => {
+				// If you're moving a card into the same spot, don't do anything
+				if (
+					entry.number === dragged.number &&
+					entry.picklist === dragged.picklist
+				)
+					return;
+
+				const picklist = removeEntryFromItsPicklist(dragged);
+
+				// Create a copy, don't operate on the original
+				dragged = {
+					number: dragged.number,
+					next: entry.next,
+					picklist: entry.picklist,
+				};
+
+				entry.next = dragged;
+
+				picklist?.update(picklist);
+			},
+			collect: (monitor) => ({
+				isOverInsert: monitor.isOver(),
+				draggedEntry: monitor.getItem(),
+			}),
+		});
 
-		picklist.update(picklist);
-	}
+	return (
+		<>
+			<div className="flex flex-col w-full">
+				<div
+					className={`w-${width ?? "full"} bg-base-100 rounded-lg p-1 flex items-center justify-center border-2 border-base-100 hover:border-primary ${preview && "animate-pulse"}`}
+					ref={dragRef as unknown as () => void}
+				>
+					<h1>
+						{rank !== undefined ? `${rank}. ` : ""}
+						<span className="max-sm:hidden">Team</span>{" "}
+						<span className="text-accent">#{entry.number}</span>
+						{SHOW_PICKLISTS_ON_TEAM_CARDS && entry.picklist && (
+							<span className="text-xs text-accent">
+								{" "}
+								({entry.picklist.name})
+							</span>
+						)}
+					</h1>
+				</div>
+				{rank && !preview && (
+					<InsertDropSite
+						rank={rank + 1}
+						entry={entry}
+						isOver={isOverInsert}
+						dropRef={insertRef}
+						draggedEntry={draggedInsertEntry}
+					/>
+				)}
+			</div>
+			{rank && !preview && entry.next && (
+				<TeamCard
+					rank={rank + (isOverInsert && draggedInsertEntry ? 2 : 1)}
+					entry={entry.next}
+					draggable={true}
+					picklist={props.picklist}
+				/>
+			)}
+		</>
+	);
+}
 
+/**
+ * The useDrop is in the TeamCard component
+ */
+function InsertDropSite({
+	rank,
+	entry,
+	isOver,
+	dropRef,
+	draggedEntry,
+}: {
+	rank: number;
+	entry: PicklistEntry;
+	isOver: boolean;
+	dropRef: ConnectDropTarget;
+	draggedEntry: PicklistEntry;
+}) {
 	return (
 		<div
-			className={`w-${props.width ?? "[150px]"} h-${props.height ?? "[100px]"} bg-base-100 rounded-lg p-1 flex items-center justify-center border-2 border-base-100 hover:border-primary`}
-			ref={dragRef as unknown as () => void}
+			ref={dropRef as any}
+			className={`w-full ${entry.next ? "h-full" : "h-4"}`}
 		>
-			<h1>
-				{props.rank !== undefined ? `${props.rank + 1}. ` : ""}
-				<span className="max-sm:hidden">Team</span>{" "}
-				<span className="text-accent">#{teamNumber}</span>
-			</h1>
-			{props.rank !== undefined && props.lastRank && props.picklist ? (
-				<div className="ml-2 space-x-1">
-					{props.rank > 0 && (
-						<button
-							className="btn btn-primary btn-sm"
-							onClick={() => changeTeamRank(-1)}
-						>
-							<FaArrowUp />
-						</button>
-					)}
-					{props.rank < props.lastRank && (
-						<button
-							className="btn btn-primary btn-sm"
-							onClick={() => changeTeamRank(1)}
-						>
-							<FaArrowDown />
-						</button>
-					)}
+			{isOver ? (
+				<div className="w-full my-2">
+					<TeamCard
+						entry={draggedEntry}
+						draggable={false}
+						rank={rank}
+						preview={true}
+					/>
 				</div>
 			) : (
-				""
+				<div className={`w-full ${entry.next ? "p-1" : "h-full"}`} />
 			)}
 		</div>
 	);
@@ -115,21 +173,19 @@ function TeamCard(props: {
 function PicklistCard(props: { picklist: Picklist; picklists: Picklist[] }) {
 	const picklist = props.picklist;
 
-	const [{ isOver }, dropRef] = useDrop({
+	const [{ isOver, entry }, dropRef] = useDrop({
 		accept: "team",
-		drop: (item: CardData) => {
-			if (item.picklistIndex === picklist.index) return;
+		drop: (item: PicklistEntry) => {
+			removeEntryFromItsPicklist(item);
 
-			removeTeamFromPicklist(item, props.picklists);
+			item = { number: item.number, next: picklist.head, picklist };
+			picklist.head = item;
 
-			if (!Includes(picklist.teams, item)) {
-				item.picklistIndex = picklist.index;
-				picklist.teams.push(item);
-				picklist.update(picklist);
-			}
+			picklist.update(picklist);
 		},
 		collect: (monitor) => ({
 			isOver: monitor.isOver(),
+			entry: monitor.getItem(),
 		}),
 	});
 
@@ -139,10 +195,7 @@ function PicklistCard(props: { picklist: Picklist; picklists: Picklist[] }) {
 	}
 
 	return (
-		<div
-			className="bg-base-200 min-h-[30rem] h-fit rounded-lg w-1/3 sm:w-1/6 min-h-32 flex flex-col items-center space-y-2 p-2 sm:p-4"
-			ref={dropRef as unknown as () => void}
-		>
+		<div className="bg-base-200 h-[30rem] rounded-lg w-1/3 sm:w-1/6 min-h-32 flex flex-col items-center p-2 sm:p-4">
 			<input
 				defaultValue={picklist.name}
 				className="w-[95%] input input-sm max-sm:hidden"
@@ -151,41 +204,55 @@ function PicklistCard(props: { picklist: Picklist; picklists: Picklist[] }) {
 			<h1 className="w-[95%] input input-sm input-disabled sm:hidden">
 				{picklist.name}
 			</h1>
-			{picklist.teams.map((team, index) => (
-				<TeamCard
-					cardData={team}
-					draggable={false}
-					key={team.number}
-					picklist={picklist}
-					rank={index}
-					lastRank={picklist.teams.length - 1}
-					width="full"
-					height="[50px]"
-				/>
-			))}
-			{isOver && <h1 className="font-semibold text-accent">Drop Here!</h1>}
+			<div
+				className={`w-full h-full flex flex-col ${!picklist.head && "mt-2"}`}
+			>
+				<div
+					ref={dropRef as any}
+					className={`w-full ${!picklist.head ? "h-full" : "min-h-fit h-2"} flex justify-center text-center`}
+				>
+					{isOver ? (
+						<div className={`w-full ${picklist.head && "my-2"}`}>
+							<TeamCard
+								entry={entry}
+								draggable={false}
+								rank={1}
+								preview={true}
+							/>
+						</div>
+					) : (
+						!picklist.head && (
+							<h1 className="font-semibold text-accent">Drop Here!</h1>
+						)
+					)}
+				</div>
+				{picklist.head && (
+					<TeamCard
+						entry={picklist.head}
+						draggable={false}
+						key={picklist.head.number}
+						picklist={picklist}
+						rank={isOver ? 2 : 1}
+					/>
+				)}
+			</div>
 		</div>
 	);
 }
 
 export function TeamList(props: {
-	teams: CardData[];
+	teams: PicklistEntry[];
 	picklists: Picklist[];
 	expectedTeamCount: number;
 }) {
-	const [{ isOver }, dropRef] = useDrop({
+	const [, dropRef] = useDrop({
 		accept: "team",
-		drop: (item: CardData) => {
-			removeTeamFromPicklist(item, props.picklists);
-		},
-		collect: (monitor) => ({
-			isOver: monitor.isOver(),
-		}),
+		drop: removeEntryFromItsPicklist,
 	});
 
 	return (
 		<div
-			ref={dropRef as unknown as () => void}
+			ref={dropRef as any}
 			className="w-full h-fit flex flex-row bg-base-300 space-x-2 p-2 overflow-x-scroll"
 		>
 			{props.teams
@@ -193,7 +260,7 @@ export function TeamList(props: {
 				.map((team) => (
 					<TeamCard
 						draggable={true}
-						cardData={team}
+						entry={team}
 						key={team.number}
 					/>
 				))}
@@ -210,7 +277,7 @@ export default function PicklistScreen(props: {
 	teams: number[];
 	reports: Report[];
 	expectedTeamCount: number;
-	picklist: DbPicklist;
+	picklist: CompPicklistGroup;
 	compId: string;
 }) {
 	const [picklists, setPicklists] = useState<Picklist[]>([]);
@@ -225,25 +292,25 @@ export default function PicklistScreen(props: {
 
 	const teams = props.teams.map((team) => ({ number: team }));
 
-	const savePicklists = useCallback(
-		(picklists: Picklist[]) => {
-			const picklistDict = picklists.reduce<DbPicklist>(
-				(acc, picklist) => {
-					acc.picklists[picklist.name] = picklist.teams.map(
-						(team) => team.number,
-					);
-					return acc;
-				},
-				{
-					_id: props.picklist._id,
-					picklists: {},
-				},
-			);
-
-			api.updatePicklist(picklistDict);
-		},
-		[props.picklist._id],
-	);
+	useEffect(() => {
+		const picklistDict = picklists.reduce<CompPicklistGroup>(
+			(acc, picklist) => {
+				const picklistArray: number[] = [];
+				for (let curr = picklist.head; curr; curr = curr.next) {
+					picklistArray.push(curr.number);
+				}
+
+				acc.picklists[picklist.name] = picklistArray;
+				return acc;
+			},
+			{
+				_id: props.picklist._id,
+				picklists: {},
+			},
+		);
+
+		api.updatePicklist(picklistDict);
+	}, [props.picklist._id, picklists]);
 
 	const updatePicklist = useCallback(
 		(picklist: Picklist) => {
@@ -256,26 +323,39 @@ export default function PicklistScreen(props: {
 					}
 				});
 
-				savePicklists(newPicklists);
 				return newPicklists;
 			});
 		},
-		[setPicklists, savePicklists],
+		[setPicklists],
 	);
 
-	const loadDbPicklist = useCallback(
-		(picklistDict: DbPicklist) => {
+	const loadCompPicklistGroup = useCallback(
+		(picklistDict: CompPicklistGroup) => {
 			setPicklists(
-				Object.entries(picklistDict.picklists).map((picklist, index) => {
+				Object.entries(picklistDict.picklists).map(([name, teams], index) => {
 					const newPicklist: Picklist = {
 						index,
-						name: picklist[0],
-						teams: picklist[1].map((team: number) => ({ number: team })),
+						name,
+						head: undefined,
 						update: updatePicklist,
 					};
 
-					for (const team of newPicklist.teams) {
-						team.picklistIndex = newPicklist.index;
+					if (teams.length > 0) {
+						let curr: PicklistEntry = {
+							number: teams[0],
+							next: undefined,
+							picklist: newPicklist,
+						};
+						newPicklist.head = curr;
+
+						for (let i = 1; i < teams.length; i++) {
+							curr.next = {
+								number: teams[i],
+								next: undefined,
+								picklist: newPicklist,
+							};
+							curr = curr.next;
+						}
 					}
 
 					return newPicklist;
@@ -291,10 +371,10 @@ export default function PicklistScreen(props: {
 		setLoadingPicklists(LoadState.Loading);
 		api.getPicklist(props.picklist?._id).then((picklist) => {
 			if (picklist) {
-				loadDbPicklist(picklist);
+				loadCompPicklistGroup(picklist);
 			}
 		});
-		loadDbPicklist(props.picklist);
+		loadCompPicklistGroup(props.picklist);
 
 		setLoadingPicklists(LoadState.Loaded);
 	}, [
@@ -303,31 +383,38 @@ export default function PicklistScreen(props: {
 		LoadState.Loading,
 		LoadState.Loaded,
 		props.picklist,
-		loadDbPicklist,
+		loadCompPicklistGroup,
 	]);
 
 	const addPicklist = () => {
 		const newPicklist: Picklist = {
 			index: picklists.length,
 			name: `Picklist ${picklists.length + 1}`,
-			teams: [],
+			head: undefined,
 			update: updatePicklist,
 		};
 
 		const newPicklists = [...picklists, newPicklist];
-		savePicklists(newPicklists);
 		setPicklists(newPicklists);
 	};
 
+	const [, dropRef] = useDrop({
+		accept: "team",
+		drop: removeEntryFromItsPicklist,
+	});
+
 	return (
 		<div className="w-full h-fit flex flex-col space-y-2">
 			<TeamList
 				teams={teams}
 				picklists={picklists}
 				expectedTeamCount={props.expectedTeamCount}
-			></TeamList>
+			/>
 
-			<div className="w-full min-h-[30rem] h-fit px-4 py-2 flex flex-row space-x-3">
+			<div
+				ref={dropRef as any}
+				className="w-full min-h-[30rem] h-fit px-4 py-2 flex flex-row space-x-3"
+			>
 				{loadingPicklists === LoadState.Loading ? (
 					<div className="w-full h-full flex items-center justify-center">
 						<div className="loading loading-spinner" />
@@ -344,7 +431,7 @@ export default function PicklistScreen(props: {
 							key={picklist.index}
 							picklist={picklist}
 							picklists={picklists}
-						></PicklistCard>
+						/>
 					))
 				)}
 			</div>
@@ -354,7 +441,7 @@ export default function PicklistScreen(props: {
 					className="max-sm:hidden btn btn-circle btn-lg btn-primary absolute right-10 bottom-[21rem] animate-pulse font-bold "
 					onClick={addPicklist}
 				>
-					<FaPlus></FaPlus>
+					<FaPlus />
 				</button>
 			)}
 		</div>
diff --git a/lib/Types.ts b/lib/Types.ts
index e3848d99..f8f2e2db 100644
--- a/lib/Types.ts
+++ b/lib/Types.ts
@@ -559,7 +559,7 @@ export interface EventData {
 	oprRanking: TheBlueAlliance.OprRanking;
 }
 
-export type DbPicklist = {
+export type CompPicklistGroup = {
 	_id: string;
 	picklists: {
 		[name: string]: number[];
diff --git a/lib/api/AccessLevels.ts b/lib/api/AccessLevels.ts
index dd7e233b..9f95c0e3 100644
--- a/lib/api/AccessLevels.ts
+++ b/lib/api/AccessLevels.ts
@@ -1,7 +1,7 @@
 import { NextApiRequest } from "next";
 import {
 	Competition,
-	DbPicklist,
+	CompPicklistGroup,
 	Match,
 	Pitreport,
 	Report,
@@ -404,7 +404,7 @@ namespace AccessLevels {
 
 		const picklist = await (
 			await db
-		).findObjectById<DbPicklist>(
+		).findObjectById<CompPicklistGroup>(
 			CollectionId.Picklists,
 			new ObjectId(picklistId),
 		);
diff --git a/lib/api/ApiUtils.ts b/lib/api/ApiUtils.ts
index 8507c08e..c2b49a26 100644
--- a/lib/api/ApiUtils.ts
+++ b/lib/api/ApiUtils.ts
@@ -8,7 +8,7 @@ import {
 	Team,
 	Report,
 	Competition,
-	DbPicklist,
+	CompPicklistGroup,
 	Match,
 	Pitreport,
 	Season,
@@ -67,7 +67,10 @@ export function getCompFromSubjectiveReport(
 		});
 }
 
-export function getCompFromPicklist(db: DbInterface, picklist: DbPicklist) {
+export function getCompFromPicklist(
+	db: DbInterface,
+	picklist: CompPicklistGroup,
+) {
 	return db.findObject<Competition>(CollectionId.Competitions, {
 		picklist: picklist._id?.toString(),
 	});
@@ -119,7 +122,7 @@ export async function getTeamFromPitReport(db: DbInterface, report: Pitreport) {
 
 export async function getTeamFromPicklist(
 	db: DbInterface,
-	picklist: DbPicklist,
+	picklist: CompPicklistGroup,
 ) {
 	return getTeamFromDocument(db, getCompFromPicklist, picklist);
 }
diff --git a/lib/api/ClientApi.ts b/lib/api/ClientApi.ts
index fe92f229..6f8a936a 100644
--- a/lib/api/ClientApi.ts
+++ b/lib/api/ClientApi.ts
@@ -6,7 +6,7 @@ import {
 	Alliance,
 	Competition,
 	CompetitonNameIdPair,
-	DbPicklist,
+	CompPicklistGroup,
 	League,
 	Match,
 	MatchType,
@@ -1235,7 +1235,7 @@ export default class ClientApi extends NextApiTemplate<ApiDependencies> {
 
 	getPicklistFromComp = createNextRoute<
 		[string],
-		DbPicklist | undefined,
+		CompPicklistGroup | undefined,
 		ApiDependencies,
 		{ comp: Competition }
 	>({
@@ -1244,7 +1244,7 @@ export default class ClientApi extends NextApiTemplate<ApiDependencies> {
 		handler: async (req, res, { db: dbPromise }, { comp }, [compId]) => {
 			const db = await dbPromise;
 
-			const picklist = await db.findObjectById<DbPicklist>(
+			const picklist = await db.findObjectById<CompPicklistGroup>(
 				CollectionId.Picklists,
 				new ObjectId(comp.picklist),
 			);
@@ -1255,9 +1255,9 @@ export default class ClientApi extends NextApiTemplate<ApiDependencies> {
 
 	getPicklist = createNextRoute<
 		[string],
-		DbPicklist | undefined,
+		CompPicklistGroup | undefined,
 		ApiDependencies,
-		{ picklist: DbPicklist }
+		{ picklist: CompPicklistGroup }
 	>({
 		isAuthorized: (req, res, deps, [picklistId]) =>
 			AccessLevels.IfOnTeamThatOwnsPicklist(req, res, deps, picklistId),
@@ -1267,10 +1267,10 @@ export default class ClientApi extends NextApiTemplate<ApiDependencies> {
 	});
 
 	updatePicklist = createNextRoute<
-		[DbPicklist],
+		[CompPicklistGroup],
 		{ result: string },
 		ApiDependencies,
-		{ picklist: DbPicklist }
+		{ picklist: CompPicklistGroup }
 	>({
 		isAuthorized: (req, res, deps, [picklist]) =>
 			AccessLevels.IfOnTeamThatOwnsPicklist(req, res, deps, picklist._id),
diff --git a/lib/client/CollectionId.ts b/lib/client/CollectionId.ts
index c1051ad9..5eb209a3 100644
--- a/lib/client/CollectionId.ts
+++ b/lib/client/CollectionId.ts
@@ -9,7 +9,7 @@ import {
 	Account,
 	Session,
 	Pitreport,
-	DbPicklist,
+	CompPicklistGroup,
 	WebhookHolder,
 } from "../Types";
 
@@ -54,7 +54,7 @@ export type CollectionIdToType<Id extends CollectionId> =
 									: Id extends CollectionId.PitReports
 										? Pitreport
 										: Id extends CollectionId.Picklists
-											? DbPicklist
+											? CompPicklistGroup
 											: Id extends CollectionId.SubjectiveReports
 												? SubjectiveReport
 												: Id extends CollectionId.Webhooks
diff --git a/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.tsx b/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.tsx
index 95d80fdf..e073c617 100644
--- a/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.tsx
+++ b/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.tsx
@@ -10,7 +10,7 @@ import {
 	User,
 	Team,
 	Competition,
-	DbPicklist,
+	CompPicklistGroup,
 	Season,
 } from "@/lib/Types";
 import { useCurrentSession } from "@/lib/client/useCurrentSession";
diff --git a/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/stats.tsx b/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/stats.tsx
index ce8c2398..276ca4fb 100644
--- a/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/stats.tsx
+++ b/pages/[teamSlug]/[seasonSlug]/[competitonSlug]/stats.tsx
@@ -6,7 +6,7 @@ import {
 	Pitreport,
 	SubjectiveReport,
 	Report,
-	DbPicklist,
+	CompPicklistGroup,
 } from "@/lib/Types";
 import { useState, useEffect, useCallback } from "react";
 import Container from "@/components/Container";
@@ -30,7 +30,7 @@ export default function Stats(props: {
 	pitReports: Pitreport[];
 	subjectiveReports: SubjectiveReport[];
 	competition: Competition;
-	picklists: DbPicklist;
+	picklists: CompPicklistGroup;
 }) {
 	const [update, setUpdate] = useState(Date.now());
 	const [updating, setUpdating] = useState(false);
@@ -86,11 +86,6 @@ export default function Stats(props: {
 		Object.keys(r.robotComments).forEach((c) => teams.add(+c)),
 	); //+str converts to number
 
-	console.log("Reports", reports);
-	console.log("PitReports", pitReports);
-	console.log("SubjectiveReports", subjectiveReports);
-	console.log("Teams", teams);
-
 	return (
 		<Container
 			requireAuthentication={false}
@@ -209,11 +204,10 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 		},
 	);
 
-	const picklists = await db.findObjectById<DbPicklist>(
+	const picklists = await db.findObjectById<CompPicklistGroup>(
 		CollectionId.Picklists,
 		new ObjectId(resolved.competition?.picklist),
 	);
-	console.log("Found picklists:", resolved.competition?.picklist, picklists);
 
 	return {
 		props: {
diff --git a/tests/lib/api/AccessLevels.test.ts b/tests/lib/api/AccessLevels.test.ts
index fcafa6c9..4e06ed87 100644
--- a/tests/lib/api/AccessLevels.test.ts
+++ b/tests/lib/api/AccessLevels.test.ts
@@ -11,7 +11,7 @@ import {
 	User,
 	Report,
 	Pitreport,
-	DbPicklist,
+	CompPicklistGroup,
 } from "@/lib/Types";
 import { ObjectId } from "bson";
 
@@ -800,7 +800,7 @@ describe(`AccessLevels.${AccessLevels.IfOnTeamThatOwnsPicklist.name}`, () => {
 
 		const picklist = await db.addObject(
 			CollectionId.Picklists,
-			{} as any as DbPicklist,
+			{} as any as CompPicklistGroup,
 		);
 		const comp = await db.addObject(CollectionId.Competitions, {
 			picklist: picklist._id!.toString(),
@@ -830,7 +830,7 @@ describe(`AccessLevels.${AccessLevels.IfOnTeamThatOwnsPicklist.name}`, () => {
 
 		const picklist = await db.addObject(
 			CollectionId.Picklists,
-			{} as any as DbPicklist,
+			{} as any as CompPicklistGroup,
 		);
 		const comp = await db.addObject(CollectionId.Competitions, {
 			picklist: picklist._id!.toString(),

From dce61868e6e55500d8ee6dcded01b28f40da0d42 Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Thu, 2 Jan 2025 20:17:50 -0500
Subject: [PATCH 2/9] More debugging

---
 components/stats/Picklist.tsx | 78 +++++++++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 18 deletions(-)

diff --git a/components/stats/Picklist.tsx b/components/stats/Picklist.tsx
index 20b83fd8..af4b12d9 100644
--- a/components/stats/Picklist.tsx
+++ b/components/stats/Picklist.tsx
@@ -2,8 +2,9 @@ import { CompPicklistGroup, Report } from "@/lib/Types";
 
 import { ConnectDropTarget, useDrag, useDrop } from "react-dnd";
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import { FaPlus } from "react-icons/fa";
+import { FaPlus, FaTrash } from "react-icons/fa";
 import ClientApi from "@/lib/api/ClientApi";
+import { ObjectId } from "bson";
 
 const SHOW_PICKLISTS_ON_TEAM_CARDS = true;
 
@@ -12,12 +13,14 @@ type Picklist = {
 	name: string;
 	head: PicklistEntry | undefined;
 	update: (picklist: Picklist) => void;
+	delete: () => void;
 };
 
 type PicklistEntry = {
 	number: number;
 	next?: PicklistEntry;
 	picklist?: Picklist;
+	id?: string;
 };
 
 function removeEntryFromItsPicklist(entry: PicklistEntry) {
@@ -30,6 +33,7 @@ function removeEntryFromItsPicklist(entry: PicklistEntry) {
 			while (curr) {
 				if (curr.next?.number === entry.number) {
 					curr.next = curr.next.next;
+					break;
 				}
 
 				curr = curr.next;
@@ -52,7 +56,8 @@ function TeamCard(props: {
 	width?: string;
 	preview?: boolean;
 }) {
-	const { entry, width, rank, preview } = props;
+	const { entry, width, rank, preview, picklist } = props;
+	if (picklist) entry.picklist = picklist;
 
 	const [, dragRef] = useDrag({
 		type: "team",
@@ -69,22 +74,32 @@ function TeamCard(props: {
 				// If you're moving a card into the same spot, don't do anything
 				if (
 					entry.number === dragged.number &&
+					entry.next === dragged.next &&
 					entry.picklist === dragged.picklist
 				)
 					return;
 
-				const picklist = removeEntryFromItsPicklist(dragged);
+				removeEntryFromItsPicklist(dragged);
 
 				// Create a copy, don't operate on the original
 				dragged = {
 					number: dragged.number,
 					next: entry.next,
 					picklist: entry.picklist,
+					id: dragged.id,
 				};
 
 				entry.next = dragged;
 
-				picklist?.update(picklist);
+				console.log("Entry.next:", entry.next, entry.picklist?.head?.next);
+				console.log("Head equal:", entry === entry.picklist?.head);
+				console.log(
+					"Picklists equal:",
+					entry.picklist === entry.next?.picklist &&
+						entry.picklist === picklist,
+				);
+
+				entry.picklist?.update(entry.picklist);
 			},
 			collect: (monitor) => ({
 				isOverInsert: monitor.isOver(),
@@ -170,7 +185,7 @@ function InsertDropSite({
 	);
 }
 
-function PicklistCard(props: { picklist: Picklist; picklists: Picklist[] }) {
+function PicklistCard(props: { picklist: Picklist }) {
 	const picklist = props.picklist;
 
 	const [{ isOver, entry }, dropRef] = useDrop({
@@ -178,7 +193,12 @@ function PicklistCard(props: { picklist: Picklist; picklists: Picklist[] }) {
 		drop: (item: PicklistEntry) => {
 			removeEntryFromItsPicklist(item);
 
-			item = { number: item.number, next: picklist.head, picklist };
+			item = {
+				number: item.number,
+				next: picklist.head,
+				picklist,
+				id: item.id,
+			};
 			picklist.head = item;
 
 			picklist.update(picklist);
@@ -195,15 +215,25 @@ function PicklistCard(props: { picklist: Picklist; picklists: Picklist[] }) {
 	}
 
 	return (
-		<div className="bg-base-200 h-[30rem] rounded-lg w-1/3 sm:w-1/6 min-h-32 flex flex-col items-center p-2 sm:p-4">
-			<input
-				defaultValue={picklist.name}
-				className="w-[95%] input input-sm max-sm:hidden"
-				onChange={changeName}
-			/>
-			<h1 className="w-[95%] input input-sm input-disabled sm:hidden">
-				{picklist.name}
-			</h1>
+		<div className="bg-base-200 h-full rounded-lg w-1/3 sm:w-1/6 min-h-32 flex flex-col items-center p-2 sm:p-4">
+			<div className="flex flex-row items-center">
+				<input
+					defaultValue={picklist.name}
+					className="w-[95%] input input-sm max-sm:hidden"
+					onChange={changeName}
+				/>
+				<h1 className="w-[95%] input input-sm input-disabled sm:hidden">
+					{picklist.name}
+				</h1>
+				<button className="btn btn-xs btn-ghost ml-1">
+					<FaTrash
+						onClick={() =>
+							confirm(`Are you sure you want to delete ${picklist.name}?`) &&
+							picklist.delete()
+						}
+					/>
+				</button>
+			</div>
 			<div
 				className={`w-full h-full flex flex-col ${!picklist.head && "mt-2"}`}
 			>
@@ -230,7 +260,6 @@ function PicklistCard(props: { picklist: Picklist; picklists: Picklist[] }) {
 					<TeamCard
 						entry={picklist.head}
 						draggable={false}
-						key={picklist.head.number}
 						picklist={picklist}
 						rank={isOver ? 2 : 1}
 					/>
@@ -329,6 +358,16 @@ export default function PicklistScreen(props: {
 		[setPicklists],
 	);
 
+	const deletePicklist = useCallback(
+		(picklist: Picklist) => {
+			setPicklists((old) => {
+				const newPicklists = old.filter((p) => p.index !== picklist.index);
+				return newPicklists;
+			});
+		},
+		[setPicklists],
+	);
+
 	const loadCompPicklistGroup = useCallback(
 		(picklistDict: CompPicklistGroup) => {
 			setPicklists(
@@ -338,6 +377,7 @@ export default function PicklistScreen(props: {
 						name,
 						head: undefined,
 						update: updatePicklist,
+						delete: () => deletePicklist(newPicklist),
 					};
 
 					if (teams.length > 0) {
@@ -345,6 +385,7 @@ export default function PicklistScreen(props: {
 							number: teams[0],
 							next: undefined,
 							picklist: newPicklist,
+							id: new ObjectId().toHexString(),
 						};
 						newPicklist.head = curr;
 
@@ -353,6 +394,7 @@ export default function PicklistScreen(props: {
 								number: teams[i],
 								next: undefined,
 								picklist: newPicklist,
+								id: new ObjectId().toHexString(),
 							};
 							curr = curr.next;
 						}
@@ -392,6 +434,7 @@ export default function PicklistScreen(props: {
 			name: `Picklist ${picklists.length + 1}`,
 			head: undefined,
 			update: updatePicklist,
+			delete: () => deletePicklist(newPicklist),
 		};
 
 		const newPicklists = [...picklists, newPicklist];
@@ -413,7 +456,7 @@ export default function PicklistScreen(props: {
 
 			<div
 				ref={dropRef as any}
-				className="w-full min-h-[30rem] h-fit px-4 py-2 flex flex-row space-x-3"
+				className="w-full min-h-[30rem] h-[30rem] px-4 py-2 flex flex-row space-x-3"
 			>
 				{loadingPicklists === LoadState.Loading ? (
 					<div className="w-full h-full flex items-center justify-center">
@@ -430,7 +473,6 @@ export default function PicklistScreen(props: {
 						<PicklistCard
 							key={picklist.index}
 							picklist={picklist}
-							picklists={picklists}
 						/>
 					))
 				)}

From f418b787a98b1479b889130a5b015f1b75e67c3d Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Sun, 5 Jan 2025 22:20:07 -0500
Subject: [PATCH 3/9] Picklist ordering works, added strikethroughs

---
 components/stats/Picklist.tsx | 162 ++++++++++++++++++++++++++++------
 lib/Types.ts                  |   1 +
 lib/api/ClientApi.ts          |   2 +-
 3 files changed, 138 insertions(+), 27 deletions(-)

diff --git a/components/stats/Picklist.tsx b/components/stats/Picklist.tsx
index af4b12d9..57caf93d 100644
--- a/components/stats/Picklist.tsx
+++ b/components/stats/Picklist.tsx
@@ -1,12 +1,13 @@
 import { CompPicklistGroup, Report } from "@/lib/Types";
-
 import { ConnectDropTarget, useDrag, useDrop } from "react-dnd";
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import { FaPlus, FaTrash } from "react-icons/fa";
+import { FaPlus, FaStrikethrough, FaTrash } from "react-icons/fa";
 import ClientApi from "@/lib/api/ClientApi";
 import { ObjectId } from "bson";
 
+// Be sure to disable for production!
 const SHOW_PICKLISTS_ON_TEAM_CARDS = true;
+const SHOW_CARD_IDS = true;
 
 type Picklist = {
 	index: number;
@@ -24,9 +25,10 @@ type PicklistEntry = {
 };
 
 function removeEntryFromItsPicklist(entry: PicklistEntry) {
+	console.log("removing", entry);
 	if (entry.picklist) {
 		const picklist = entry.picklist;
-		if (picklist.head?.number === entry.number) {
+		if (picklist.head?.id && picklist.head?.id === entry.id) {
 			picklist.head = picklist.head.next;
 		} else {
 			let curr: PicklistEntry | undefined = picklist.head;
@@ -48,6 +50,17 @@ function removeEntryFromItsPicklist(entry: PicklistEntry) {
 	}
 }
 
+function getPicklistLength(picklist: Picklist) {
+	let length = 0;
+	let curr = picklist.head;
+	while (curr) {
+		length++;
+		curr = curr.next;
+	}
+
+	return length;
+}
+
 function TeamCard(props: {
 	entry: PicklistEntry;
 	draggable: boolean;
@@ -55,14 +68,27 @@ function TeamCard(props: {
 	rank?: number;
 	width?: string;
 	preview?: boolean;
+	strikeThroughs: number[];
+	toggleStrikethrough?: (team: number) => void;
 }) {
-	const { entry, width, rank, preview, picklist } = props;
+	const {
+		entry,
+		width,
+		rank,
+		preview,
+		picklist,
+		strikeThroughs,
+		toggleStrikethrough,
+	} = props;
 	if (picklist) entry.picklist = picklist;
 
 	const [, dragRef] = useDrag({
 		type: "team",
 		item: () => {
-			return props.entry;
+			return {
+				...props.entry,
+				id: props.entry.id ?? new ObjectId().toString(),
+			};
 		},
 	});
 
@@ -83,22 +109,14 @@ function TeamCard(props: {
 
 				// Create a copy, don't operate on the original
 				dragged = {
+					id: dragged.id,
 					number: dragged.number,
 					next: entry.next,
 					picklist: entry.picklist,
-					id: dragged.id,
 				};
 
 				entry.next = dragged;
 
-				console.log("Entry.next:", entry.next, entry.picklist?.head?.next);
-				console.log("Head equal:", entry === entry.picklist?.head);
-				console.log(
-					"Picklists equal:",
-					entry.picklist === entry.next?.picklist &&
-						entry.picklist === picklist,
-				);
-
 				entry.picklist?.update(entry.picklist);
 			},
 			collect: (monitor) => ({
@@ -114,10 +132,19 @@ function TeamCard(props: {
 					className={`w-${width ?? "full"} bg-base-100 rounded-lg p-1 flex items-center justify-center border-2 border-base-100 hover:border-primary ${preview && "animate-pulse"}`}
 					ref={dragRef as unknown as () => void}
 				>
-					<h1>
+					<h1
+						className={
+							strikeThroughs.includes(entry.number) ? "line-through" : ""
+						}
+					>
 						{rank !== undefined ? `${rank}. ` : ""}
 						<span className="max-sm:hidden">Team</span>{" "}
 						<span className="text-accent">#{entry.number}</span>
+						{SHOW_CARD_IDS && (
+							<span className="text-secondary">
+								.{entry.id?.slice(entry.id.length - 3)}
+							</span>
+						)}
 						{SHOW_PICKLISTS_ON_TEAM_CARDS && entry.picklist && (
 							<span className="text-xs text-accent">
 								{" "}
@@ -125,6 +152,14 @@ function TeamCard(props: {
 							</span>
 						)}
 					</h1>
+					{toggleStrikethrough && (
+						<button
+							className="btn btn-xs btn-ghost ml-1"
+							onClick={() => toggleStrikethrough(entry.number)}
+						>
+							<FaStrikethrough />
+						</button>
+					)}
 				</div>
 				{rank && !preview && (
 					<InsertDropSite
@@ -133,6 +168,7 @@ function TeamCard(props: {
 						isOver={isOverInsert}
 						dropRef={insertRef}
 						draggedEntry={draggedInsertEntry}
+						strikeThroughs={strikeThroughs}
 					/>
 				)}
 			</div>
@@ -142,6 +178,8 @@ function TeamCard(props: {
 					entry={entry.next}
 					draggable={true}
 					picklist={props.picklist}
+					strikeThroughs={strikeThroughs}
+					toggleStrikethrough={toggleStrikethrough}
 				/>
 			)}
 		</>
@@ -157,12 +195,14 @@ function InsertDropSite({
 	isOver,
 	dropRef,
 	draggedEntry,
+	strikeThroughs,
 }: {
 	rank: number;
 	entry: PicklistEntry;
 	isOver: boolean;
 	dropRef: ConnectDropTarget;
 	draggedEntry: PicklistEntry;
+	strikeThroughs: number[];
 }) {
 	return (
 		<div
@@ -176,6 +216,7 @@ function InsertDropSite({
 						draggable={false}
 						rank={rank}
 						preview={true}
+						strikeThroughs={strikeThroughs}
 					/>
 				</div>
 			) : (
@@ -185,10 +226,10 @@ function InsertDropSite({
 	);
 }
 
-function PicklistCard(props: { picklist: Picklist }) {
+function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 	const picklist = props.picklist;
 
-	const [{ isOver, entry }, dropRef] = useDrop({
+	const [{ isOver: isOverHead, entry: headEntry }, headDropRef] = useDrop({
 		accept: "team",
 		drop: (item: PicklistEntry) => {
 			removeEntryFromItsPicklist(item);
@@ -209,13 +250,39 @@ function PicklistCard(props: { picklist: Picklist }) {
 		}),
 	});
 
+	const [{ isOver: isOverTail, entry: tailEntry }, tailDropRef] = useDrop({
+		accept: "team",
+		drop: (item: PicklistEntry) => {
+			console.log("dropped", item);
+			removeEntryFromItsPicklist(item);
+			item.picklist = picklist;
+
+			let tail = picklist.head;
+			if (!tail) {
+				picklist.head = item;
+			} else {
+				while (tail.next) {
+					tail = tail.next;
+				}
+
+				tail.next = item;
+			}
+
+			picklist.update(picklist);
+		},
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			entry: monitor.getItem(),
+		}),
+	});
+
 	function changeName(e: ChangeEvent<HTMLInputElement>) {
 		picklist.name = e.target.value;
 		picklist.update(picklist);
 	}
 
 	return (
-		<div className="bg-base-200 h-full rounded-lg w-1/3 sm:w-1/6 min-h-32 flex flex-col items-center p-2 sm:p-4">
+		<div className="bg-base-200 min-h-full h-fit rounded-lg w-1/3 sm:w-1/6 flex flex-col items-center p-2 sm:p-4">
 			<div className="flex flex-row items-center">
 				<input
 					defaultValue={picklist.name}
@@ -238,16 +305,17 @@ function PicklistCard(props: { picklist: Picklist }) {
 				className={`w-full h-full flex flex-col ${!picklist.head && "mt-2"}`}
 			>
 				<div
-					ref={dropRef as any}
+					ref={headDropRef as any}
 					className={`w-full ${!picklist.head ? "h-full" : "min-h-fit h-2"} flex justify-center text-center`}
 				>
-					{isOver ? (
+					{isOverHead ? (
 						<div className={`w-full ${picklist.head && "my-2"}`}>
 							<TeamCard
-								entry={entry}
+								entry={headEntry}
 								draggable={false}
 								rank={1}
 								preview={true}
+								strikeThroughs={props.strikethroughs}
 							/>
 						</div>
 					) : (
@@ -261,9 +329,26 @@ function PicklistCard(props: { picklist: Picklist }) {
 						entry={picklist.head}
 						draggable={false}
 						picklist={picklist}
-						rank={isOver ? 2 : 1}
+						rank={isOverHead ? 2 : 1}
+						strikeThroughs={props.strikethroughs}
 					/>
 				)}
+				<div
+					ref={tailDropRef as any}
+					className={`w-full h-auto grow flex justify-center text-center`}
+				>
+					{isOverTail && (
+						<div className="w-full -translate-y-2">
+							<TeamCard
+								entry={tailEntry}
+								draggable={false}
+								rank={getPicklistLength(picklist) + 1}
+								preview={true}
+								strikeThroughs={props.strikethroughs}
+							/>
+						</div>
+					)}
+				</div>
 			</div>
 		</div>
 	);
@@ -273,6 +358,8 @@ export function TeamList(props: {
 	teams: PicklistEntry[];
 	picklists: Picklist[];
 	expectedTeamCount: number;
+	strikethroughs: number[];
+	toggleStrikethrough: (team: number) => void;
 }) {
 	const [, dropRef] = useDrop({
 		accept: "team",
@@ -291,6 +378,8 @@ export function TeamList(props: {
 						draggable={true}
 						entry={team}
 						key={team.number}
+						strikeThroughs={props.strikethroughs}
+						toggleStrikethrough={props.toggleStrikethrough}
 					/>
 				))}
 			{props.teams.length !== props.expectedTeamCount && (
@@ -319,6 +408,8 @@ export default function PicklistScreen(props: {
 
 	const [loadingPicklists, setLoadingPicklists] = useState(LoadState.NotLoaded);
 
+	const [strikethroughs, setStrikethroughs] = useState<number[]>([]);
+
 	const teams = props.teams.map((team) => ({ number: team }));
 
 	useEffect(() => {
@@ -335,6 +426,7 @@ export default function PicklistScreen(props: {
 			{
 				_id: props.picklist._id,
 				picklists: {},
+				strikethroughs,
 			},
 		);
 
@@ -370,6 +462,8 @@ export default function PicklistScreen(props: {
 
 	const loadCompPicklistGroup = useCallback(
 		(picklistDict: CompPicklistGroup) => {
+			setStrikethroughs(picklistDict.strikethroughs);
+
 			setPicklists(
 				Object.entries(picklistDict.picklists).map(([name, teams], index) => {
 					const newPicklist: Picklist = {
@@ -382,10 +476,10 @@ export default function PicklistScreen(props: {
 
 					if (teams.length > 0) {
 						let curr: PicklistEntry = {
+							id: new ObjectId().toString(),
 							number: teams[0],
 							next: undefined,
 							picklist: newPicklist,
-							id: new ObjectId().toHexString(),
 						};
 						newPicklist.head = curr;
 
@@ -394,7 +488,7 @@ export default function PicklistScreen(props: {
 								number: teams[i],
 								next: undefined,
 								picklist: newPicklist,
-								id: new ObjectId().toHexString(),
+								id: new ObjectId().toString(),
 							};
 							curr = curr.next;
 						}
@@ -407,11 +501,24 @@ export default function PicklistScreen(props: {
 		[updatePicklist],
 	);
 
+	const toggleStrikethrough = useCallback(
+		(team: number) => {
+			setStrikethroughs((old) => {
+				if (old.includes(team)) {
+					return old.filter((t) => t !== team);
+				} else {
+					return [...old, team];
+				}
+			});
+		},
+		[setStrikethroughs],
+	);
+
 	useEffect(() => {
 		if (loadingPicklists !== LoadState.NotLoaded) return;
 
 		setLoadingPicklists(LoadState.Loading);
-		api.getPicklist(props.picklist?._id).then((picklist) => {
+		api.getPicklistGroup(props.picklist?._id).then((picklist) => {
 			if (picklist) {
 				loadCompPicklistGroup(picklist);
 			}
@@ -452,11 +559,13 @@ export default function PicklistScreen(props: {
 				teams={teams}
 				picklists={picklists}
 				expectedTeamCount={props.expectedTeamCount}
+				strikethroughs={strikethroughs}
+				toggleStrikethrough={toggleStrikethrough}
 			/>
 
 			<div
 				ref={dropRef as any}
-				className="w-full min-h-[30rem] h-[30rem] px-4 py-2 flex flex-row space-x-3"
+				className="w-full min-h-[30rem] h-full px-4 py-2 flex flex-row space-x-3"
 			>
 				{loadingPicklists === LoadState.Loading ? (
 					<div className="w-full h-full flex items-center justify-center">
@@ -473,6 +582,7 @@ export default function PicklistScreen(props: {
 						<PicklistCard
 							key={picklist.index}
 							picklist={picklist}
+							strikethroughs={strikethroughs}
 						/>
 					))
 				)}
diff --git a/lib/Types.ts b/lib/Types.ts
index f8f2e2db..99b263b6 100644
--- a/lib/Types.ts
+++ b/lib/Types.ts
@@ -564,6 +564,7 @@ export type CompPicklistGroup = {
 	picklists: {
 		[name: string]: number[];
 	};
+	strikethroughs: number[];
 };
 
 /**
diff --git a/lib/api/ClientApi.ts b/lib/api/ClientApi.ts
index 6f8a936a..822218d4 100644
--- a/lib/api/ClientApi.ts
+++ b/lib/api/ClientApi.ts
@@ -1253,7 +1253,7 @@ export default class ClientApi extends NextApiTemplate<ApiDependencies> {
 		},
 	});
 
-	getPicklist = createNextRoute<
+	getPicklistGroup = createNextRoute<
 		[string],
 		CompPicklistGroup | undefined,
 		ApiDependencies,

From 70eaf61cfab9e042c265a3b7582489a29e1cf643 Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Mon, 6 Jan 2025 09:58:03 -0500
Subject: [PATCH 4/9] Styling and final functionality for picklists

---
 components/stats/Picklist.tsx | 36 ++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/components/stats/Picklist.tsx b/components/stats/Picklist.tsx
index 57caf93d..7f57bb84 100644
--- a/components/stats/Picklist.tsx
+++ b/components/stats/Picklist.tsx
@@ -129,7 +129,7 @@ function TeamCard(props: {
 		<>
 			<div className="flex flex-col w-full">
 				<div
-					className={`w-${width ?? "full"} bg-base-100 rounded-lg p-1 flex items-center justify-center border-2 border-base-100 hover:border-primary ${preview && "animate-pulse"}`}
+					className={`w-${width ?? "full"} bg-base-100 rounded-lg p-1 flex items-center justify-center border-2 border-base-100 hover:border-primary ${preview && "animate-pulse border-primary"}`}
 					ref={dragRef as unknown as () => void}
 				>
 					<h1
@@ -264,6 +264,7 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 				while (tail.next) {
 					tail = tail.next;
 				}
+				console.log("tail", tail);
 
 				tail.next = item;
 			}
@@ -282,7 +283,7 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 	}
 
 	return (
-		<div className="bg-base-200 min-h-full h-fit rounded-lg w-1/3 sm:w-1/6 flex flex-col items-center p-2 sm:p-4">
+		<div className="bg-base-200 min-h-[30rem] h-fit rounded-lg w-1/3 sm:w-1/6 flex flex-col items-center p-2 sm:p-4">
 			<div className="flex flex-row items-center">
 				<input
 					defaultValue={picklist.name}
@@ -301,14 +302,12 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 					/>
 				</button>
 			</div>
-			<div
-				className={`w-full h-full flex flex-col ${!picklist.head && "mt-2"}`}
-			>
+			<div className={`w-full grow flex flex-col ${!picklist.head && "mt-2"}`}>
 				<div
 					ref={headDropRef as any}
-					className={`w-full ${!picklist.head ? "h-full" : "min-h-fit h-2"} flex justify-center text-center`}
+					className={`w-full ${!picklist.head ? "h-full" : "min-h-fit h-2"} flex justify-center`}
 				>
-					{isOverHead ? (
+					{picklist.head && isOverHead && (
 						<div className={`w-full ${picklist.head && "my-2"}`}>
 							<TeamCard
 								entry={headEntry}
@@ -318,10 +317,6 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 								strikeThroughs={props.strikethroughs}
 							/>
 						</div>
-					) : (
-						!picklist.head && (
-							<h1 className="font-semibold text-accent">Drop Here!</h1>
-						)
 					)}
 				</div>
 				{picklist.head && (
@@ -335,9 +330,9 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 				)}
 				<div
 					ref={tailDropRef as any}
-					className={`w-full h-auto grow flex justify-center text-center`}
+					className={`w-full h-full grow flex justify-center ${!picklist.head && "pt-2"}`}
 				>
-					{isOverTail && (
+					{isOverTail ? (
 						<div className="w-full -translate-y-2">
 							<TeamCard
 								entry={tailEntry}
@@ -347,6 +342,12 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 								strikeThroughs={props.strikethroughs}
 							/>
 						</div>
+					) : (
+						!picklist.head && (
+							<h1 className="text-center font-semibold text-accent">
+								Drop Here!
+							</h1>
+						)
 					)}
 				</div>
 			</div>
@@ -412,6 +413,7 @@ export default function PicklistScreen(props: {
 
 	const teams = props.teams.map((team) => ({ number: team }));
 
+	// Save picklists
 	useEffect(() => {
 		const picklistDict = picklists.reduce<CompPicklistGroup>(
 			(acc, picklist) => {
@@ -514,6 +516,7 @@ export default function PicklistScreen(props: {
 		[setStrikethroughs],
 	);
 
+	// Load picklists
 	useEffect(() => {
 		if (loadingPicklists !== LoadState.NotLoaded) return;
 
@@ -550,7 +553,10 @@ export default function PicklistScreen(props: {
 
 	const [, dropRef] = useDrop({
 		accept: "team",
-		drop: removeEntryFromItsPicklist,
+		drop: (item: PicklistEntry, monitor) => {
+			if (monitor.didDrop()) return; // Check if another drop target handled the drop
+			removeEntryFromItsPicklist(item);
+		},
 	});
 
 	return (
@@ -590,7 +596,7 @@ export default function PicklistScreen(props: {
 
 			{loadingPicklists !== LoadState.Loading && (
 				<button
-					className="max-sm:hidden btn btn-circle btn-lg btn-primary absolute right-10 bottom-[21rem] animate-pulse font-bold "
+					className="max-sm:hidden btn btn-circle btn-lg btn-primary fixed right-10 bottom-10 animate-pulse font-bold "
 					onClick={addPicklist}
 				>
 					<FaPlus />

From 4381fcc5434d78013c5027cf9fe2d82eec4db8c0 Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Mon, 6 Jan 2025 12:06:49 -0500
Subject: [PATCH 5/9] Add unit tests for picklist utils

---
 components/stats/Picklist.tsx     | 194 ++---------------
 lib/api/ClientApi.ts              |   1 +
 lib/client/PicklistUtils.ts       | 193 +++++++++++++++++
 tests/lib/client/Picklist.test.ts | 335 ++++++++++++++++++++++++++++++
 4 files changed, 552 insertions(+), 171 deletions(-)
 create mode 100644 lib/client/PicklistUtils.ts
 create mode 100644 tests/lib/client/Picklist.test.ts

diff --git a/components/stats/Picklist.tsx b/components/stats/Picklist.tsx
index 7f57bb84..d735d3a0 100644
--- a/components/stats/Picklist.tsx
+++ b/components/stats/Picklist.tsx
@@ -4,62 +4,11 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react";
 import { FaPlus, FaStrikethrough, FaTrash } from "react-icons/fa";
 import ClientApi from "@/lib/api/ClientApi";
 import { ObjectId } from "bson";
+import { PicklistEntry, Picklist, insertAfterEntry, setHeadOfPicklist, setTailOfPicklist, getPicklistLength, removeEntryFromItsPicklist, savePicklistGroup, loadPicklistGroup } from "@/lib/client/PicklistUtils";
 
 // Be sure to disable for production!
-const SHOW_PICKLISTS_ON_TEAM_CARDS = true;
-const SHOW_CARD_IDS = true;
-
-type Picklist = {
-	index: number;
-	name: string;
-	head: PicklistEntry | undefined;
-	update: (picklist: Picklist) => void;
-	delete: () => void;
-};
-
-type PicklistEntry = {
-	number: number;
-	next?: PicklistEntry;
-	picklist?: Picklist;
-	id?: string;
-};
-
-function removeEntryFromItsPicklist(entry: PicklistEntry) {
-	console.log("removing", entry);
-	if (entry.picklist) {
-		const picklist = entry.picklist;
-		if (picklist.head?.id && picklist.head?.id === entry.id) {
-			picklist.head = picklist.head.next;
-		} else {
-			let curr: PicklistEntry | undefined = picklist.head;
-			while (curr) {
-				if (curr.next?.number === entry.number) {
-					curr.next = curr.next.next;
-					break;
-				}
-
-				curr = curr.next;
-			}
-		}
-
-		entry.picklist = undefined;
-
-		picklist.update(picklist);
-
-		return picklist;
-	}
-}
-
-function getPicklistLength(picklist: Picklist) {
-	let length = 0;
-	let curr = picklist.head;
-	while (curr) {
-		length++;
-		curr = curr.next;
-	}
-
-	return length;
-}
+const SHOW_PICKLISTS_ON_TEAM_CARDS = false;
+const SHOW_CARD_IDS = false;
 
 function TeamCard(props: {
 	entry: PicklistEntry;
@@ -96,29 +45,7 @@ function TeamCard(props: {
 	const [{ isOverInsert, draggedEntry: draggedInsertEntry }, insertRef] =
 		useDrop({
 			accept: "team",
-			drop: (dragged: PicklistEntry) => {
-				// If you're moving a card into the same spot, don't do anything
-				if (
-					entry.number === dragged.number &&
-					entry.next === dragged.next &&
-					entry.picklist === dragged.picklist
-				)
-					return;
-
-				removeEntryFromItsPicklist(dragged);
-
-				// Create a copy, don't operate on the original
-				dragged = {
-					id: dragged.id,
-					number: dragged.number,
-					next: entry.next,
-					picklist: entry.picklist,
-				};
-
-				entry.next = dragged;
-
-				entry.picklist?.update(entry.picklist);
-			},
+			drop: (dragged: PicklistEntry) => insertAfterEntry(entry, dragged),
 			collect: (monitor) => ({
 				isOverInsert: monitor.isOver(),
 				draggedEntry: monitor.getItem(),
@@ -231,19 +158,7 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 
 	const [{ isOver: isOverHead, entry: headEntry }, headDropRef] = useDrop({
 		accept: "team",
-		drop: (item: PicklistEntry) => {
-			removeEntryFromItsPicklist(item);
-
-			item = {
-				number: item.number,
-				next: picklist.head,
-				picklist,
-				id: item.id,
-			};
-			picklist.head = item;
-
-			picklist.update(picklist);
-		},
+		drop: (item: PicklistEntry) => setHeadOfPicklist(picklist, item),
 		collect: (monitor) => ({
 			isOver: monitor.isOver(),
 			entry: monitor.getItem(),
@@ -252,25 +167,7 @@ function PicklistCard(props: { picklist: Picklist; strikethroughs: number[] }) {
 
 	const [{ isOver: isOverTail, entry: tailEntry }, tailDropRef] = useDrop({
 		accept: "team",
-		drop: (item: PicklistEntry) => {
-			console.log("dropped", item);
-			removeEntryFromItsPicklist(item);
-			item.picklist = picklist;
-
-			let tail = picklist.head;
-			if (!tail) {
-				picklist.head = item;
-			} else {
-				while (tail.next) {
-					tail = tail.next;
-				}
-				console.log("tail", tail);
-
-				tail.next = item;
-			}
-
-			picklist.update(picklist);
-		},
+		drop: (item: PicklistEntry) => setTailOfPicklist(picklist, item),
 		collect: (monitor) => ({
 			isOver: monitor.isOver(),
 			entry: monitor.getItem(),
@@ -414,26 +311,10 @@ export default function PicklistScreen(props: {
 	const teams = props.teams.map((team) => ({ number: team }));
 
 	// Save picklists
-	useEffect(() => {
-		const picklistDict = picklists.reduce<CompPicklistGroup>(
-			(acc, picklist) => {
-				const picklistArray: number[] = [];
-				for (let curr = picklist.head; curr; curr = curr.next) {
-					picklistArray.push(curr.number);
-				}
-
-				acc.picklists[picklist.name] = picklistArray;
-				return acc;
-			},
-			{
-				_id: props.picklist._id,
-				picklists: {},
-				strikethroughs,
-			},
-		);
-
-		api.updatePicklist(picklistDict);
-	}, [props.picklist._id, picklists]);
+	useEffect(
+		() => savePicklistGroup(props.picklist._id, picklists, strikethroughs, api),
+		[props.picklist._id, picklists],
+	);
 
 	const updatePicklist = useCallback(
 		(picklist: Picklist) => {
@@ -462,45 +343,16 @@ export default function PicklistScreen(props: {
 		[setPicklists],
 	);
 
-	const loadCompPicklistGroup = useCallback(
-		(picklistDict: CompPicklistGroup) => {
-			setStrikethroughs(picklistDict.strikethroughs);
-
-			setPicklists(
-				Object.entries(picklistDict.picklists).map(([name, teams], index) => {
-					const newPicklist: Picklist = {
-						index,
-						name,
-						head: undefined,
-						update: updatePicklist,
-						delete: () => deletePicklist(newPicklist),
-					};
-
-					if (teams.length > 0) {
-						let curr: PicklistEntry = {
-							id: new ObjectId().toString(),
-							number: teams[0],
-							next: undefined,
-							picklist: newPicklist,
-						};
-						newPicklist.head = curr;
-
-						for (let i = 1; i < teams.length; i++) {
-							curr.next = {
-								number: teams[i],
-								next: undefined,
-								picklist: newPicklist,
-								id: new ObjectId().toString(),
-							};
-							curr = curr.next;
-						}
-					}
-
-					return newPicklist;
-				}),
-			);
-		},
-		[updatePicklist],
+	const loadPicklistGroupMemo = useCallback(
+		(picklistDict: CompPicklistGroup) =>
+			loadPicklistGroup(
+				picklistDict,
+				setStrikethroughs,
+				setPicklists,
+				updatePicklist,
+				deletePicklist,
+			),
+		[setStrikethroughs, setPicklists, updatePicklist, deletePicklist],
 	);
 
 	const toggleStrikethrough = useCallback(
@@ -523,10 +375,10 @@ export default function PicklistScreen(props: {
 		setLoadingPicklists(LoadState.Loading);
 		api.getPicklistGroup(props.picklist?._id).then((picklist) => {
 			if (picklist) {
-				loadCompPicklistGroup(picklist);
+				loadPicklistGroupMemo(picklist);
 			}
 		});
-		loadCompPicklistGroup(props.picklist);
+		loadPicklistGroupMemo(props.picklist);
 
 		setLoadingPicklists(LoadState.Loaded);
 	}, [
@@ -535,7 +387,7 @@ export default function PicklistScreen(props: {
 		LoadState.Loading,
 		LoadState.Loaded,
 		props.picklist,
-		loadCompPicklistGroup,
+		loadPicklistGroupMemo,
 	]);
 
 	const addPicklist = () => {
diff --git a/lib/api/ClientApi.ts b/lib/api/ClientApi.ts
index 822218d4..0a3fc7d4 100644
--- a/lib/api/ClientApi.ts
+++ b/lib/api/ClientApi.ts
@@ -405,6 +405,7 @@ export default class ClientApi extends NextApiTemplate<ApiDependencies> {
 
 			const picklist = await db.addObject(CollectionId.Picklists, {
 				picklists: {},
+				strikethroughs: [],
 			});
 
 			const comp = await db.addObject(
diff --git a/lib/client/PicklistUtils.ts b/lib/client/PicklistUtils.ts
new file mode 100644
index 00000000..709b411f
--- /dev/null
+++ b/lib/client/PicklistUtils.ts
@@ -0,0 +1,193 @@
+// @tested_by tests/lib/client/Picklist.test.ts
+
+import { ObjectId } from "bson";
+import { CompPicklistGroup } from "../Types";
+import ClientApi from "../api/ClientApi";
+
+export type Picklist = {
+	index: number;
+	name: string;
+	head: PicklistEntry | undefined;
+	update: (picklist: Picklist) => void;
+	delete: () => void;
+};
+
+export type PicklistEntry = {
+	number: number;
+	next?: PicklistEntry;
+	picklist?: Picklist;
+	id?: string;
+};
+
+export function getPicklistLength(picklist: Picklist) {
+	let length = 0;
+	let curr = picklist.head;
+	while (curr) {
+		length++;
+		curr = curr.next;
+	}
+
+	return length;
+}
+
+export function removeEntryFromItsPicklist(entry: PicklistEntry) {
+	if (entry.picklist) {
+		const picklist = entry.picklist;
+		if (picklist.head?.id && picklist.head?.id === entry.id) {
+			picklist.head = picklist.head.next;
+		} else {
+			let curr: PicklistEntry | undefined = picklist.head;
+			while (curr) {
+				if (curr.next?.number === entry.number) {
+					curr.next = curr.next.next;
+					break;
+				}
+
+				curr = curr.next;
+			}
+		}
+
+		entry.picklist = undefined;
+
+		picklist.update(picklist);
+
+		return picklist;
+	}
+}
+
+export function insertAfterEntry(entry: PicklistEntry, dragged: PicklistEntry) {
+	// If you're moving a card into the same spot, don't do anything
+	if (
+		entry.number === dragged.number &&
+		entry.next === dragged.next &&
+		entry.picklist === dragged.picklist
+	)
+		return;
+
+	removeEntryFromItsPicklist(dragged);
+
+	// Create a copy, don't operate on the original
+	dragged = {
+		id: dragged.id,
+		number: dragged.number,
+		next: entry.next,
+		picklist: entry.picklist,
+	};
+
+	entry.next = dragged;
+
+	entry.picklist?.update(entry.picklist);
+
+	return dragged;
+}
+
+export function setHeadOfPicklist(picklist: Picklist, entry: PicklistEntry) {
+	removeEntryFromItsPicklist(entry);
+
+	const newEntry = {
+		number: entry.number,
+		next: picklist.head,
+		picklist,
+		id: entry.id,
+	};
+	picklist.head = newEntry;
+
+	picklist.update(picklist);
+
+	return newEntry;
+}
+
+export function setTailOfPicklist(picklist: Picklist, entry: PicklistEntry) {
+	removeEntryFromItsPicklist(entry);
+	entry = {
+		...entry,
+		picklist,
+		next: undefined,
+	};
+
+	let tail = picklist.head;
+	if (!tail) {
+		picklist.head = entry;
+	} else {
+		while (tail.next) {
+			tail = tail.next;
+		}
+
+		tail.next = entry;
+	}
+
+	picklist.update(picklist);
+	return entry;
+}
+
+export function savePicklistGroup(
+	id: string,
+	picklists: Picklist[],
+	strikethroughs: number[],
+	api: ClientApi,
+) {
+	const picklistDict = picklists.reduce<CompPicklistGroup>(
+		(acc, picklist) => {
+			const picklistArray: number[] = [];
+			for (let curr = picklist.head; curr; curr = curr.next) {
+				picklistArray.push(curr.number);
+			}
+
+			acc.picklists[picklist.name] = picklistArray;
+			return acc;
+		},
+		{
+			_id: id,
+			picklists: {},
+			strikethroughs,
+		},
+	);
+
+	api.updatePicklist(picklistDict);
+}
+
+export function loadPicklistGroup(
+	picklistDict: CompPicklistGroup,
+	setStrikethroughs: (strikethroughs: number[]) => void,
+	setPicklists: (picklists: Picklist[]) => void,
+	updatePicklist: (picklist: Picklist) => void,
+	deletePicklist: (picklist: Picklist) => void,
+) {
+	{
+		setStrikethroughs(picklistDict.strikethroughs);
+
+		setPicklists(
+			Object.entries(picklistDict.picklists).map(([name, teams], index) => {
+				const newPicklist: Picklist = {
+					index,
+					name,
+					head: undefined,
+					update: updatePicklist,
+					delete: () => deletePicklist(newPicklist),
+				};
+
+				if (teams.length > 0) {
+					let curr: PicklistEntry = {
+						id: new ObjectId().toString(),
+						number: teams[0],
+						next: undefined,
+						picklist: newPicklist,
+					};
+					newPicklist.head = curr;
+
+					for (let i = 1; i < teams.length; i++) {
+						curr.next = {
+							number: teams[i],
+							next: undefined,
+							picklist: newPicklist,
+							id: new ObjectId().toString(),
+						};
+						curr = curr.next;
+					}
+				}
+
+				return newPicklist;
+			}),
+		);
+	}
+}
diff --git a/tests/lib/client/Picklist.test.ts b/tests/lib/client/Picklist.test.ts
new file mode 100644
index 00000000..f5c1ac58
--- /dev/null
+++ b/tests/lib/client/Picklist.test.ts
@@ -0,0 +1,335 @@
+import ClientApi from "@/lib/api/ClientApi";
+import {
+	getPicklistLength,
+	insertAfterEntry,
+	loadPicklistGroup,
+	Picklist,
+	PicklistEntry,
+	removeEntryFromItsPicklist,
+	savePicklistGroup,
+	setHeadOfPicklist,
+} from "@/lib/client/PicklistUtils";
+import { CompPicklistGroup } from "@/lib/Types";
+import { ObjectId } from "bson";
+
+function createPicklist(index: number, entries: number[]) {
+	const picklist: Picklist = {
+		head: undefined,
+		name: index.toString(),
+		index,
+		update: () => {},
+		delete: () => {},
+	};
+
+	if (!entries.length) {
+		return picklist;
+	}
+
+	picklist.head = {
+		number: entries[0],
+		id: new ObjectId().toString(),
+		picklist,
+	};
+	let current = picklist.head;
+	for (let i = 1; i < entries.length; i++) {
+		current.next = {
+			number: entries[i],
+			id: new ObjectId().toString(),
+			picklist,
+		};
+		current = current.next;
+	}
+
+	return picklist;
+}
+
+function toArray(picklist: Picklist) {
+	const result: number[] = [];
+	let current = picklist.head;
+	while (current) {
+		result.push(current.number);
+		current = current.next;
+	}
+	return result;
+}
+
+function getAtIndex(picklist: Picklist, index: number) {
+	let current = picklist.head;
+	for (let i = 0; i < index; i++) {
+		if (!current)
+			throw new Error(
+				`Index ${index} is out of bounds for picklist ${picklist.index}`,
+			);
+		current = current.next;
+	}
+	return current;
+}
+
+describe(getPicklistLength.name, () => {
+	test("Returns the length of the picklist", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+		expect(getPicklistLength(picklist)).toBe(3);
+	});
+
+	test("Returns 0 for an empty picklist", () => {
+		const picklist = createPicklist(0, []);
+		expect(getPicklistLength(picklist)).toBe(0);
+	});
+});
+
+describe(removeEntryFromItsPicklist.name, () => {
+	test("Removes the entry from the picklist when it is not the head", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+
+		removeEntryFromItsPicklist(getAtIndex(picklist, 1)!);
+
+		expect(getPicklistLength(picklist)).toBe(2);
+		expect(toArray(picklist)).toEqual([1, 3]);
+	});
+
+	test("Removes the entry from the picklist when it is the head", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+
+		removeEntryFromItsPicklist(getAtIndex(picklist, 0)!);
+
+		expect(getPicklistLength(picklist)).toBe(2);
+		expect(toArray(picklist)).toEqual([2, 3]);
+	});
+
+	test("Removes the entry from the picklist when it is the tail", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+
+		removeEntryFromItsPicklist(getAtIndex(picklist, 2)!);
+
+		expect(getPicklistLength(picklist)).toBe(2);
+		expect(toArray(picklist)).toEqual([1, 2]);
+	});
+
+	test("Removes the entry from the picklist when it is the only entry", () => {
+		const picklist = createPicklist(0, [1]);
+
+		removeEntryFromItsPicklist(getAtIndex(picklist, 0)!);
+
+		expect(getPicklistLength(picklist)).toBe(0);
+		expect(picklist.head).toBeUndefined();
+	});
+});
+
+describe(insertAfterEntry.name, () => {
+	test("Does nothing when the entry is being moved to the same spot", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+		const entry = getAtIndex(picklist, 1)!;
+
+		insertAfterEntry(entry, entry);
+
+		expect(getPicklistLength(picklist)).toBe(3);
+		expect(toArray(picklist)).toEqual([1, 2, 3]);
+	});
+
+	test("Moves the entry to the correct spot", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+		const entry = getAtIndex(picklist, 0)!;
+		let dragged: PicklistEntry | undefined = getAtIndex(picklist, 2)!;
+
+		dragged = insertAfterEntry(entry, dragged);
+
+		expect(getPicklistLength(picklist)).toBe(3);
+		expect(toArray(picklist)).toEqual([1, 3, 2]);
+	});
+
+	test("Removes the dragged entry from its picklist", () => {
+		const newPicklist = createPicklist(0, [1, 2, 3]);
+		const oldPicklist = createPicklist(1, [4, 5, 6]);
+
+		const entry = getAtIndex(newPicklist, 0)!;
+		let dragged: PicklistEntry | undefined = getAtIndex(oldPicklist, 2)!;
+
+		dragged = insertAfterEntry(entry, dragged);
+
+		expect(getPicklistLength(newPicklist)).toBe(4);
+		expect(getPicklistLength(oldPicklist)).toBe(2);
+		expect(toArray(newPicklist)).toEqual([1, 6, 2, 3]);
+		expect(toArray(oldPicklist)).toEqual([4, 5]);
+	});
+
+	test("Sets the picklist of the dragged entry to the new picklist", () => {
+		const newPicklist = createPicklist(0, [1, 2, 3]);
+		const oldPicklist = createPicklist(1, [4, 5, 6]);
+
+		const entry = getAtIndex(newPicklist, 0)!;
+		let dragged: PicklistEntry | undefined = getAtIndex(oldPicklist, 2)!;
+
+		dragged = insertAfterEntry(entry, dragged);
+
+		expect(dragged?.picklist?.index).toBe(newPicklist.index);
+	});
+});
+
+describe(setHeadOfPicklist.name, () => {
+	test("Sets the head of the picklist", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+		const newHead = getAtIndex(picklist, 2)!;
+
+		setHeadOfPicklist(picklist, newHead);
+
+		expect(picklist.head?.id).toBe(newHead.id);
+	});
+
+	test("Does nothing when the head is already the new head", () => {
+		const picklist = createPicklist(0, [1, 2, 3]);
+		const oldHead = picklist.head!;
+
+		setHeadOfPicklist(picklist, oldHead);
+
+		expect(picklist.head?.id).toBe(oldHead.id);
+	});
+
+	test("Removes the new head from its old picklist", () => {
+		const newPicklist = createPicklist(0, [1, 2, 3]);
+		const oldPicklist = createPicklist(1, [4, 5, 6]);
+
+		let newHead: PicklistEntry | undefined = getAtIndex(oldPicklist, 2)!;
+
+		newHead = setHeadOfPicklist(newPicklist, newHead);
+
+		expect(getPicklistLength(newPicklist)).toBe(4);
+		expect(getPicklistLength(oldPicklist)).toBe(2);
+		expect(toArray(newPicklist)).toEqual([6, 1, 2, 3]);
+		expect(toArray(oldPicklist)).toEqual([4, 5]);
+	});
+
+	test("Sets the picklist of the new head to the new picklist", () => {
+		const newPicklist = createPicklist(0, [1, 2, 3]);
+		const oldPicklist = createPicklist(1, [4, 5, 6]);
+
+		let newHead: PicklistEntry | undefined = getAtIndex(oldPicklist, 2)!;
+
+		newHead = setHeadOfPicklist(newPicklist, newHead);
+
+		expect(newHead.picklist?.index).toBe(newPicklist.index);
+	});
+});
+
+describe(savePicklistGroup.name, () => {
+	test("Saves the picklist group", () => {
+		const picklists = [
+			createPicklist(0, [1, 2, 3]),
+			createPicklist(1, [4, 5, 6]),
+		];
+		const group: CompPicklistGroup = {
+			_id: new ObjectId().toString(),
+			picklists: picklists.reduce(
+				(acc, picklist) => {
+					acc[picklist.name] = toArray(picklist);
+					return acc;
+				},
+				{} as Record<string, number[]>,
+			),
+			strikethroughs: [1, 2],
+		};
+		const api = {
+			updatePicklist: jest.fn(),
+		} as any as ClientApi;
+
+		savePicklistGroup(group._id, picklists, group.strikethroughs, api);
+
+		expect(api.updatePicklist).toHaveBeenCalledWith(group);
+	});
+
+	test("Saves an empty picklist group", () => {
+		const group: CompPicklistGroup = {
+			_id: new ObjectId().toString(),
+			picklists: {},
+			strikethroughs: [],
+		};
+		const api = {
+			updatePicklist: jest.fn(),
+		} as any as ClientApi;
+
+		savePicklistGroup(group._id, [], group.strikethroughs, api);
+
+		expect(api.updatePicklist).toHaveBeenCalledWith(group);
+	});
+
+	test("Saves a picklist group with empty picklists", () => {
+		const picklists = [createPicklist(0, []), createPicklist(1, [])];
+		const group: CompPicklistGroup = {
+			_id: new ObjectId().toString(),
+			picklists: picklists.reduce(
+				(acc, picklist) => {
+					acc[picklist.name] = toArray(picklist);
+					return acc;
+				},
+				{} as Record<string, number[]>,
+			),
+			strikethroughs: [],
+		};
+		const api = {
+			updatePicklist: jest.fn(),
+		} as any as ClientApi;
+
+		savePicklistGroup(group._id, picklists, group.strikethroughs, api);
+
+		expect(api.updatePicklist).toHaveBeenCalledWith(group);
+	});
+});
+
+describe(loadPicklistGroup.name, () => {
+	test("Loads the picklist group", () => {
+		const group: CompPicklistGroup = {
+			_id: new ObjectId().toString(),
+			picklists: {
+				"0": [1, 2, 3],
+				"1": [4, 5, 6],
+			},
+			strikethroughs: [1, 2],
+		};
+
+		const setStrikethroughs = jest.fn();
+		const setPicklists = jest.fn();
+		const updatePicklist = jest.fn();
+		const deletePicklist = jest.fn();
+
+		loadPicklistGroup(
+			group,
+			setStrikethroughs,
+			setPicklists,
+			updatePicklist,
+			deletePicklist,
+		);
+
+		expect(setStrikethroughs).toHaveBeenCalledWith(group.strikethroughs);
+
+		const newPicklists = setPicklists.mock.calls[0][0].map(
+			(picklist: Picklist) => {
+				const entries = toArray(picklist);
+				return {
+					index: picklist.index,
+					name: picklist.name,
+					entries,
+					update: picklist.update,
+					delete: picklist.delete,
+				};
+			},
+		);
+
+		expect(JSON.stringify(newPicklists)).toBe(
+			JSON.stringify([
+				{
+					index: 0,
+					name: "0",
+					entries: [1, 2, 3],
+					update: updatePicklist,
+					delete: () => deletePicklist(newPicklists[0]),
+				},
+				{
+					index: 1,
+					name: "1",
+					entries: [4, 5, 6],
+					update: updatePicklist,
+					delete: () => deletePicklist(newPicklists[1]),
+				},
+			]),
+		);
+	});
+});

From e3f955f1f7daceed5f45c0778342da7e8d1b26a5 Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Mon, 6 Jan 2025 12:07:08 -0500
Subject: [PATCH 6/9] Add test for same entry numbers

---
 tests/lib/client/Picklist.test.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/tests/lib/client/Picklist.test.ts b/tests/lib/client/Picklist.test.ts
index f5c1ac58..1392630a 100644
--- a/tests/lib/client/Picklist.test.ts
+++ b/tests/lib/client/Picklist.test.ts
@@ -53,6 +53,16 @@ function toArray(picklist: Picklist) {
 	return result;
 }
 
+function toIdArray(picklist: Picklist) {
+	const result: string[] = [];
+	let current = picklist.head;
+	while (current) {
+		result.push(current.id!);
+		current = current.next;
+	}
+	return result;
+}
+
 function getAtIndex(picklist: Picklist, index: number) {
 	let current = picklist.head;
 	for (let i = 0; i < index; i++) {
@@ -163,6 +173,26 @@ describe(insertAfterEntry.name, () => {
 
 		expect(dragged?.picklist?.index).toBe(newPicklist.index);
 	});
+
+	test("Works when entry numbers are the same", () => {
+		const newPicklist = createPicklist(0, [1, 1, 1]);
+		const oldPicklist = createPicklist(1, [1, 1, 1]);
+
+		const entry = getAtIndex(newPicklist, 0)!;
+		let dragged: PicklistEntry | undefined = getAtIndex(oldPicklist, 2)!;
+
+		dragged = insertAfterEntry(entry, dragged);
+
+		expect(getPicklistLength(newPicklist)).toBe(4);
+		expect(getPicklistLength(oldPicklist)).toBe(2);
+		expect(toIdArray(newPicklist)).toEqual([
+			newPicklist.head!.id!,
+			dragged!.id!,
+			newPicklist.head!.next!.next!.id!,
+			newPicklist.head!.next!.next!.next!.id!,
+		]);
+		expect(toIdArray(oldPicklist)).toEqual([oldPicklist.head!.id!, oldPicklist.head!.next!.id!]);
+	});
 });
 
 describe(setHeadOfPicklist.name, () => {

From b09fb696a0f97d74590145fbf2e3dc664de57664 Mon Sep 17 00:00:00 2001
From: Gearbox Bot <gearbox@decaturrobotics.org>
Date: Mon, 6 Jan 2025 17:09:22 +0000
Subject: [PATCH 7/9] 1.1.3

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 32ad8429..58ce52ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "sj3",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "sj3",
-			"version": "1.1.2",
+			"version": "1.1.3",
 			"license": "CC BY-NC-SA 4.0",
 			"dependencies": {
 				"dependencies": "^0.0.1",
diff --git a/package.json b/package.json
index 494695f7..be72e2f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sj3",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"private": true,
 	"repository": "https://github.com/Decatur-Robotics/Gearbox",
 	"license": "CC BY-NC-SA 4.0",

From 1b51912a194f432d38c5891303ba9464b87dcf4b Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Mon, 6 Jan 2025 12:11:01 -0500
Subject: [PATCH 8/9] Fix formatting

---
 components/stats/Picklist.tsx     | 12 +++++++++++-
 tests/lib/client/Picklist.test.ts |  5 ++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/stats/Picklist.tsx b/components/stats/Picklist.tsx
index d735d3a0..bcf58fd7 100644
--- a/components/stats/Picklist.tsx
+++ b/components/stats/Picklist.tsx
@@ -4,7 +4,17 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react";
 import { FaPlus, FaStrikethrough, FaTrash } from "react-icons/fa";
 import ClientApi from "@/lib/api/ClientApi";
 import { ObjectId } from "bson";
-import { PicklistEntry, Picklist, insertAfterEntry, setHeadOfPicklist, setTailOfPicklist, getPicklistLength, removeEntryFromItsPicklist, savePicklistGroup, loadPicklistGroup } from "@/lib/client/PicklistUtils";
+import {
+	PicklistEntry,
+	Picklist,
+	insertAfterEntry,
+	setHeadOfPicklist,
+	setTailOfPicklist,
+	getPicklistLength,
+	removeEntryFromItsPicklist,
+	savePicklistGroup,
+	loadPicklistGroup,
+} from "@/lib/client/PicklistUtils";
 
 // Be sure to disable for production!
 const SHOW_PICKLISTS_ON_TEAM_CARDS = false;
diff --git a/tests/lib/client/Picklist.test.ts b/tests/lib/client/Picklist.test.ts
index 1392630a..dddfc7a9 100644
--- a/tests/lib/client/Picklist.test.ts
+++ b/tests/lib/client/Picklist.test.ts
@@ -191,7 +191,10 @@ describe(insertAfterEntry.name, () => {
 			newPicklist.head!.next!.next!.id!,
 			newPicklist.head!.next!.next!.next!.id!,
 		]);
-		expect(toIdArray(oldPicklist)).toEqual([oldPicklist.head!.id!, oldPicklist.head!.next!.id!]);
+		expect(toIdArray(oldPicklist)).toEqual([
+			oldPicklist.head!.id!,
+			oldPicklist.head!.next!.id!,
+		]);
 	});
 });
 

From be73ff0aa678cc4dffb0525e7ec1c3b34faa5e03 Mon Sep 17 00:00:00 2001
From: renatodellosso <rddellosso4@gmail.com>
Date: Mon, 6 Jan 2025 12:11:53 -0500
Subject: [PATCH 9/9] Add strikethroughs to dependency array

---
 components/stats/Picklist.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/stats/Picklist.tsx b/components/stats/Picklist.tsx
index bcf58fd7..939a366f 100644
--- a/components/stats/Picklist.tsx
+++ b/components/stats/Picklist.tsx
@@ -323,7 +323,7 @@ export default function PicklistScreen(props: {
 	// Save picklists
 	useEffect(
 		() => savePicklistGroup(props.picklist._id, picklists, strikethroughs, api),
-		[props.picklist._id, picklists],
+		[props.picklist._id, picklists, strikethroughs],
 	);
 
 	const updatePicklist = useCallback(