From c50e9d078aa3c353afc140669f1cedcd354ee53e Mon Sep 17 00:00:00 2001
From: Francis Murillo <evacuee.overlap.vs3op@aleeas.com>
Date: Thu, 15 Dec 2022 15:35:25 +0000
Subject: Render current day formats in the client timezone (#21878)

* Fix remaining plain %time to %time.formatted

* Add %time.relative-formatted to client format dates on the current day

* Add missing comma dangle to formats

* Use client side message format instead of the server

* Add fallback message to relatve_format.today

* Remove unused translation key and fix js lint issue

Co-authored-by: Effy Elden <effy@effy.space>
---
 app/javascript/packs/public.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

(limited to 'app/javascript/packs')

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 786fc8ede..a5e2014f7 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -63,6 +63,18 @@ function main() {
       minute: 'numeric',
     });
 
+    const dateFormat = new Intl.DateTimeFormat(locale, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      timeFormat: false,
+    });
+
+    const timeFormat = new Intl.DateTimeFormat(locale, {
+      timeStyle: 'short',
+      hour12: false,
+    });
+
     [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
       content.innerHTML = emojify(content.innerHTML);
     });
@@ -75,6 +87,32 @@ function main() {
       content.textContent = formattedDate;
     });
 
+    const isToday = date => {
+      const today = new Date();
+
+      return date.getDate() === today.getDate() &&
+        date.getMonth() === today.getMonth() &&
+        date.getFullYear() === today.getFullYear();
+    };
+    const todayFormat = new IntlMessageFormat(messages['relative_format.today'] || 'Today at {time}', locale);
+
+    [].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => {
+      const datetime = new Date(content.getAttribute('datetime'));
+
+      let formattedContent;
+
+      if (isToday(datetime)) {
+        const formattedTime = timeFormat.format(datetime);
+
+        formattedContent = todayFormat.format({ time: formattedTime });
+      } else {
+        formattedContent = dateFormat.format(datetime);
+      }
+
+      content.title = formattedContent;
+      content.textContent = formattedContent;
+    });
+
     [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
       const datetime = new Date(content.getAttribute('datetime'));
       const now      = new Date();
-- 
cgit