From daed8ffbf6151f01866b9299574fdf6764c8b7bd Mon Sep 17 00:00:00 2001 From: Saturnino Abril Date: Tue, 5 Sep 2017 23:13:39 +0800 Subject: [PATCH] fix email notifications settings appearing save despite cancel (#7359) --- .../email_notification_setting.jsx | 90 ++++++++----------- .../user_settings_notifications.jsx | 10 ++- webapp/utils/utils.jsx | 38 ++++++++ 3 files changed, 81 insertions(+), 57 deletions(-) diff --git a/webapp/components/user_settings/email_notification_setting.jsx b/webapp/components/user_settings/email_notification_setting.jsx index bbde40fa11..bfba794caf 100644 --- a/webapp/components/user_settings/email_notification_setting.jsx +++ b/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 { ); } let batchingOptions = null; let batchingInfo = null; - if (window.mm_config.EnableEmailBatching === 'true') { + if (global.window.mm_config.EnableEmailBatching === 'true') { batchingOptions = (
@@ -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)} /> this.handleChange('true', Preferences.INTERVAL_HOUR)} /> this.handleChange('true', Preferences.INTERVAL_IMMEDIATE)} /> this.handleChange('false', Preferences.INTERVAL_NEVER)} />
]} - 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; - } } diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx index 6cfceb444a..5d64575272 100644 --- a/webapp/components/user_settings/user_settings_notifications.jsx +++ b/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 (
@@ -874,9 +875,10 @@ export default class NotificationsTab extends React.Component {
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index aa98a9872d..9bfd22e072 100644 --- a/webapp/utils/utils.jsx +++ b/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; +}