fix: update timestamp format

Author: kaseyvee

cypress/unit/formatDateAndTime.cy.ts

@@ -8,12 +8,12 @@ describe('formatDateAndTime', () => {
   it('should format the date correctly', () => {
     const utcTimestamp = '2023-01-01T12:00:00Z'
     const formatted = formatDateAndTime(utcTimestamp)
-    expect(formatted).to.eq('Jan 1 4:00 AM')
+    expect(formatted).to.eq('Jan 1, 4:00 AM')
   })
 
-  it('should include year when the time difference is more than 365 days', () => {
+  it('should include the year when showing a date from a different year', () => {
     const utcTimestamp = '2022-01-01T12:00:00Z'
     const formatted = formatDateAndTime(utcTimestamp)
-    expect(formatted).to.eq('Jan 1 2022 4:00 AM')
+    expect(formatted).to.eq('Jan 1, 2022 at 4:00 AM')
   })
 })

cypress/unit/formatMessageTimestamp.cy.ts

@@ -12,7 +12,7 @@ describe('formatTimestamp', () => {
 
   it('should return date and time when time difference is more than 24 hours', () => {
     const utcTimestamp = '2021-01-01T00:00:00Z'
-    const expected = 'Dec 31 2020 4:00 PM'
+    const expected = 'Dec 31, 2020 at 4:00 PM'
     const result = formatMessageTimestamp(utcTimestamp)
     expect(result).to.eq(expected)
   })

src/components/helper.ts

@@ -24,23 +24,31 @@ export function calculateTimeAgo(isoDate: string): string {
 export function formatDateAndTime(isoDateTimeInUtc: string): string {
   const convertedDate = new Date(isoDateTimeInUtc)
   const userLocale = navigator.language
-  const options: Intl.DateTimeFormatOptions = {
+  const dateOptions: Intl.DateTimeFormatOptions = {
     month: 'short',
     day: 'numeric',
+  }
+
+  const timeOptions: Intl.DateTimeFormatOptions = {
     hour: 'numeric',
     minute: '2-digit',
     hour12: true,
   }
 
-  const timeDifferenceInDays =
-    calculateTimeDiffInSeconds(isoDateTimeInUtc) / (60 * 60 * 24)
+  const currentDate = new Date()
+  const isDifferentYear =
+    convertedDate.getFullYear() !== currentDate.getFullYear()
 
-  if (timeDifferenceInDays > 365) {
-    options.year = 'numeric'
+  const dataAndTimeConnector = isDifferentYear ? ' at ' : ', '
+
+  if (isDifferentYear) {
+    dateOptions.year = 'numeric'
   }
-  const formattedDateTime = convertedDate
-    .toLocaleTimeString(userLocale, options)
-    .replace(/,/g, '')
+
+  const formattedDateTime =
+    convertedDate.toLocaleDateString(userLocale, dateOptions) +
+    dataAndTimeConnector +
+    convertedDate.toLocaleTimeString(userLocale, timeOptions)
   return formattedDateTime
 }
 

src/components/messageCanvas/messageCanvas.cy.tsx

@@ -59,9 +59,9 @@ describe('MessageCanvas', () => {
           <p>Hello World</p>
         </MessageCanvas>
       )
-      cy.contains('Jan 1 2020').should('not.be.visible')
+      cy.contains('Jan 1, 2020').should('not.be.visible')
       cy.get('.rustic-message-canvas').realHover()
-      cy.contains('Jan 1 2020').should('be.visible')
+      cy.contains('Jan 1, 2020').should('be.visible')
     })
 
     it('shows that it was last updated if an update is provided', () => {
@@ -87,9 +87,9 @@ describe('MessageCanvas', () => {
           <p>Hello World</p>
         </MessageCanvas>
       )
-      cy.contains('Jan 1 2020').should('not.be.visible')
+      cy.contains('Jan 1, 2020').should('not.be.visible')
       cy.get('.rustic-message-canvas').realTouch()
-      cy.contains('Jan 1 2020').should('be.visible')
+      cy.contains('Jan 1, 2020').should('be.visible')
     })
 
     it('shows that it was last updated if an update is provided', () => {

src/components/timestamp/timestamp.stories.tsx

@@ -15,15 +15,36 @@ export default {
   },
 }
 
-const newDate = new Date()
+function getYesterdayDate() {
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(today.getDate() - 1)
+  return yesterday
+}
+
+const yesterday = getYesterdayDate()
+const now = new Date()
+
 export const Default = {
   args: {
     timestamp: '2023-11-26T23:25:44Z',
   },
 }
 
+export const OverADayAgo = {
+  args: {
+    timestamp: yesterday,
+  },
+}
+
+export const NotThisYear = {
+  args: {
+    timestamp: '2022-11-26T23:25:44Z',
+  },
+}
+
 export const TimeAgo = {
   args: {
-    timestamp: newDate,
+    timestamp: now,
   },
 }