var UserStore = require('../stores/user_store.jsx'); var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var utils = require('../utils/utils.jsx'); var assign = require('object-assign'); function getNotificationsStateFromStores() { var user = UserStore.getCurrentUser(); var soundNeeded = !utils.isBrowserFirefox(); var sound = 'true'; if (user.notify_props && user.notify_props.desktop_sound) { sound = user.notify_props.desktop_sound; } var desktop = 'all'; if (user.notify_props && user.notify_props.desktop) { desktop = user.notify_props.desktop; } var email = 'true'; if (user.notify_props && user.notify_props.email) { email = user.notify_props.email; } var usernameKey = false; var mentionKey = false; var customKeys = ''; var firstNameKey = false; var allKey = false; var channelKey = false; if (user.notify_props) { if (user.notify_props.mention_keys) { var keys = user.notify_props.mention_keys.split(','); if (keys.indexOf(user.username) !== -1) { usernameKey = true; keys.splice(keys.indexOf(user.username), 1); } else { usernameKey = false; } if (keys.indexOf('@' + user.username) !== -1) { mentionKey = true; keys.splice(keys.indexOf('@' + user.username), 1); } else { mentionKey = false; } customKeys = keys.join(','); } if (user.notify_props.first_name) { firstNameKey = user.notify_props.first_name === 'true'; } if (user.notify_props.all) { allKey = user.notify_props.all === 'true'; } if (user.notify_props.channel) { channelKey = user.notify_props.channel === 'true'; } } return {notifyLevel: desktop, enableEmail: email, soundNeeded: soundNeeded, enableSound: sound, usernameKey: usernameKey, mentionKey: mentionKey, customKeys: customKeys, customKeysChecked: customKeys.length > 0, firstNameKey: firstNameKey, allKey: allKey, channelKey: channelKey}; } module.exports = React.createClass({ displayName: 'NotificationsTab', propTypes: { user: React.PropTypes.object, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, activeSection: React.PropTypes.string, activeTab: React.PropTypes.string }, handleSubmit: function() { var data = {}; data.user_id = this.props.user.id; data.email = this.state.enableEmail; data.desktop_sound = this.state.enableSound; data.desktop = this.state.notifyLevel; var mentionKeys = []; if (this.state.usernameKey) { mentionKeys.push(this.props.user.username); } if (this.state.mentionKey) { mentionKeys.push('@' + this.props.user.username); } var stringKeys = mentionKeys.join(','); if (this.state.customKeys.length > 0 && this.state.customKeysChecked) { stringKeys += ',' + this.state.customKeys; } data.mention_keys = stringKeys; data.first_name = this.state.firstNameKey.toString(); data.all = this.state.allKey.toString(); data.channel = this.state.channelKey.toString(); client.updateUserNotifyProps(data, function success() { this.props.updateSection(''); AsyncClient.getMe(); }.bind(this), function failure(err) { this.setState({serverError: err.message}); }.bind(this) ); }, handleClose: function() { $(this.getDOMNode()).find('.form-control').each(function clearField() { this.value = ''; }); this.setState(assign({}, getNotificationsStateFromStores(), {serverError: null})); this.props.updateTab('general'); }, updateSection: function(section) { this.setState(this.getInitialState()); this.props.updateSection(section); }, componentDidMount: function() { UserStore.addChangeListener(this.onListenerChange); $('#user_settings').on('hidden.bs.modal', this.handleClose); }, componentWillUnmount: function() { UserStore.removeChangeListener(this.onListenerChange); $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); }, onListenerChange: function() { var newState = getNotificationsStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } }, getInitialState: function() { return getNotificationsStateFromStores(); }, handleNotifyRadio: function(notifyLevel) { this.setState({notifyLevel: notifyLevel}); this.refs.wrapper.getDOMNode().focus(); }, handleEmailRadio: function(enableEmail) { this.setState({enableEmail: enableEmail}); this.refs.wrapper.getDOMNode().focus(); }, handleSoundRadio: function(enableSound) { this.setState({enableSound: enableSound}); this.refs.wrapper.getDOMNode().focus(); }, updateUsernameKey: function(val) { this.setState({usernameKey: val}); }, updateMentionKey: function(val) { this.setState({mentionKey: val}); }, updateFirstNameKey: function(val) { this.setState({firstNameKey: val}); }, updateAllKey: function(val) { this.setState({allKey: val}); }, updateChannelKey: function(val) { this.setState({channelKey: val}); }, updateCustomMentionKeys: function() { var checked = this.refs.customcheck.getDOMNode().checked; if (checked) { var text = this.refs.custommentions.getDOMNode().value; // remove all spaces and split string into individual keys this.setState({customKeys: text.replace(/ /g, ''), customKeysChecked: true}); } else { this.setState({customKeys: '', customKeysChecked: false}); } }, onCustomChange: function() { this.refs.customcheck.getDOMNode().checked = true; this.updateCustomMentionKeys(); }, render: function() { var serverError = null; if (this.state.serverError) { serverError = this.state.serverError; } var self = this; var user = this.props.user; var desktopSection; if (this.props.activeSection === 'desktop') { var notifyActive = [false, false, false]; if (this.state.notifyLevel === 'mention') { notifyActive[1] = true; } else if (this.state.notifyLevel === 'none') { notifyActive[2] = true; } else { notifyActive[0] = true; } var inputs = []; inputs.push(