Merge pull request #881 from hmhealey/plt194

PLT-194 Changes to ChannelMember notification settings

1 files changed, 168 insertions, 121 deletions

diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index 9eda68b38..45981b295 100644
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications.jsx
@@ -15,14 +15,24 @@ export default class ChannelNotifications extends React.Component {
 
         this.onListenerChange = this.onListenerChange.bind(this);
         this.updateSection = this.updateSection.bind(this);
-        this.handleUpdate = this.handleUpdate.bind(this);
-        this.handleRadioClick = this.handleRadioClick.bind(this);
-        this.handleQuietToggle = this.handleQuietToggle.bind(this);
-        this.createDesktopSection = this.createDesktopSection.bind(this);
-        this.createQuietSection = this.createQuietSection.bind(this);
 
-        this.state = {notifyLevel: '', title: '', channelId: '', activeSection: ''};
+        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);
 
@@ -30,33 +40,34 @@ export default class ChannelNotifications extends React.Component {
             var button = e.relatedTarget;
             var channelId = button.getAttribute('data-channelid');
 
-            var notifyLevel = ChannelStore.getMember(channelId).notify_level;
-            var quietMode = false;
-
-            if (notifyLevel === 'quiet') {
-                quietMode = true;
-            }
+            const member = ChannelStore.getMember(channelId);
+            var notifyLevel = member.notify_props.desktop;
+            var markUnreadLevel = member.notify_props.mark_unread;
 
-            this.setState({notifyLevel: notifyLevel, quietMode: quietMode, title: button.getAttribute('data-title'), channelId: channelId});
+            this.setState({
+                notifyLevel,
+                markUnreadLevel,
+                title: button.getAttribute('data-title'),
+                channelId: channelId
+            });
         }.bind(this));
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onListenerChange);
     }
+
     onListenerChange() {
         if (!this.state.channelId) {
             return;
         }
 
-        var notifyLevel = ChannelStore.getMember(this.state.channelId).notify_level;
-        var quietMode = false;
-        if (notifyLevel === 'quiet') {
-            quietMode = true;
-        }
+        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.quietMode = quietMode;
+        newState.markUnreadLevel = markUnreadLevel;
 
         if (!Utils.areStatesEqual(this.state, newState)) {
             this.setState(newState);
@@ -65,53 +76,64 @@ export default class ChannelNotifications extends React.Component {
     updateSection(section) {
         this.setState({activeSection: section});
     }
-    handleUpdate() {
+
+    handleSubmitNotifyLevel() {
         var channelId = this.state.channelId;
         var notifyLevel = this.state.notifyLevel;
-        if (this.state.quietMode) {
-            notifyLevel = 'quiet';
+
+        if (ChannelStore.getMember(channelId).notify_props.desktop === notifyLevel) {
+            this.updateSection('');
+            return;
         }
 
         var data = {};
         data.channel_id = channelId;
         data.user_id = UserStore.getCurrentId();
-        data.notify_level = notifyLevel;
-
-        if (!data.notify_level || data.notify_level.length === 0) {
-            return;
-        }
+        data.desktop = notifyLevel;
 
-        Client.updateNotifyLevel(data,
-            function success() {
+        Client.updateNotifyProps(data,
+            () => {
                 var member = ChannelStore.getMember(channelId);
-                member.notify_level = notifyLevel;
+                member.notify_props.desktop = notifyLevel;
                 ChannelStore.setChannelMember(member);
                 this.updateSection('');
-            }.bind(this),
-            function error(err) {
+            },
+            (err) => {
                 this.setState({serverError: err.message});
-            }.bind(this)
+            }
         );
     }
-    handleRadioClick(notifyLevel) {
-        this.setState({notifyLevel: notifyLevel, quietMode: false});
-        React.findDOMNode(this.refs.modal).focus();
-    }
-    handleQuietToggle(quietMode) {
-        this.setState({notifyLevel: 'none', quietMode: quietMode});
+
+    handleUpdateNotifyLevel(notifyLevel) {
+        this.setState({notifyLevel});
         React.findDOMNode(this.refs.modal).focus();
     }
-    createDesktopSection(serverError) {
+
+    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];
-            if (this.state.notifyLevel === 'mention') {
-                notifyActive[1] = true;
-            } else if (this.state.notifyLevel === 'all') {
+            var notifyActive = [false, false, false, false];
+            if (this.state.notifyLevel === 'default') {
                 notifyActive[0] = true;
-            } else {
+            } else if (this.state.notifyLevel === 'all') {
+                notifyActive[1] = true;
+            } else if (this.state.notifyLevel === 'mention') {
                 notifyActive[2] = true;
+            } else {
+                notifyActive[3] = true;
             }
 
             var inputs = [];
@@ -123,9 +145,9 @@ export default class ChannelNotifications extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[0]}
-                                onChange={this.handleRadioClick.bind(this, 'all')}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'default')}
                             >
-                                For all activity
+                                {`Global default (${globalNotifyLevelName})`}
                             </input>
                         </label>
                         <br/>
@@ -135,9 +157,9 @@ export default class ChannelNotifications extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[1]}
-                                onChange={this.handleRadioClick.bind(this, 'mention')}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'all')}
                             >
-                                Only for mentions
+                                {'For all activity'}
                             </input>
                         </label>
                         <br/>
@@ -147,9 +169,21 @@ export default class ChannelNotifications extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[2]}
-                                onChange={this.handleRadioClick.bind(this, 'none')}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'mention')}
+                            >
+                                {'Only for mentions'}
+                            </input>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[3]}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'none')}
                             >
-                                Never
+                                {'Never'}
                             </input>
                         </label>
                     </div>
@@ -162,30 +196,19 @@ export default class ChannelNotifications extends React.Component {
                 e.preventDefault();
             }.bind(this);
 
-            let curChannel = ChannelStore.get(this.state.channelId);
-            let extraInfo = (
+            const extraInfo = (
                 <span>
-                    These settings will override the global notification settings.
+                    {'Selecting an option other than "Default" will override the global notification settings.'}
                     <br/>
-                    Desktop notifications are available on Firefox, Safari, and Chrome.
+                    {'Desktop notifications are available on Firefox, Safari, and Chrome.'}
                 </span>
             );
 
-            if (curChannel && curChannel.display_name) {
-                extraInfo = (
-                    <span>
-                        These settings will override the global notification settings for the <b>{curChannel.display_name}</b> channel.
-                        <br/>
-                        Desktop notifications are available on Firefox, Safari, and Chrome.
-                    </span>
-                );
-            }
-
             return (
                 <SettingItemMax
                     title='Send desktop notifications'
                     inputs={inputs}
-                    submit={this.handleUpdate}
+                    submit={this.handleSubmitNotifyLevel}
                     server_error={serverError}
                     updateSection={handleUpdateSection}
                     extraInfo={extraInfo}
@@ -194,7 +217,9 @@ export default class ChannelNotifications extends React.Component {
         }
 
         var describe;
-        if (this.state.notifyLevel === 'mention') {
+        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';
@@ -215,101 +240,123 @@ export default class ChannelNotifications extends React.Component {
             />
         );
     }
-    createQuietSection(serverError) {
-        var handleUpdateSection;
-        if (this.state.activeSection === 'quiet') {
-            var quietActive = [false, false];
-            if (this.state.quietMode) {
-                quietActive[0] = true;
-            } else {
-                quietActive[1] = true;
+
+    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});
             }
+        );
+    }
 
-            var inputs = [];
+    handleUpdateMarkUnreadLevel(markUnreadLevel) {
+        this.setState({markUnreadLevel});
+        React.findDOMNode(this.refs.modal).focus();
+    }
 
-            inputs.push(
+    createMarkUnreadLevelSection(serverError) {
+        let content;
+
+        if (this.state.activeSection === 'markUnreadLevel') {
+            const inputs = [(
                 <div>
                     <div className='radio'>
                         <label>
                             <input
                                 type='radio'
-                                checked={quietActive[0]}
-                                onChange={this.handleQuietToggle.bind(this, true)}
+                                checked={this.state.markUnreadLevel === 'all'}
+                                onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'all')}
                             >
-                                On
+                                {'For all unread messages'}
                             </input>
                         </label>
-                        <br/>
+                        <br />
                     </div>
                     <div className='radio'>
                         <label>
                             <input
                                 type='radio'
-                                checked={quietActive[1]}
-                                onChange={this.handleQuietToggle.bind(this, false)}
+                                checked={this.state.markUnreadLevel === 'mention'}
+                                onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'mention')}
                             >
-                                Off
+                                {'Only for mentions'}
                             </input>
                         </label>
-                        <br/>
+                        <br />
                     </div>
                 </div>
-            );
-
-            inputs.push(
-                <div>
-                    <br/>
-                    Enabling quiet mode will turn off desktop notifications and only mark the channel as unread if you have been mentioned.
-                </div>
-            );
+            )];
 
-            handleUpdateSection = function updateSection(e) {
+            const handleUpdateSection = function handleUpdateSection(e) {
                 this.updateSection('');
                 this.onListenerChange();
                 e.preventDefault();
             }.bind(this);
 
-            return (
+            const extraInfo = <span>{'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.'}</span>;
+
+            content = (
                 <SettingItemMax
-                    title='Quiet mode'
+                    title='Mark Channel Unread'
                     inputs={inputs}
-                    submit={this.handleUpdate}
+                    submit={this.handleSubmitMarkUnreadLevel}
                     server_error={serverError}
                     updateSection={handleUpdateSection}
+                    extraInfo={extraInfo}
                 />
             );
-        }
-
-        var describe;
-        if (this.state.quietMode) {
-            describe = 'On';
         } else {
-            describe = 'Off';
-        }
+            let describe;
 
-        handleUpdateSection = function updateSection(e) {
-            this.updateSection('quiet');
-            e.preventDefault();
-        }.bind(this);
+            if (!this.state.markUnreadLevel || this.state.markUnreadLevel === 'all') {
+                describe = 'For all unread messages';
+            } else {
+                describe = 'Only for mentions';
+            }
 
-        return (
-            <SettingItemMin
-                title='Quiet mode'
-                describe={describe}
-                updateSection={handleUpdateSection}
-            />
-        );
+            const handleUpdateSection = function handleUpdateSection(e) {
+                this.updateSection('markUnreadLevel');
+                e.preventDefault();
+            }.bind(this);
+
+            content = (
+                <SettingItemMin
+                    title='Mark Channel Unread'
+                    describe={describe}
+                    updateSection={handleUpdateSection}
+                />
+            );
+        }
+
+        return content;
     }
+
     render() {
         var serverError = null;
         if (this.state.serverError) {
             serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
         }
 
-        var desktopSection = this.createDesktopSection(serverError);
-
-        var quietSection = this.createQuietSection(serverError);
-
         return (
             <div
                 className='modal fade'
@@ -341,9 +388,9 @@ export default class ChannelNotifications extends React.Component {
                                 >
                                     <br/>
                                     <div className='divider-dark first'/>
-                                    {desktopSection}
+                                    {this.createNotifyLevelSection(serverError)}
                                     <div className='divider-light'/>
-                                    {quietSection}
+                                    {this.createMarkUnreadLevelSection(serverError)}
                                     <div className='divider-dark'/>
                                 </div>
                             </div>