From 8c1ed57275d8e2f338346a2a8278a29aaf4ade67 Mon Sep 17 00:00:00 2001
From: Riccardo Graziosi <31478034+riggraz@users.noreply.github.com>
Date: Thu, 25 Jul 2024 17:58:27 +0200
Subject: [PATCH] Improve datetime labels visualization (#389)

---
 .../components/Comments/CommentFooter.tsx     |  4 ++-
 app/javascript/components/Post/PostFooter.tsx |  4 ++-
 .../components/Post/PostUpdateList.tsx        |  4 ++-
 app/javascript/helpers/datetime.ts            | 26 ++++++++++++++-----
 config/locales/en.yml                         |  6 +++++
 5 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/app/javascript/components/Comments/CommentFooter.tsx b/app/javascript/components/Comments/CommentFooter.tsx
index 8507d91f..f2ffa3fb 100644
--- a/app/javascript/components/Comments/CommentFooter.tsx
+++ b/app/javascript/components/Comments/CommentFooter.tsx
@@ -66,7 +66,9 @@ const CommentFooter = ({
         null
     }
     
-    <MutedText>{friendlyDate(createdAt)}</MutedText>
+    <span className="mutedText" title={createdAt}>
+      {friendlyDate(createdAt)}
+    </span>
 
     {
       createdAt !== updatedAt &&
diff --git a/app/javascript/components/Post/PostFooter.tsx b/app/javascript/components/Post/PostFooter.tsx
index 2f746184..ef9be2bb 100644
--- a/app/javascript/components/Post/PostFooter.tsx
+++ b/app/javascript/components/Post/PostFooter.tsx
@@ -42,7 +42,9 @@ const PostFooter = ({
       
       <Separator />
 
-      <span>{friendlyDate(createdAt)}</span>
+      <span title={createdAt}>
+        {friendlyDate(createdAt)}
+      </span>
     </div>
     {
       isPowerUser || (authorEmail && authorEmail === currentUserEmail) ?
diff --git a/app/javascript/components/Post/PostUpdateList.tsx b/app/javascript/components/Post/PostUpdateList.tsx
index 9ac700ff..429f7d6f 100644
--- a/app/javascript/components/Post/PostUpdateList.tsx
+++ b/app/javascript/components/Post/PostUpdateList.tsx
@@ -65,7 +65,9 @@ const PostUpdateList = ({
               }
             </div>
 
-            <MutedText>{friendlyDate(postUpdate.createdAt)}</MutedText>
+            <span className="mutedText" title={postUpdate.createdAt}>
+              {friendlyDate(postUpdate.createdAt)}
+            </span>
           </div>
         ))
       }
diff --git a/app/javascript/helpers/datetime.ts b/app/javascript/helpers/datetime.ts
index 78972e44..02f00799 100644
--- a/app/javascript/helpers/datetime.ts
+++ b/app/javascript/helpers/datetime.ts
@@ -4,19 +4,31 @@ export const friendlyDate = date => {
   var now = new Date();
   var timeStamp = fromRailsStringToJavascriptDate(date);
 
+  const ONE_MINUTE = 60;
+  const ONE_HOUR = 3600;
+  const ONE_DAY = 86400;
+  const ONE_MONTH = 2592000; // 30 days
+  const ONE_YEAR = 31536000; // 365 days
+
   var secondsPast = (now.getTime() - timeStamp.getTime()) / 1000;
   
-  if (secondsPast < 60) {
+  if (secondsPast < ONE_MINUTE) {
     return I18n.t('common.datetime.now');
-  } else if (secondsPast < 3600) {
-    let minutesPast = Math.round(secondsPast / 60);
+  } else if (secondsPast < ONE_HOUR) {
+    let minutesPast = Math.round(secondsPast / ONE_MINUTE);
     return I18n.t('common.datetime.minutes', { count: minutesPast });
-  } else if (secondsPast <= 86400) {
-    let hoursPast = Math.round(secondsPast / 3600);
+  } else if (secondsPast <= ONE_DAY) {
+    let hoursPast = Math.round(secondsPast / ONE_HOUR);
     return I18n.t('common.datetime.hours', { count: hoursPast });
-  } else {
-    let daysPast = Math.round(secondsPast / 86400);
+  } else if (secondsPast <= ONE_MONTH) {
+    let daysPast = Math.round(secondsPast / ONE_DAY);
     return I18n.t('common.datetime.days', { count: daysPast });
+  } else if (secondsPast <= ONE_YEAR) {
+    let monthsPast = Math.round(secondsPast / ONE_MONTH);
+    return I18n.t('common.datetime.months', { count: monthsPast });
+  } else {
+    let yearsPast = Math.round(secondsPast / ONE_YEAR);
+    return I18n.t('common.datetime.years', { count: yearsPast });
   }
 }
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9aed96a4..d1784545 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -80,6 +80,12 @@ en:
       days:
         one: '1 day ago'
         other: '%{count} days ago'
+      months:
+        one: '1 month ago'
+        other: '%{count} months ago'
+      years:
+        one: '1 year ago'
+        other: '%{count} years ago'
   header:
     menu:
       administration_header: 'Administration'