From 3cd187dced7883979712b59c802d020da3028952 Mon Sep 17 00:00:00 2001 From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Date: Fri, 5 Jul 2024 15:06:35 +0200 Subject: [PATCH] refactor(web): use derived instead of get(t) (#10884) --- .../components/faces-page/assign-face-side-panel.svelte | 6 +++--- .../lib/components/faces-page/person-side-panel.svelte | 4 ++-- web/src/lib/components/memory-page/memory-viewer.svelte | 6 +++--- web/src/lib/components/photos-page/memory-lane.svelte | 2 +- web/src/lib/utils.ts | 7 +++---- web/src/lib/utils/person.ts | 9 ++++----- 6 files changed, 16 insertions(+), 18 deletions(-) diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte index 1b6894dd91..0dd4251dab 100644 --- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte +++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte @@ -109,8 +109,8 @@ curve shadow url={getPeopleThumbnailUrl(person)} - altText={getPersonNameWithHiddenValue(person.name, person.isHidden)} - title={getPersonNameWithHiddenValue(person.name, person.isHidden)} + altText={$getPersonNameWithHiddenValue(person.name, person.isHidden)} + title={$getPersonNameWithHiddenValue(person.name, person.isHidden)} widthStyle="90px" heightStyle="90px" thumbhash={null} @@ -118,7 +118,7 @@ /> </div> - <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}> + <p class="mt-1 truncate font-medium" title={$getPersonNameWithHiddenValue(person.name, person.isHidden)}> {person.name} </p> </button> diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte index 735e6ff654..712100763c 100644 --- a/web/src/lib/components/faces-page/person-side-panel.svelte +++ b/web/src/lib/components/faces-page/person-side-panel.svelte @@ -236,7 +236,7 @@ shadow url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id])} altText={selectedPersonToReassign[face.id].name} - title={getPersonNameWithHiddenValue( + title={$getPersonNameWithHiddenValue( selectedPersonToReassign[face.id].name, selectedPersonToReassign[face.id]?.isHidden, )} @@ -250,7 +250,7 @@ shadow url={getPeopleThumbnailUrl(face.person)} altText={face.person.name} - title={getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)} + title={$getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)} widthStyle={thumbnailWidth} heightStyle={thumbnailWidth} hidden={face.person.isHidden} diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte index ee58dc40c8..ea268126c2 100644 --- a/web/src/lib/components/memory-page/memory-viewer.svelte +++ b/web/src/lib/components/memory-page/memory-viewer.svelte @@ -169,7 +169,7 @@ <ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} forceDark> <svelte:fragment slot="leading"> <p class="text-lg"> - {memoryLaneTitle(currentMemory.yearsAgo)} + {$memoryLaneTitle(currentMemory.yearsAgo)} </p> </svelte:fragment> @@ -261,7 +261,7 @@ {#if previousMemory} <div class="absolute bottom-4 right-4 text-left text-white"> <p class="text-xs font-semibold text-gray-200">{$t('previous').toUpperCase()}</p> - <p class="text-xl">{memoryLaneTitle(previousMemory.yearsAgo)}</p> + <p class="text-xl">{$memoryLaneTitle(previousMemory.yearsAgo)}</p> </div> {/if} </button> @@ -344,7 +344,7 @@ {#if nextMemory} <div class="absolute bottom-4 left-4 text-left text-white"> <p class="text-xs font-semibold text-gray-200">{$t('up_next').toUpperCase()}</p> - <p class="text-xl">{memoryLaneTitle(nextMemory.yearsAgo)}</p> + <p class="text-xl">{$memoryLaneTitle(nextMemory.yearsAgo)}</p> </div> {/if} </button> diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte index 5c50056627..ac2cbe415d 100644 --- a/web/src/lib/components/photos-page/memory-lane.svelte +++ b/web/src/lib/components/photos-page/memory-lane.svelte @@ -80,7 +80,7 @@ draggable="false" /> <p class="absolute bottom-2 left-4 z-10 text-lg text-white"> - {memoryLaneTitle(memory.yearsAgo)} + {$memoryLaneTitle(memory.yearsAgo)} </p> <div class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20" diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts index 1ae381bbf2..cd6d4e3ca1 100644 --- a/web/src/lib/utils.ts +++ b/web/src/lib/utils.ts @@ -317,10 +317,9 @@ export const handlePromiseError = <T>(promise: Promise<T>): void => { promise.catch((error) => console.error(`[utils.ts]:handlePromiseError ${error}`, error)); }; -export const memoryLaneTitle = (yearsAgo: number) => { - const $t = get(t); - return $t('years_ago', { values: { years: yearsAgo } }); -}; +export const memoryLaneTitle = derived(t, ($t) => { + return (yearsAgo: number) => $t('years_ago', { values: { years: yearsAgo } }); +}); export const withError = async <T>(fn: () => Promise<T>): Promise<[undefined, T] | [unknown, undefined]> => { try { diff --git a/web/src/lib/utils/person.ts b/web/src/lib/utils/person.ts index 06cddc9bdf..79f9284d8a 100644 --- a/web/src/lib/utils/person.ts +++ b/web/src/lib/utils/person.ts @@ -1,6 +1,6 @@ import type { PersonResponseDto } from '@immich/sdk'; import { t } from 'svelte-i18n'; -import { get } from 'svelte/store'; +import { derived } from 'svelte/store'; export const searchNameLocal = ( name: string, @@ -27,7 +27,6 @@ export const searchNameLocal = ( .slice(0, slice); }; -export const getPersonNameWithHiddenValue = (name: string, isHidden: boolean) => { - const $t = get(t); - return $t('person_hidden', { values: { name: name, hidden: isHidden } }); -}; +export const getPersonNameWithHiddenValue = derived(t, ($t) => { + return (name: string, isHidden: boolean) => $t('person_hidden', { values: { name: name, hidden: isHidden } }); +});