Updating offline mode

.env.production

@@ -2,4 +2,5 @@
 # We have to include these at build time, so this file is used to inject them into the build process.
 NEXT_PUBLIC_API_URL=/api/
 NEXT_PUBLIC_SLACK_CLIENT_ID=10831824934.7404945710466
-NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-1BFJYBDC76
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-1BFJYBDC76
+NEXT_PUBLIC_RECAPTCHA_KEY=6Le63OUqAAAAABxxDrbaU9OywDLLHqutVwbw7a9d

.env.test

@@ -4,4 +4,6 @@ DEVELOPER_EMAILS=["[email protected]"]
 
 TOA_URL=https://example.com
 TOA_APP_ID=123
-TOA_KEY=456
+TOA_KEY=456
+
+DEFAULT_IMAGE=https://example.com/default.jpg

components/Container.tsx

@@ -74,11 +74,6 @@ export default function Container(props: ContainerProps) {
 	}, [eventSearch]);
 
 	useEffect(() => {
-		if (window.location.href.includes("signin")) {
-			console.log("triggered");
-			location.reload();
-		}
-
 		const loadTeams = async () => {
 			if (!user) {
 				return;
@@ -231,7 +226,7 @@ export default function Container(props: ContainerProps) {
 								</Link>
 							) : (
 								<a
-									href={"/api/auth/signin"}
+									href={"/signin"}
 									rel="noopener noreferrer"
 									target="_blank"
 								>
@@ -268,7 +263,7 @@ export default function Container(props: ContainerProps) {
 									<h2 className="card-title">Wait a minute...</h2>
 									<p>You need to sign in first!</p>
 									<div className="card-actions justify-end">
-										<Link href={"/api/auth/signin"}>
+										<Link href={"/signin"}>
 											<button className="btn btn-primary">Sign In</button>
 										</Link>
 									</div>

components/competition/InsightsAndSettingsCard.tsx

@@ -1,89 +1,136 @@
-import { NotLinkedToTba } from "@/lib/client/ClientUtils";
+import { download, NotLinkedToTba } from "@/lib/client/ClientUtils";
 import { defaultGameId } from "@/lib/client/GameId";
 import { Round } from "@/lib/client/StatsMath";
 import { games } from "@/lib/games";
-import { Competition, Pitreport, Report, Team } from "@/lib/Types";
+import { Competition, MatchType, Pitreport, Report, Team } from "@/lib/Types";
 import Link from "next/link";
-import { ChangeEvent } from "react";
+import { ChangeEvent, useState } from "react";
 import { BsGearFill, BsClipboard2Check } from "react-icons/bs";
 import { FaSync, FaBinoculars, FaUserCheck, FaDatabase } from "react-icons/fa";
 import { FaUserGroup } from "react-icons/fa6";
+import ClientApi from "@/lib/api/ClientApi";
+
+const api = new ClientApi();
 
 export default function InsightsAndSettingsCard(props: {
-	showSettings: boolean;
-	setShowSettings: (value: boolean) => void;
 	isManager: boolean | undefined;
 	comp: Competition | undefined;
 	reloadCompetition: () => void;
 	assignScouters: () => void;
-	exportAsCsv: () => void;
-	exportPending: boolean;
 	showSubmittedMatches: boolean;
 	toggleShowSubmittedMatches: () => void;
 	assigningMatches: boolean;
 	regeneratePitReports: () => void;
-	newCompName: string | undefined;
-	setNewCompName: (value: string) => void;
-	newCompTbaId: string | undefined;
-	setNewCompTbaId: (value: string) => void;
-	saveCompChanges: () => void;
-	redAlliance: number[];
-	setRedAlliance: (value: number[]) => void;
-	blueAlliance: number[];
-	setBlueAlliance: (value: number[]) => void;
-	matchNumber: number | undefined;
-	setMatchNumber: (value: number) => void;
-	createMatch: () => void;
-	teamToAdd: number;
-	setTeamToAdd: (value: number) => void;
-	addTeam: () => void;
 	submittedReports: number | undefined;
 	reports: Report[];
 	loadingScoutStats: boolean;
 	pitreports: Pitreport[];
 	submittedPitreports: number | undefined;
-	togglePublicData: (e: ChangeEvent<HTMLInputElement>) => void;
 	seasonSlug: string | undefined;
 	team: Team | undefined;
-	allianceIndices: number[];
 }) {
+	const [showSettings, setShowSettings] = useState(false);
 	const {
-		showSettings,
-		setShowSettings,
 		isManager,
 		comp,
 		reloadCompetition,
 		assignScouters,
-		exportAsCsv,
-		exportPending,
 		showSubmittedMatches,
 		toggleShowSubmittedMatches,
 		assigningMatches,
-		newCompName,
-		setNewCompName,
-		newCompTbaId,
-		setNewCompTbaId,
-		saveCompChanges,
-		redAlliance,
-		setRedAlliance,
-		blueAlliance,
-		setBlueAlliance,
-		matchNumber,
-		setMatchNumber,
-		createMatch,
-		teamToAdd,
-		setTeamToAdd,
-		addTeam,
 		submittedReports,
 		reports,
 		loadingScoutStats,
 		pitreports,
 		submittedPitreports,
-		togglePublicData,
 		seasonSlug,
 		team,
-		allianceIndices,
 	} = props;
+	const [newCompName, setNewCompName] = useState(comp?.name);
+	const [newCompTbaId, setNewCompTbaId] = useState(comp?.tbaId);
+	const [exportPending, setExportPending] = useState(false);
+	const [teamToAdd, setTeamToAdd] = useState<number>(0);
+	const [blueAlliance, setBlueAlliance] = useState<number[]>([]);
+	const [redAlliance, setRedAlliance] = useState<number[]>([]);
+	const [matchNumber, setMatchNumber] = useState<number | undefined>(undefined);
+
+	const exportAsCsv = async () => {
+		setExportPending(true);
+
+		const res = await api.exportCompAsCsv(comp?._id!).catch((e) => {
+			console.error(e);
+			return { csv: undefined };
+		});
+
+		if (!res) {
+			console.error("failed to export");
+		}
+
+		if (res.csv) {
+			download(`${comp?.name ?? "Competition"}.csv`, res.csv, "text/csv");
+		} else {
+			console.error("No CSV data returned from server");
+		}
+
+		setExportPending(false);
+	};
+
+	const createMatch = async () => {
+		try {
+			await api.createMatch(
+				comp?._id!,
+				Number(matchNumber),
+				0,
+				MatchType.Qualifying,
+				blueAlliance as number[],
+				redAlliance as number[],
+			);
+		} catch (e) {
+			console.error(e);
+		}
+
+		location.reload();
+	};
+
+	const allianceIndices: number[] = [];
+	for (let i = 0; i < games[comp?.gameId ?? defaultGameId].allianceSize; i++) {
+		allianceIndices.push(i);
+	}
+
+	async function saveCompChanges() {
+		// Check if tbaId is valid
+		if (!comp?.tbaId || !comp?.name || !comp?._id) return;
+
+		let tbaId = newCompTbaId;
+		const autoFillData = await api.competitionAutofill(tbaId ?? "");
+		if (
+			!autoFillData?.name &&
+			!confirm(`Invalid TBA ID: ${tbaId}. Save changes anyway?`)
+		)
+			return;
+
+		await api.updateCompNameAndTbaId(
+			comp?._id,
+			newCompName ?? "Unnamed",
+			tbaId ?? NotLinkedToTba,
+		);
+		location.reload();
+	}
+
+	function togglePublicData(e: ChangeEvent<HTMLInputElement>) {
+		if (!comp?._id) return;
+		api.setCompPublicData(comp?._id, e.target.checked);
+	}
+
+	function addTeam() {
+		console.log("Adding pit report for team", teamToAdd);
+		if (!teamToAdd || teamToAdd < 1 || !comp?._id) return;
+
+		api
+			.createPitReportForTeam(teamToAdd, comp?._id)
+			// We can't just pass location.reload, it will throw "illegal invocation." I don't know why. -Renato
+			.finally(() => location.reload());
+	}
 
 	return (
 		<div className="w-full card bg-base-200 shadow-xl">
@@ -367,7 +414,7 @@ export default function InsightsAndSettingsCard(props: {
 										? (+(
 												Round(submittedReports / reports.length) * 100
 											)).toFixed(0)
-										: "?"}
+										: "0"}
 									%
 								</div>
 								<div className="stat-desc"></div>
@@ -394,7 +441,7 @@ export default function InsightsAndSettingsCard(props: {
 												? (+(
 														Round(submittedReports / reports.length) * 100
 													)).toFixed(0)
-												: "?"}
+												: "0"}
 											%
 										</div>
 										<div className="stat-desc">
@@ -412,12 +459,9 @@ export default function InsightsAndSettingsCard(props: {
 									<FaUserGroup size={40}></FaUserGroup>
 								</div>
 								<div className="stat-value text-primary">
-									{!submittedPitreports && submittedPitreports !== 0
-										? "?"
-										: submittedPitreports}
-									/
+									{!submittedPitreports ? "0" : submittedPitreports}/
 									{!pitreports || pitreports.length === 0
-										? "?"
+										? "0"
 										: pitreports.length}
 								</div>
 							</div>

components/competition/MatchScheduleCard.tsx

@@ -14,6 +14,7 @@ import { MdErrorOutline } from "react-icons/md";
 import Avatar from "../Avatar";
 import Loading from "../Loading";
 import { AdvancedSession } from "@/lib/client/useCurrentSession";
+import { useEffect } from "react";
 
 export default function MatchScheduleCard(props: {
 	team: Team | undefined;
@@ -62,11 +63,14 @@ export default function MatchScheduleCard(props: {
 		showSubmittedMatches,
 	} = props;
 
-	const displayedMatches = showSubmittedMatches
-		? matches
-		: matches.filter((match) =>
-				match.reports.some((reportId) => !reportsById[reportId]?.submitted),
-			);
+	const unsubmittedMatches: Match[] = [];
+
+	for (const match of matches) {
+		if (match.reports.some((reportId) => !reportsById[reportId]?.submitted))
+			unsubmittedMatches.push(match);
+	}
+
+	const displayedMatches = showSubmittedMatches ? matches : unsubmittedMatches;
 
 	return (
 		<div className="w-full card bg-base-200 shadow-xl ">
@@ -80,38 +84,24 @@ export default function MatchScheduleCard(props: {
 					)}
 				</h1>
 				{isManager &&
-				matchesAssigned === false &&
-				Object.keys(usersById).length >= 6 ? (
-					matchesAssigned !== undefined ? (
+					matchesAssigned === false &&
+					Object.keys(usersById).length >= 6 &&
+					(!assigningMatches ? (
 						<div className="opacity-100 font-bold text-warning flex flex-row items-center justify-start space-x-3">
-							<div>
-								{!assigningMatches
-									? "Matches are not assigned"
-									: "Assigning matches"}
-							</div>
-							{!assigningMatches ? (
-								<button
-									className={
-										"btn btn-primary btn-sm " +
-										(assigningMatches ? "disabled" : "")
-									}
-									onClick={assignScouters}
-								>
-									Assign Matches
-								</button>
-							) : (
-								<BsGearFill
-									size={30}
-									className="animate-spin-slow text-white"
-								/>
-							)}
+							<div>Matches are not assigned.</div>
+							<button
+								className={
+									"btn btn-primary btn-sm " +
+									(assigningMatches ? "disabled" : "")
+								}
+								onClick={assignScouters}
+							>
+								Assign Matches
+							</button>
 						</div>
 					) : (
 						<progress className="progress w-full" />
-					)
-				) : (
-					<></>
-				)}
+					))}
 				<div className="divider my-0"></div>
 				{loadingMatches || loadingReports || loadingUsers ? (
 					<div className="w-full flex flex-col items-center justify-center">

environment.d.ts

@@ -49,6 +49,9 @@ declare global {
 
 			DEVELOPER_EMAILS: string;
 
+			NEXT_PUBLIC_RECAPTCHA_KEY: string;
+			RECAPTCHA_SECRET: string;
+
 			NODE_ENV: "development" | "production";
 		}
 	}