From a1021fd8719b2ea48b1b9f714b928bbe294bee31 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 9 Nov 2023 00:57:26 +0700 Subject: [PATCH 1/9] fix for timezone abbreviations --- src/libs/IntlPolyfill/index.native.ts | 3 +- src/libs/IntlPolyfill/index.ts | 6 +- .../IntlPolyfill/polyfillDateTimeFormat.ts | 77 +++++++++++++++++++ 3 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 src/libs/IntlPolyfill/polyfillDateTimeFormat.ts diff --git a/src/libs/IntlPolyfill/index.native.ts b/src/libs/IntlPolyfill/index.native.ts index a044b4c52f0d..138d57621405 100644 --- a/src/libs/IntlPolyfill/index.native.ts +++ b/src/libs/IntlPolyfill/index.native.ts @@ -1,3 +1,4 @@ +import polyfillDateTimeFormat from '@libs/IntlPolyfill/polyfillDateTimeFormat'; import polyfillListFormat from './polyfillListFormat'; import polyfillNumberFormat from './polyfillNumberFormat'; import IntlPolyfill from './types'; @@ -10,8 +11,8 @@ const intlPolyfill: IntlPolyfill = () => { require('@formatjs/intl-getcanonicallocales/polyfill'); require('@formatjs/intl-locale/polyfill'); require('@formatjs/intl-pluralrules/polyfill'); - require('@formatjs/intl-datetimeformat'); polyfillNumberFormat(); + polyfillDateTimeFormat(); polyfillListFormat(); }; diff --git a/src/libs/IntlPolyfill/index.ts b/src/libs/IntlPolyfill/index.ts index bef12ef093e2..866cff7fe1ef 100644 --- a/src/libs/IntlPolyfill/index.ts +++ b/src/libs/IntlPolyfill/index.ts @@ -1,4 +1,5 @@ -import polyfillNumberFormat from './polyfillNumberFormat'; +import polyfillDateTimeFormat from '@libs/IntlPolyfill/polyfillDateTimeFormat'; +import polyfillNumberFormat from '@libs/IntlPolyfill/polyfillNumberFormat'; import IntlPolyfill from './types'; /** @@ -6,8 +7,7 @@ import IntlPolyfill from './types'; * This ensures that the currency data is consistent across platforms and browsers. */ const intlPolyfill: IntlPolyfill = () => { - // Just need to polyfill Intl.NumberFormat for web based platforms polyfillNumberFormat(); - require('@formatjs/intl-datetimeformat'); + polyfillDateTimeFormat(); }; export default intlPolyfill; diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts new file mode 100644 index 000000000000..39ac9e78d794 --- /dev/null +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -0,0 +1,77 @@ +import Onyx from 'react-native-onyx'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {Timezone} from '@src/types/onyx/PersonalDetails'; + +/* eslint-disable @typescript-eslint/naming-convention */ +const tzLinks: Record = { + "Africa/Abidjan": "Africa/Accra", + "CET": "Europe/Paris", + "CST6CDT": "America/Chicago", + "EET": "Europe/Sofia", + "EST": "America/Cancun", + "EST5EDT": "America/New_York", + "Etc/GMT": "UTC", + "Etc/UTC": "UTC", + "Factory": "UTC", + "GMT": "UTC", + "HST": "Pacific/Honolulu", + "MET": "Europe/Paris", + "MST": "America/Phoenix", + "MST7MDT": "America/Denver", + "PST8PDT": "America/Los_Angeles", + "WET": "Europe/Lisbon" +} +/* eslint-enable @typescript-eslint/naming-convention */ + +let currentUserAccountID: number | undefined; +Onyx.connect({ + key: ONYXKEYS.SESSION, + callback: (val) => { + // When signed out, val is undefined + if (!val) { + return; + } + + currentUserAccountID = val.accountID; + }, +}); + +let timezone: Required = CONST.DEFAULT_TIME_ZONE; +Onyx.connect({ + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + callback: (value) => { + if (!currentUserAccountID) { + return; + } + + const personalDetailsTimezone = value?.[currentUserAccountID]?.timezone; + + timezone = { + selected: personalDetailsTimezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, + automatic: personalDetailsTimezone?.automatic ?? CONST.DEFAULT_TIME_ZONE.automatic, + }; + }, +}); + +export default function () { + // Because JS Engines do not expose default timezone, the polyfill cannot detect local timezone that a browser is in. + // We must manually do this by getting the local timezone before adding polyfill. + let currentTimezone = timezone.automatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected; + console.log(currentTimezone) + if (currentTimezone in tzLinks) { + currentTimezone = tzLinks[currentTimezone]; + } + + require('@formatjs/intl-datetimeformat/polyfill-force'); + require('@formatjs/intl-datetimeformat/locale-data/en'); + require('@formatjs/intl-datetimeformat/locale-data/es'); + require('@formatjs/intl-datetimeformat/add-all-tz'); + + if ('__setDefaultTimeZone' in Intl.DateTimeFormat) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + // eslint-disable-next-line no-underscore-dangle + Intl.DateTimeFormat.__setDefaultTimeZone(currentTimezone); + } +} From 4653beb09bd1ecc15edf690cdc87b0df367f3593 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 9 Nov 2023 00:59:44 +0700 Subject: [PATCH 2/9] remove console --- src/libs/IntlPolyfill/polyfillDateTimeFormat.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index 39ac9e78d794..a8b5bafb0fa9 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -58,7 +58,6 @@ export default function () { // Because JS Engines do not expose default timezone, the polyfill cannot detect local timezone that a browser is in. // We must manually do this by getting the local timezone before adding polyfill. let currentTimezone = timezone.automatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected; - console.log(currentTimezone) if (currentTimezone in tzLinks) { currentTimezone = tzLinks[currentTimezone]; } From aec68715195f8199f042b9dd13263ee00e5a4eac Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 11 Dec 2023 16:38:55 +0700 Subject: [PATCH 3/9] add timezone polyfills --- src/libs/IntlPolyfill/index.native.ts | 2 +- src/libs/IntlPolyfill/index.ts | 4 +- .../IntlPolyfill/polyfillDateTimeFormat.ts | 42 +++++++++---------- 3 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/libs/IntlPolyfill/index.native.ts b/src/libs/IntlPolyfill/index.native.ts index 138d57621405..24403dfd7fba 100644 --- a/src/libs/IntlPolyfill/index.native.ts +++ b/src/libs/IntlPolyfill/index.native.ts @@ -1,4 +1,4 @@ -import polyfillDateTimeFormat from '@libs/IntlPolyfill/polyfillDateTimeFormat'; +import polyfillDateTimeFormat from './polyfillDateTimeFormat'; import polyfillListFormat from './polyfillListFormat'; import polyfillNumberFormat from './polyfillNumberFormat'; import IntlPolyfill from './types'; diff --git a/src/libs/IntlPolyfill/index.ts b/src/libs/IntlPolyfill/index.ts index 866cff7fe1ef..cbd20c6d0451 100644 --- a/src/libs/IntlPolyfill/index.ts +++ b/src/libs/IntlPolyfill/index.ts @@ -1,5 +1,5 @@ -import polyfillDateTimeFormat from '@libs/IntlPolyfill/polyfillDateTimeFormat'; -import polyfillNumberFormat from '@libs/IntlPolyfill/polyfillNumberFormat'; +import polyfillDateTimeFormat from './polyfillDateTimeFormat'; +import polyfillNumberFormat from './polyfillNumberFormat'; import IntlPolyfill from './types'; /** diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index a8b5bafb0fa9..173bbb9f7238 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -1,28 +1,27 @@ +import {DateTimeFormatConstructor} from '@formatjs/intl-datetimeformat'; import Onyx from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {Timezone} from '@src/types/onyx/PersonalDetails'; -/* eslint-disable @typescript-eslint/naming-convention */ const tzLinks: Record = { - "Africa/Abidjan": "Africa/Accra", - "CET": "Europe/Paris", - "CST6CDT": "America/Chicago", - "EET": "Europe/Sofia", - "EST": "America/Cancun", - "EST5EDT": "America/New_York", - "Etc/GMT": "UTC", - "Etc/UTC": "UTC", - "Factory": "UTC", - "GMT": "UTC", - "HST": "Pacific/Honolulu", - "MET": "Europe/Paris", - "MST": "America/Phoenix", - "MST7MDT": "America/Denver", - "PST8PDT": "America/Los_Angeles", - "WET": "Europe/Lisbon" -} -/* eslint-enable @typescript-eslint/naming-convention */ + 'Africa/Abidjan': 'Africa/Accra', + CET: 'Europe/Paris', + CST6CDT: 'America/Chicago', + EET: 'Europe/Sofia', + EST: 'America/Cancun', + EST5EDT: 'America/New_York', + 'Etc/GMT': 'UTC', + 'Etc/UTC': 'UTC', + Factory: 'UTC', + GMT: 'UTC', + HST: 'Pacific/Honolulu', + MET: 'Europe/Paris', + MST: 'America/Phoenix', + MST7MDT: 'America/Denver', + PST8PDT: 'America/Los_Angeles', + WET: 'Europe/Lisbon', +}; let currentUserAccountID: number | undefined; Onyx.connect({ @@ -68,9 +67,6 @@ export default function () { require('@formatjs/intl-datetimeformat/add-all-tz'); if ('__setDefaultTimeZone' in Intl.DateTimeFormat) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - // eslint-disable-next-line no-underscore-dangle - Intl.DateTimeFormat.__setDefaultTimeZone(currentTimezone); + (Intl.DateTimeFormat as DateTimeFormatConstructor).__setDefaultTimeZone(currentTimezone); } } From 78b0022675e2a9922f0a68ba1616377d1dc48ac4 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 11 Dec 2023 16:46:24 +0700 Subject: [PATCH 4/9] fix lint --- src/libs/IntlPolyfill/polyfillDateTimeFormat.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index 173bbb9f7238..341dba8cd48c 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -67,6 +67,7 @@ export default function () { require('@formatjs/intl-datetimeformat/add-all-tz'); if ('__setDefaultTimeZone' in Intl.DateTimeFormat) { + // eslint-disable-next-line no-underscore-dangle (Intl.DateTimeFormat as DateTimeFormatConstructor).__setDefaultTimeZone(currentTimezone); } } From 1e6909ad07205070d6738e72ec7b2ef47fb880e4 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 11 Dec 2023 16:51:38 +0700 Subject: [PATCH 5/9] fix lint --- src/libs/IntlPolyfill/polyfillDateTimeFormat.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index 341dba8cd48c..ce259f21bf0c 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -4,6 +4,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {Timezone} from '@src/types/onyx/PersonalDetails'; +/* eslint-enable @typescript-eslint/naming-convention */ const tzLinks: Record = { 'Africa/Abidjan': 'Africa/Accra', CET: 'Europe/Paris', @@ -22,6 +23,7 @@ const tzLinks: Record = { PST8PDT: 'America/Los_Angeles', WET: 'Europe/Lisbon', }; +/* eslint-enable @typescript-eslint/naming-convention */ let currentUserAccountID: number | undefined; Onyx.connect({ From 7300104383c4caf37f2d7e348820079a40de3193 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 11 Dec 2023 17:05:54 +0700 Subject: [PATCH 6/9] fix lint --- src/libs/IntlPolyfill/polyfillDateTimeFormat.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index ce259f21bf0c..3bd90cb242d5 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -4,7 +4,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {Timezone} from '@src/types/onyx/PersonalDetails'; -/* eslint-enable @typescript-eslint/naming-convention */ +/* eslint-disable @typescript-eslint/naming-convention */ const tzLinks: Record = { 'Africa/Abidjan': 'Africa/Accra', CET: 'Europe/Paris', @@ -23,7 +23,7 @@ const tzLinks: Record = { PST8PDT: 'America/Los_Angeles', WET: 'Europe/Lisbon', }; -/* eslint-enable @typescript-eslint/naming-convention */ +/* eslint-disable @typescript-eslint/naming-convention */ let currentUserAccountID: number | undefined; Onyx.connect({ From f9afabe466a1e978b60e9c9e2c19e8ad4adc44c4 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 3 Jan 2024 16:32:15 +0700 Subject: [PATCH 7/9] retrieve timezone from DateUtils --- .../IntlPolyfill/polyfillDateTimeFormat.ts | 37 +------------------ 1 file changed, 2 insertions(+), 35 deletions(-) diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index 3bd90cb242d5..c15a5a7f7a66 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -1,8 +1,5 @@ import {DateTimeFormatConstructor} from '@formatjs/intl-datetimeformat'; -import Onyx from 'react-native-onyx'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import {Timezone} from '@src/types/onyx/PersonalDetails'; +import DateUtils from '@libs/DateUtils'; /* eslint-disable @typescript-eslint/naming-convention */ const tzLinks: Record = { @@ -25,40 +22,10 @@ const tzLinks: Record = { }; /* eslint-disable @typescript-eslint/naming-convention */ -let currentUserAccountID: number | undefined; -Onyx.connect({ - key: ONYXKEYS.SESSION, - callback: (val) => { - // When signed out, val is undefined - if (!val) { - return; - } - - currentUserAccountID = val.accountID; - }, -}); - -let timezone: Required = CONST.DEFAULT_TIME_ZONE; -Onyx.connect({ - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - callback: (value) => { - if (!currentUserAccountID) { - return; - } - - const personalDetailsTimezone = value?.[currentUserAccountID]?.timezone; - - timezone = { - selected: personalDetailsTimezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, - automatic: personalDetailsTimezone?.automatic ?? CONST.DEFAULT_TIME_ZONE.automatic, - }; - }, -}); - export default function () { // Because JS Engines do not expose default timezone, the polyfill cannot detect local timezone that a browser is in. // We must manually do this by getting the local timezone before adding polyfill. - let currentTimezone = timezone.automatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected; + let currentTimezone = DateUtils.getCurrentTimezone().selected as string; if (currentTimezone in tzLinks) { currentTimezone = tzLinks[currentTimezone]; } From 52426835b55d7d9b99c2fcf45816800cb283d81c Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 8 Jan 2024 10:11:31 +0700 Subject: [PATCH 8/9] fix lint --- src/libs/IntlPolyfill/polyfillDateTimeFormat.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index c15a5a7f7a66..026f82f7fc4b 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -1,4 +1,4 @@ -import {DateTimeFormatConstructor} from '@formatjs/intl-datetimeformat'; +import type {DateTimeFormatConstructor} from '@formatjs/intl-datetimeformat'; import DateUtils from '@libs/DateUtils'; /* eslint-disable @typescript-eslint/naming-convention */ From b20756041d4da3e303361ac5bd13a1919a99778d Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 9 Jan 2024 20:31:54 +0700 Subject: [PATCH 9/9] enable eslint --- src/libs/IntlPolyfill/polyfillDateTimeFormat.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts index 026f82f7fc4b..13eaaabbd8f4 100644 --- a/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts +++ b/src/libs/IntlPolyfill/polyfillDateTimeFormat.ts @@ -20,7 +20,7 @@ const tzLinks: Record = { PST8PDT: 'America/Los_Angeles', WET: 'Europe/Lisbon', }; -/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-enable @typescript-eslint/naming-convention */ export default function () { // Because JS Engines do not expose default timezone, the polyfill cannot detect local timezone that a browser is in.