Add test

web/src/ui/i18n/types.ts

@@ -80,7 +80,7 @@ export type ComponentKey =
     | import("ui/pages/dataExplorer/DataExplorer").I18n
     | import("ui/pages/dataExplorer/UrlInput").I18n
     | import("ui/shared/CommandBar").I18n
-    | import("ui/shared/useFormattedDate").I18n
+    | import("ui/shared/formattedDate/useFormattedDate").I18n
     | import("ui/shared/CopyToClipboardIconButton").I18n
     | import("ui/shared/Datagrid/CustomDataGrid").I18n
     | import("ui/shared/Datagrid/CustomDataGridToolbarDensitySelector").I18n

web/src/ui/pages/account/AccountKubernetesTab.tsx

@@ -14,7 +14,7 @@ import { useConstCallback } from "powerhooks/useConstCallback";
 import { IconButton } from "onyxia-ui/IconButton";
 import { CircularProgress } from "onyxia-ui/CircularProgress";
 import { useCoreState, useCore } from "core";
-import { useFromNow } from "ui/shared/useFormattedDate";
+import { useFromNow } from "ui/shared/formattedDate";
 import { getIconUrlByName } from "lazy-icons";
 
 const CodeBlock = lazy(() => import("ui/shared/CodeBlock"));

web/src/ui/pages/account/AccountStorageTab.tsx

@@ -9,7 +9,7 @@ import { tss } from "tss";
 import { assert } from "tsafe/assert";
 import { saveAs } from "file-saver";
 import { smartTrim } from "ui/tools/smartTrim";
-import { useFromNow } from "ui/shared/useFormattedDate";
+import { useFromNow } from "ui/shared/formattedDate";
 import { useCoreState, useCore } from "core";
 import { declareComponentKeys } from "i18nifty";
 import { useConstCallback } from "powerhooks/useConstCallback";

web/src/ui/pages/account/AccountVaultTab.tsx

@@ -14,7 +14,7 @@ import { useConstCallback } from "powerhooks/useConstCallback";
 import { IconButton } from "onyxia-ui/IconButton";
 import { CircularProgress } from "onyxia-ui/CircularProgress";
 import { useCoreState, useCore } from "core";
-import { useFromNow } from "ui/shared/useFormattedDate";
+import { useFromNow } from "ui/shared/formattedDate";
 import type { Link } from "type-route";
 import { routes } from "ui/routes";
 import { capitalize } from "tsafe/capitalize";

web/src/ui/pages/mySecrets/SecretsExplorer/SecretsExplorer.tsx

@@ -26,7 +26,7 @@ import { SecretsExplorerButtonBar } from "./SecretsExplorerButtonBar";
 import { DirectoryHeader } from "onyxia-ui/DirectoryHeader";
 import { useDomRect } from "powerhooks/useDomRect";
 import { ExplorerIcon } from "./ExplorerIcon";
-import { getFormattedDate } from "ui/tools/useFormattedDate";
+import { getFormattedDate } from "ui/shared/formattedDate";
 import { Dialog } from "onyxia-ui/Dialog";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { Deferred } from "evt/tools/Deferred";
@@ -297,14 +297,13 @@ export const SecretsExplorer = memo((props: ExplorerProps) => {
     });
 
     const { formattedDate } = (function useClosure() {
-        // NOTE: For enforcing refresh if lang is changed
-        useLang();
+        const { lang } = useLang();
 
         const formattedDate = !props.isFileOpen ? undefined : props.openFileTime ===
           undefined ? (
             <>&nbsp;</>
         ) : (
-            getFormattedDate({ time: props.openFileTime })
+            getFormattedDate({ time: props.openFileTime, lang })
         );
 
         return { formattedDate };

web/src/ui/pages/myServices/ClusterEventsDialog.tsx

@@ -4,7 +4,7 @@ import { useEvt } from "evt/hooks";
 import { Dialog } from "onyxia-ui/Dialog";
 import { Button } from "onyxia-ui/Button";
 import { useCoreState, useCore } from "core";
-import { fromNow } from "ui/shared/useFormattedDate";
+import { fromNow } from "ui/shared/formattedDate";
 import { tss } from "tss";
 import { useWindowInnerSize } from "powerhooks/useWindowInnerSize";
 import { assert } from "tsafe/assert";

web/src/ui/pages/myServices/MyServicesCards/MyServicesCard/MyServicesRunningTime.tsx

@@ -2,7 +2,7 @@ import { memo } from "react";
 import { tss } from "tss";
 import { Icon } from "onyxia-ui/Icon";
 import { Text } from "onyxia-ui/Text";
-import { useFromNow } from "ui/shared/useFormattedDate";
+import { useFromNow } from "ui/shared/formattedDate";
 import { getIconUrlByName } from "lazy-icons";
 
 export type Props = {

web/src/ui/shared/formattedDate/getFormattedDate.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { getFormattedDate } from "./getFormattedDate";
+
+describe("getFormattedDate", () => {
+    it("formats date within the same year", () => {
+        const time = new Date(1732544444722).setMonth(5, 15);
+        const formattedDate = getFormattedDate({ time, lang: "en" });
+
+        expect(formattedDate).toBe("Saturday, June 15 at 3:20 PM");
+    });
+
+    it("formats date in a different year", () => {
+        const time = new Date(1732544444722).setFullYear(2023);
+        const formattedDate = getFormattedDate({ time, lang: "en" });
+
+        expect(formattedDate).toBe("Saturday, November 25, 2023 at 3:20 PM");
+    });
+
+    it("respects localization (fr)", () => {
+        const time = 1732544444722;
+
+        const formattedDate = getFormattedDate({ time, lang: "fr" });
+
+        // cspell: disable-next-line
+        expect(formattedDate).toBe("lundi 25 novembre à 15:20");
+    });
+});

web/src/ui/shared/formattedDate/getFormattedDate.ts

@@ -0,0 +1,18 @@
+export function getFormattedDate(params: { time: number; lang: string }): string {
+    const { time, lang } = params;
+
+    const date = new Date(time);
+
+    const isSameYear = date.getFullYear() === new Date().getFullYear();
+
+    const formattedDate = new Intl.DateTimeFormat(lang, {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        year: isSameYear ? undefined : "numeric",
+        hour: "numeric",
+        minute: "numeric"
+    }).format(date);
+
+    return formattedDate;
+}

web/src/ui/shared/formattedDate/index.ts

@@ -0,0 +1,2 @@
+export { fromNow, useFormattedDate, useFromNow } from "./useFormattedDate";
+export { getFormattedDate } from "./getFormattedDate";

web/src/ui/shared/useFormattedDate.ts → web/src/ui/shared/formattedDate/useFormattedDate.ts

@@ -1,35 +1,16 @@
 import { useMemo, useEffect, useReducer } from "react";
-import { useLang, getTranslation, evtLang } from "ui/i18n";
+import { useLang, getTranslation } from "ui/i18n";
 import { assert } from "tsafe/assert";
 import { declareComponentKeys } from "i18nifty";
-
-export function getFormattedDate(params: { time: number }): string {
-    const { time } = params;
-
-    const date = new Date(time);
-    const lang = evtLang.state;
-
-    const isSameYear = date.getFullYear() === new Date().getFullYear();
-
-    const formattedDate = new Intl.DateTimeFormat(lang, {
-        weekday: "long",
-        day: "numeric",
-        month: "long",
-        year: isSameYear ? undefined : "numeric",
-        hour: "numeric",
-        minute: "numeric"
-    }).format(date);
-
-    return formattedDate;
-}
+import { getFormattedDate } from "./getFormattedDate";
 
 export function useFormattedDate(params: { time: number }): string {
     const { time } = params;
 
     // NOTE: So that we get a refresh when the lang is changed.
     const { lang } = useLang();
 
-    return useMemo(() => getFormattedDate({ time }), [time, lang]);
+    return useMemo(() => getFormattedDate({ time, lang }), [time, lang]);
 }
 
 export const { fromNow } = (() => {