Skip to content

Commit 1244dc0

Browse files
committed
fix: update timestamp format
1 parent dc3bb1f commit 1244dc0

File tree

5 files changed

+47
-18
lines changed

5 files changed

+47
-18
lines changed

cypress/unit/formatDateAndTime.cy.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ describe('formatDateAndTime', () => {
88
it('should format the date correctly', () => {
99
const utcTimestamp = '2023-01-01T12:00:00Z'
1010
const formatted = formatDateAndTime(utcTimestamp)
11-
expect(formatted).to.eq('Jan 1 4:00 AM')
11+
expect(formatted).to.eq('Jan 1, 4:00 AM')
1212
})
1313

14-
it('should include year when the time difference is more than 365 days', () => {
14+
it('should include the year when showing a date from a different year', () => {
1515
const utcTimestamp = '2022-01-01T12:00:00Z'
1616
const formatted = formatDateAndTime(utcTimestamp)
17-
expect(formatted).to.eq('Jan 1 2022 4:00 AM')
17+
expect(formatted).to.eq('Jan 1, 2022 at 4:00 AM')
1818
})
1919
})

cypress/unit/formatMessageTimestamp.cy.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('formatTimestamp', () => {
1212

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

src/components/helper.ts

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,31 @@ export function calculateTimeAgo(isoDate: string): string {
2424
export function formatDateAndTime(isoDateTimeInUtc: string): string {
2525
const convertedDate = new Date(isoDateTimeInUtc)
2626
const userLocale = navigator.language
27-
const options: Intl.DateTimeFormatOptions = {
27+
const dateOptions: Intl.DateTimeFormatOptions = {
2828
month: 'short',
2929
day: 'numeric',
30+
}
31+
32+
const timeOptions: Intl.DateTimeFormatOptions = {
3033
hour: 'numeric',
3134
minute: '2-digit',
3235
hour12: true,
3336
}
3437

35-
const timeDifferenceInDays =
36-
calculateTimeDiffInSeconds(isoDateTimeInUtc) / (60 * 60 * 24)
38+
const currentDate = new Date()
39+
const isDifferentYear =
40+
convertedDate.getFullYear() !== currentDate.getFullYear()
3741

38-
if (timeDifferenceInDays > 365) {
39-
options.year = 'numeric'
42+
const dataAndTimeConnector = isDifferentYear ? ' at ' : ', '
43+
44+
if (isDifferentYear) {
45+
dateOptions.year = 'numeric'
4046
}
41-
const formattedDateTime = convertedDate
42-
.toLocaleTimeString(userLocale, options)
43-
.replace(/,/g, '')
47+
48+
const formattedDateTime =
49+
convertedDate.toLocaleDateString(userLocale, dateOptions) +
50+
dataAndTimeConnector +
51+
convertedDate.toLocaleTimeString(userLocale, timeOptions)
4452
return formattedDateTime
4553
}
4654

src/components/messageCanvas/messageCanvas.cy.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ describe('MessageCanvas', () => {
5959
<p>Hello World</p>
6060
</MessageCanvas>
6161
)
62-
cy.contains('Jan 1 2020').should('not.be.visible')
62+
cy.contains('Jan 1, 2020').should('not.be.visible')
6363
cy.get('.rustic-message-canvas').realHover()
64-
cy.contains('Jan 1 2020').should('be.visible')
64+
cy.contains('Jan 1, 2020').should('be.visible')
6565
})
6666

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

9595
it('shows that it was last updated if an update is provided', () => {

src/components/timestamp/timestamp.stories.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,36 @@ export default {
1515
},
1616
}
1717

18-
const newDate = new Date()
18+
function getYesterdayDate() {
19+
const today = new Date()
20+
const yesterday = new Date(today)
21+
yesterday.setDate(today.getDate() - 1)
22+
return yesterday
23+
}
24+
25+
const yesterday = getYesterdayDate()
26+
const now = new Date()
27+
1928
export const Default = {
2029
args: {
2130
timestamp: '2023-11-26T23:25:44Z',
2231
},
2332
}
2433

34+
export const OverADayAgo = {
35+
args: {
36+
timestamp: yesterday,
37+
},
38+
}
39+
40+
export const NotThisYear = {
41+
args: {
42+
timestamp: '2022-11-26T23:25:44Z',
43+
},
44+
}
45+
2546
export const TimeAgo = {
2647
args: {
27-
timestamp: newDate,
48+
timestamp: now,
2849
},
2950
}

0 commit comments

Comments
 (0)