From 065d01c121907bc5529d7019e53b93819daf85f3 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Tue, 23 Aug 2016 08:47:25 -0400 Subject: Add notification settings to control what statuses allow push notifications (#3829) --- webapp/components/setting_item_min.jsx | 2 +- .../user_settings/user_settings_notifications.jsx | 250 +++++++++++++++------ 2 files changed, 185 insertions(+), 67 deletions(-) (limited to 'webapp/components') diff --git a/webapp/components/setting_item_min.jsx b/webapp/components/setting_item_min.jsx index a46a9e455..1c5fd40f3 100644 --- a/webapp/components/setting_item_min.jsx +++ b/webapp/components/setting_item_min.jsx @@ -33,7 +33,7 @@ export default class SettingItemMin extends React.Component { >
  • {this.props.title}
    • {editButton} -
  • {this.props.describe}
    • +
  • {this.props.describe}
    • ); } diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx index e393bea03..b3953ec17 100644 --- a/webapp/components/user_settings/user_settings_notifications.jsx +++ b/webapp/components/user_settings/user_settings_notifications.jsx @@ -11,40 +11,48 @@ import Client from 'client/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as UserAgent from 'utils/user_agent.jsx'; import * as Utils from 'utils/utils.jsx'; +import Constants from 'utils/constants.jsx'; import EmailNotificationSetting from './email_notification_setting.jsx'; import {FormattedMessage} from 'react-intl'; function getNotificationsStateFromStores() { - var user = UserStore.getCurrentUser(); - var soundNeeded = !UserAgent.isFirefox(); + const user = UserStore.getCurrentUser(); + const soundNeeded = !UserAgent.isFirefox(); - var sound = 'true'; - if (user.notify_props && user.notify_props.desktop_sound) { - sound = user.notify_props.desktop_sound; - } - var desktop = 'default'; - if (user.notify_props && user.notify_props.desktop) { - desktop = user.notify_props.desktop; - } - var comments = 'never'; - if (user.notify_props && user.notify_props.comments) { - comments = user.notify_props.comments; - } - var enableEmail = 'true'; - if (user.notify_props && user.notify_props.email) { - enableEmail = user.notify_props.email; - } - var push = 'mention'; - if (user.notify_props && user.notify_props.push) { - push = user.notify_props.push; + let sound = 'true'; + let desktop = 'default'; + let comments = 'never'; + let enableEmail = 'true'; + let pushActivity = 'mention'; + let pushStatus = Constants.UserStatuses.ONLINE; + + if (user.notify_props) { + if (user.notify_props.desktop_sound) { + sound = user.notify_props.desktop_sound; + } + if (user.notify_props.desktop) { + desktop = user.notify_props.desktop; + } + if (user.notify_props.comments) { + comments = user.notify_props.comments; + } + if (user.notify_props.email) { + enableEmail = user.notify_props.email; + } + if (user.notify_props.push) { + pushActivity = user.notify_props.push; + } + if (user.notify_props.push_status) { + pushStatus = user.notify_props.push_status; + } } - var usernameKey = false; - var mentionKey = false; - var customKeys = ''; - var firstNameKey = false; - var channelKey = false; + let usernameKey = false; + let mentionKey = false; + let customKeys = ''; + let firstNameKey = false; + let channelKey = false; if (user.notify_props) { if (user.notify_props.mention_keys) { @@ -78,8 +86,9 @@ function getNotificationsStateFromStores() { return { notifyLevel: desktop, - notifyPushLevel: push, enableEmail, + pushActivity, + pushStatus, soundNeeded, enableSound: sound, usernameKey, @@ -123,7 +132,8 @@ export default class NotificationsTab extends React.Component { data.email = this.state.enableEmail; data.desktop_sound = this.state.enableSound; data.desktop = this.state.notifyLevel; - data.push = this.state.notifyPushLevel; + data.push = this.state.pushActivity; + data.push_status = this.state.pushStatus; data.comments = this.state.notifyCommentsLevel; var mentionKeys = []; @@ -147,6 +157,7 @@ export default class NotificationsTab extends React.Component { () => { this.props.updateSection(''); AsyncClient.getMe(); + $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); }, (err) => { this.setState({serverError: err.message}); @@ -195,8 +206,13 @@ export default class NotificationsTab extends React.Component { this.refs.wrapper.focus(); } - handlePushRadio(notifyPushLevel) { - this.setState({notifyPushLevel}); + handlePushRadio(pushActivity) { + this.setState({pushActivity}); + this.refs.wrapper.focus(); + } + + handlePushStatusRadio(pushStatus) { + this.setState({pushStatus}); this.refs.wrapper.focus(); } @@ -245,22 +261,93 @@ export default class NotificationsTab extends React.Component { } createPushNotificationSection() { - var handleUpdateDesktopSection; + let handleUpdateDesktopSection; if (this.props.activeSection === 'push') { - var notifyActive = [false, false, false]; - if (this.state.notifyPushLevel === 'all') { - notifyActive[0] = true; - } else if (this.state.notifyPushLevel === 'none') { - notifyActive[2] = true; - } else { - notifyActive[1] = true; - } - let inputs = []; let extraInfo = null; let submit = null; if (global.window.mm_config.SendPushNotifications === 'true') { + const pushActivityRadio = [false, false, false]; + if (this.state.pushActivity === 'all') { + pushActivityRadio[0] = true; + } else if (this.state.pushActivity === 'none') { + pushActivityRadio[2] = true; + } else { + pushActivityRadio[1] = true; + } + + const pushStatusRadio = [false, false, false]; + if (this.state.pushStatus === Constants.UserStatuses.ONLINE) { + pushStatusRadio[0] = true; + } else if (this.state.pushStatus === Constants.UserStatuses.AWAY) { + pushStatusRadio[1] = true; + } else { + pushStatusRadio[2] = true; + } + + let pushStatusSettings; + if (this.state.pushActivity !== 'none') { + pushStatusSettings = ( +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + ); + + extraInfo = ( + + + + ); + } + inputs.push(
    @@ -268,7 +355,7 @@ export default class NotificationsTab extends React.Component {
    +
    + + + + {pushStatusSettings}
    ); - extraInfo = ( - - - - ); - submit = this.handleSubmit; } else { inputs.push( @@ -347,14 +433,30 @@ export default class NotificationsTab extends React.Component { } let describe = ''; - if (this.state.notifyPushLevel === 'all') { - describe = ( - - ); - } else if (this.state.notifyPushLevel === 'none') { + if (this.state.pushActivity === 'all') { + if (this.state.pushStatus === Constants.UserStatuses.AWAY) { + describe = ( + + ); + } else if (this.state.pushStatus === Constants.UserStatuses.OFFLINE) { + describe = ( + + ); + } else { + describe = ( + + ); + } + } else if (this.state.pushActivity === 'none') { describe = ( ); } else { - describe = ( - - ); + if (this.state.pushStatus === Constants.UserStatuses.AWAY) { //eslint-disable-line no-lonely-if + describe = ( + + ); + } else if (this.state.pushStatus === Constants.UserStatuses.OFFLINE) { + describe = ( + + ); + } else { + describe = ( + + ); + } } handleUpdateDesktopSection = function updateDesktopSection() { -- cgit v1.2.3-1-g7c22