diff --git a/packages/dashboard/src/utils/date.test.ts b/packages/dashboard/src/utils/date.test.ts new file mode 100644 index 0000000..61a4b04 --- /dev/null +++ b/packages/dashboard/src/utils/date.test.ts @@ -0,0 +1,84 @@ +import { dateRelative } from './date'; + +describe('date', () => { + describe('dateRelative', () => { + describe('for date 10/12/2021 15h00 (as ISOString)', () => { + const timezoneEuropeLondon = 'Europe/London'; + const timezoneAmericaLosAngels = 'America/Los_Angeles'; + const timestamp = '2021-12-10T15:00:00.000Z'; + const timestampMinusEigthHours = '2021-12-10T07:00:00.000Z'; + const timestampPlusThirtyMinutes = '2021-12-10T15:30:00.000Z'; + const timestampPlusTwoHours = '2021-12-10T17:00:00.000Z'; + const getNow = ( + timestamp: string, + timeZone: string, + ) => new Date( + new Date(timestamp).toLocaleString("en-US", { timeZone }), + ).toISOString(); + + describe('on timezone Europe/London', () => { + it('on checking immediately should describe as few seconds ago', () => { + const now = getNow( + timestamp, + timezoneEuropeLondon, + ); + const humanFriendlyDate = dateRelative( + timestamp, + now, + ); + + const expected = 'a few seconds ago'; + + expect(humanFriendlyDate).toBe(expected); + }); + + it('on checking 30m after should be a 30m difference', () => { + const now = getNow( + timestampPlusThirtyMinutes, + timezoneEuropeLondon, + ); + const humanFriendlyDate = dateRelative( + timestamp, + now, + ); + + const expected = '30 minutes ago'; + + expect(humanFriendlyDate).toBe(expected); + }); + }); + + describe('on timezone America/Los Angeles', () => { + it('on a timestamp which is 8 hours earlier should show few seconds ago', () => { + const now = getNow( + timestamp, + timezoneAmericaLosAngels, + ); + const humanFriendlyDate = dateRelative( + timestampMinusEigthHours, + now, + ); + + const expected = 'a few seconds ago'; + + expect(humanFriendlyDate).toBe(expected); + }); + + it('on 2 hours from source timestamp should be a 2 hours difference', () => { + const now = getNow( + timestampPlusTwoHours, + timezoneAmericaLosAngels, + ); + const humanFriendlyDate = dateRelative( + timestampMinusEigthHours, + now, + ); + + const expected = '2 hours ago'; + + expect(humanFriendlyDate).toBe(expected); + }); + }); + }); + }); +}); diff --git a/packages/dashboard/src/utils/date.ts b/packages/dashboard/src/utils/date.ts index a50a068..280ad57 100644 --- a/packages/dashboard/src/utils/date.ts +++ b/packages/dashboard/src/utils/date.ts @@ -1,10 +1,23 @@ /* eslint-disable import/prefer-default-export */ import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; +import timezone from 'dayjs/plugin/timezone'; import relativeTime from 'dayjs/plugin/relativeTime'; import customParseFormat from 'dayjs/plugin/customParseFormat'; // Extensions -[utc, relativeTime, customParseFormat].forEach((plugin) => dayjs.extend(plugin as any)); +[utc, timezone, relativeTime, customParseFormat].forEach((plugin) => dayjs.extend(plugin as any)); -export const dateRelative = (timestamp: string) => dayjs.utc(timestamp, 'DD/MM/YYYY').fromNow(); +// Defaults +dayjs.tz.setDefault("Europe/London"); + +const USER_TIMEZONE = dayjs.tz.guess(); + +const NOW = new Date( + new Date().toLocaleString("en-US", { timeZone: USER_TIMEZONE }) +).toISOString(); + +export const dateRelative = ( + timestamp: string, + now: string = NOW, +) => dayjs.utc(timestamp).from(now); diff --git a/packages/dashboard/src/utils/transactions.test.ts b/packages/dashboard/src/utils/transactions.test.ts index 594eafb..51e42d7 100644 --- a/packages/dashboard/src/utils/transactions.test.ts +++ b/packages/dashboard/src/utils/transactions.test.ts @@ -8,7 +8,7 @@ describe('utils/transactions', () => { it('should return valid transaction time (large number)', () => { const time = 1600000000000n; const result = toTransactionTime(time); - const expected = '13/09/2020'; + const expected = '2020-09-13T12:26:40.000Z'; expect(result).toBe(expected); }) }); diff --git a/packages/dashboard/src/utils/transactions.ts b/packages/dashboard/src/utils/transactions.ts index 0f8c313..3f9383e 100644 --- a/packages/dashboard/src/utils/transactions.ts +++ b/packages/dashboard/src/utils/transactions.ts @@ -28,10 +28,7 @@ export const toTransactionTime = (time: bigint) => { return; }; - const dateChunks = ISOString.split('T')[0].split('-'); - const formated = `${dateChunks[2]}/${dateChunks[1]}/${dateChunks[0]}`; - - return formated; + return ISOString; } type TransactionDetails = {