From 494b8021f44f6b8e744074ac126bb6ec977b442c Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 9 Apr 2023 04:02:50 +0200
Subject: [PATCH] Message Meta: Fix time format in alt text (#2938)

---
 src/components/middle/message/MessageMeta.tsx | 12 ++++++++----
 src/util/dateFormat.ts                        |  7 ++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/middle/message/MessageMeta.tsx b/src/components/middle/message/MessageMeta.tsx
index fe1feafc1..61bf03556 100644
--- a/src/components/middle/message/MessageMeta.tsx
+++ b/src/components/middle/message/MessageMeta.tsx
@@ -66,9 +66,11 @@ const MessageMeta: FC<OwnProps> = ({
 
   const title = useMemo(() => {
     if (!isActivated) return undefined;
-    const createDateTime = formatDateTimeToString(message.date * 1000, lang.code);
-    const editDateTime = message.isEdited && formatDateTimeToString(message.editDate! * 1000, lang.code);
-    const forwardedDateTime = message.forwardInfo && formatDateTimeToString(message.forwardInfo.date * 1000, lang.code);
+    const createDateTime = formatDateTimeToString(message.date * 1000, lang.code, undefined, lang.timeFormat);
+    const editDateTime = message.isEdited
+      && formatDateTimeToString(message.editDate! * 1000, lang.code, undefined, lang.timeFormat);
+    const forwardedDateTime = message.forwardInfo
+      && formatDateTimeToString(message.forwardInfo.date * 1000, lang.code, undefined, lang.timeFormat);
 
     let text = createDateTime;
     if (editDateTime) {
@@ -81,7 +83,9 @@ const MessageMeta: FC<OwnProps> = ({
     }
 
     return text;
-  }, [isActivated, lang, message]);
+    // We need to listen to timeformat change
+    // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
+  }, [isActivated, lang, message, lang.timeFormat]);
 
   const fullClassName = buildClassName(
     'MessageMeta',
diff --git a/src/util/dateFormat.ts b/src/util/dateFormat.ts
index 78b332ffb..c984323d5 100644
--- a/src/util/dateFormat.ts
+++ b/src/util/dateFormat.ts
@@ -1,4 +1,5 @@
 import type { LangFn } from '../hooks/useLang';
+import type { TimeFormat } from '../types';
 import withCache from './withCache';
 
 const WEEKDAYS_FULL = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
@@ -290,7 +291,10 @@ export function formatDateToString(
   return formatDayToStringWithCache(dayStartAt, locale, noYear, monthFormat, noDay);
 }
 
-export function formatDateTimeToString(datetime: Date | number, locale = 'en-US', noSeconds?: boolean) {
+export function formatDateTimeToString(
+  datetime: Date | number, locale = 'en-US', noSeconds?: boolean,
+  timeFormat?: TimeFormat,
+) {
   const date = typeof datetime === 'number' ? new Date(datetime) : datetime;
   return date.toLocaleString(
     locale,
@@ -301,6 +305,7 @@ export function formatDateTimeToString(datetime: Date | number, locale = 'en-US'
       hour: 'numeric',
       minute: 'numeric',
       second: noSeconds ? undefined : 'numeric',
+      hourCycle: timeFormat === '12h' ? 'h12' : 'h23',
     },
   );
 }