fix(front: refactor timestamps format to up to 1 hour (#168)

Author: forestileao

front/assets/js/time_ago.js

@@ -33,18 +33,20 @@ class TimeAgo extends HTMLElement {
     decorateRelative(date) {
         const now = new Date();
         const diffInSeconds = Math.floor((now - date) / 1000);
+        const diffInHours = Math.floor(diffInSeconds / 3600);
         const daysDifference = Math.floor(diffInSeconds / 86400);
 
-        return daysDifference > 3 ? this.formatFullDate(date) : this.formatRelativeTime(diffInSeconds);
+        if (daysDifference > 3) return this.formatFullDate(date);
+        if (diffInHours >= 1) return this.formatDateWithTime(date);
+        return this.formatRelativeTime(diffInSeconds);
     }
 
     formatRelativeTime(seconds) {
         const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: "auto" });
 
         if (Math.abs(seconds) < 60) return rtf.format(-seconds, "second");
         if (Math.abs(seconds) < 3600) return rtf.format(-Math.floor(seconds / 60), "minute");
-        if (Math.abs(seconds) < 86400) return rtf.format(-Math.floor(seconds / 3600), "hour");
-        return rtf.format(-Math.floor(seconds / 86400), "day");
+        return rtf.format(-Math.floor(seconds / 3600), "hour");
     }
 
     formatFullDate(date) {
@@ -57,6 +59,17 @@ class TimeAgo extends HTMLElement {
         return `on ${weekday} ${suffixedDay} ${month} ${year}`;
     }
 
+    formatDateWithTime(date) {
+        const options = { weekday: "short", day: "numeric", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
+        const formattedDate = date.toLocaleDateString(this.locale, options);
+        const time = date.toLocaleTimeString(this.locale, { hour: "2-digit", minute: "2-digit", hour12: false });
+        
+        const [weekday, month, day, year] = formattedDate.replaceAll(",", "").split(" ");
+        const suffixedDay = day + this.ordinalSuffix(parseInt(day, 10));
+        
+        return `${weekday} ${suffixedDay} ${month} ${year} at ${time}`;
+    }
+
     ordinalSuffix(day) {
         if ([11, 12, 13].includes(day)) return "th";
         switch (day % 10) {

front/lib/front/utils.ex

@@ -297,15 +297,26 @@ defmodule Front.Utils do
     |> decorate_relative()
   end
 
-  def decorate_relative(date) do
-    if Timex.diff(DateTime.utc_now(), date, :days) > 3 do
-      unssufixed_date = Timex.format!(date, "%a %d %b %Y", :strftime)
-      [weekday, day, month, year] = String.split(unssufixed_date, " ")
-
-      suffixed_day = day <> ordinal_suffix(String.to_integer(day))
-      "on #{weekday} #{suffixed_day} #{month} #{year}"
-    else
-      Timex.format!(date, "{relative}", :relative)
+  def decorate_relative(date), do: decorate_relative(DateTime.utc_now(), date)
+
+  def decorate_relative(from, until) do
+    diff_days = Timex.diff(from, until, :days)
+    diff_hours = Timex.diff(from, until, :hours)
+
+    unssufixed_date = Timex.format!(until, "%a %d %b %Y", :strftime)
+    [weekday, day, month, year] = String.split(unssufixed_date, " ")
+    suffixed_day = day <> ordinal_suffix(String.to_integer(day))
+
+    cond do
+      diff_days > 3 ->
+        "on #{weekday} #{suffixed_day} #{month} #{year}"
+
+      diff_hours >= 1 and diff_days <= 3 ->
+        time_part = Timex.format!(until, "%H:%M", :strftime)
+        "on #{weekday} #{suffixed_day} #{month} #{year} at #{time_part}"
+
+      true ->
+        Timex.format!(until, "{relative}", :relative)
     end
   end
 

front/test/front/utils_test.exs

@@ -64,13 +64,25 @@ defmodule Front.UtilsTest do
   end
 
   test "decorate relative" do
-    two_days_ago = Timex.now() |> Timex.shift(days: -2) |> Timex.to_unix()
-    three_days_ago = Timex.now() |> Timex.shift(days: -3) |> Timex.to_unix()
+    now = DateTime.utc_now()
+
+    thirty_minutes_ago = DateTime.add(now, -30 * 60, :second)
+
+    fake_today = ~U[2025-03-20 12:00:00.000000Z]
+    two_days_ago = DateTime.new!(Date.add(fake_today, -2), ~T[14:30:00])
+    three_days_ago = DateTime.new!(Date.add(fake_today, -3), ~T[10:15:00])
+
     assert Front.Utils.decorate_relative(0) == ""
     assert Front.Utils.decorate_relative(nil) == ""
-    assert Front.Utils.decorate_relative(DateTime.utc_now()) == "now"
-    assert Front.Utils.decorate_relative(two_days_ago) == "2 days ago"
-    assert Front.Utils.decorate_relative(three_days_ago) == "3 days ago"
+    assert Front.Utils.decorate_relative(now) == "now"
+
+    assert Front.Utils.decorate_relative(thirty_minutes_ago) == "30 minutes ago"
+
+    assert Front.Utils.decorate_relative(fake_today, two_days_ago) ==
+             "on Tue 18th Mar 2025 at 14:30"
+
+    assert Front.Utils.decorate_relative(fake_today, three_days_ago) ==
+             "on Mon 17th Mar 2025 at 10:15"
 
     assert Front.Utils.decorate_relative(~U[2025-03-05 22:05:26.833945Z]) ==
              "on Wed 05th Mar 2025"