From 6fbfec70ef5dae0f715cfcdc3d939c7877c89210 Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Tue, 29 Aug 2023 21:33:00 +0200 Subject: [PATCH 1/2] datetime polyfill, remove moment.tz.guess() --- package-lock.json | 57 +++++++++++++++++++ package.json | 1 + src/libs/IntlPolyfill/index.js | 1 + src/libs/IntlPolyfill/index.native.js | 1 + .../Navigation/AppNavigator/AuthScreens.js | 2 +- src/libs/actions/App.js | 2 +- .../settings/Profile/TimezoneInitialPage.js | 2 +- 7 files changed, 63 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea0cb56b1ceb..5c53db0713b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "license": "MIT", "dependencies": { "@expensify/react-native-web": "0.18.15", + "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", "@formatjs/intl-listformat": "^7.2.2", "@formatjs/intl-locale": "^3.3.0", @@ -3872,6 +3873,33 @@ "tslib": "^2.4.0" } }, + "node_modules/@formatjs/intl-datetimeformat": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-datetimeformat/-/intl-datetimeformat-6.10.0.tgz", + "integrity": "sha512-5tJWZxOyP5D4PDrqv27h0LWAPHhQM9BHR0pDBTZOKWFEZNrS2IgREbyalSGwQLtN1tZaDrt3YeNfNLbZk1wSUw==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.0", + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl-datetimeformat/node_modules/@formatjs/ecma402-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz", + "integrity": "sha512-6ueQTeJZtwKjmh23bdkq/DMqH4l4bmfvtQH98blOSbiXv/OUiyijSW6jU22IT8BNM1ujCaEvJfTtyCYVH38EMQ==", + "dependencies": { + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl-datetimeformat/node_modules/@formatjs/intl-localematcher": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz", + "integrity": "sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@formatjs/intl-enumerator": { "version": "1.3.0", "license": "MIT", @@ -50880,6 +50908,35 @@ "tslib": "^2.4.0" } }, + "@formatjs/intl-datetimeformat": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-datetimeformat/-/intl-datetimeformat-6.10.0.tgz", + "integrity": "sha512-5tJWZxOyP5D4PDrqv27h0LWAPHhQM9BHR0pDBTZOKWFEZNrS2IgREbyalSGwQLtN1tZaDrt3YeNfNLbZk1wSUw==", + "requires": { + "@formatjs/ecma402-abstract": "1.17.0", + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + }, + "dependencies": { + "@formatjs/ecma402-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz", + "integrity": "sha512-6ueQTeJZtwKjmh23bdkq/DMqH4l4bmfvtQH98blOSbiXv/OUiyijSW6jU22IT8BNM1ujCaEvJfTtyCYVH38EMQ==", + "requires": { + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + } + }, + "@formatjs/intl-localematcher": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz", + "integrity": "sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==", + "requires": { + "tslib": "^2.4.0" + } + } + } + }, "@formatjs/intl-enumerator": { "version": "1.3.0", "requires": { diff --git a/package.json b/package.json index d4e0a7b856dd..abdad2ca9e75 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ }, "dependencies": { "@expensify/react-native-web": "0.18.15", + "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", "@formatjs/intl-listformat": "^7.2.2", "@formatjs/intl-locale": "^3.3.0", diff --git a/src/libs/IntlPolyfill/index.js b/src/libs/IntlPolyfill/index.js index 3925b98729a9..a99fc4cfed44 100644 --- a/src/libs/IntlPolyfill/index.js +++ b/src/libs/IntlPolyfill/index.js @@ -7,4 +7,5 @@ import polyfillNumberFormat from './polyfillNumberFormat'; export default function intlPolyfill() { // Just need to polyfill Intl.NumberFormat for web based platforms polyfillNumberFormat(); + require('@formatjs/intl-datetimeformat'); } diff --git a/src/libs/IntlPolyfill/index.native.js b/src/libs/IntlPolyfill/index.native.js index a628654fefea..4fb5ca585e25 100644 --- a/src/libs/IntlPolyfill/index.native.js +++ b/src/libs/IntlPolyfill/index.native.js @@ -9,6 +9,7 @@ export default function polyfill() { require('@formatjs/intl-getcanonicallocales/polyfill'); require('@formatjs/intl-locale/polyfill'); require('@formatjs/intl-pluralrules/polyfill'); + require('@formatjs/intl-datetimeformat'); polyfillNumberFormat(); polyfillListFormat(); } diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 7317306cdbe6..96285f1aab74 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -64,7 +64,7 @@ Onyx.connect({ } timezone = lodashGet(val, [currentAccountID, 'timezone'], {}); - const currentTimezone = moment.tz.guess(true); + const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; // If the current timezone is different than the user's timezone, and their timezone is set to automatic // then update their timezone. diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js index 46d21d50cc3e..468e735437d2 100644 --- a/src/libs/actions/App.js +++ b/src/libs/actions/App.js @@ -399,7 +399,7 @@ function openProfile(personalDetails) { if (lodashGet(oldTimezoneData, 'automatic', true)) { newTimezoneData = { automatic: true, - selected: moment.tz.guess(true), + selected: Intl.DateTimeFormat().resolvedOptions().timeZone, }; } diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js index 7dfc9fb6f9de..6bfe04982f3d 100644 --- a/src/pages/settings/Profile/TimezoneInitialPage.js +++ b/src/pages/settings/Profile/TimezoneInitialPage.js @@ -37,7 +37,7 @@ function TimezoneInitialPage(props) { const updateAutomaticTimezone = (isAutomatic) => { PersonalDetails.updateAutomaticTimezone({ automatic: isAutomatic, - selected: isAutomatic ? moment.tz.guess() : timezone.selected, + selected: isAutomatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected, }); }; From 1a40aa1bd278bfbc0622d5e1c57ad6a9c7d555a4 Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Wed, 30 Aug 2023 12:56:44 +0200 Subject: [PATCH 2/2] lint fix --- src/libs/Navigation/AppNavigator/AuthScreens.js | 1 - src/libs/actions/App.js | 1 - src/pages/settings/Profile/TimezoneInitialPage.js | 1 - 3 files changed, 3 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 96285f1aab74..a4c62d9893ea 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -1,7 +1,6 @@ import React from 'react'; import Onyx, {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import moment from 'moment'; import _ from 'underscore'; import lodashGet from 'lodash/get'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js index 468e735437d2..18593603780c 100644 --- a/src/libs/actions/App.js +++ b/src/libs/actions/App.js @@ -1,4 +1,3 @@ -import moment from 'moment-timezone'; import {AppState} from 'react-native'; import Onyx from 'react-native-onyx'; import lodashGet from 'lodash/get'; diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js index 6bfe04982f3d..94cb40a3f6f3 100644 --- a/src/pages/settings/Profile/TimezoneInitialPage.js +++ b/src/pages/settings/Profile/TimezoneInitialPage.js @@ -1,7 +1,6 @@ import lodashGet from 'lodash/get'; import React from 'react'; import {View} from 'react-native'; -import moment from 'moment-timezone'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails'; import ScreenWrapper from '../../../components/ScreenWrapper'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton';