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 } });
+});