From 261d413607b630e423b693d244fe9ca2faabfa70 Mon Sep 17 00:00:00 2001 From: akumatus <12724894+akumatus@users.noreply.github.com> Date: Mon, 13 May 2024 11:59:47 +0000 Subject: [PATCH] feat: history timeline shows relative time, such as today and yesterday (#6864) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 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 --- .../affine/page-history-modal/data.ts | 12 +- .../page-history-modal/history-modal.tsx | 19 ++- .../utils/__tests__/intl-formatter.spec.ts | 112 ++++++++++++++++++ .../frontend/core/src/utils/intl-formatter.ts | 67 +++++++++-- packages/frontend/i18n/src/index.ts | 2 + packages/frontend/i18n/src/resources/en.json | 2 + 6 files changed, 196 insertions(+), 18 deletions(-) create mode 100644 packages/frontend/core/src/utils/__tests__/intl-formatter.spec.ts diff --git a/packages/frontend/core/src/components/affine/page-history-modal/data.ts b/packages/frontend/core/src/components/affine/page-history-modal/data.ts index 09ef07f0f..18948e9c5 100644 --- a/packages/frontend/core/src/components/affine/page-history-modal/data.ts +++ b/packages/frontend/core/src/components/affine/page-history-modal/data.ts @@ -1,6 +1,9 @@ import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta'; import { useDocCollectionPage } from '@affine/core/hooks/use-block-suite-workspace-page'; -import { timestampToLocalDate } from '@affine/core/utils'; +import { + type CalendarTranslation, + timestampToCalendarDate, +} from '@affine/core/utils'; import { DebugLogger } from '@affine/debug'; import type { ListHistoryQuery } from '@affine/graphql'; import { listHistoryQuery, recoverDocMutation } from '@affine/graphql'; @@ -174,10 +177,13 @@ export const useSnapshotPage = ( return page; }; -export const historyListGroupByDay = (histories: DocHistory[]) => { +export const historyListGroupByDay = ( + histories: DocHistory[], + translation: CalendarTranslation +) => { const map = new Map(); for (const history of histories) { - const day = timestampToLocalDate(history.timestamp); + const day = timestampToCalendarDate(history.timestamp, translation); const list = map.get(day) ?? []; list.push(history); map.set(day, list); diff --git a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx index 64d8ce3a5..6995c844f 100644 --- a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx +++ b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx @@ -33,7 +33,11 @@ import { import { encodeStateAsUpdate } from 'yjs'; import { pageHistoryModalAtom } from '../../../atoms/page-history'; -import { mixpanel, timestampToLocalTime } from '../../../utils'; +import { + type CalendarTranslation, + mixpanel, + timestampToLocalTime, +} from '../../../utils'; import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor'; import { StyledEditorModeSwitch } from '../../blocksuite/block-suite-mode-switch/style'; import { @@ -311,14 +315,19 @@ const PageHistoryList = ({ onLoadMore: (() => void) | false; loadingMore: boolean; }) => { + const t = useAFFiNEI18N(); const historyListByDay = useMemo(() => { - return historyListGroupByDay(historyList); - }, [historyList]); + const translation: CalendarTranslation = { + yesterday: t['com.affine.yesterday'], + today: t['com.affine.today'], + tomorrow: t['com.affine.tomorrow'], + nextWeek: t['com.affine.nextWeek'], + }; + return historyListGroupByDay(historyList, translation); + }, [historyList, t]); const [collapsedMap, setCollapsedMap] = useState>({}); - const t = useAFFiNEI18N(); - useLayoutEffect(() => { if (historyList.length > 0 && !activeVersion) { onVersionChange(historyList[0].timestamp); diff --git a/packages/frontend/core/src/utils/__tests__/intl-formatter.spec.ts b/packages/frontend/core/src/utils/__tests__/intl-formatter.spec.ts new file mode 100644 index 000000000..aea8a6f97 --- /dev/null +++ b/packages/frontend/core/src/utils/__tests__/intl-formatter.spec.ts @@ -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' + ); + }); +}); diff --git a/packages/frontend/core/src/utils/intl-formatter.ts b/packages/frontend/core/src/utils/intl-formatter.ts index d25de98a7..ef88b8d39 100644 --- a/packages/frontend/core/src/utils/intl-formatter.ts +++ b/packages/frontend/core/src/utils/intl-formatter.ts @@ -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; }; diff --git a/packages/frontend/i18n/src/index.ts b/packages/frontend/i18n/src/index.ts index ddc76289a..3866cbb81 100644 --- a/packages/frontend/i18n/src/index.ts +++ b/packages/frontend/i18n/src/index.ts @@ -45,6 +45,8 @@ export function useI18N() { return i18n; } +export { getI18n } from 'react-i18next'; + const resources = LOCALES.reduce((acc, { tag, res }) => { return Object.assign(acc, { [tag]: { translation: res } }); }, {}); diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index ae0ec5d56..7e8e8259e 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -784,6 +784,7 @@ "com.affine.last7Days": "Last 7 Days", "com.affine.lastMonth": "Last month", "com.affine.lastWeek": "Last week", + "com.affine.nextWeek": "Next week", "com.affine.lastYear": "Last year", "com.affine.loading": "Loading...", "com.affine.moreThan30Days": "Older than a month", @@ -1239,6 +1240,7 @@ "com.affine.toastMessage.restored": "{{title}} restored", "com.affine.toastMessage.successfullyDeleted": "Successfully deleted", "com.affine.today": "Today", + "com.affine.tomorrow": "Tomorrow", "com.affine.trashOperation.delete": "Delete", "com.affine.trashOperation.delete.description": "Once deleted, you can't undo this action. Do you confirm?", "com.affine.trashOperation.delete.title": "Permanently delete",