From 8fd056407333655a9a64fedff341d1262accd16c Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Mon, 26 Jun 2023 13:27:43 +0530
Subject: [PATCH 1/2] fixed username validation issue

---
 .../Profile/DrawerEditProfile.svelte          | 45 +++++++++++++++----
 src/lib/utils.ts                              | 18 ++++++++
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index c00d4e30..26f9b558 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -3,10 +3,13 @@
 	import { page } from '$app/stores'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import { category_list } from '$lib/stores/channelStore'
+	import { createEffect } from '$lib/utils'
 
 	export let showDrawer: boolean
 	export let profile: any
 
+	const useOueryEffect = createEffect();
+
 	let showAddCategory = false,
 		maxCategory = 4
 
@@ -25,10 +28,20 @@
 		}, 200)
 	}
 
-	let username: HTMLInputElement
-	// $: if ($page.status === 422) {
-	// 	username.setCustomValidity('This username is already taken')
-	// }
+	let username: HTMLInputElement, submitBtn:any;
+	
+	$: useOueryEffect(() => {
+		if ($page.status === 422) {
+			submitBtn.disabled = false
+			let v = username.value
+			username.value = ""
+			username.setCustomValidity('This username is already taken')
+			submitBtn.click()
+			username.value = v
+		}
+		else if(submitBtn) submitBtn.disabled = false
+	}, [$page.status]);
+
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
@@ -53,7 +66,11 @@
 					if (profile?.category?.length) {
 						data.append('category', JSON.stringify(profile?.category))
 					}
-				}}>
+				}}
+				on:submit={() => {
+					submitBtn.disabled = true
+				}}
+			>
 				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col rounded-lg">
 					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 						Update Profile
@@ -76,8 +93,12 @@
 							required
 							class="input input-primary input-bordered mt-5 w-full"
 							placeholder="Username"
-							bind:this={username} />
-
+							bind:this={username}
+							on:input={() =>{
+								username.setCustomValidity('')
+							}}
+						/>
+						
 						<input
 							bind:value={profile.website}
 							type="url"
@@ -87,6 +108,7 @@
 							placeholder="Your website URL" />
 
 						<div class="form-control mt-5 w-full">
+							<!-- svelte-ignore a11y-label-has-associated-control -->
 							<label class="label">
 								<span class="label-text">Banner</span>
 							</label>
@@ -98,6 +120,7 @@
 						</div>
 
 						<div class="form-control mt-5 w-full">
+							<!-- svelte-ignore a11y-label-has-associated-control -->
 							<label class="label">
 								<span class="label-text">Avatar</span>
 							</label>
@@ -138,8 +161,12 @@
 							type="button"
 							class="btn btn-neutral text-white grow"
 							on:click={() => toggleDrawer()}>Cancel</button>
-						<button type="submit" class="btn btn-primary grow" on:click={() => toggleDrawer()}
-							>Save</button>
+						<button 
+							type="submit" 
+							class="btn btn-primary grow"
+							bind:this={submitBtn}
+							
+						>Save</button>
 					</div>
 				</div>
 			</form>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index fbe15b53..70397ae2 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,3 +1,5 @@
+import { browser } from "$app/environment";
+
 export const levelAndBarValueFromExp = (
 	currentExp: number
 ): { level: number; barValue: number } => {
@@ -269,3 +271,19 @@ export const clickOutside = (element: any, callbackFunction: any) => {
 		}
 	}
 }
+
+
+export const createEffect = (...initialDeps: any[]) => {
+	let diff = JSON.stringify(initialDeps);
+	return (callback: () => void, deps?: any[], allowServerSide = false) => {
+	  if (
+		JSON.stringify(deps) !== diff &&
+		((!allowServerSide && browser) || allowServerSide)
+	  ) {
+		diff = JSON.stringify(deps);
+		callback();
+	  } else if (!deps) {
+		diff = "";
+	  }
+	};
+};
\ No newline at end of file

From ca77c4a1006c44e278ec2e3d0dc8780625312a23 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Tue, 27 Jun 2023 17:54:52 +0530
Subject: [PATCH 2/2] fixed username second attempt issue

---
 .../Profile/DrawerEditProfile.svelte          | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index 26f9b558..79039680 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -8,6 +8,8 @@
 	export let showDrawer: boolean
 	export let profile: any
 
+	let params = $page.params
+
 	const useOueryEffect = createEffect();
 
 	let showAddCategory = false,
@@ -29,18 +31,32 @@
 	}
 
 	let username: HTMLInputElement, submitBtn:any;
+	let prevUsername = ""
 	
 	$: useOueryEffect(() => {
-		if ($page.status === 422) {
+		if ($page.status === 422 && $page.form && $page.form.username !== prevUsername) {
 			submitBtn.disabled = false
 			let v = username.value
 			username.value = ""
 			username.setCustomValidity('This username is already taken')
 			submitBtn.click()
 			username.value = v
+			prevUsername = $page.form.username
+		}
+	}, [$page]);
+
+	$: useOueryEffect(() => {
+
+		for(let key in $page.params){
+			if($page.params[key] !== params[key]){
+				if(submitBtn)
+					submitBtn.disabled = false
+				toggleDrawer()
+				break;
+			}
 		}
-		else if(submitBtn) submitBtn.disabled = false
-	}, [$page.status]);
+
+	}, [$page.params])
 
 </script>