From d041515e19a146a245ca2e78c1e89fca737c520e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8?= <luotianyi@luotianyi.me>
Date: Wed, 23 Oct 2024 18:11:07 +0800
Subject: [PATCH] feat: date time formats from locales (#4029)

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
---
 .../js/src/admin/components/UserListPage.tsx  |  2 +-
 framework/core/js/src/common/Translator.tsx   | 27 +++++++++++++++++++
 .../core/js/src/common/helpers/fullTime.tsx   |  3 ++-
 .../core/js/src/common/helpers/humanTime.tsx  |  3 ++-
 .../core/js/src/common/utils/humanTime.ts     | 11 ++++----
 .../js/src/common/utils/liveHumanTimes.ts     |  2 +-
 .../js/src/forum/components/PostStream.js     |  2 +-
 framework/core/locale/core.yml                |  8 ++++++
 8 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/framework/core/js/src/admin/components/UserListPage.tsx b/framework/core/js/src/admin/components/UserListPage.tsx
index 7d934ccf1..fec51bb61 100644
--- a/framework/core/js/src/admin/components/UserListPage.tsx
+++ b/framework/core/js/src/admin/components/UserListPage.tsx
@@ -273,7 +273,7 @@ export default class UserListPage extends AdminPage {
         name: app.translator.trans('core.admin.users.grid.columns.join_time.title'),
         content: (user: User) => (
           <span className="UserList-joinDate" title={user.joinTime()}>
-            {dayjs(user.joinTime()).format('LLL')}
+            {app.translator.formatDateTime(dayjs(user.joinTime()), 'core.lib.datetime_formats.userListJoinDate')}
           </span>
         ),
       },
diff --git a/framework/core/js/src/common/Translator.tsx b/framework/core/js/src/common/Translator.tsx
index 29498fb3a..b272a4fad 100644
--- a/framework/core/js/src/common/Translator.tsx
+++ b/framework/core/js/src/common/Translator.tsx
@@ -1,12 +1,15 @@
+import type { Dayjs } from 'dayjs';
 import { RichMessageFormatter, mithrilRichHandler, NestedStringArray } from '@askvortsov/rich-icu-message-formatter';
 import { pluralTypeHandler, selectTypeHandler } from '@ultraq/icu-message-formatter';
 import username from './helpers/username';
 import User from './models/User';
 import extract from './utils/extract';
 import extractText from './utils/extractText';
+import ItemList from './utils/ItemList';
 
 type Translations = Record<string, string>;
 type TranslatorParameters = Record<string, unknown>;
+type DateTimeFormatCallback = (id?: string) => string | void;
 
 export default class Translator {
   /**
@@ -14,6 +17,11 @@ export default class Translator {
    */
   translations: Translations = {};
 
+  /**
+   * A item list of date time format callbacks.
+   */
+  dateTimeFormats: ItemList<DateTimeFormatCallback> = new ItemList();
+
   /**
    * The underlying ICU MessageFormatter util.
    */
@@ -88,4 +96,23 @@ export default class Translator {
 
     return id;
   }
+
+  /**
+   * Formats the time.
+   *
+   * The format of the time will be chosen by the following order:
+   * - Custom format defined in the item list.
+   * - The format defined in current locale.
+   * - DayJS default format.
+   */
+  formatDateTime(time: Dayjs, id: string): string {
+    const formatCallback = this.dateTimeFormats.has(id) && this.dateTimeFormats.get(id);
+
+    if (formatCallback) {
+      const result = formatCallback.apply(this, [id]);
+      if (result) return result;
+    }
+
+    return time.format(this.translations[id]);
+  }
 }
diff --git a/framework/core/js/src/common/helpers/fullTime.tsx b/framework/core/js/src/common/helpers/fullTime.tsx
index efde8faf4..f9530a007 100644
--- a/framework/core/js/src/common/helpers/fullTime.tsx
+++ b/framework/core/js/src/common/helpers/fullTime.tsx
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import type Mithril from 'mithril';
+import app from '../app';
 
 /**
  * The `fullTime` helper displays a formatted time string wrapped in a <time>
@@ -9,7 +10,7 @@ export default function fullTime(time: Date): Mithril.Vnode {
   const d = dayjs(time);
 
   const datetime = d.format();
-  const full = d.format('LLLL');
+  const full = app.translator.formatDateTime(d, 'core.lib.datetime_formats.fullTime');
 
   return (
     <time pubdate datetime={datetime}>
diff --git a/framework/core/js/src/common/helpers/humanTime.tsx b/framework/core/js/src/common/helpers/humanTime.tsx
index 941434b8a..456d70615 100644
--- a/framework/core/js/src/common/helpers/humanTime.tsx
+++ b/framework/core/js/src/common/helpers/humanTime.tsx
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import type Mithril from 'mithril';
+import app from '../app';
 import humanTimeUtil from '../utils/humanTime';
 
 /**
@@ -11,7 +12,7 @@ export default function humanTime(time: Date): Mithril.Vnode {
   const d = dayjs(time);
 
   const datetime = d.format();
-  const full = d.format('LLLL');
+  const full = app.translator.formatDateTime(d, 'core.lib.datetime_formats.fullTime');
   const ago = humanTimeUtil(time);
 
   return (
diff --git a/framework/core/js/src/common/utils/humanTime.ts b/framework/core/js/src/common/utils/humanTime.ts
index 870153ae2..73490a444 100644
--- a/framework/core/js/src/common/utils/humanTime.ts
+++ b/framework/core/js/src/common/utils/humanTime.ts
@@ -1,3 +1,4 @@
+import app from '../app';
 import dayjs from 'dayjs';
 
 /**
@@ -15,17 +16,15 @@ export default function humanTime(time: dayjs.ConfigType): string {
     d = now;
   }
 
-  const day = 864e5;
-  const diff = d.diff(dayjs());
   let ago: string;
 
   // If this date was more than a month ago, we'll show the name of the month
   // in the string. If it wasn't this year, we'll show the year as well.
-  if (diff < -30 * day) {
-    if (d.year() === dayjs().year()) {
-      ago = d.format('D MMM');
+  if (d.diff(now, 'day') < -30) {
+    if (d.isSame(now, 'year')) {
+      ago = app.translator.formatDateTime(d, 'core.lib.datetime_formats.humanTimeShort');
     } else {
-      ago = d.format('ll');
+      ago = app.translator.formatDateTime(d, 'core.lib.datetime_formats.humanTimeFull');
     }
   } else {
     ago = d.fromNow();
diff --git a/framework/core/js/src/common/utils/liveHumanTimes.ts b/framework/core/js/src/common/utils/liveHumanTimes.ts
index cea16fde5..bcb0d5375 100644
--- a/framework/core/js/src/common/utils/liveHumanTimes.ts
+++ b/framework/core/js/src/common/utils/liveHumanTimes.ts
@@ -10,7 +10,7 @@ function updateHumanTimes() {
 }
 
 /**
- * The `liveHumanTimes` initializer sets up a loop every 1 second to update
+ * The `liveHumanTimes` initializer sets up a loop every 10 seconds to update
  * timestamps rendered with the `humanTime` helper.
  */
 export default function liveHumanTimes() {
diff --git a/framework/core/js/src/forum/components/PostStream.js b/framework/core/js/src/forum/components/PostStream.js
index cb8fd302d..570b45b89 100644
--- a/framework/core/js/src/forum/components/PostStream.js
+++ b/framework/core/js/src/forum/components/PostStream.js
@@ -270,7 +270,7 @@ export default class PostStream extends Component {
     // set the index to the last post.
     this.stream.index = indexFromViewPort !== null ? indexFromViewPort + 1 : this.stream.count();
     this.stream.visible = visible;
-    if (period) this.stream.description = dayjs(period).format('MMMM YYYY');
+    if (period) this.stream.description = app.translator.formatDateTime(dayjs(period), 'core.lib.datetime_formats.scrubber');
   }
 
   /**
diff --git a/framework/core/locale/core.yml b/framework/core/locale/core.yml
index a43134280..fa4ef5959 100644
--- a/framework/core/locale/core.yml
+++ b/framework/core/locale/core.yml
@@ -843,6 +843,14 @@ core:
     username:
       deleted_text: "[deleted]"
 
+    # These are DayJS formats used in core.
+    datetime_formats:
+      fullTime: LLLL
+      humanTimeShort: D MMM
+      humanTimeLong: ll
+      scrubber: MMMM YYYY
+      userListJoinDate: LLL
+
   # Translations in this namespace are used in views other than Flarum's normal JS client.
   views:
     # Translations in this namespace are displayed by the basic HTML admin index.