Fix ESLint warnings

components/Avatar.tsx

@@ -33,6 +33,7 @@ export default function Avatar(props: {
 			>
 				<img
 					src={image}
+					alt={"Avatar"}
 					onClick={props.onClick}
 				></img>
 			</div>

components/Container.tsx

@@ -125,7 +125,7 @@ export default function Container(props: ContainerProps) {
 		};
 
 		loadSelectedSeasons();
-	}, [selectedTeamIndex, teams]);
+	}, [selectedTeamIndex, teams, selectedTeam]);
 
 	let showAuthBlock = false;
 	if (props.requireAuthentication) {

components/Footer.tsx

@@ -58,6 +58,7 @@ export default function Footer() {
 				<img
 					src="/art/4026Bench.svg"
 					className="w-32"
+					alt="4026 Bench"
 				></img>
 				<p className="text-lg">
 					Made with <span className="">❤️</span> by{" "}
@@ -181,7 +182,7 @@ export default function Footer() {
 						src="/statbotics.webp"
 						width="15"
 						height="25"
-						alt="tba"
+						alt="Statbotics Logo"
 						className="mr-6"
 					/>
 					Statbotics
@@ -195,7 +196,7 @@ export default function Footer() {
 						src="/FIRST.png"
 						width="90"
 						height="25"
-						alt="tba"
+						alt="FIRST Logo"
 					/>
 				</Link>
 			</div>

components/UpdateModal.tsx

@@ -46,6 +46,7 @@ function News() {
 				<img
 					src="/art/BrokenRobot.svg"
 					className="w-1/2"
+					alt="Broken Robot"
 				></img>
 			</Flex>
 			<h3 className="font-bold text-lg">Whats New?</h3>

components/competition/PitScoutingCard.tsx

@@ -50,7 +50,7 @@ export default function PitScoutingCard(props: {
 										<div className="absolute rounded z-10 translate-y-4 flex justify-center items-center">
 											{report.submitted ? (
 												<img
-													alt="img"
+													alt={`Team ${report.teamNumber}'s robot`}
 													src={report.data?.image}
 													loading="lazy"
 													style={{ imageResolution: "72dpi" }}

components/forms/FieldPositionSelector.tsx

@@ -11,27 +11,32 @@ const Sketch = dynamic(() => import("react-p5").then((mod) => mod.default), {
 let bg: p5Types.Image;
 let dropped = false;
 
-export default function FieldPositionSelector(props: {
+export default function FieldPositionSelector({
+	alliance,
+	fieldImagePrefix,
+	initialPos,
+	callback,
+}: {
 	alliance: AllianceColor;
 	fieldImagePrefix: string;
 	initialPos: FieldPos;
 	callback: (key: string, value: FieldPos) => void;
 }) {
-	const [mx, setMx, getMx] = useDynamicState(props.initialPos?.x ?? 0);
-	const [my, setMy, getMy] = useDynamicState(props.initialPos?.y ?? 0);
-	const [a, setA, getA] = useDynamicState(props.initialPos?.angle ?? 0);
+	const [mx, setMx, getMx] = useDynamicState(initialPos?.x ?? 0);
+	const [my, setMy, getMy] = useDynamicState(initialPos?.y ?? 0);
+	const [a, setA, getA] = useDynamicState(initialPos?.angle ?? 0);
 	const [ax, setAx] = useState(0);
 	const [ay, setAy] = useState(0);
 
 	useEffect(() => {
-		props.callback("AutoStart", { x: mx ?? 0, y: my ?? 0, angle: a ?? 0 });
-	}, [mx, my, a, ax, ay]);
+		callback("AutoStart", { x: mx ?? 0, y: my ?? 0, angle: a ?? 0 });
+	}, [mx, my, a, ax, ay, callback]);
 
 	const setup = (p5: p5Types, canvasParentRef: Element) => {
 		bg = p5.loadImage(
-			props.alliance === AllianceColor.Blue
-				? `/fields/${props.fieldImagePrefix}Blue.png`
-				: `/fields/${props.fieldImagePrefix}Red.png`,
+			alliance === AllianceColor.Blue
+				? `/fields/${fieldImagePrefix}Blue.png`
+				: `/fields/${fieldImagePrefix}Red.png`,
 		);
 
 		const ctx = p5.createCanvas(350, 300).parent(canvasParentRef);

components/forms/Form.tsx

@@ -64,11 +64,11 @@ export default function Form(props: FormProps) {
 		);
 	}
 
-	const sync = async () => {
+	const sync = useCallback(async () => {
 		setSyncing(true);
 		await api.updateReport({ data: formData }, props.report?._id!);
 		setSyncing(false);
-	};
+	}, [formData, props.report?._id]);
 
 	const setCallback = useCallback(
 		(key: any, value: boolean | string | number | object) => {
@@ -79,7 +79,7 @@ export default function Form(props: FormProps) {
 				return copy;
 			});
 		},
-		[],
+		[sync],
 	);
 
 	useCallback(() => {
@@ -91,7 +91,7 @@ export default function Form(props: FormProps) {
 		}
 
 		setFormData(formData);
-	}, [props.report?.data]);
+	}, [formData, setCallback]);
 
 	function elementToNode(element: FormElement<QuantData>) {
 		const key = element.key as string;

components/forms/ImageUpload.tsx

@@ -67,6 +67,7 @@ export default function ImageUpload(props: {
 				<img
 					src={imageUrl}
 					className="w-64 h-64 rounded-lg"
+					alt="Uploaded robot image"
 				></img>
 			)}
 			{uploadProgress > 0 ? (

components/stats/Picklist.tsx

@@ -1,7 +1,7 @@
 import { DbPicklist, Report } from "@/lib/Types";
 
 import { useDrag, useDrop } from "react-dnd";
-import { ChangeEvent, useEffect, useState } from "react";
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
 import { FaArrowDown, FaArrowUp, FaPlus } from "react-icons/fa";
 import ClientApi from "@/lib/api/ClientApi";
 
@@ -225,61 +225,69 @@ export default function PicklistScreen(props: {
 
 	const teams = props.teams.map((team) => ({ number: team }));
 
-	function savePicklists(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);
-	}
+	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],
+	);
 
-	function updatePicklist(picklist: Picklist) {
-		setPicklists((old) => {
-			const newPicklists = old.map((p) => {
-				if (p.index === picklist.index) {
-					return picklist;
-				} else {
-					return p;
-				}
+	const updatePicklist = useCallback(
+		(picklist: Picklist) => {
+			setPicklists((old) => {
+				const newPicklists = old.map((p) => {
+					if (p.index === picklist.index) {
+						return picklist;
+					} else {
+						return p;
+					}
+				});
+
+				savePicklists(newPicklists);
+				return newPicklists;
 			});
+		},
+		[setPicklists, savePicklists],
+	);
 
-			savePicklists(newPicklists);
-			return newPicklists;
-		});
-	}
-
-	function loadDbPicklist(picklistDict: DbPicklist) {
-		setPicklists(
-			Object.entries(picklistDict.picklists).map((picklist, index) => {
-				const newPicklist: Picklist = {
-					index,
-					name: picklist[0],
-					teams: picklist[1].map((team: number) => ({ number: team })),
-					update: updatePicklist,
-				};
-
-				for (const team of newPicklist.teams) {
-					team.picklistIndex = newPicklist.index;
-				}
-
-				return newPicklist;
-			}),
-		);
-	}
+	const loadDbPicklist = useCallback(
+		(picklistDict: DbPicklist) => {
+			setPicklists(
+				Object.entries(picklistDict.picklists).map((picklist, index) => {
+					const newPicklist: Picklist = {
+						index,
+						name: picklist[0],
+						teams: picklist[1].map((team: number) => ({ number: team })),
+						update: updatePicklist,
+					};
+
+					for (const team of newPicklist.teams) {
+						team.picklistIndex = newPicklist.index;
+					}
+
+					return newPicklist;
+				}),
+			);
+		},
+		[updatePicklist],
+	);
 
 	useEffect(() => {
 		if (loadingPicklists !== LoadState.NotLoaded) return;
 
-		console.log(props);
 		setLoadingPicklists(LoadState.Loading);
 		api.getPicklist(props.picklist?._id).then((picklist) => {
 			if (picklist) {
@@ -289,7 +297,14 @@ export default function PicklistScreen(props: {
 		loadDbPicklist(props.picklist);
 
 		setLoadingPicklists(LoadState.Loaded);
-	});
+	}, [
+		loadingPicklists,
+		LoadState.NotLoaded,
+		LoadState.Loading,
+		LoadState.Loaded,
+		props.picklist,
+		loadDbPicklist,
+	]);
 
 	const addPicklist = () => {
 		const newPicklist: Picklist = {

components/stats/SmallGraph.tsx

@@ -126,7 +126,7 @@ export default function SmallGraph(props: {
 				);
 			});
 		}
-	}, [key]);
+	}, [key, currentTeam, datapoints, props.selectedReports, props.team]);
 
 	if (!props.selectedReports) {
 		return <></>;

components/stats/TeamPage.tsx

@@ -151,7 +151,26 @@ export default function TeamPage(props: {
 
 	const game = games[props.gameId];
 
-	const associateTeams = () => {
+	useEffect(() => {
+		const subjectiveReports: typeof teamSubjectiveReports = {};
+		props.subjectiveReports.forEach((subjectiveReport) => {
+			for (const teamNumber of Object.keys(subjectiveReport.robotComments)) {
+				if (!Object.keys(subjectiveReports).includes(teamNumber)) {
+					subjectiveReports[Number(teamNumber)] = [subjectiveReport];
+				} else {
+					subjectiveReports[Number(teamNumber)].push(subjectiveReport);
+				}
+			}
+		});
+		setTeamSubjectiveReports(subjectiveReports);
+	}, [props.subjectiveReports]);
+
+	const pointTotals = reports.map((report) => game.getAvgPoints([report]));
+	const avgPoints = game.getAvgPoints(reports);
+	const stDev = StandardDeviation(pointTotals);
+
+	useEffect(() => {
+		console.log("Associating teams...");
 		const newTeamReports: typeof teamReports = {};
 		reports.forEach((report) => {
 			if (!(report.robotNumber in newTeamReports)) {
@@ -179,29 +198,6 @@ export default function TeamPage(props: {
 			}
 		});
 		setTeamSubjectiveReports(subjectiveReports);
-	};
-
-	useEffect(() => {
-		const subjectiveReports: typeof teamSubjectiveReports = {};
-		props.subjectiveReports.forEach((subjectiveReport) => {
-			for (const teamNumber of Object.keys(subjectiveReport.robotComments)) {
-				if (!Object.keys(subjectiveReports).includes(teamNumber)) {
-					subjectiveReports[Number(teamNumber)] = [subjectiveReport];
-				} else {
-					subjectiveReports[Number(teamNumber)].push(subjectiveReport);
-				}
-			}
-		});
-		setTeamSubjectiveReports(subjectiveReports);
-	}, [props.subjectiveReports]);
-
-	const pointTotals = reports.map((report) => game.getAvgPoints([report]));
-	const avgPoints = game.getAvgPoints(reports);
-	const stDev = StandardDeviation(pointTotals);
-
-	useEffect(() => {
-		console.log("Associating teams...");
-		associateTeams();
 	}, [reports, props.pitReports, props.subjectiveReports]);
 
 	// Associate pit reports

components/stats/TeamStats.tsx

@@ -33,6 +33,13 @@ export default function TeamStats(props: {
 		{ matchNum: number; content: { order: number; jsx: ReactNode }[] }[] | null
 	>(null);
 
+	const pitReport = props.pitReport;
+	const badges = props.getBadges(
+		pitReport ?? undefined,
+		props.selectedReports,
+		false,
+	);
+
 	useEffect(() => {
 		if (!props.selectedTeam) return;
 		setComments(null);
@@ -132,6 +139,7 @@ export default function TeamStats(props: {
 		props.selectedReports,
 		props.subjectiveReports,
 		props.pitReport,
+		pitReport,
 	]);
 
 	if (!props.selectedTeam) {
@@ -144,13 +152,6 @@ export default function TeamStats(props: {
 		);
 	}
 
-	const pitReport = props.pitReport;
-	const badges = props.getBadges(
-		pitReport ?? undefined,
-		props.selectedReports,
-		false,
-	);
-
 	function getSections(
 		header: string,
 		stats: (