// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import SettingItemMin from 'components/setting_item_min.jsx'; import SettingItemMax from 'components/setting_item_max.jsx'; import $ from 'jquery'; import PropTypes from 'prop-types'; import React from 'react'; import {Modal} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import {updateChannelNotifyProps} from 'actions/channel_actions.jsx'; export default class ChannelNotificationsModal extends React.Component { constructor(props) { super(props); this.updateSection = this.updateSection.bind(this); this.onHide = this.onHide.bind(this); this.handleSubmitDesktopNotifyLevel = this.handleSubmitDesktopNotifyLevel.bind(this); this.handleUpdateDesktopNotifyLevel = this.handleUpdateDesktopNotifyLevel.bind(this); this.createDesktopNotifyLevelSection = this.createDesktopNotifyLevelSection.bind(this); this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this); this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this); this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this); this.handleSubmitPushNotificationLevel = this.handleSubmitPushNotificationLevel.bind(this); this.handleUpdatePushNotificationLevel = this.handleUpdatePushNotificationLevel.bind(this); this.createPushNotificationLevelSection = this.createPushNotificationLevelSection.bind(this); this.state = { activeSection: '', show: true, notifyLevel: props.channelMember.notify_props.desktop, unreadLevel: props.channelMember.notify_props.mark_unread, pushLevel: props.channelMember.notify_props.push || 'default' }; } updateSection(section) { if ($('.section-max').length) { $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); } this.setState({activeSection: section}); } onHide() { this.setState({show: false}); } handleSubmitDesktopNotifyLevel() { const channelId = this.props.channel.id; const notifyLevel = this.state.notifyLevel; const currentUserId = this.props.currentUser.id; if (this.props.channelMember.notify_props.desktop === notifyLevel) { this.updateSection(''); return; } const options = {desktop: notifyLevel}; const data = { channel_id: channelId, user_id: currentUserId }; updateChannelNotifyProps(data, options, () => { this.updateSection(''); }, (err) => { this.setState({serverError: err.message}); } ); } handleUpdateDesktopNotifyLevel(notifyLevel) { this.setState({notifyLevel}); } createDesktopNotifyLevelSection(serverError) { // Get glabal user setting for notifications const globalNotifyLevel = this.props.currentUser.notify_props ? this.props.currentUser.notify_props.desktop : 'all'; let globalNotifyLevelName; if (globalNotifyLevel === 'all') { globalNotifyLevelName = ( ); } else if (globalNotifyLevel === 'mention') { globalNotifyLevelName = ( ); } else { globalNotifyLevelName = ( ); } const sendDesktop = ( ); const notificationLevel = this.state.notifyLevel; if (this.state.activeSection === 'desktop') { const notifyActive = [false, false, false, false]; if (notificationLevel === 'default') { notifyActive[0] = true; } else if (notificationLevel === 'all') { notifyActive[1] = true; } else if (notificationLevel === 'mention') { notifyActive[2] = true; } else { notifyActive[3] = true; } var inputs = []; inputs.push(



); const handleUpdateSection = function updateSection(e) { this.updateSection(''); this.setState({ notifyLevel: this.props.channelMember.notify_props.desktop }); e.preventDefault(); }.bind(this); const extraInfo = ( ); return ( ); } var describe; if (notificationLevel === 'default') { describe = ( ); } else if (notificationLevel === 'mention') { describe = (); } else if (notificationLevel === 'all') { describe = (); } else { describe = (); } return ( { this.updateSection('desktop'); }} /> ); } handleSubmitMarkUnreadLevel() { const channelId = this.props.channel.id; const markUnreadLevel = this.state.unreadLevel; if (this.props.channelMember.notify_props.mark_unread === markUnreadLevel) { this.updateSection(''); return; } const options = {mark_unread: markUnreadLevel}; const data = { channel_id: channelId, user_id: this.props.currentUser.id }; updateChannelNotifyProps(data, options, () => { this.updateSection(''); }, (err) => { this.setState({serverError: err.message}); } ); } handleUpdateMarkUnreadLevel(unreadLevel) { this.setState({unreadLevel}); } createMarkUnreadLevelSection(serverError) { let content; const markUnread = ( ); if (this.state.activeSection === 'markUnreadLevel') { const inputs = [(


)]; const handleUpdateSection = function handleUpdateSection(e) { this.updateSection(''); this.setState({ unreadLevel: this.props.channelMember.notify_props.mark_unread }); e.preventDefault(); }.bind(this); const extraInfo = ( ); content = ( ); } else { let describe; if (!this.state.unreadLevel || this.state.unreadLevel === 'all') { describe = ( ); } else { describe = (); } const handleUpdateSection = function handleUpdateSection(e) { this.updateSection('markUnreadLevel'); this.setState({ unreadLevel: this.props.channelMember.notify_props.mark_unread }); e.preventDefault(); }.bind(this); content = ( ); } return content; } handleSubmitPushNotificationLevel() { const channelId = this.props.channel.id; const notifyLevel = this.state.pushLevel; const currentUserId = this.props.currentUser.id; if (this.props.channelMember.notify_props.push === notifyLevel) { this.updateSection(''); return; } const options = {push: notifyLevel}; const data = { channel_id: channelId, user_id: currentUserId }; updateChannelNotifyProps(data, options, () => { this.updateSection(''); }, (err) => { this.setState({serverError: err.message}); } ); } handleUpdatePushNotificationLevel(pushLevel) { this.setState({pushLevel}); } createPushNotificationLevelSection(serverError) { if (global.mm_config.SendPushNotifications === 'false') { return null; } // Get glabal user setting for notifications const globalNotifyLevel = this.props.currentUser.notify_props ? this.props.currentUser.notify_props.push : 'all'; let globalNotifyLevelName; if (globalNotifyLevel === 'all') { globalNotifyLevelName = ( ); } else if (globalNotifyLevel === 'mention') { globalNotifyLevelName = ( ); } else { globalNotifyLevelName = ( ); } const sendPushNotifications = ( ); const notificationLevel = this.state.pushLevel; let content; if (this.state.activeSection === 'push') { const notifyActive = [false, false, false, false]; if (notificationLevel === 'default') { notifyActive[0] = true; } else if (notificationLevel === 'all') { notifyActive[1] = true; } else if (notificationLevel === 'mention') { notifyActive[2] = true; } else { notifyActive[3] = true; } const inputs = []; inputs.push(



); const handleUpdateSection = function updateSection(e) { this.updateSection(''); this.setState({ pushLevel: this.props.channelMember.notify_props.push || 'default' }); e.preventDefault(); }.bind(this); const extraInfo = ( ); content = ( ); } else { let describe; if (notificationLevel === 'default') { describe = ( ); } else if (notificationLevel === 'mention') { describe = (); } else if (notificationLevel === 'all') { describe = (); } else { describe = (); } content = ( { this.updateSection('push'); }} /> ); } return (
{content}
); } render() { let serverError = null; if (this.state.serverError) { serverError =
; } return ( {this.props.channel.display_name}

{this.createDesktopNotifyLevelSection(serverError)} {this.createPushNotificationLevelSection(serverError)}
{this.createMarkUnreadLevelSection(serverError)}
{serverError} ); } } ChannelNotificationsModal.propTypes = { onHide: PropTypes.func.isRequired, channel: PropTypes.object.isRequired, channelMember: PropTypes.object.isRequired, currentUser: PropTypes.object.isRequired };