make teams reactive instead of reloading matches

Instead of grabbing the foreign key for Teams.name on the Match query it makes more sense to always reference the reactive teams.teams value.
craigkai · Aug 14, 2024 · 1a61250 · 1a61250
1 parent ad205e2
commit 1a61250
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 46 deletions.
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -14,11 +14,7 @@ import type {
 declare global {
 	type TeamRow = z.infer<typeof teamsRowSchema>;
 	type EventRow = z.infer<typeof eventsRowSchema>;
-	type MatchRow = z.infer<typeof matchesRowSchema> & {
-		public_matches_team1_fkey: { name: string };
-		public_matches_team2_fkey: { name: string };
-		public_matches_ref_fkey: { name: string };
-	};
+	type MatchRow = z.infer<typeof matchesRowSchema>;
 
 	type MatchState = z.infer<typeof matchStateSchema>;
 

diff --git a/src/components/Bracket.svelte b/src/components/Bracket.svelte
@@ -105,6 +105,9 @@
 					<h3 class="tournament-bracket__round-title">{roundName}</h3>
 					<ul class="tournament-bracket__list">
 						{#each roundObj.matches.sort((a, b) => a.id - b.id) as match, index (index)}
+							{@const team1 = teams.teams.find((t: TeamRow) => t.id === match.team1)}
+							{@const team2 = teams.teams.find((t: TeamRow) => t.id === match.team2)}
+
 							{@const team1Win =
 								match.team1_score && match.team2_score
 									? match.team1_score > match.team2_score
@@ -120,19 +123,18 @@
 											>
 												<td class="tournament-bracket__country m-1 rounded p-1">
 													<abbr class="tournament-bracket__code" title="team1">
-														{match.public_matches_team1_fkey?.name ?? 'tbd'}
+														{team1?.name ?? 'tbd'}
 													</abbr>
 												</td>
 												<td class="tournament-bracket__score m-1 rounded p-1">
 													{#if readOnly}
-														<span class="tournament-bracket__number">{match?.team1_score || 0}</span
-														>
+														<span class="tournament-bracket__number">{match?.team1 || 0}</span>
 													{:else}
 														<input
-															disabled={!match.public_matches_team1_fkey?.name}
+															disabled={!team1?.name}
 															class="max-w-8 border-2 border-solid text-center"
 															bind:value={match.team1_score}
-															onchange={() => updateMatch(match, bracket)}
+															onchange={() => updateMatch(match, bracket, teams)}
 														/>
 													{/if}
 												</td>
@@ -144,7 +146,7 @@
 											>
 												<td class="tournament-bracket__country m-1 rounded p-1">
 													<abbr class="tournament-bracket__code" title="team">
-														{match.public_matches_team2_fkey?.name ?? 'tbd'}
+														{team2?.name ?? 'tbd'}
 													</abbr>
 												</td>
 												<td class="tournament-bracket__score m-1 rounded p-1">
@@ -153,10 +155,10 @@
 														>
 													{:else}
 														<input
-															disabled={!match.public_matches_team1_fkey?.name}
+															disabled={!team2?.name}
 															class="max-w-8 border-2 border-solid text-center"
 															bind:value={match.team2_score}
-															onchange={() => updateMatch(match, bracket)}
+															onchange={() => updateMatch(match, bracket, teams)}
 														/>
 													{/if}
 												</td>

diff --git a/src/components/EditMatch.svelte b/src/components/EditMatch.svelte
@@ -15,7 +15,7 @@
 
 	async function saveMatch() {
 		try {
-			await updateMatch(match, matches);
+			await updateMatch(match, matches, teams);
 			closeModal();
 		} catch (err) {
 			console.error('Failed to save match:', err);

diff --git a/src/components/Match.svelte b/src/components/Match.svelte
@@ -5,9 +5,17 @@
 
 	let {
 		match,
+		team1,
+		team2,
 		readOnly = false,
 		showWinLoss = true
-	}: { match: MatchRow; readOnly: boolean; showWinLoss: boolean } = $props();
+	}: {
+		match: MatchRow;
+		team1: TeamRow;
+		team2: TeamRow;
+		readOnly: boolean;
+		showWinLoss: boolean;
+	} = $props();
 
 	const winClass = 'bg-green-300 dark:bg-green-700';
 	const lossClass = 'bg-red-300 dark:bg-red-700';
@@ -37,7 +45,7 @@
 				? lossClass
 				: ''}"
 		>
-			{match?.public_matches_team1_fkey?.name}</span
+			{team1.name}</span
 		>
 		vs
 		<span
@@ -51,7 +59,7 @@
 			match?.team2_score &&
 			match?.team1_score > match?.team2_score
 				? lossClass
-				: ''}">{match?.public_matches_team2_fkey?.name}</span
+				: ''}">{team2.name}</span
 		>
 	</div>
 {/snippet}

diff --git a/src/components/Matches.svelte b/src/components/Matches.svelte
@@ -159,13 +159,12 @@
 							)}
 							{#if match}
 								{@const matchComplete = match.team1_score !== null && match.team2_score !== null}
-								{@const teamsForMatch = [
-									match.public_matches_team1_fkey.name,
-									match.public_matches_team2_fkey.name
-								]}
+								{@const team1 = data.teams.teams.find((t: TeamRow) => t.id === match.team1)}
+								{@const team2 = data.teams.teams.find((t: TeamRow) => t.id === match.team2)}
+								{@const teamsForMatch = [team1?.name, team2?.name]}
 								{@const hasDefaultTeam = defaultTeam ? teamsForMatch.includes(defaultTeam) : false}
 								{@const defaultTeamWin =
-									match.public_matches_team1_fkey.name == defaultTeam
+									team1.name == defaultTeam
 										? (match.team1_score ?? 0) > (match.team2_score ?? 0)
 										: (match.team2_score ?? 0) > (match.team1_score ?? 0)}
 								{@const rowDivClass = defaultTeamWin
@@ -178,16 +177,17 @@
 											: 'flex-1 border-2 border-solid border-yellow-300 bg-yellow-200 p-2 dark:border-gray-400 dark:bg-gray-400'
 										: 'flex-1 p-2'}"
 								>
-									<ViewMatch {match} {readOnly} showWinLoss={!hasDefaultTeam} />
+									<ViewMatch {match} {readOnly} {team1} {team2} showWinLoss={!hasDefaultTeam} />
 								</div>
 							{:else}
 								<div class="flex-1 p-2"></div>
 							{/if}
 						{/each}
 						{#if data.tournament.refs === 'teams'}
-							{@const ref = data.matches.matches.find(
+							{@const exampleMatch = data.matches.matches.find(
 								(m: MatchRow) => m.round.toString() === round.toString()
-							)?.public_matches_ref_fkey}
+							)}
+							{@const ref = data.teams.teams.find((t: TeamRow) => t.id == exampleMatch.ref)}
 							<div
 								class="flex place-items-center justify-end text-pretty {ref?.name == defaultTeam
 									? 'flex-1 border-2 border-solid border-yellow-300 bg-yellow-200 p-2 dark:border-gray-400 dark:bg-gray-400'

diff --git a/src/components/Teams.svelte b/src/components/Teams.svelte
@@ -86,10 +86,6 @@
 										try {
 											const res = await teams.update(team);
 											if (res) {
-												if (matches && matches.event_id) {
-													await matches.load(matches.event_id);
-												}
-
 												toast.success(`Team ${team.name} updated`);
 											}
 										} catch (err: any) {

diff --git a/src/lib/database/matches.ts b/src/lib/database/matches.ts
@@ -5,8 +5,7 @@ import { matchesRowSchema, matchesUpdateSchema, matchesInsertSchema } from '$sch
 
 const MatchesRowSchemaArray = z.array(matchesRowSchema);
 
-const MATCHES_SELECT_QUERY =
-	'*, public_matches_team1_fkey(name), public_matches_team2_fkey(name), public_matches_ref_fkey(name)';
+const MATCHES_SELECT_QUERY = '*';
 
 type Filter = {
 	column: string;

diff --git a/src/lib/helper.svelte.ts b/src/lib/helper.svelte.ts
@@ -1,5 +1,5 @@
 import { pushState } from '$app/navigation';
-import type { HttpError } from '@sveltejs/kit';
+import { error, type HttpError } from '@sveltejs/kit';
 import toast from 'svelte-french-toast';
 import { EventSupabaseDatabaseService } from '$lib/database/event';
 import { MatchesSupabaseDatabaseService } from '$lib/database/matches';
@@ -25,17 +25,27 @@ export function closeModal() {
 
 export async function updateMatch(
 	match: MatchRow | undefined,
-	matches: Pool | Brackets
+	matches: Pool | Brackets,
+	teams: TeamsInstance
 ): Promise<void> {
 	if (match) {
 		try {
 			match.team1_score = Number(match.team1_score);
 			match.team2_score = Number(match.team2_score);
 
 			const updatedMatch = await matches.updateMatch(match);
-			toast.success(
-				`Match ${updatedMatch?.public_matches_team1_fkey.name} vs ${updatedMatch?.public_matches_team1_fkey.name} updated`
-			);
+			if (!updateMatch) {
+				error(500, 'failed to update match');
+			} else {
+				const team1 = updatedMatch
+					? teams.teams.find((t: TeamRow) => t.id === updatedMatch.team1)
+					: null;
+				const team2 = updatedMatch
+					? teams.teams.find((t: TeamRow) => t.id === updatedMatch.team2)
+					: null;
+
+				toast.success(`Match ${team1?.name} vs ${team2?.name} updated`);
+			}
 		} catch (err) {
 			toast.error((err as HttpError).toString());
 		}

diff --git a/src/lib/standings.svelte.ts b/src/lib/standings.svelte.ts
@@ -1,4 +1,5 @@
 import { Event } from '$lib/event.svelte';
+import { error } from '@sveltejs/kit';
 
 export async function findStandings(
 	matches: MatchRow[],
@@ -11,23 +12,28 @@ export async function findStandings(
 	}, {});
 
 	matches.forEach((match: MatchRow) => {
+		const team1 = teams.find((t: TeamRow) => t.id === match.team1);
+		const team2 = teams.find((t: TeamRow) => t.id === match.team2);
+		if (!team1 || !team2) {
+			console.warn(`Match ${match.id} has invalid team IDs`);
+			error(500, 'Invalid team IDs');
+		}
+
 		if (match.team1_score && match.team2_score) {
-			if (!teamScores[match.public_matches_team1_fkey.name]) {
-				teamScores[match.public_matches_team1_fkey.name] = 0;
+			if (!teamScores[team1.name]) {
+				teamScores[team1.name] = 0;
 			}
 
-			if (!teamScores[match.public_matches_team2_fkey.name]) {
-				teamScores[match.public_matches_team2_fkey.name] = 0;
+			if (!teamScores[team2.name]) {
+				teamScores[team2.name] = 0;
 			}
 
 			if (event?.scoring === 'points') {
-				teamScores[match.public_matches_team1_fkey.name] += match?.team1_score || 0;
-				teamScores[match.public_matches_team2_fkey.name] += match?.team2_score || 0;
+				teamScores[team1.name] += match?.team1_score || 0;
+				teamScores[team2.name] += match?.team2_score || 0;
 			} else {
-				teamScores[match.public_matches_team1_fkey.name] +=
-					match.team1_score > match.team2_score ? 1 : 0;
-				teamScores[match.public_matches_team2_fkey.name] +=
-					match.team2_score > match.team1_score ? 1 : 0;
+				teamScores[team1.name] += match.team1_score > match.team2_score ? 1 : 0;
+				teamScores[team2.name] += match.team2_score > match.team1_score ? 1 : 0;
 			}
 		}
 	});

diff --git a/src/lib/teams.svelte.ts b/src/lib/teams.svelte.ts
@@ -1,6 +1,10 @@
 import type { TeamsSupabaseDatabaseService } from '$lib/database/teams';
 import { Base } from './base';
 
+/**
+ * The Teams class is responsible for managing team-related operations.
+ * It extends the Base class and uses the TeamsSupabaseDatabaseService to interact with the database.
+ */
 export class Teams extends Base {
 	private databaseService: TeamsSupabaseDatabaseService;
 	eventId?: number;