fix email notifications settings appearing save despite cancel (#7359)

webapp/components/user_settings/email_notification_setting.jsx

@@ -5,7 +5,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {savePreference} from 'actions/user_actions.jsx';
-import PreferenceStore from 'stores/preference_store.jsx';
 import {localizeMessage} from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -19,41 +18,55 @@ export default class EmailNotificationSetting extends React.Component {
         activeSection: PropTypes.string.isRequired,
         updateSection: PropTypes.func.isRequired,
         enableEmail: PropTypes.bool.isRequired,
-        onChange: PropTypes.func.isRequired,
+        emailInterval: PropTypes.number.isRequired,
         onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired,
         serverError: PropTypes.string
     };
 
     constructor(props) {
         super(props);
 
-        this.submit = this.submit.bind(this);
-        this.expand = this.expand.bind(this);
-        this.collapse = this.collapse.bind(this);
-
         this.state = {
-            emailInterval: EmailNotificationSetting.getEmailInterval(props)
+            enableEmail: props.enableEmail,
+            emailInterval: props.emailInterval
         };
     }
 
-    handleChange(enableEmail, emailInterval) {
-        this.props.onChange(enableEmail);
-        this.setState({emailInterval});
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.enableEmail !== this.props.enableEmail || nextProps.emailInterval !== this.props.emailInterval) {
+            this.setState({
+                enableEmail: nextProps.enableEmail,
+                emailInterval: nextProps.emailInterval
+            });
+        }
     }
 
-    submit() {
+    handleChange = (enableEmail, emailInterval) => {
+        this.setState({
+            enableEmail,
+            emailInterval
+        });
+    }
+
+    handleSubmit = () => {
         // until the rest of the notification settings are moved to preferences, we have to do this separately
         savePreference(Preferences.CATEGORY_NOTIFICATIONS, Preferences.EMAIL_INTERVAL, this.state.emailInterval.toString());
 
-        this.props.onSubmit();
+        const {enableEmail} = this.state;
+        this.props.onSubmit({enableEmail});
     }
 
-    expand() {
+    handleExpand = () => {
         this.props.updateSection('email');
     }
 
-    collapse() {
-        this.props.updateSection('');
+    handleCancel = (e) => {
+        this.setState({
+            enableEmail: this.props.enableEmail,
+            emailInterval: this.props.emailInterval
+        });
+        this.props.onCancel(e);
     }
 
     render() {
@@ -77,7 +90,7 @@ export default class EmailNotificationSetting extends React.Component {
                     title={localizeMessage('user.settings.notifications.emailNotifications', 'Email notifications')}
                     inputs={inputs}
                     server_error={this.state.serverError}
-                    updateSection={this.collapse}
+                    updateSection={this.handleCancel}
                 />
             );
         }
@@ -132,14 +145,14 @@ export default class EmailNotificationSetting extends React.Component {
                 <SettingItemMin
                     title={localizeMessage('user.settings.notifications.emailNotifications', 'Email notifications')}
                     describe={description}
-                    updateSection={this.expand}
+                    updateSection={this.handleExpand}
                 />
             );
         }
 
         let batchingOptions = null;
         let batchingInfo = null;
-        if (window.mm_config.EnableEmailBatching === 'true') {
+        if (global.window.mm_config.EnableEmailBatching === 'true') {
             batchingOptions = (
                 <div>
                     <div className='radio'>
@@ -149,7 +162,7 @@ export default class EmailNotificationSetting extends React.Component {
                                 type='radio'
                                 name='emailNotifications'
                                 checked={this.state.emailInterval === Preferences.INTERVAL_FIFTEEN_MINUTES}
-                                onChange={this.handleChange.bind(this, 'true', Preferences.INTERVAL_FIFTEEN_MINUTES)}
+                                onChange={() => this.handleChange('true', Preferences.INTERVAL_FIFTEEN_MINUTES)}
                             />
                             <FormattedMessage
                                 id='user.settings.notifications.email.everyXMinutes'
@@ -165,7 +178,7 @@ export default class EmailNotificationSetting extends React.Component {
                                 type='radio'
                                 name='emailNotifications'
                                 checked={this.state.emailInterval === Preferences.INTERVAL_HOUR}
-                                onChange={this.handleChange.bind(this, 'true', Preferences.INTERVAL_HOUR)}
+                                onChange={() => this.handleChange('true', Preferences.INTERVAL_HOUR)}
                             />
                             <FormattedMessage
                                 id='user.settings.notifications.email.everyHour'
@@ -202,7 +215,7 @@ export default class EmailNotificationSetting extends React.Component {
                                     type='radio'
                                     name='emailNotifications'
                                     checked={this.state.emailInterval === Preferences.INTERVAL_IMMEDIATE}
-                                    onChange={this.handleChange.bind(this, 'true', Preferences.INTERVAL_IMMEDIATE)}
+                                    onChange={() => this.handleChange('true', Preferences.INTERVAL_IMMEDIATE)}
                                 />
                                 <FormattedMessage
                                     id='user.settings.notifications.email.immediately'
@@ -218,7 +231,7 @@ export default class EmailNotificationSetting extends React.Component {
                                     type='radio'
                                     name='emailNotifications'
                                     checked={this.state.emailInterval === Preferences.INTERVAL_NEVER}
-                                    onChange={this.handleChange.bind(this, 'false', Preferences.INTERVAL_NEVER)}
+                                    onChange={() => this.handleChange('false', Preferences.INTERVAL_NEVER)}
                                 />
                                 <FormattedMessage
                                     id='user.settings.notifications.email.never'
@@ -240,39 +253,10 @@ export default class EmailNotificationSetting extends React.Component {
                         </div>
                     </div>
                 ]}
-                submit={this.submit}
+                submit={this.handleSubmit}
                 server_error={this.props.serverError}
-                updateSection={this.collapse}
+                updateSection={this.handleCancel}
             />
         );
     }
-
-    static getEmailInterval(props) {
-        const validValuesWithEmailBatching = [Preferences.INTERVAL_IMMEDIATE, Preferences.INTERVAL_FIFTEEN_MINUTES, Preferences.INTERVAL_HOUR];
-        const validValuesWithoutEmailBatching = [Preferences.INTERVAL_IMMEDIATE];
-
-        let emailInterval;
-
-        if (global.mm_config.EnableEmailBatching === 'true') {
-            // when email batching is enabled, the default interval is 15 minutes
-            emailInterval = PreferenceStore.getInt(Preferences.CATEGORY_NOTIFICATIONS, Preferences.EMAIL_INTERVAL, Preferences.INTERVAL_FIFTEEN_MINUTES);
-
-            if (validValuesWithEmailBatching.indexOf(emailInterval) === -1) {
-                emailInterval = Preferences.INTERVAL_FIFTEEN_MINUTES;
-            }
-        } else {
-            // otherwise, the default interval is immediately
-            emailInterval = PreferenceStore.getInt(Preferences.CATEGORY_NOTIFICATIONS, Preferences.EMAIL_INTERVAL, Preferences.INTERVAL_IMMEDIATE);
-
-            if (validValuesWithoutEmailBatching.indexOf(emailInterval) === -1) {
-                emailInterval = Preferences.INTERVAL_IMMEDIATE;
-            }
-        }
-
-        if (!props.enableEmail) {
-            emailInterval = Preferences.INTERVAL_NEVER;
-        }
-
-        return emailInterval;
-    }
 }

webapp/components/user_settings/user_settings_notifications.jsx

@@ -122,10 +122,10 @@ export default class NotificationsTab extends React.Component {
         this.state = getNotificationsStateFromStores();
     }
 
-    handleSubmit() {
+    handleSubmit({enableEmail = this.state.enableEmail}) {
         const data = {};
         data.user_id = this.props.user.id;
-        data.email = this.state.enableEmail;
+        data.email = enableEmail;
         data.desktop_sound = this.state.desktopSound;
         data.desktop = this.state.desktopActivity;
         data.desktop_duration = this.state.desktopDuration;
@@ -819,6 +819,7 @@ export default class NotificationsTab extends React.Component {
         }
 
         const pushNotificationSection = this.createPushNotificationSection();
+        const enableEmail = this.state.enableEmail === 'true';
 
         return (
             <div>
@@ -874,9 +875,10 @@ export default class NotificationsTab extends React.Component {
                     <EmailNotificationSetting
                         activeSection={this.props.activeSection}
                         updateSection={this.props.updateSection}
-                        enableEmail={this.state.enableEmail === 'true'}
-                        onChange={this.handleEmailRadio}
+                        enableEmail={enableEmail}
+                        emailInterval={Utils.getEmailInterval(enableEmail)}
                         onSubmit={this.handleSubmit}
+                        onCancel={this.handleCancel}
                         serverError={this.state.serverError}
                     />
                     <div className='divider-light'/>

webapp/utils/utils.jsx

@@ -1401,3 +1401,41 @@ export function removePrefixFromLocalStorage(prefix) {
         localStorage.removeItem(keys[i]);
     }
 }
+
+export function getEmailInterval(isEmailEnabled) {
+    const {
+        INTERVAL_NEVER,
+        INTERVAL_IMMEDIATE,
+        INTERVAL_FIFTEEN_MINUTES,
+        INTERVAL_HOUR,
+        CATEGORY_NOTIFICATIONS,
+        EMAIL_INTERVAL
+    } = Constants.Preferences;
+
+    if (!isEmailEnabled) {
+        return INTERVAL_NEVER;
+    }
+
+    const validValuesWithEmailBatching = [INTERVAL_IMMEDIATE, INTERVAL_FIFTEEN_MINUTES, INTERVAL_HOUR];
+    const validValuesWithoutEmailBatching = [INTERVAL_IMMEDIATE];
+
+    let emailInterval;
+
+    if (global.mm_config.EnableEmailBatching === 'true') {
+        // when email batching is enabled, the default interval is 15 minutes
+        emailInterval = PreferenceStore.getInt(CATEGORY_NOTIFICATIONS, EMAIL_INTERVAL, INTERVAL_FIFTEEN_MINUTES);
+
+        if (validValuesWithEmailBatching.indexOf(emailInterval) === -1) {
+            emailInterval = INTERVAL_FIFTEEN_MINUTES;
+        }
+    } else {
+        // otherwise, the default interval is immediately
+        emailInterval = PreferenceStore.getInt(CATEGORY_NOTIFICATIONS, EMAIL_INTERVAL, INTERVAL_IMMEDIATE);
+
+        if (validValuesWithoutEmailBatching.indexOf(emailInterval) === -1) {
+            emailInterval = INTERVAL_IMMEDIATE;
+        }
+    }
+
+    return emailInterval;
+}