@linktr.ee/messaging-react 3.31.0-rc-1785485102 → 3.31.0

package/src/utils/formatRelativeTime.test.ts

@@ -1,5 +1,8 @@
 import { formatRelativeTime } from './formatRelativeTime'
 
+// Date strings deliberately omit the trailing 'Z' so they parse in the
+// runner's local timezone — formatRelativeTime buckets by local calendar
+// days, so this keeps assertions deterministic regardless of ambient TZ.
 describe('formatRelativeTime', () => {
   let originalDate: typeof Date
 
@@ -35,16 +38,16 @@ describe('formatRelativeTime', () => {
 
   describe('Just now', () => {
     it('should return "Just now" for messages less than 1 minute ago', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-15T11:59:30Z') // 30 seconds ago
+      mockDate('2024-01-15T12:00:00')
+      const date = new Date('2024-01-15T11:59:30') // 30 seconds ago
       expect(formatRelativeTime(date)).toBe('Just now')
     })
   })
 
   describe('Today', () => {
     it('should return time in 12-hour format for messages from earlier today', () => {
-      mockDate('2024-01-15T14:08:00Z')
-      const date = new Date('2024-01-15T09:30:00Z')
+      mockDate('2024-01-15T14:08:00')
+      const date = new Date('2024-01-15T09:30:00')
       const result = formatRelativeTime(date)
       // Should be "9:30 AM" format
       expect(result).toMatch(/^\d{1,2}:\d{2} (AM|PM)$/i)
@@ -53,93 +56,96 @@ describe('formatRelativeTime', () => {
 
   describe('Yesterday', () => {
     it('should return "Yesterday" for messages from the previous calendar day', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-14T12:00:00Z')
+      mockDate('2024-01-15T12:00:00')
+      const date = new Date('2024-01-14T12:00:00')
       expect(formatRelativeTime(date)).toBe('Yesterday')
     })
 
     it('should return "Yesterday" even if less than 24 hours ago but previous day', () => {
-      mockDate('2024-01-15T01:00:00Z')
-      const date = new Date('2024-01-14T23:00:00Z') // Only 2 hours ago
+      mockDate('2024-01-15T01:00:00')
+      const date = new Date('2024-01-14T23:00:00') // Only 2 hours ago
       expect(formatRelativeTime(date)).toBe('Yesterday')
     })
 
     it('should NOT return "Yesterday" for messages from 2 days ago', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-13T12:00:00Z')
+      mockDate('2024-01-15T12:00:00')
+      const date = new Date('2024-01-13T12:00:00')
       expect(formatRelativeTime(date)).not.toBe('Yesterday')
-      expect(formatRelativeTime(date)).toBe('2d')
     })
   })
 
-  describe('Days ago', () => {
-    it('should return "2d" for messages 2 days ago', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-13T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('2d')
+  describe('2-6 days ago (short weekday)', () => {
+    // The weekday branch uses the runtime locale
+    // (toLocaleDateString(undefined, …)), so assertions compare against
+    // the same locale-aware formatter rather than fixed English strings.
+    it('should return a short weekday name for messages 2 days ago', () => {
+      mockDate('2024-01-15T12:00:00')
+      const date = new Date('2024-01-13T12:00:00') // Saturday
+      expect(formatRelativeTime(date)).toBe(
+        date.toLocaleDateString(undefined, { weekday: 'short' })
+      )
     })
 
-    it('should return "6d" for messages 6 days ago (boundary before weeks)', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-09T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('6d')
+    it('should return a short weekday name for messages 6 days ago (boundary before dates)', () => {
+      mockDate('2024-01-15T12:00:00')
+      const date = new Date('2024-01-09T12:00:00') // Tuesday
+      expect(formatRelativeTime(date)).toBe(
+        date.toLocaleDateString(undefined, { weekday: 'short' })
+      )
     })
   })
 
-  describe('Weeks ago', () => {
-    it('should return "1w" for messages 1 week ago', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-08T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('1w')
+  describe('7+ days ago, same year (month and day)', () => {
+    // Compare against the same locale-aware formatter rather than
+    // hard-coded digits, which would fail under non-Latin numbering
+    // systems (e.g. ar_EG renders "٨ يناير").
+    it('should return month + day without year for messages 7 days ago', () => {
+      mockDate('2024-01-15T12:00:00')
+      const date = new Date('2024-01-08T12:00:00')
+      expect(formatRelativeTime(date)).toBe(
+        date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+      )
     })
-  })
 
-  describe('Date format', () => {
-    // The absolute-date branch intentionally uses the runtime locale
-    // (toLocaleDateString(undefined, …)), so assertions avoid a fixed
-    // string that would depend on the test runner's ambient ICU locale.
-    // Instead we assert the locale-independent behaviour: a spelled-out
-    // month (alphabetic) rather than the old all-numeric M/D/YY, plus the
-    // day and 2-digit year in any order.
-    const numericDatePattern = /^\d{1,2}\/\d{1,2}\/\d{2}$/
-
-    it('should return a spelled-month date for messages more than 4 weeks ago', () => {
-      mockDate('2024-02-15T12:00:00Z')
-      const date = new Date('2024-01-01T12:00:00Z')
-      const result = formatRelativeTime(date)
-      expect(result).not.toMatch(numericDatePattern)
-      expect(result).toMatch(/\p{L}/u) // spelled-out month
-      expect(result).toMatch(/\b1\b/) // day
-      expect(result).toMatch(/24/) // 2-digit year
+    it('should return month + day without year for messages more than 4 weeks ago in the same year', () => {
+      mockDate('2024-02-15T12:00:00')
+      const date = new Date('2024-01-01T12:00:00')
+      expect(formatRelativeTime(date)).toBe(
+        date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+      )
     })
+  })
 
-    it('should return a spelled-month date for messages from last year', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2023-12-01T12:00:00Z')
-      const result = formatRelativeTime(date)
-      expect(result).not.toMatch(numericDatePattern)
-      expect(result).toMatch(/\p{L}/u) // spelled-out month
-      expect(result).toMatch(/\b1\b/) // day
-      expect(result).toMatch(/23/) // 2-digit year
+  describe('Previous years (month, day and year)', () => {
+    it('should include the year for messages from a previous year', () => {
+      mockDate('2024-01-15T12:00:00')
+      const date = new Date('2023-12-01T12:00:00')
+      expect(formatRelativeTime(date)).toBe(
+        date.toLocaleDateString(undefined, {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+        })
+      )
     })
   })
 
   describe('Edge cases', () => {
     it('should handle month boundaries correctly', () => {
-      mockDate('2024-02-01T12:00:00Z')
-      const date = new Date('2024-01-31T12:00:00Z')
+      mockDate('2024-02-01T12:00:00')
+      const date = new Date('2024-01-31T12:00:00')
       expect(formatRelativeTime(date)).toBe('Yesterday')
     })
 
     it('should handle year boundaries correctly', () => {
-      mockDate('2024-01-01T12:00:00Z')
-      const date = new Date('2023-12-31T12:00:00Z')
+      mockDate('2024-01-01T12:00:00')
+      const date = new Date('2023-12-31T12:00:00')
       expect(formatRelativeTime(date)).toBe('Yesterday')
     })
 
     it('should handle leap year correctly', () => {
-      mockDate('2024-03-01T12:00:00Z')
-      const date = new Date('2024-02-29T12:00:00Z')
+      mockDate('2024-03-01T12:00:00')
+      const date = new Date('2024-02-29T12:00:00')
       expect(formatRelativeTime(date)).toBe('Yesterday')
     })
   })

package/src/utils/formatRelativeTime.ts

@@ -1,21 +1,20 @@
 /**
- * Get the number of days between two dates (calendar days in UTC, not 24-hour periods)
- * Uses UTC to ensure consistent day calculations globally since messages are stored in UTC
+ * Get the number of days between two dates (calendar days in the viewer's
+ * local timezone, not 24-hour periods). Uses local days so the bucket a
+ * message falls into always agrees with the locale-formatted output
+ * (time of day, weekday name, date), which is also rendered in local time.
  */
 const getDaysDifference = (date1: Date, date2: Date): number => {
-  const d1 = new Date(
-    Date.UTC(date1.getUTCFullYear(), date1.getUTCMonth(), date1.getUTCDate())
-  )
-  const d2 = new Date(
-    Date.UTC(date2.getUTCFullYear(), date2.getUTCMonth(), date2.getUTCDate())
-  )
-  const diffTime = d2.getTime() - d1.getTime()
-  return Math.floor(diffTime / (1000 * 60 * 60 * 24))
+  const d1 = Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate())
+  const d2 = Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate())
+  return Math.floor((d2 - d1) / (1000 * 60 * 60 * 24))
 }
 
 /**
  * Format a date - shows time for today, relative time for older messages
- * (e.g., "Just now", "2:08 PM" for today, "Yesterday" for yesterday, "2d" for 2 days ago)
+ * (e.g., "Just now", "2:08 PM" for today, "Yesterday" for yesterday,
+ * "Mon" for 2-6 days ago, "Jul 14" for older dates this year,
+ * "Jul 14, 2025" for previous years)
  */
 export const formatRelativeTime = (date: Date): string => {
   const now = new Date()
@@ -43,21 +42,23 @@ export const formatRelativeTime = (date: Date): string => {
     return 'Yesterday'
   }
 
-  // Less than 7 days - show days
+  // 2-6 days ago - show short weekday name (e.g., "Mon")
   if (daysDiff < 7) {
-    return `${daysDiff}d`
+    return date.toLocaleDateString(undefined, { weekday: 'short' })
   }
 
-  // Less than 4 weeks - show weeks
-  if (daysDiff < 28) {
-    const weeks = Math.floor(daysDiff / 7)
-    return `${weeks}w`
+  // 7+ days ago, same local year - show month and day (e.g., "Jul 14")
+  if (date.getFullYear() === now.getFullYear()) {
+    return date.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+    })
   }
 
-  // More than 4 weeks - show locale-aware date with spelled-out month
+  // Previous years - include the year (e.g., "Jul 14, 2025")
   return date.toLocaleDateString(undefined, {
-    day: 'numeric',
     month: 'short',
-    year: '2-digit',
+    day: 'numeric',
+    year: 'numeric',
   })
 }