Merge pull request #40 from craigkai/reactivity-pt-2

Reactivity pt 2

package.json

@@ -24,9 +24,9 @@
 		"@supabase/auth-ui-svelte": "^0.2.9",
 		"@supabase/ssr": "^0.4.0",
 		"@supabase/supabase-js": "^2.45.1",
-		"@sveltejs/adapter-auto": "^3.2.2",
-		"@sveltejs/adapter-vercel": "^5.4.1",
-		"@sveltejs/kit": "^2.5.20",
+		"@sveltejs/adapter-auto": "^3.2.3",
+		"@sveltejs/adapter-vercel": "^5.4.2",
+		"@sveltejs/kit": "^2.5.21",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@tailwindcss/typography": "^0.5.14",
 		"@types/jest": "^29.5.12",
@@ -47,13 +47,13 @@
 		"i": "^0.3.7",
 		"jsdom": "^24.1.1",
 		"less": "^4.2.0",
-		"lucide-svelte": "^0.426.0",
+		"lucide-svelte": "^0.427.0",
 		"mode-watcher": "^0.4.1",
 		"postcss": "^8.4.41",
 		"postcss-load-config": "^6.0.1",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier-plugin-tailwindcss": "^0.6.6",
 		"radix-svelte": "^0.9.0",
 		"sass": "^1.77.8",
 		"supabase-to-zod": "^1.0.7",
@@ -77,7 +77,7 @@
 		"zod-validation-error": "^3.3.1",
 		"class-variance-authority": "^0.7.0",
 		"framer-motion": "^11.3.24",
-		"lucide-react": "^0.426.0",
+		"lucide-react": "^0.427.0",
 		"svelte-inview": "^4.0.2",
 		"tailwindcss-animate": "^1.0.7"
 	},

src/components/EditMatch.svelte

@@ -12,12 +12,7 @@
 	let { matchId, matches }: { matchId: number; matches: Pool | Brackets } = $props();
 	const teams = getContext('teams') as Teams;
 
-	let match = $state(matches?.matches?.find((m) => m.id === matchId));
-
-	$effect(() => {
-		matches;
-		match = matches?.matches?.find((m) => m.id === matchId);
-	});
+	let match = $derived(matches?.matches?.find((m) => m.id === matchId));
 
 	async function saveMatch() {
 		try {

src/components/Matches.svelte

@@ -5,46 +5,76 @@
 	import type { RealtimeChannel } from '@supabase/supabase-js';
 	import * as Alert from '$components/ui/alert/index.js';
 	import type { HttpError } from '@sveltejs/kit';
-	import type { Teams } from '$lib/teams.svelte';
 	import Zap from 'lucide-svelte/icons/zap';
 	import Zapoff from 'lucide-svelte/icons/zap-off';
-	import { Event } from '$lib/event.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import toast from 'svelte-french-toast';
+	import type { PageData } from './$types';
 
 	let {
-		readOnly = $bindable(false),
+		readOnly = false,
 		defaultTeam,
-		teams,
-		tournament,
-		matches
-	}: {
-		readOnly: boolean;
-		defaultTeam: string | null;
-		teams: Teams;
-		tournament: Event;
-		matches: Matches;
-	} = $props();
+		data
+	} = $props<{
+		readOnly: Boolean;
+		defaultTeam: String | null;
+		data: PageData;
+	}>();
 
 	let showGenerateMatchesAlert = $state(false);
 	let matchesSubscription: RealtimeChannel | undefined = $state();
-	let subscriptionStatus: any | undefined = $state(matches?.subscriptionStatus);
+	let subscriptionStatus: any | undefined = $derived(data.matches?.subscriptionStatus);
 
+	let seenEvent = $state.snapshot(data.tournament);
+	let seenTeam = $state.snapshot(data.teams.teams);
+
+	// When number of matches change or courts, clear matches or teams
 	$effect(() => {
-		matches;
-		subscriptionStatus = matches?.subscriptionStatus;
+		const eventAttributes = ['courts', 'pools', 'refs'];
+
+		let deleted = false;
+		for (var i = 0; i < eventAttributes.length; i++) {
+			const key = eventAttributes[i];
+
+			if (!$state.is(data.tournament[key], seenEvent[key])) {
+				try {
+					data.matches.deleteAllMatches();
+					deleted = true;
+				} catch (err) {
+					console.error(`Failed to delete matches: ${err as HttpError}`);
+					toast.error('Failed to delete matches');
+				}
+			}
+
+			if (deleted) break;
+		}
+
+		if (!deleted && $state.snapshot(data.teams.teams).length !== seenTeam.length) {
+			try {
+				data.matches.deleteAllMatches();
+				deleted = true;
+			} catch (err) {
+				console.error(`Failed to delete matches: ${err as HttpError}`);
+				toast.error('Failed to delete matches');
+			}
+		}
+
+		if (deleted) {
+			seenEvent = Object.assign(data.tournament);
+			seenTeam = Object.assign(data.teams);
+		}
 	});
 
 	async function checkGenerateMatches() {
-		if ((matches?.matches?.length ?? 0) > 0) {
+		if ((data.matches?.matches?.length ?? 0) > 0) {
 			showGenerateMatchesAlert = true;
 		} else {
 			generateMatches();
 		}
 	}
 
 	onMount(async () => {
-		if ((matches?.matches?.length ?? 0) > 0) await subscribeToMatches();
+		if ((data.matches?.matches?.length ?? 0) > 0) await subscribeToMatches();
 	});
 
 	onDestroy(() => {
@@ -53,7 +83,7 @@
 
 	async function subscribeToMatches() {
 		try {
-			matchesSubscription = await matches.subscribeToMatches();
+			matchesSubscription = await data.matches.subscribeToMatches();
 		} catch (err) {
 			console.error(`Failed to subscribe to matches: ${err as HttpError}`);
 			toast.error('Subscription error!');
@@ -69,7 +99,10 @@
 			}
 
 			// Create new matches
-			const res: Matches | undefined = await matches.create(tournament, teams.teams);
+			const res: Matches | undefined = await data.matches.create(
+				data.tournament,
+				$state.snapshot(data.teams.teams)
+			);
 			if (!res) {
 				toast.error('Failed to create matches');
 				return;
@@ -86,7 +119,7 @@
 
 	const rounds = Math.max.apply(
 		Math,
-		matches?.matches?.map(function (m) {
+		data.matches?.matches?.map(function (m) {
 			return m.round;
 		}) ?? [0]
 	);
@@ -101,15 +134,15 @@
 </div>
 
 <div class="rounded rounded-2xl p-2 dark:bg-gray-800">
-	{#if matches && matches.matches && matches?.matches?.length > 0}
+	{#if data.matches && data.matches.matches && data.matches?.matches?.length > 0}
 		<Table.Root class="table-auto">
 			<Table.Header>
 				<Table.Row>
-					{#each Array(tournament.courts) as _, i}
+					{#each Array(data.tournament.courts) as _, i}
 						{@const index = i + 1}
 						<Table.Head>Court {index}</Table.Head>
 					{/each}
-					{#if tournament.refs === 'teams'}
+					{#if data.tournament.refs === 'teams'}
 						<Table.Head>Ref</Table.Head>
 					{/if}
 				</Table.Row>
@@ -120,8 +153,8 @@
 					{#each Array(rounds) as _, i}
 						{@const round = i + 1}
 						<Table.Row>
-							{#each Array(tournament.courts) as _, court}
-								{@const match = matches.matches.find(
+							{#each Array(data.tournament.courts) as _, court}
+								{@const match = data.matches.matches.find(
 									(m: MatchRow) => m.court === court && m.round.toString() === round.toString()
 								)}
 								{#if match}
@@ -153,8 +186,8 @@
 									<Table.Cell class="p-2"></Table.Cell>
 								{/if}
 							{/each}
-							{#if tournament.refs === 'teams'}
-								{@const ref = matches.matches.find(
+							{#if data.tournament.refs === 'teams'}
+								{@const ref = data.matches.matches.find(
 									(m: MatchRow) => m.round.toString() === round.toString()
 								)?.public_matches_ref_fkey}
 								<Table.Cell