// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. var ChannelStore = require('../stores/channel_store.jsx'); 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'; } } var curChannel = ChannelStore.getCurrent().display_name; 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, curChannel: curChannel}; } export default class NotificationsTab extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.handleClose = this.handleClose.bind(this); this.updateSection = this.updateSection.bind(this); this.onListenerChange = this.onListenerChange.bind(this); this.handleNotifyRadio = this.handleNotifyRadio.bind(this); this.handleEmailRadio = this.handleEmailRadio.bind(this); this.handleSoundRadio = this.handleSoundRadio.bind(this); this.updateUsernameKey = this.updateUsernameKey.bind(this); this.updateMentionKey = this.updateMentionKey.bind(this); this.updateFirstNameKey = this.updateFirstNameKey.bind(this); this.updateAllKey = this.updateAllKey.bind(this); this.updateChannelKey = this.updateChannelKey.bind(this); this.updateCustomMentionKeys = this.updateCustomMentionKeys.bind(this); this.onCustomChange = this.onCustomChange.bind(this); this.state = getNotificationsStateFromStores(); } handleSubmit() { 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() { $(React.findDOMNode(this)).find('.form-control').each(function clearField() { this.value = ''; }); this.setState(assign({}, getNotificationsStateFromStores(), {serverError: null})); this.props.updateTab('general'); } updateSection(section) { this.setState(this.getInitialState()); this.props.updateSection(section); } componentDidMount() { UserStore.addChangeListener(this.onListenerChange); ChannelStore.addChangeListener(this.onListenerChange); $('#user_settings').on('hidden.bs.modal', this.handleClose); } componentWillUnmount() { UserStore.removeChangeListener(this.onListenerChange); ChannelStore.removeChangeListener(this.onListenerChange); $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); } onListenerChange() { var newState = getNotificationsStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } } handleNotifyRadio(notifyLevel) { this.setState({notifyLevel: notifyLevel}); this.refs.wrapper.getDOMNode().focus(); } handleEmailRadio(enableEmail) { this.setState({enableEmail: enableEmail}); this.refs.wrapper.getDOMNode().focus(); } handleSoundRadio(enableSound) { this.setState({enableSound: enableSound}); this.refs.wrapper.getDOMNode().focus(); } updateUsernameKey(val) { this.setState({usernameKey: val}); } updateMentionKey(val) { this.setState({mentionKey: val}); } updateFirstNameKey(val) { this.setState({firstNameKey: val}); } updateAllKey(val) { this.setState({allKey: val}); } updateChannelKey(val) { this.setState({channelKey: val}); } updateCustomMentionKeys() { 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() { this.refs.customcheck.getDOMNode().checked = true; this.updateCustomMentionKeys(); } render() { var serverError = null; if (this.state.serverError) { serverError = this.state.serverError; } var self = this; var user = this.props.user; var desktopSection; var handleUpdateDesktopSection; 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; } let inputs = []; inputs.push(


); handleUpdateDesktopSection = function updateDesktopSection(e) { self.props.updateSection(''); e.preventDefault(); }; let extraInfo = (
These settings will override the global notification settings for the {this.state.curChannel} channel
) desktopSection = ( ); } else { let describe = ''; if (this.state.notifyLevel === 'mention') { describe = 'Only for mentions and private messages'; } else if (this.state.notifyLevel === 'none') { describe = 'Never'; } else { describe = 'For all activity'; } handleUpdateDesktopSection = function updateDesktopSection() { self.props.updateSection('desktop'); }; desktopSection = ( ); } var soundSection; var handleUpdateSoundSection; if (this.props.activeSection === 'sound' && this.state.soundNeeded) { var soundActive = [false, false]; if (this.state.enableSound === 'false') { soundActive[1] = true; } else { soundActive[0] = true; } let inputs = []; inputs.push(


); handleUpdateSoundSection = function updateSoundSection(e) { self.props.updateSection(''); e.preventDefault(); }; soundSection = ( ); } else { let describe = ''; if (!this.state.soundNeeded) { describe = 'Please configure notification sounds in your browser settings'; } else if (this.state.enableSound === 'false') { describe = 'Off'; } else { describe = 'On'; } handleUpdateSoundSection = function updateSoundSection() { self.props.updateSection('sound'); }; soundSection = ( ); } var emailSection; var handleUpdateEmailSection; if (this.props.activeSection === 'email') { var emailActive = [false, false]; if (this.state.enableEmail === 'false') { emailActive[1] = true; } else { emailActive[0] = true; } let inputs = []; inputs.push(



{'Email notifications are sent for mentions and private messages after you have been away from ' + config.SiteName + ' for 5 minutes.'}
); handleUpdateEmailSection = function updateEmailSection(e) { self.props.updateSection(''); e.preventDefault(); }; emailSection = ( ); } else { let describe = ''; if (this.state.enableEmail === 'false') { describe = 'Off'; } else { describe = 'On'; } handleUpdateEmailSection = function updateEmailSection() { self.props.updateSection('email'); }; emailSection = ( ); } var keysSection; var handleUpdateKeysSection; if (this.props.activeSection === 'keys') { let inputs = []; let handleUpdateFirstNameKey; let handleUpdateUsernameKey; let handleUpdateMentionKey; let handleUpdateAllKey; let handleUpdateChannelKey; if (user.first_name) { handleUpdateFirstNameKey = function handleFirstNameKeyChange(e) { self.updateFirstNameKey(e.target.checked); }; inputs.push(
); } handleUpdateUsernameKey = function handleUsernameKeyChange(e) { self.updateUsernameKey(e.target.checked); }; inputs.push(
); handleUpdateMentionKey = function handleMentionKeyChange(e) { self.updateMentionKey(e.target.checked); }; inputs.push(
); handleUpdateAllKey = function handleAllKeyChange(e) { self.updateAllKey(e.target.checked); }; inputs.push(
); handleUpdateChannelKey = function handleChannelKeyChange(e) { self.updateChannelKey(e.target.checked); }; inputs.push(
); inputs.push(
); handleUpdateKeysSection = function updateKeysSection(e) { self.props.updateSection(''); e.preventDefault(); }; keysSection = ( ); } else { let keys = []; if (this.state.firstNameKey) { keys.push(user.first_name); } if (this.state.usernameKey) { keys.push(user.username); } if (this.state.mentionKey) { keys.push('@' + user.username); } if (this.state.allKey) { keys.push('@all'); } if (this.state.channelKey) { keys.push('@channel'); } if (this.state.customKeys.length > 0) { keys = keys.concat(this.state.customKeys.split(',')); } let describe = ''; for (var i = 0; i < keys.length; i++) { describe += '"' + keys[i] + '", '; } if (describe.length > 0) { describe = describe.substring(0, describe.length - 2); } else { describe = 'No words configured'; } handleUpdateKeysSection = function updateKeysSection() { self.props.updateSection('keys'); }; keysSection = ( ); } return (

Notifications

Notifications

{desktopSection}
{soundSection}
{emailSection}
{keysSection}
); } } NotificationsTab.defaultProps = { user: null, activeSection: '', activeTab: '' }; NotificationsTab.propTypes = { user: React.PropTypes.object, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, activeSection: React.PropTypes.string, activeTab: React.PropTypes.string };