feat(frontend): update dependencies

3 files changed, 54 insertions, 35 deletions

diff --git a/frontend/app/pages/GolfPlayPage.tsx b/frontend/app/pages/GolfPlayPage.tsx
index c183ac8..49f47f6 100644
--- a/frontend/app/pages/GolfPlayPage.tsx
+++ b/frontend/app/pages/GolfPlayPage.tsx
@@ -1,4 +1,4 @@
-import { Provider as JotaiProvider, createStore } from "jotai";
+import { createStore, Provider as JotaiProvider } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "wouter";
 import { ApiClientContext, createApiClient } from "../api/client";
diff --git a/frontend/app/pages/GolfWatchPage.tsx b/frontend/app/pages/GolfWatchPage.tsx
index 519a030..4f76136 100644
--- a/frontend/app/pages/GolfWatchPage.tsx
+++ b/frontend/app/pages/GolfWatchPage.tsx
@@ -1,4 +1,4 @@
-import { Provider as JotaiProvider, createStore } from "jotai";
+import { createStore, Provider as JotaiProvider } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "wouter";
 import { ApiClientContext, createApiClient } from "../api/client";
diff --git a/frontend/app/pages/TournamentPage.tsx b/frontend/app/pages/TournamentPage.tsx
index 404fa2d..53fb62b 100644
--- a/frontend/app/pages/TournamentPage.tsx
+++ b/frontend/app/pages/TournamentPage.tsx
@@ -48,7 +48,10 @@ function BranchVR({ className = "" }: { className?: string }) {
 function BranchVL2({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-3">
 			<div className={`border-r-4 ${className}`}></div>
@@ -63,7 +66,10 @@ function BranchVL2({
 function BranchVR2({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-3">
 			<div className={`border-t-4 ${className}`}></div>
@@ -128,7 +134,10 @@ function BranchH2({
 function BranchL({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-2">
 			<div></div>
@@ -144,7 +153,10 @@ function BranchL({
 function BranchR({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-2">
 			<div
@@ -202,51 +214,58 @@ function getBorderColor(match: TournamentMatch, playerIDs: number[]): string {
 export default function TournamentPage() {
 	usePageTitle(`Tournament | ${APP_NAME}`);
 
+	const params = new URLSearchParams(window.location.search);
+	const game1 = Number(params.get("game1"));
+	const game2 = Number(params.get("game2"));
+	const game3 = Number(params.get("game3"));
+	const game4 = Number(params.get("game4"));
+	const game5 = Number(params.get("game5"));
+	const gamesValid = game1 && game2 && game3 && game4 && game5;
+
+	const pIDs = [
+		Number(params.get("player1")),
+		Number(params.get("player2")),
+		Number(params.get("player3")),
+		Number(params.get("player4")),
+		Number(params.get("player5")),
+		Number(params.get("player6")),
+	];
+	const playersValid = pIDs.every((id) => id);
+
+	const paramsValid = gamesValid && playersValid;
+	const paramsError = !gamesValid
+		? "Missing or invalid game parameters"
+		: !playersValid
+			? "Missing or invalid player parameters"
+			: null;
+
 	const [tournament, setTournament] = useState<{
 		matches: TournamentMatch[];
 	} | null>(null);
-	const [playerIDs, setPlayerIDs] = useState<number[]>([]);
+	const playerIDs = paramsValid ? pIDs : [];
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
 
 	useEffect(() => {
-		const params = new URLSearchParams(window.location.search);
-		const game1 = Number(params.get("game1"));
-		const game2 = Number(params.get("game2"));
-		const game3 = Number(params.get("game3"));
-		const game4 = Number(params.get("game4"));
-		const game5 = Number(params.get("game5"));
-
-		if (!game1 || !game2 || !game3 || !game4 || !game5) {
-			setError("Missing or invalid game parameters");
-			setLoading(false);
+		if (!paramsValid) {
 			return;
 		}
 
-		const pIDs = [
-			Number(params.get("player1")),
-			Number(params.get("player2")),
-			Number(params.get("player3")),
-			Number(params.get("player4")),
-			Number(params.get("player5")),
-			Number(params.get("player6")),
-		];
-
-		if (pIDs.some((id) => !id)) {
-			setError("Missing or invalid player parameters");
-			setLoading(false);
-			return;
-		}
-
-		setPlayerIDs(pIDs);
-
 		const apiClient = createApiClient();
 		apiClient
 			.getTournament(game1, game2, game3, game4, game5)
 			.then(({ tournament }) => setTournament(tournament))
 			.catch(() => setError("Failed to load tournament"))
 			.finally(() => setLoading(false));
-	}, []);
+	}, [paramsValid, game1, game2, game3, game4, game5]);
+
+	if (paramsError) {
+		return (
+			<div className="min-h-screen bg-gray-100 flex items-center justify-center">
+				<p className="text-red-500">{paramsError}</p>
+			</div>
+		);
+	}
 
 	if (loading) {
 		return (