add code for subscribing to bracket matches

src/components/Bracket.svelte

@@ -2,6 +2,7 @@
 	import { Event } from '$lib/event';
 	import { Matches } from '$lib/matches';
 	import type { Teams } from '$lib/teams';
+	import type { RealtimeChannel } from '@supabase/supabase-js';
 
 	export let tournament: Event;
 	export let matches: Matches;
@@ -13,6 +14,12 @@
 
 	const numRounds = teamNames.length / 2 + (teamNames.length % 2);
 
+	let matchesSubscription: RealtimeChannel | undefined;
+	async function subscribeToMatches() {
+		matchesSubscription = await matches.subscribeToBracketMatches();
+	}
+	subscribeToMatches();
+
 	// TODO: Create a listener for when bracket macthes are updated, and auto create the next match in the bracket.
 	// TODO: Allow bracket matches to be edited.
 </script>

src/components/Matches.svelte

@@ -46,7 +46,7 @@
 
 	let matchesSubscription: RealtimeChannel | undefined;
 	async function subscribeToMatches() {
-		matchesSubscription = await matches.subscribeToDB();
+		matchesSubscription = await matches.subscribeToPoolMatches();
 	}
 	subscribeToMatches();
 

src/lib/matches.ts

@@ -90,7 +90,52 @@ export class Matches extends Base {
 		}
 	}
 
-	async subscribeToDB(): Promise<RealtimeChannel> {
+	async bracketMatchUpdated(self: Matches,
+		payload: RealtimePostgresChangesPayload<{
+			[key: string]: MatchRow;
+		}>
+	): Promise<void> {
+		if ((payload.new as MatchRow)?.type !== 'bracket') {
+			return;
+		}
+		const old = payload.old as MatchRow;
+		const updated = payload.new as MatchRow;
+
+		const matchIndex = self.bracketMatches?.findIndex((m: MatchRow) => m.id === old.id);
+		if (matchIndex !== undefined && matchIndex !== -1) {
+			if (self.bracketMatches) {
+				updated.matches_team1_fkey = self.bracketMatches[matchIndex].matches_team1_fkey;
+				updated.matches_team2_fkey = self.bracketMatches[matchIndex].matches_team2_fkey;
+				updated.matches_ref_fkey = self.bracketMatches[matchIndex].matches_ref_fkey;
+			}
+
+			self.bracketMatches?.splice(matchIndex, 1, updated as MatchRow);
+			const matches = self.bracketMatches;
+
+			self._update((that: Matches) => {
+				that.bracketMatches = matches;
+				return that;
+			});
+		} else {
+			self.handleError(400, 'Failed to find bracketMatches to update.');
+		}
+
+		// We want to generate the next round of matches when the previous round is complete
+		console.error("Bracket match updated")
+
+		return;
+	}
+
+	async subscribeToBracketMatches(): Promise<RealtimeChannel> {
+		return await this.databaseService.subscribeToChanges(
+			this,
+			this.bracketMatchUpdated,
+			'matches',
+			'event_id=eq.' + this.event_id
+		);
+	}
+
+	async subscribeToPoolMatches(): Promise<RealtimeChannel> {
 		return await this.databaseService.subscribeToChanges(
 			this,
 			this.matchUpdated,

src/types/schemas.ts

@@ -55,6 +55,7 @@ export const matchesRowSchema = z.object({
 	created_at: z.string(),
 	event_id: z.number(),
 	id: z.number(),
+	type: z.string().nullable(),
 	ref: z.number().nullable(),
 	round: z.number(),
 	team1: z.number(),