fix defaultTeam select

src/routes/events/[slug]/+page.svelte

@@ -9,16 +9,14 @@
 	import { browser } from '$app/environment';
 	import { pushState } from '$app/navigation';
 	import { onMount, tick } from 'svelte';
+	import { writable, derived } from 'svelte/store';
+	import type { PageData } from '$types';
 
-	let {
-		data,
-		tournament = $bindable(),
-		matches = $bindable(),
-		teams = $bindable(),
-		bracket = $bindable()
-	} = $props();
+	let { data = $bindable() }: { data: PageData } = $props();
+	let { tournament, bracket, teams, matches, defaultTeam } = $state(data);
 
-	let defaultTeam = $state({ value: data.default_team, label: data.default_team });
+	// Convert teams to a writable store
+	const teamsStore = writable(teams);
 
 	let historyReady = false;
 	onMount(async () => {
@@ -27,21 +25,26 @@
 	});
 
 	$effect(() => {
-		defaultTeam;
-
 		if (browser && historyReady) {
-			$page.url.searchParams.set('team', defaultTeam?.value);
-			const url = $page.url.href;
-			pushState(url, '');
+			const url = new URL($page.url);
+			if (defaultTeam?.value) {
+				url.searchParams.set('team', defaultTeam.value);
+			} else {
+				url.searchParams.delete('team');
+			}
+			pushState(url.href, '');
 		}
 	});
 
-	const teamsSelect =
-		teams?.teams
-			?.map((team: { name: any }) => {
-				return { value: team.name, name: team.name };
-			})
-			.concat([{ value: '', name: 'none' }]) || [];
+	const teamsSelect = derived(
+		teamsStore,
+		($teams) =>
+			$teams?.teams
+				?.map((team: { name: string }) => {
+					return { value: team.name, name: team.name };
+				})
+				.concat([{ value: '', name: 'none' }]) || []
+	);
 </script>
 
 <div class="flex flex-col items-center">
@@ -51,14 +54,14 @@
 		<Select.Root
 			bind:selected={defaultTeam}
 			onSelectedChange={(v) => {
-				v && (defaultTeam = { value: v, label: v });
+				if (v) defaultTeam = { value: v, label: v };
 			}}
 		>
 			<Select.Trigger class="w-[180px]">
 				<Select.Value placeholder="Select a team" />
 			</Select.Trigger>
 			<Select.Content>
-				{#each teamsSelect as team}
+				{#each $teamsSelect as team}
 					<Select.Item value={team.value} label={team.name}>{team.name}</Select.Item>
 				{/each}
 			</Select.Content>

src/routes/events/[slug]/+page.ts

@@ -1,6 +1,21 @@
+import { initiateEvent } from '$lib/helper.svelte';
 import type { PageLoad } from './$types';
 
 // src/routes/events/+page.server.ts
-export const load: PageLoad = async ({ params, url }) => {
-	return { event_id: params.slug, default_team: url.searchParams.get('team') };
+export const load: PageLoad = async ({ params, url, parent }) => {
+	const { supabase } = await parent();
+
+	let { tournament, matches, teams, bracket } = await initiateEvent(
+		params.slug as unknown as number,
+		supabase
+	);
+
+	return {
+		event_id: params.slug,
+		tournament,
+		matches,
+		teams,
+		bracket,
+		default_team: url.searchParams.get('team')
+	};
 };

src/routes/protected-routes/events/[slug]/+page.ts

@@ -4,7 +4,7 @@ import { formSchema as settingsSchema, type FormSchema } from '$schemas/settings
 import { zod } from 'sveltekit-superforms/adapters';
 import { initiateEvent } from '$lib/helper.svelte';
 
-export const load: PageLoad = async ({ params, parent }) => {
+export const load: PageLoad = async ({ params, parent, url }) => {
 	const { supabase } = await parent();
 
 	let { tournament, matches, teams, bracket } = await initiateEvent(
@@ -15,7 +15,15 @@ export const load: PageLoad = async ({ params, parent }) => {
 	if (params.slug === 'create') {
 		const form: SuperValidated<Infer<FormSchema>> = await superValidate(zod(settingsSchema));
 
-		return { event_id: params.slug, form, tournament, matches, teams, bracket };
+		return {
+			event_id: params.slug,
+			form,
+			tournament,
+			matches,
+			teams,
+			bracket,
+			default_team: url.searchParams.get('team')
+		};
 	}
 
 	const form: SuperValidated<Infer<FormSchema>> = await superValidate(
@@ -30,5 +38,13 @@ export const load: PageLoad = async ({ params, parent }) => {
 		zod(settingsSchema)
 	);
 
-	return { event_id: params.slug, form, tournament, matches, teams, bracket };
+	return {
+		event_id: params.slug,
+		form,
+		tournament,
+		matches,
+		teams,
+		bracket,
+		default_team: url.searchParams.get('team')
+	};
 };