Respect user's 12/24 hour preference consistently (#29237)

* Respect user's 12/24 hour preference consistently Signed-off-by: Michael Telatynski <[email protected]> * Update test Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Feb 11, 2025 · 6fa8032 · 6fa8032
1 parent f2fae82
commit 6fa8032
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
@@ -38,7 +38,7 @@ export function getMonthsArray(month: Intl.DateTimeFormatOptions["month"] = "sho
 
 // XXX: Ideally we could just specify `hour12: boolean` but it has issues on Chrome in the `en` locale
 // https://support.google.com/chrome/thread/29828561?hl=en
-function getTwelveHourOptions(showTwelveHour: boolean): Intl.DateTimeFormatOptions {
+export function getTwelveHourOptions(showTwelveHour: boolean): Intl.DateTimeFormatOptions {
     return {
         hourCycle: showTwelveHour ? "h12" : "h23",
     };

diff --git a/src/hooks/useUserTimezone.ts b/src/hooks/useUserTimezone.ts
@@ -7,6 +7,9 @@ Please see LICENSE files in the repository root for full details.
 import { useEffect, useState } from "react";
 import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 
+import { getTwelveHourOptions } from "../DateUtils.ts";
+import { useSettingValue } from "./useSettings.ts";
+
 /**
  * Fetch a user's delclared timezone through their profile, and return
  * a friendly string of the current time for that user. This will keep
@@ -23,6 +26,7 @@ export const useUserTimezone = (cli: MatrixClient, userId: string): { timezone:
     const [updateInterval, setUpdateInterval] = useState<ReturnType<typeof setTimeout>>();
     const [friendly, setFriendly] = useState<string>();
     const [supported, setSupported] = useState<boolean>();
+    const showTwelveHour = useSettingValue("showTwelveHourTimestamps");
 
     useEffect(() => {
         if (!cli || supported !== undefined) {
@@ -62,8 +66,8 @@ export const useUserTimezone = (cli: MatrixClient, userId: string): { timezone:
                 const updateTime = (): void => {
                     const currentTime = new Date();
                     const friendly = currentTime.toLocaleString(undefined, {
+                        ...getTwelveHourOptions(showTwelveHour),
                         timeZone: tz,
-                        hour12: true,
                         hour: "2-digit",
                         minute: "2-digit",
                         timeZoneName: "shortOffset",
@@ -84,7 +88,7 @@ export const useUserTimezone = (cli: MatrixClient, userId: string): { timezone:
                 console.error("Could not render current timezone for user", ex);
             }
         })();
-    }, [supported, userId, cli]);
+    }, [supported, userId, cli, showTwelveHour]);
 
     if (!timezone || !friendly) {
         return null;

diff --git a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
@@ -241,7 +241,10 @@ describe("<UserInfo />", () => {
                 _locale,
                 opts,
             ) {
-                return origDate.call(this, "en-US", opts);
+                return origDate.call(this, "en-US", {
+                    ...opts,
+                    hourCycle: "h12",
+                });
             });
             mockClient.doesServerSupportExtendedProfiles.mockResolvedValue(true);
             mockClient.getExtendedProfileProperty.mockResolvedValue("Europe/London");