Disables timezone options if it is set to automatic

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -34,27 +34,71 @@ class TimezoneSelectPage extends Component {
         this.saveSelectedTimezone = this.saveSelectedTimezone.bind(this);
         this.filterShownTimezones = this.filterShownTimezones.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,
+                keyForList: this.getKey(timezone),
 
                 // Include the green checkmark icon to indicate the currently selected value
-                customIcon: timezone === this.currentSelectedTimezone ? greenCheckmark : undefined,
+                customIcon: timezone === this.timezone.selected ? greenCheckmark : undefined,
 
                 // This property will make the currently selected value have bold text
-                boldStyle: timezone === this.currentSelectedTimezone,
+                boldStyle: timezone === this.timezone.selected,
             }))
             .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 {
+                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,
+            };
+        });
+
+        this.setState({
+            timezoneInputText: this.timezone.selected,
+            timezoneOptions: this.allTimezones,
+        });
+    }
+
+    /**
+     * @param {String} text
+     * @return {string} key for list item
+     */
+    getKey(text) {
+        return `${text}-${(new Date()).getTime()}`;
+    }
+
+    /**
+     * @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 +134,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}
                         />