-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: history timeline shows relative time, such as today and yesterd…
…ay (#6864) ### TL;DR First, fixed an i18n issue in history panel. When the browser language is set to Chinese, and the AFFiNE application language is set to English, the language supposed to be English global. But now the language is a mixture of Chinese and English, which is obviously wrong. ![截屏2024-05-08 18.23.21.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/93d8218a-3b26-4b0c-9f15-71a8996556db.png) Second, design a time formatter to convert timestamp into relative calendar date, such today and yesterday and so on. Long-ago edits will show the exact date like before. ![截屏2024-05-10 15.30.57.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/dbc59e80-9504-40b1-b712-5c155cb6fa63.png) ### What changed? - `new Intl.DateTimeFormat` with language option form `document.documentElement.lang` - Added `timestampToCalendarDate` function to convert timestamp into relative calendar date - Updated unit tests - Updated i18n copywriting ### How to test? 1. Open view history version 2. Check edit timeline
- Loading branch information
Showing
6 changed files
with
196 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
112 changes: 112 additions & 0 deletions
112
packages/frontend/core/src/utils/__tests__/intl-formatter.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import { getI18n } from '@affine/i18n'; | ||
import { describe, expect, test } from 'vitest'; | ||
|
||
import type { CalendarTranslation } from '../intl-formatter'; | ||
import { timestampToCalendarDate } from '../intl-formatter'; | ||
|
||
const translation: CalendarTranslation = { | ||
yesterday: () => 'Yesterday', | ||
today: () => 'Today', | ||
tomorrow: () => 'Tomorrow', | ||
nextWeek: () => 'Next Week', | ||
}; | ||
|
||
const ONE_DAY = 24 * 60 * 60 * 1000; | ||
|
||
describe('intl calendar date formatter', () => { | ||
const week = new Intl.DateTimeFormat(getI18n()?.language, { | ||
weekday: 'long', | ||
}); | ||
|
||
test('someday before last week', async () => { | ||
const timestamp = '2000-01-01 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation)).toBe('Jan 1, 2000'); | ||
}); | ||
|
||
test('someday in last week', async () => { | ||
const timestamp = Date.now() - 6 * ONE_DAY; | ||
expect(timestampToCalendarDate(timestamp, translation)).toBe( | ||
week.format(timestamp) | ||
); | ||
}); | ||
|
||
test('someday is yesterday', async () => { | ||
const timestamp = Date.now() - ONE_DAY; | ||
expect(timestampToCalendarDate(timestamp, translation)).toBe('Yesterday'); | ||
}); | ||
|
||
test('someday is today', async () => { | ||
const timestamp = Date.now(); | ||
expect(timestampToCalendarDate(timestamp, translation)).toBe('Today'); | ||
}); | ||
|
||
test('someday is tomorrow', async () => { | ||
const timestamp = Date.now() + ONE_DAY; | ||
expect(timestampToCalendarDate(timestamp, translation)).toBe('Tomorrow'); | ||
}); | ||
|
||
test('someday in next week', async () => { | ||
const timestamp = Date.now() + 6 * ONE_DAY; | ||
expect(timestampToCalendarDate(timestamp, translation)).toBe( | ||
`Next Week ${week.format(timestamp)}` | ||
); | ||
}); | ||
|
||
test('someday after next week', async () => { | ||
const timestamp = '3000-01-01 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation)).toBe('Jan 1, 3000'); | ||
}); | ||
}); | ||
|
||
describe('intl calendar date formatter with specific reference time', () => { | ||
const referenceTime = '2024-05-10 14:00'; | ||
|
||
test('someday before last week', async () => { | ||
const timestamp = '2024-04-27 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe( | ||
'Apr 27, 2024' | ||
); | ||
}); | ||
|
||
test('someday in last week', async () => { | ||
const timestamp = '2024-05-6 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe( | ||
'Monday' | ||
); | ||
}); | ||
|
||
test('someday is yesterday', async () => { | ||
const timestamp = '2024-05-9 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe( | ||
'Yesterday' | ||
); | ||
}); | ||
|
||
test('someday is today', async () => { | ||
const timestamp = '2024-05-10 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe( | ||
'Today' | ||
); | ||
}); | ||
|
||
test('someday is tomorrow', async () => { | ||
const timestamp = '2024-05-11 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe( | ||
'Tomorrow' | ||
); | ||
}); | ||
|
||
test('someday in next week', async () => { | ||
const timestamp = '2024-05-15 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe( | ||
'Next Week Wednesday' | ||
); | ||
}); | ||
|
||
test('someday after next week', async () => { | ||
const timestamp = '2024-05-30 10:00'; | ||
expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe( | ||
'May 30, 2024' | ||
); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,66 @@ | ||
import { getI18n } from '@affine/i18n'; | ||
import dayjs from 'dayjs'; | ||
|
||
const timeFormatter = new Intl.DateTimeFormat(undefined, { | ||
timeStyle: 'short', | ||
}); | ||
function createTimeFormatter() { | ||
return new Intl.DateTimeFormat(getI18n()?.language, { | ||
timeStyle: 'short', | ||
}); | ||
} | ||
|
||
const dateFormatter = new Intl.DateTimeFormat(undefined, { | ||
year: 'numeric', | ||
month: 'short', | ||
day: 'numeric', | ||
}); | ||
function createDateFormatter() { | ||
return new Intl.DateTimeFormat(getI18n()?.language, { | ||
year: 'numeric', | ||
month: 'short', | ||
day: 'numeric', | ||
}); | ||
} | ||
|
||
function createWeekFormatter() { | ||
return new Intl.DateTimeFormat(getI18n()?.language, { | ||
weekday: 'long', | ||
}); | ||
} | ||
|
||
export const timestampToLocalTime = (ts: string | number) => { | ||
return timeFormatter.format(dayjs(ts).toDate()); | ||
const formatter = createTimeFormatter(); | ||
return formatter.format(dayjs(ts).toDate()); | ||
}; | ||
|
||
export const timestampToLocalDate = (ts: string | number) => { | ||
return dateFormatter.format(dayjs(ts).toDate()); | ||
const formatter = createDateFormatter(); | ||
return formatter.format(dayjs(ts).toDate()); | ||
}; | ||
|
||
export interface CalendarTranslation { | ||
yesterday: () => string; | ||
today: () => string; | ||
tomorrow: () => string; | ||
nextWeek: () => string; | ||
} | ||
|
||
export const timestampToCalendarDate = ( | ||
ts: string | number, | ||
translation: CalendarTranslation, | ||
referenceTime?: string | number | ||
) => { | ||
const startOfDay = dayjs(referenceTime).startOf('d'); | ||
const diff = dayjs(ts).diff(startOfDay, 'd', true); | ||
const sameElse = timestampToLocalDate(ts); | ||
|
||
const formatter = createWeekFormatter(); | ||
const week = formatter.format(dayjs(ts).toDate()); | ||
|
||
return diff < -6 | ||
? sameElse | ||
: diff < -1 | ||
? week | ||
: diff < 0 | ||
? translation.yesterday() | ||
: diff < 1 | ||
? translation.today() | ||
: diff < 2 | ||
? translation.tomorrow() | ||
: diff < 7 | ||
? `${translation.nextWeek()} ${week}` | ||
: sameElse; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters