Merge branch 'main' into dependabot/npm_and_yarn/daisyui-4.12.23

Decatur-Robotics · Dec 31, 2024 · 242231b · 242231b
2 parents 6359a20 + 5cfa086
commit 242231b
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 18 deletions.
diff --git a/components/XpProgressBar.tsx b/components/XpProgressBar.tsx
@@ -0,0 +1,32 @@
+import { User } from "@/lib/Types";
+import { xpRequiredForNextLevel } from "@/lib/Xp";
+import { useState } from "react";
+
+export default function XpProgressBar({
+	user,
+	size,
+}: {
+	user: User;
+	size: string;
+}) {
+	const [hovered, setHovered] = useState(false);
+
+	return (
+		<div
+			className={`radial-progress text-accent m-2 text-${hovered ? "xs" : "sm"}`}
+			style={
+				{
+					"--value": (user.xp / xpRequiredForNextLevel(user.level)) * 100,
+					"--size": size,
+				} as any
+			}
+			role="progressbar"
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+		>
+			{hovered
+				? `${user.xp}/${xpRequiredForNextLevel(user.level)}`
+				: `Lvl ${user.level}`}
+		</div>
+	);
+}
diff --git a/components/competition/MatchScheduleCard.tsx b/components/competition/MatchScheduleCard.tsx
@@ -198,15 +198,15 @@ export default function MatchScheduleCard(props: {
 																1000;
 
 														return (
-															<Link
+															<a
 																href={`/${team?.slug}/${seasonSlug}/${comp?.slug}/${reportId}`}
 																key={reportId}
 																className={`${color} ${mine && !submitted ? "border-4" : "border-2"} 
                                   ${timeSinceCheckIn && timeSinceCheckIn < 10 && "avatar online"} 
                                   rounded-lg w-12 h-12 flex items-center justify-center text-white  border-white`}
 															>
 																<h1>{report.robotNumber}</h1>
-															</Link>
+															</a>
 														);
 													})}
 												</div>
@@ -287,7 +287,7 @@ export default function MatchScheduleCard(props: {
 													<div>No subjective scouter assigned</div>
 												)}
 											</div>
-											<Link
+											<a
 												className={`btn btn-primary btn-sm ${match.subjectiveScouter && usersById[match.subjectiveScouter]?.slackId && "-translate-y-1"}`}
 												href={`/${team?.slug}/${seasonSlug}/${comp?.slug}/${match._id}/subjective`}
 											>
@@ -301,7 +301,7 @@ export default function MatchScheduleCard(props: {
 															: 0
 													} in progress`}
 												)
-											</Link>
+											</a>
 										</div>
 									))}
 								</div>

diff --git a/components/forms/Form.tsx b/components/forms/Form.tsx
@@ -1,5 +1,5 @@
 import { AllianceColor, Report, QuantData, FieldPos } from "@/lib/Types";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import FormPage from "./FormPages";
 import { useCurrentSession } from "@/lib/client/useCurrentSession";
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
@@ -14,6 +14,8 @@ import Slider from "./Sliders";
 import { BlockElement, FormLayout, FormElement } from "@/lib/Layout";
 import Loading from "../Loading";
 import { Analytics } from "@/lib/client/Analytics";
+import useDynamicState from "@/lib/client/useDynamicState";
+import toast from "react-hot-toast";
 
 const api = new ClientApi();
 
@@ -32,7 +34,9 @@ export default function Form(props: FormProps) {
 	const [page, setPage] = useState(0);
 	const [formData, setFormData] = useState<QuantData>(props.report?.data);
 	const [syncing, setSyncing] = useState(false);
+	const [changeNumber, setChangeNumber, getChangeNumber] = useDynamicState(0);
 	const [submitting, setSubmitting] = useState(false);
+	const [submitErrorMsg, setSubmitErrorMsg] = useState<string>();
 
 	const alliance = props.report?.color;
 
@@ -45,15 +49,18 @@ export default function Form(props: FormProps) {
 			.submitForm(props.report?._id!, formData)
 			.then(() => {
 				console.log("Submitted form successfully!");
+
+				location.href = location.href.substring(
+					0,
+					location.href.lastIndexOf("/"),
+				);
 			})
-			.finally(() => {
-				if (location.href.includes("offline"))
-					location.href = `/offline/${props.compId}`;
-				else
-					location.href = location.href.substring(
-						0,
-						location.href.lastIndexOf("/"),
-					);
+			.catch((err) => {
+				console.error("Failed to submit form. Error:", err);
+				toast.error("Failed to submit form. Please try again. Error:", err);
+				setSubmitErrorMsg(err.toString());
+
+				setSubmitting(false);
 			});
 
 		Analytics.quantReportSubmitted(
@@ -64,11 +71,27 @@ export default function Form(props: FormProps) {
 		);
 	}
 
+	// Don't sync more than once every 500ms
 	const sync = useCallback(async () => {
-		setSyncing(true);
-		await api.updateReport({ data: formData }, props.report?._id!);
-		setSyncing(false);
-	}, [formData, props.report?._id]);
+		const newChangeNumber = changeNumber! + 1;
+		setChangeNumber(newChangeNumber);
+
+		setTimeout(async () => {
+			getChangeNumber(async (currentNumber) => {
+				if (currentNumber !== newChangeNumber) return;
+
+				setSyncing(true);
+				await api.updateReport({ data: formData }, props.report?._id!);
+				setSyncing(false);
+			});
+		}, 500);
+	}, [
+		formData,
+		props.report?._id,
+		changeNumber,
+		getChangeNumber,
+		setChangeNumber,
+	]);
 
 	const setCallback = useCallback(
 		(key: any, value: boolean | string | number | object) => {
@@ -82,7 +105,7 @@ export default function Form(props: FormProps) {
 		[sync],
 	);
 
-	useCallback(() => {
+	useEffect(() => {
 		// Set all Nan values to 0
 		for (const key in formData) {
 			if (typeof formData[key] === "number" && isNaN(formData[key])) {
@@ -266,6 +289,11 @@ export default function Form(props: FormProps) {
 					"Submit"
 				)}
 			</button>
+			{submitErrorMsg ? (
+				<p className="text-red-500 text-lg">{submitErrorMsg}</p>
+			) : (
+				<></>
+			)}
 		</FormPage>,
 	);
 

diff --git a/pages/profile.tsx b/pages/profile.tsx
@@ -19,6 +19,7 @@ import TeamCard from "@/components/TeamCard";
 import { UpdateModal } from "@/components/UpdateModal";
 import { Analytics } from "@/lib/client/Analytics";
 import { signOut } from "next-auth/react";
+import XpProgressBar from "@/components/XpProgressBar";
 
 const api = new ClientApi();
 
@@ -120,6 +121,12 @@ export default function Profile(props: { teamList: Team[] }) {
 									<></>
 								)}
 							</Flex>
+							{user != null && (
+								<XpProgressBar
+									user={user}
+									size="4rem"
+								/>
+							)}
 						</div>
 					</Flex>
 				</Card>