Add daysago formatter and extract common helper to reuse with indays formatter

app/javascript/controllers/local_time_controller.js

@@ -1,7 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
+import { differenceInDays } from "helpers/date_helpers";
 
 export default class extends Controller {
-  static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays" ]
+  static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago" ]
 
   #timer
 
@@ -11,8 +12,8 @@ export default class extends Controller {
     this.shortDateFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" })
     this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" })
     this.agoFormatter = new AgoFormatter()
-    this.daysAgoFormatter = new DaysAgoFormatter()
     this.indaysFormatter = new InDaysFormatter()
+    this.daysagoFormatter = new DaysAgoFormatter()
   }
 
   connect() {
@@ -43,14 +44,14 @@ export default class extends Controller {
     this.#formatTime(this.agoFormatter, target)
   }
 
-  daysAgoTargetConnected(target) {
-    this.#formatTime(this.daysAgoFormatter, target)
-  }
-
   indaysTargetConnected(target) {
     this.#formatTime(this.indaysFormatter, target)
   }
 
+  daysagoTargetConnected(target) {
+    this.#formatTime(this.daysagoFormatter, target)
+  }
+
   #refreshRelativeTimes() {
     this.agoTargets.forEach(target => {
       this.#formatTime(this.agoFormatter, target)
@@ -92,27 +93,9 @@ class AgoFormatter {
   }
 }
 
-class DaysAgoFormatter {
-  format(dt) {
-    const now = new Date()
-
-    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
-    const startOfGivenDay = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate())
-
-    const msPerDay = 1000 * 60 * 60 * 24
-    const dayDiff = Math.floor((startOfToday - startOfGivenDay) / msPerDay)
-
-    if (dayDiff === 0) return "Today"
-    if (dayDiff === 1) return "Yesterday"
-    return `${dayDiff} days ago`
-  }
-}
-
 class InDaysFormatter {
-  format(dt) {
-    const target = this.#beginningOfDay(dt)
-    const today = this.#beginningOfDay(new Date())
-    const days = Math.round((target - today) / (1000 * 60 * 60 * 24))
+  format(date) {
+    const days = differenceInDays(new Date(), date)
 
     if (days <= 0) {
       return "today"
@@ -123,8 +106,19 @@ class InDaysFormatter {
 
     return `in ${Math.round(days)} days`
   }
+}
 
-  #beginningOfDay(dt) {
-    return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate())
+class DaysAgoFormatter {
+  format(date) {
+    const days = differenceInDays(date, new Date())
+
+    if (days <= 0) {
+      return "today"
+    }
+    if (days === 1) {
+      return "yesterday"
+    }
+
+    return `${Math.round(days)} days ago`
   }
 }

app/javascript/helpers/date_helpers.js

@@ -0,0 +1,7 @@
+export function differenceInDays(fromDate, toDate) {
+  return Math.round(Math.abs((beginningOfDay(toDate) - beginningOfDay(fromDate)) / (1000 * 60 * 60 * 24)))
+}
+
+export function beginningOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}

app/views/bubbles/cards/_mini.html.erb

@@ -7,7 +7,7 @@
     </h3>
 
     <div class="txt-small overflow-ellipsis txt-uppercase"><%= "Added to #{bubble.bucket.name} by #{bubble.creator.name}" %>
-      <%= local_datetime_tag(bubble.created_at, style: :daysAgo) %>
+      <%= local_datetime_tag(bubble.created_at, style: :daysago) %>
     </div>
 
     <div class="card__stuff flex align-center gap">

app/views/bubbles/cards/common/_meta.html.erb

@@ -1,18 +1,18 @@
 <div class="card__meta flex txt-tight-lines txt-uppercase">
   <div class="flex flex-column gap txt-align-end">
     <span class="pad-inline overflow-ellipsis"><%= bubble.creating? ? "Added" : "Updated" %>
-      <%= local_datetime_tag(bubble.updated_at, style: :daysAgo) %>
+      <%= local_datetime_tag(bubble.updated_at, style: :daysago) %>
     </span>
 
     <hr class="full-width separator--horizontal unpad margin-none">
 
     <% if bubble.creating? %>
       <span class="pad-inline overflow-ellipsis">Expires
-        <%= local_datetime_tag(bubble.auto_pop_at, style: :daysAgo) %>
+        <%= local_datetime_tag(bubble.auto_pop_at, style: :daysago) %>
       </span>
     <% else %>
       <span class="pad-inline overflow-ellipsis">Added
-        <%= local_datetime_tag(bubble.created_at, style: :daysAgo) %>
+        <%= local_datetime_tag(bubble.created_at, style: :daysago) %>
       </span>
     <% end %>
   </div>