From 54cf5dba01f0ca36c5dde6c67728629c44ec446f Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 4 Feb 2025 12:01:13 +0530
Subject: [PATCH] Tweak

---
 .../components/pages/gallery/PreviewCard.tsx  | 30 ++-----------------
 web/packages/base/i18n-date.ts                | 17 ++++++-----
 web/packages/base/i18n.ts                     |  3 +-
 web/packages/shared/time/format.ts            |  2 ++
 4 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx b/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
index 9f224c1187..cebd5424a5 100644
--- a/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
+++ b/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
@@ -1,5 +1,5 @@
 import { Overlay } from "@/base/components/containers";
-import { formatDateRelative } from "@/base/i18n-date";
+import { formattedDateRelative } from "@/base/i18n-date";
 import log from "@/base/log";
 import { downloadManager } from "@/gallery/services/download";
 import { enteFileDeletionDate } from "@/media/file";
@@ -360,35 +360,9 @@ export default function PreviewCard(props: IProps) {
 
             {props?.activeCollectionID === TRASH_SECTION && file.isTrashed && (
                 <FileAndCollectionNameOverlay>
-                    <p>{formatDateRelative(enteFileDeletionDate(file))}</p>
+                    <p>{formattedDateRelative(enteFileDeletionDate(file))}</p>
                 </FileAndCollectionNameOverlay>
             )}
         </Cont>
     );
 }
-
-/*
-function formatDateRelative(date: number) {
-    const units = {
-        year: 24 * 60 * 60 * 1000 * 365,
-        month: (24 * 60 * 60 * 1000 * 365) / 12,
-        day: 24 * 60 * 60 * 1000,
-        hour: 60 * 60 * 1000,
-        minute: 60 * 1000,
-        second: 1000,
-    };
-    const relativeDateFormat = new Intl.RelativeTimeFormat(i18n.language, {
-        localeMatcher: "best fit",
-        numeric: "always",
-        style: "long",
-    });
-    const elapsed = date - Date.now(); // "Math.abs" accounts for both "past" & "future" scenarios
-
-    for (const u in units)
-        if (Math.abs(elapsed) > units[u] || u === "second")
-            return relativeDateFormat.format(
-                Math.round(elapsed / units[u]),
-                u as Intl.RelativeTimeFormatUnit,
-            );
-}
-*/
diff --git a/web/packages/base/i18n-date.ts b/web/packages/base/i18n-date.ts
index 534dce5547..1c60e56d1e 100644
--- a/web/packages/base/i18n-date.ts
+++ b/web/packages/base/i18n-date.ts
@@ -6,9 +6,9 @@
  */
 import i18n from "i18next";
 
-let _relativeDateFormat: Intl.RelativeTimeFormat | undefined;
+let _relativeTimeFormat: Intl.RelativeTimeFormat | undefined;
 
-export const formatDateRelative = (date: Date) => {
+export const formattedDateRelative = (date: Date) => {
     const units: [Intl.RelativeTimeFormatUnit, number][] = [
         ["year", 24 * 60 * 60 * 1000 * 365],
         ["month", (24 * 60 * 60 * 1000 * 365) / 12],
@@ -18,20 +18,21 @@ export const formatDateRelative = (date: Date) => {
         ["second", 1000],
     ];
 
-    const relativeDateFormat = (_relativeDateFormat ??=
+    // Math.abs accounts for both past and future scenarios.
+    const elapsed = Math.abs(date.getTime() - Date.now());
+
+    // Lazily created, then cached, instance of RelativeTimeFormat.
+    const relativeTimeFormat = (_relativeTimeFormat ??=
         new Intl.RelativeTimeFormat(i18n.language, {
             localeMatcher: "best fit",
             numeric: "always",
             style: "short",
         }));
 
-    // Math.abs accounts for both past and future scenarios.
-    const elapsed = Math.abs(date.getTime() - Date.now());
-
     for (const [u, d] of units) {
         if (elapsed > d)
-            return relativeDateFormat.format(Math.round(elapsed / d), u);
+            return relativeTimeFormat.format(Math.round(elapsed / d), u);
     }
 
-    return relativeDateFormat.format(Math.round(elapsed / 1000), "second");
+    return relativeTimeFormat.format(Math.round(elapsed / 1000), "second");
 };
diff --git a/web/packages/base/i18n.ts b/web/packages/base/i18n.ts
index c0345b8668..80407383ec 100644
--- a/web/packages/base/i18n.ts
+++ b/web/packages/base/i18n.ts
@@ -230,7 +230,8 @@ export const setLocaleInUse = async (locale: SupportedLocale) => {
 
 let _numberFormat: Intl.NumberFormat | undefined;
 /**
- * Lazily created instance of NumberFormat used by {@link formattedNumber}.
+ * Lazily created, cached, instance of NumberFormat used by
+ * {@link formattedNumber}.
  *
  * See: [Note: Changing locale causes a full reload].
  */
diff --git a/web/packages/shared/time/format.ts b/web/packages/shared/time/format.ts
index 9caa5daab9..4a728cad4d 100644
--- a/web/packages/shared/time/format.ts
+++ b/web/packages/shared/time/format.ts
@@ -1,5 +1,7 @@
 import i18n, { t } from "i18next";
 
+// TODO: Move to @/base/date
+
 const dateTimeFullFormatter1 = new Intl.DateTimeFormat(i18n.language, {
     weekday: "short",
     month: "short",