From 83a2669ff523b58a0c285528b379a221258be1cf Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Sun, 19 Feb 2023 23:56:02 -0500
Subject: [PATCH] fix(web): user profile 404 (#1800)

---
 .../navigation-bar/account-info-panel.svelte  | 31 +++++++++--------
 .../navigation-bar/navigation-bar.svelte      | 33 ++++++++++---------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index 1bf4aae8c8..821971ba26 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -16,7 +16,10 @@
 	};
 
 	const getUserProfileImage = async () => {
-		return await api.userApi.getProfileImage(user.id);
+		if (!user.profileImagePath) {
+			return null;
+		}
+		return api.userApi.getProfileImage(user.id).catch(() => null);
 	};
 </script>
 
@@ -32,18 +35,20 @@
 		<button
 			class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg"
 		>
-			{#await getUserProfileImage() then}
-				<img
-					transition:fade={{ duration: 100 }}
-					src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
-					alt="profile-img"
-					class="inline rounded-full h-20 w-20 object-cover shadow-md"
-					draggable="false"
-				/>
-			{:catch}
-				<div transition:fade={{ duration: 200 }} class="text-lg">
-					{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
-				</div>
+			{#await getUserProfileImage() then hasProfileImage}
+				{#if hasProfileImage}
+					<img
+						transition:fade={{ duration: 100 }}
+						src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
+						alt="profile-img"
+						class="inline rounded-full h-20 w-20 object-cover shadow-md"
+						draggable="false"
+					/>
+				{:else}
+					<div transition:fade={{ duration: 200 }} class="text-lg">
+						{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
+					</div>
+				{/if}
 			{/await}
 		</button>
 	</div>
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index 5d219c7f4c..55dae7ec18 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 	import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
 	import { api, UserResponseDto } from '@api';
@@ -17,12 +17,11 @@
 	const dispatch = createEventDispatcher();
 	let shouldShowAccountInfoPanel = false;
 
-	onMount(() => {
-		getUserProfileImage();
-	});
-
 	const getUserProfileImage = async () => {
-		return await api.userApi.getProfileImage(user.id);
+		if (!user.profileImagePath) {
+			return null;
+		}
+		return api.userApi.getProfileImage(user.id).catch(() => null);
 	};
 	const getFirstLetter = (text?: string) => {
 		return text?.charAt(0).toUpperCase();
@@ -97,16 +96,18 @@
 				<button
 					class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
 				>
-					{#await getUserProfileImage() then}
-						<img
-							transition:fade={{ duration: 100 }}
-							src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
-							alt="profile-img"
-							class="inline rounded-full h-12 w-12 object-cover shadow-md"
-							draggable="false"
-						/>
-					{:catch}
-						{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
+					{#await getUserProfileImage() then hasProfileImage}
+						{#if hasProfileImage}
+							<img
+								transition:fade={{ duration: 100 }}
+								src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
+								alt="profile-img"
+								class="inline rounded-full h-12 w-12 object-cover shadow-md"
+								draggable="false"
+							/>
+						{:else}
+							{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
+						{/if}
 					{/await}
 				</button>