From ae3ef68f5ad8eceddb2db88b41021fadbf4cb919 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 13 Sep 2022 19:48:48 -0600
Subject: banner and avatar upload refactoring

---
 src/components/AppHeader.svelte                |  6 ++--
 src/lib/store.js                               |  3 ++
 src/routes/[username]/settings/+page.svelte    | 11 ++++++-
 src/routes/[username]/settings/_account.svelte | 42 ++++++++++++++++++--------
 src/routes/invoice/[id]/+page.svelte           |  2 +-
 5 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 35e6f250..8b10f19e 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,6 +1,6 @@
 <script>
 	import OutClick from 'svelte-outclick';
-	import { user, newPayment, colorTheme } from '$lib/store';
+	import { user, newPayment, colorTheme, tempProfileFiles } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
@@ -25,7 +25,7 @@
 		}
 	};
 
-	$: background = $user?.banner ? `url(/api/public/${$user.username}-banner.png)` : undefined;
+	$: background = $tempProfileFiles && $tempProfileFiles.banner ? `url(${$tempProfileFiles.banner})` : $user?.banner ? `url(/api/public/${$user.username}-banner.png)` : undefined;
 </script>
 
 <header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background>
@@ -94,7 +94,7 @@
 	{#if $user.profile}
 		<div class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full overflow-hidden text-center w-24 h-24 my-auto">
 			<img
-				src={`/api/public/${$user.username}-profile.png`}
+				src={$tempProfileFiles && $tempProfileFiles.profile ? $tempProfileFiles.profile : `/api/public/${$user.username}-profile.png`}
 				class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 			/>
 		</div>
diff --git a/src/lib/store.js b/src/lib/store.js
index dcc81cda..1412c4e3 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -37,3 +37,6 @@ export const token = persistSession('token');
 export const invoices = writable({});
 export const newPayment = persistLocal('newPayment');
 export const colorTheme = writable('from-primary to-gradient');
+export const tempProfileFiles = writable();
+export const avatarUpload = writable()
+export const bannerUpload = writable()
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 8c01dfbd..997d95d1 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -6,7 +6,8 @@
 	import { AppHeader, Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { failure, success, put } from '$lib/utils';
-	import { user } from '$lib/store';
+	import { user, avatarUpload, bannerUpload } from '$lib/store';
+	import { upload } from '$lib/upload';
 
 	let tab = 'account';
 
@@ -19,8 +20,16 @@
 	$: ({ comp } = tabs.find((t) => t.name === tab));
 
 	let save = async () => {
+
 		try {
 			await put('/user', $user);
+if ($avatarUpload) {
+
+		await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress);
+}
+if ($bannerUpload) {
+		await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress);
+}
 			success('Settings saved');
 		} catch (e) {
 			failure('Something went wrong');
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 000ea519..c478a5dc 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { tick } from 'svelte';
-	import { user, colorTheme, rates } from '$lib/store';
+	import { user, colorTheme, rates, tempProfileFiles, avatarUpload, bannerUpload } from '$lib/store';
 	import { Icon, Toggle, LocaleSelector } from '$comp';
 	import { t } from '$lib/translations';
 	import { upload } from '$lib/upload';
@@ -13,6 +13,7 @@
 
 	$: profile = files.profile.src || user.profile;
 	$: banner = files.banner.src || user.banner;
+$: $tempProfileFiles = {profile: files.profile.src, banner: files.banner.src}
 
 	let colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
@@ -41,9 +42,15 @@
 			files[type].src = e.target.result;
 		};
 		reader.readAsDataURL(file);
-		console.log(file);
+	
 		files[type].filename = file.name;
-		await upload(file, type, progress);
+if (type === 'profile') {
+$avatarUpload = {file, type, progress}
+}
+else if (type === 'banner') {
+$bannerUpload = {file, type, progress}
+}
+
 	};
 
 	$: $user.password = $user.confirm = password;
@@ -51,7 +58,7 @@
 
 <div>
 	<label for="language" class="font-bold block mb-1">{$t('user.settings.locale')}</label>
-	<LocaleSelector style="block py-3 w-full" />
+	<LocaleSelector style="select-styles block py-3 w-full" />
 </div>
 
 <div>
@@ -74,7 +81,7 @@
 	<button
 		type="button"
 		on:click={() => (revealPassword = !revealPassword)}
-		class="absolute right-5 top-10"
+		class="absolute right-5 top-11"
 	>
 		<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
 	</button>
@@ -106,10 +113,7 @@
 </div>
 
 <div>
-	<div class="flex justify-between items-center">
 		<span class="font-bold">{$t('user.settings.profileImage')}</span>
-	</div>
-
 	<div class="flex">
 		{#if profile}
 			<div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto">
@@ -118,20 +122,28 @@
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 				/>
 			</div>
-		{:else}
+		{:else if $user.profile}
+			<div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto">
+				<img
+					src={`/api/public/${$user.username}-profile.png`}
+					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
+				/>
+			</div>
+{:else}
 			<div
-				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24 my-auto"
+				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto"
 			>
 				<Icon icon="logo-symbol-white" style="mx-auto" />
 			</div>
 		{/if}
 		<div
-			class="ml-2 border border-dashed border-2 p-2 border-white hover:border-secondary w-full cursor-pointer"
-			on:click={() => select('profile')}
+			class="ml-2 p-2"
+
 		>
 			<button
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary"
+on:click={() => select('profile')}
 				>Select</button
 			>
 			<input
@@ -151,15 +163,19 @@
 	<div class="flex justify-between items-center">
 		<span class="font-bold">{$t('user.settings.bannerImage')}</span>
 	</div>
+<!-- found missing translation -->
 	<p class="text-secondary mb-4">Recommended size: 1920x540px</p>
 	{#if banner}
 		<img src={banner} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" />
-	{:else}
+	{:else if $user.banner}
+	<img src={`/api/public/${$user.username}-banner.png`} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" />
+{:else}
 		<div
 			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer"
 			on:click={() => select('banner')}
 		/>
 	{/if}
+<!-- found missing translation -->
 	<button
 		type="button"
 		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary"
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index f6ecdc0e..123336ea 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -225,7 +225,7 @@
 								placeholder="Other"
 							/>
 							<button
-								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+								class="w-full md:w-auto mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
 									? !customTipAmount && !tipAmount
 										? 'opacity-50'
 										: 'opacity-100'
-- 
cgit v1.2.3