From f2dfa81ba1a9a33ca32edad2fd663c5fe511e281 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 18 Dec 2024 20:09:46 +0000
Subject: [PATCH] fix: update Avatar component to use event dispatch for URL
 changes

Co-Authored-By: charis@supabase.io <charis@supabase.io>
---
 .../src/routes/account/+page.svelte           | 21 ++++++++++++-------
 .../src/routes/account/Avatar.svelte          | 17 +++++++++++++--
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte b/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
index 6134688fc3b..555f46217db 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
@@ -31,6 +31,10 @@
 			update()
 		}
 	}
+
+	const handleUrlChange = (event: CustomEvent<string>) => {
+		avatarUrl.set(event.detail)
+	}
 </script>
 
 <div class="form-widget">
@@ -41,14 +45,15 @@
 		use:enhance={handleSubmit}
 		bind:this={profileForm}
 	>
-        <Avatar
-            {supabase}
-            bind:url={avatarUrl}
-            size={10}
-            on:upload={() => {
-                profileForm.requestSubmit();
-            }}
-        />
+		<Avatar
+			{supabase}
+			urlProp={avatarUrl}
+			size={10}
+			on:urlChange={handleUrlChange}
+			on:upload={() => {
+				profileForm.requestSubmit();
+			}}
+		/>
 		<div>
 			<label for="email">Email</label>
 			<input id="email" type="text" value={session.user.email} disabled />
diff --git a/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte b/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
index a4dccbd3f90..00f8664ebe9 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
@@ -13,7 +13,20 @@
 	const currentUrl = $svelteState(urlProp)
 	let fileInput: HTMLInputElement | null = null
 
-	const dispatch = createEventDispatcher()
+	const dispatch = createEventDispatcher<{
+		urlChange: string;
+		upload: void;
+	}>()
+
+	$svelteEffect(() => {
+		// Update currentUrl when urlProp changes
+		currentUrl.set(urlProp)
+	})
+
+	$svelteEffect(() => {
+		// Dispatch urlChange event when currentUrl changes
+		dispatch('urlChange', currentUrl)
+	})
 
 	const downloadImage = async (path: string) => {
 		try {
@@ -79,7 +92,7 @@
 			style="height: {size}em; width: {size}em;"
 		/>
 	{:else}
-		<div class="avatar no-image" style="height: {size}em; width: {size}em;"></div>
+		<div class="avatar no-image" style="height: {size}em; width: {size}em;" />
 	{/if}
 	<input type="hidden" name="avatarUrl" value={currentUrl} />