Disables timezone options if it is set to automatic

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -33,28 +33,74 @@ class TimezoneSelectPage extends Component {
 
         this.saveSelectedTimezone = this.saveSelectedTimezone.bind(this);
         this.filterShownTimezones = this.filterShownTimezones.bind(this);
+        this.getTimezoneOption = this.getTimezoneOption.bind(this);
 
-        this.currentSelectedTimezone = lodashGet(props.currentUserPersonalDetails, 'timezone.selected', CONST.DEFAULT_TIME_ZONE.selected);
+        this.timezone = this.getUserTimezone(props.currentUserPersonalDetails);
         this.allTimezones = _.chain(moment.tz.names())
             .filter(timezone => !timezone.startsWith('Etc/GMT'))
-            .map(timezone => ({
-                text: timezone,
-                keyForList: timezone,
-
-                // Include the green checkmark icon to indicate the currently selected value
-                customIcon: timezone === this.currentSelectedTimezone ? greenCheckmark : undefined,
-
-                // This property will make the currently selected value have bold text
-                boldStyle: timezone === this.currentSelectedTimezone,
-            }))
+            .map(timezone => this.getTimezoneOption(timezone))
             .value();
 
         this.state = {
-            timezoneInputText: this.currentSelectedTimezone,
+            timezoneInputText: this.timezone.selected,
+            timezoneOptions: this.allTimezones,
+        };
+    }
+
+    componentDidUpdate() {
+        // componentDidUpdate is added in order to update the timezone options when automatic is toggled on/off as
+        // navigating back doesn't unmount the page, thus it won't update the timezone options & stay disabled without this.
+        const newTimezone = this.getUserTimezone(this.props.currentUserPersonalDetails);
+        if (_.isEqual(this.timezone, newTimezone)) {
+            return;
+        }
+        this.timezone = newTimezone;
+        this.allTimezones = _.map(this.allTimezones, (timezone) => {
+            const text = timezone.text.split('-')[0];
+            return this.getTimezoneOption(text);
+        });
+
+        this.setState({
+            timezoneInputText: this.timezone.selected,
             timezoneOptions: this.allTimezones,
+        });
+    }
+
+    /**
+     * We add the current time to the key to fix a bug where the list options don't update unless the key is updated.
+     * @param {String} text
+     * @return {string} key for list item
+     */
+    getKey(text) {
+        return `${text}-${(new Date()).getTime()}`;
+    }
+
+    /**
+     * Get timezone option object for the list.
+     * @param {String} text
+     * @return {Object} Timezone list option
+     */
+    getTimezoneOption(text) {
+        return {
+            text,
+            keyForList: this.getKey(text),
+
+            // Include the green checkmark icon to indicate the currently selected value
+            customIcon: text === this.timezone.selected ? greenCheckmark : undefined,
+
+            // This property will make the currently selected value have bold text
+            boldStyle: text === this.timezone.selected,
         };
     }
 
+    /**
+     * @param {Object} currentUserPersonalDetails
+     * @return {Object} user's timezone data
+     */
+    getUserTimezone(currentUserPersonalDetails) {
+        return lodashGet(currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
+    }
+
     /**
      * @param {Object} timezone
      * @param {String} timezone.text
@@ -90,7 +136,7 @@ class TimezoneSelectPage extends Component {
                             onChangeText={this.filterShownTimezones}
                             onSelectRow={this.saveSelectedTimezone}
                             optionHoveredStyle={styles.hoveredComponentBG}
-                            sections={[{data: this.state.timezoneOptions}]}
+                            sections={[{data: this.state.timezoneOptions, isDisabled: this.timezone.automatic}]}
                             shouldHaveOptionSeparator
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                         />