MM-18313 Fix update timezone automatically (#3462)

* MM-18313 Fix update timezone automatically

* add unit tests

app/actions/views/login.js

@@ -15,7 +15,7 @@ import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {ViewTypes} from 'app/constants';
 import {setAppCredentials} from 'app/init/credentials';
 import PushNotifications from 'app/push_notifications';
-import {getDeviceTimezone} from 'app/utils/timezone';
+import {getDeviceTimezoneAsync} from 'app/utils/timezone';
 import {setCSRFFromCookie} from 'app/utils/security';
 
 export function handleLoginIdChanged(loginId) {
@@ -51,7 +51,8 @@ export function handleSuccessfulLogin() {
 
         const enableTimezone = isTimezoneEnabled(state);
         if (enableTimezone) {
-            dispatch(autoUpdateTimezone(getDeviceTimezone()));
+            const timezone = await getDeviceTimezoneAsync();
+            dispatch(autoUpdateTimezone(timezone));
         }
 
         dispatch({

app/init/global_event_handler.js

@@ -7,11 +7,14 @@ import semver from 'semver';
 
 import {setAppState, setServerVersion} from 'mattermost-redux/actions/general';
 import {loadMe, logout} from 'mattermost-redux/actions/users';
+import {autoUpdateTimezone} from 'mattermost-redux/actions/timezone';
 import {close as closeWebSocket} from 'mattermost-redux/actions/websocket';
 import {Client4} from 'mattermost-redux/client';
 import {General} from 'mattermost-redux/constants';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+import {isTimezoneEnabled} from 'mattermost-redux/selectors/entities/timezone';
 
 import {setDeviceDimensions, setDeviceOrientation, setDeviceAsTablet, setStatusBarHeight} from 'app/actions/device';
 import {selectDefaultChannel} from 'app/actions/views/channel';
@@ -24,6 +27,7 @@ import PushNotifications from 'app/push_notifications';
 import {getCurrentLocale} from 'app/selectors/i18n';
 import {t} from 'app/utils/i18n';
 import {deleteFileCache} from 'app/utils/file';
+import {getDeviceTimezoneAsync} from 'app/utils/timezone';
 
 import LocalConfig from 'assets/config';
 
@@ -47,6 +51,7 @@ class GlobalEventHandler {
 
     appActive = async () => {
         this.turnOnInAppNotificationHandling();
+        this.setUserTimezone();
 
         // if the app is being controlled by an EMM provider
         if (emmProvider.enabled && emmProvider.inAppPinCode) {
@@ -261,6 +266,18 @@ class GlobalEventHandler {
             showOverlay(screen, passProps);
         }
     };
+
+    setUserTimezone = async () => {
+        const {dispatch, getState} = this.store;
+        const state = getState();
+        const currentUserId = getCurrentUserId(state);
+
+        const enableTimezone = isTimezoneEnabled(state);
+        if (enableTimezone && currentUserId) {
+            const timezone = await getDeviceTimezoneAsync();
+            dispatch(autoUpdateTimezone(timezone));
+        }
+    };
 }
 
 export default new GlobalEventHandler();

app/init/global_event_handler.test.js

@@ -86,4 +86,14 @@ describe('GlobalEventHandler', () => {
         expect(appActive).not.toHaveBeenCalled();
         expect(appInactive).not.toHaveBeenCalled();
     });
+
+    it('should set the user TimeZone when the app becomes active', () => {
+        const onAppStateChange = jest.spyOn(GlobalEventHandler, 'onAppStateChange');
+        const setUserTimezone = jest.spyOn(GlobalEventHandler, 'setUserTimezone');
+
+        GlobalEventHandler.configure({store});
+        expect(GlobalEventHandler.store).not.toBeNull();
+        expect(onAppStateChange).toHaveBeenCalledWith('active');
+        expect(setUserTimezone).toHaveBeenCalledTimes(1);
+    });
 });

app/screens/settings/timezone/timezone.js

@@ -17,7 +17,7 @@ import StatusBar from 'app/components/status_bar';
 import Section from 'app/screens/settings/section';
 import SectionItem from 'app/screens/settings/section_item';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
-import {getDeviceTimezone} from 'app/utils/timezone';
+import {getDeviceTimezoneAsync} from 'app/utils/timezone';
 import {goToScreen} from 'app/actions/navigation';
 
 export default class Timezone extends PureComponent {
@@ -61,13 +61,13 @@ export default class Timezone extends PureComponent {
         }
     }
 
-    updateAutomaticTimezone = (useAutomaticTimezone) => {
+    updateAutomaticTimezone = async (useAutomaticTimezone) => {
         const {userTimezone: {manualTimezone}} = this.props;
         let automaticTimezone = '';
 
         this.setState({useAutomaticTimezone});
         if (useAutomaticTimezone) {
-            automaticTimezone = getDeviceTimezone();
+            automaticTimezone = await getDeviceTimezoneAsync();
             this.submitUser({
                 useAutomaticTimezone,
                 automaticTimezone,

app/utils/timezone.js

@@ -5,8 +5,8 @@ import DeviceInfo from 'react-native-device-info';
 
 import moment from 'moment-timezone';
 
-export function getDeviceTimezone() {
-    return DeviceInfo.getTimezone();
+export function getDeviceTimezoneAsync() {
+    return DeviceInfo.getTimezoneAsync();
 }
 
 export function getDeviceUtcOffset() {

package-lock.json

@@ -7718,7 +7718,7 @@
       "dependencies": {
         "json5": {
           "version": "0.5.1",
-          "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
           "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
           "dev": true
         }
@@ -16656,8 +16656,8 @@
       }
     },
     "react-native-device-info": {
-      "version": "github:mattermost/react-native-device-info#58871122b6e1eb82c23674252430ad7e0a5afef3",
-      "from": "github:mattermost/react-native-device-info#58871122b6e1eb82c23674252430ad7e0a5afef3"
+      "version": "github:mattermost/react-native-device-info#f7175f10822d8f66b9806206e3313eaf2f4aabc6",
+      "from": "github:mattermost/react-native-device-info#f7175f10822d8f66b9806206e3313eaf2f4aabc6"
     },
     "react-native-doc-viewer": {
       "version": "2.7.8",

package.json

@@ -34,7 +34,7 @@
     "react-native-calendars": "github:mattermost/react-native-calendars#4937ec5a3bf7e86f9f35fcd85eb4aa6133f45b58",
     "react-native-circular-progress": "1.1.0",
     "react-native-cookies": "github:joeferraro/react-native-cookies#f11374745deba9f18f7b8a9bb4b0b2573026f522",
-    "react-native-device-info": "github:mattermost/react-native-device-info#58871122b6e1eb82c23674252430ad7e0a5afef3",
+    "react-native-device-info": "github:mattermost/react-native-device-info#f7175f10822d8f66b9806206e3313eaf2f4aabc6",
     "react-native-doc-viewer": "2.7.8",
     "react-native-document-picker": "2.3.0",
     "react-native-exception-handler": "2.10.7",