// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); var Utils = require('../utils/utils.jsx'); var Client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); export default class ChannelNotifications extends React.Component { constructor(props) { super(props); this.onListenerChange = this.onListenerChange.bind(this); this.updateSection = this.updateSection.bind(this); this.handleSubmitNotifyLevel = this.handleSubmitNotifyLevel.bind(this); this.handleUpdateNotifyLevel = this.handleUpdateNotifyLevel.bind(this); this.createNotifyLevelSection = this.createNotifyLevelSection.bind(this); this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this); this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this); this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this); this.state = { notifyLevel: '', markUnreadLevel: '', title: '', channelId: '', activeSection: '' }; } componentDidMount() { ChannelStore.addChangeListener(this.onListenerChange); $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function showModal(e) { var button = e.relatedTarget; var channelId = button.getAttribute('data-channelid'); const member = ChannelStore.getMember(channelId); var notifyLevel = member.notify_props.desktop; var markUnreadLevel = member.notify_props.mark_unread; this.setState({ notifyLevel, markUnreadLevel, title: button.getAttribute('data-title'), channelId: channelId }); }.bind(this)); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); } onListenerChange() { if (!this.state.channelId) { return; } const member = ChannelStore.getMember(this.state.channelId); var notifyLevel = member.notify_props.desktop; var markUnreadLevel = member.notify_props.mark_unread; var newState = this.state; newState.notifyLevel = notifyLevel; newState.markUnreadLevel = markUnreadLevel; if (!Utils.areStatesEqual(this.state, newState)) { this.setState(newState); } } updateSection(section) { this.setState({activeSection: section}); } handleSubmitNotifyLevel() { var channelId = this.state.channelId; var notifyLevel = this.state.notifyLevel; if (ChannelStore.getMember(channelId).notify_props.desktop === notifyLevel) { this.updateSection(''); return; } var data = {}; data.channel_id = channelId; data.user_id = UserStore.getCurrentId(); data.desktop = notifyLevel; Client.updateNotifyProps(data, () => { var member = ChannelStore.getMember(channelId); member.notify_props.desktop = notifyLevel; ChannelStore.setChannelMember(member); this.updateSection(''); }, (err) => { this.setState({serverError: err.message}); } ); } handleUpdateNotifyLevel(notifyLevel) { this.setState({notifyLevel}); React.findDOMNode(this.refs.modal).focus(); } createNotifyLevelSection(serverError) { var handleUpdateSection; const user = UserStore.getCurrentUser(); const globalNotifyLevel = user.notify_props.desktop; let globalNotifyLevelName; if (globalNotifyLevel === 'all') { globalNotifyLevelName = 'For all activity'; } else if (globalNotifyLevel === 'mention') { globalNotifyLevelName = 'Only for mentions'; } else { globalNotifyLevelName = 'Never'; } if (this.state.activeSection === 'desktop') { var notifyActive = [false, false, false, false]; if (this.state.notifyLevel === 'default') { notifyActive[0] = true; } else if (this.state.notifyLevel === 'all') { notifyActive[1] = true; } else if (this.state.notifyLevel === 'mention') { notifyActive[2] = true; } else { notifyActive[3] = true; } var inputs = []; inputs.push(



); handleUpdateSection = function updateSection(e) { this.updateSection(''); this.onListenerChange(); e.preventDefault(); }.bind(this); const extraInfo = ( {'Selecting an option other than "Default" will override the global notification settings.'}
{'Desktop notifications are available on Firefox, Safari, and Chrome.'}
); return ( ); } var describe; if (this.state.notifyLevel === 'default') { describe = `Global default (${globalNotifyLevelName})`; } else if (this.state.notifyLevel === 'mention') { describe = 'Only for mentions'; } else if (this.state.notifyLevel === 'all') { describe = 'For all activity'; } else { describe = 'Never'; } handleUpdateSection = function updateSection(e) { this.updateSection('desktop'); e.preventDefault(); }.bind(this); return ( ); } handleSubmitMarkUnreadLevel() { const channelId = this.state.channelId; const markUnreadLevel = this.state.markUnreadLevel; if (ChannelStore.getMember(channelId).notify_props.mark_unread === markUnreadLevel) { this.updateSection(''); return; } const data = { channel_id: channelId, user_id: UserStore.getCurrentId(), mark_unread: markUnreadLevel }; Client.updateNotifyProps(data, () => { var member = ChannelStore.getMember(channelId); member.notify_props.mark_unread = markUnreadLevel; ChannelStore.setChannelMember(member); this.updateSection(''); }, (err) => { this.setState({serverError: err.message}); } ); } handleUpdateMarkUnreadLevel(markUnreadLevel) { this.setState({markUnreadLevel}); React.findDOMNode(this.refs.modal).focus(); } createMarkUnreadLevelSection(serverError) { let content; if (this.state.activeSection === 'markUnreadLevel') { const inputs = [(


)]; const handleUpdateSection = function handleUpdateSection(e) { this.updateSection(''); this.onListenerChange(); e.preventDefault(); }.bind(this); const extraInfo = {'The channel name is bolded in the sidebar when there are unread messages. Selecting "Only for mentions" will bold the channel only when you are mentioned.'}; content = ( ); } else { let describe; if (!this.state.markUnreadLevel || this.state.markUnreadLevel === 'all') { describe = 'For all unread messages'; } else { describe = 'Only for mentions'; } const handleUpdateSection = function handleUpdateSection(e) { this.updateSection('markUnreadLevel'); e.preventDefault(); }.bind(this); content = ( ); } return content; } render() { var serverError = null; if (this.state.serverError) { serverError =
; } return (