c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-01 15:11:21 +01:00
Code Releases Activity

fix(web): user profile 404 (#1800)

Browse source
This commit is contained in:
Jason Rasmussen 2023-02-19 23:56:02 -05:00 • committed by GitHub
parent 824409351e
commit 83a2669ff5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -16,7 +16,10 @@
}; };
const getUserProfileImage = async () => { const getUserProfileImage = async () => {
return await api.userApi.getProfileImage(user.id); if (!user.profileImagePath) {
return null;
}
return api.userApi.getProfileImage(user.id).catch(() => null);
}; };
</script> </script>
@ -32,18 +35,20 @@
<button <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" 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} {#await getUserProfileImage() then hasProfileImage}
<img {#if hasProfileImage}
transition:fade={{ duration: 100 }} <img
src={`${$page.url.origin}/api/user/profile-image/${user.id}`} transition:fade={{ duration: 100 }}
alt="profile-img" src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
class="inline rounded-full h-20 w-20 object-cover shadow-md" alt="profile-img"
draggable="false" class="inline rounded-full h-20 w-20 object-cover shadow-md"
/> draggable="false"
{:catch} />
<div transition:fade={{ duration: 200 }} class="text-lg"> {:else}
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)} <div transition:fade={{ duration: 200 }} class="text-lg">
</div> {getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
</div>
{/if}
{/await} {/await}
</button> </button>
</div> </div>

33
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { createEventDispatcher, onMount } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte'; import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
import { api, UserResponseDto } from '@api'; import { api, UserResponseDto } from '@api';
@ -17,12 +17,11 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let shouldShowAccountInfoPanel = false; let shouldShowAccountInfoPanel = false;
onMount(() => {
getUserProfileImage();
});
const getUserProfileImage = async () => { 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) => { const getFirstLetter = (text?: string) => {
return text?.charAt(0).toUpperCase(); return text?.charAt(0).toUpperCase();
@ -97,16 +96,18 @@
<button <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" 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} {#await getUserProfileImage() then hasProfileImage}
<img {#if hasProfileImage}
transition:fade={{ duration: 100 }} <img
src={`${$page.url.origin}/api/user/profile-image/${user.id}`} transition:fade={{ duration: 100 }}
alt="profile-img" src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
class="inline rounded-full h-12 w-12 object-cover shadow-md" alt="profile-img"
draggable="false" class="inline rounded-full h-12 w-12 object-cover shadow-md"
/> draggable="false"
{:catch} />
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)} {:else}
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
{/if}
{/await} {/await}
</button> </button>