Removed UI for quiet mode and added UI to set when a channel will be marked unread in the sidebar

6 files changed, 244 insertions, 115 deletions

diff --git a/api/channel.go b/api/channel.go
index 17322179d..b69fe6ea0 100644
--- a/api/channel.go
+++ b/api/channel.go
@@ -24,6 +24,7 @@ func InitChannel(r *mux.Router) {
 	sr.Handle("/update", ApiUserRequired(updateChannel)).Methods("POST")
 	sr.Handle("/update_desc", ApiUserRequired(updateChannelDesc)).Methods("POST")
 	sr.Handle("/update_notify_level", ApiUserRequired(updateNotifyLevel)).Methods("POST")
+	sr.Handle("/update_mark_unread_level", ApiUserRequired(updateMarkUnreadLevel)).Methods("POST")
 	sr.Handle("/{id:[A-Za-z0-9]+}/", ApiUserRequiredActivity(getChannel, false)).Methods("GET")
 	sr.Handle("/{id:[A-Za-z0-9]+}/extra_info", ApiUserRequired(getChannelExtraInfo)).Methods("GET")
 	sr.Handle("/{id:[A-Za-z0-9]+}/join", ApiUserRequired(joinChannel)).Methods("POST")
@@ -75,8 +76,8 @@ func CreateChannel(c *Context, channel *model.Channel, addMember bool) (*model.C
 		sc := result.Data.(*model.Channel)
 
 		if addMember {
-			cm := &model.ChannelMember{ChannelId: sc.Id, UserId: c.Session.UserId,
-				Roles: model.CHANNEL_ROLE_ADMIN, NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT}
+			cm := &model.ChannelMember{ChannelId: sc.Id, UserId: c.Session.UserId, Roles: model.CHANNEL_ROLE_ADMIN,
+				NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, MarkUnreadLevel: model.CHANNEL_MARK_UNREAD_ALL}
 
 			if cmresult := <-Srv.Store.Channel().SaveMember(cm); cmresult.Err != nil {
 				return nil, cmresult.Err
@@ -134,8 +135,8 @@ func CreateDirectChannel(c *Context, otherUserId string) (*model.Channel, *model
 	if sc, err := CreateChannel(c, channel, true); err != nil {
 		return nil, err
 	} else {
-		cm := &model.ChannelMember{ChannelId: sc.Id, UserId: otherUserId,
-			Roles: "", NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT}
+		cm := &model.ChannelMember{ChannelId: sc.Id, UserId: otherUserId, Roles: "",
+			NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, MarkUnreadLevel: model.CHANNEL_MARK_UNREAD_ALL}
 
 		if cmresult := <-Srv.Store.Channel().SaveMember(cm); cmresult.Err != nil {
 			return nil, cmresult.Err
@@ -372,7 +373,8 @@ func JoinChannel(c *Context, channelId string, role string) {
 		}
 
 		if channel.Type == model.CHANNEL_OPEN {
-			cm := &model.ChannelMember{ChannelId: channel.Id, UserId: c.Session.UserId, NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, Roles: role}
+			cm := &model.ChannelMember{ChannelId: channel.Id, UserId: c.Session.UserId, Roles: role,
+				NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, MarkUnreadLevel: model.CHANNEL_MARK_UNREAD_ALL}
 
 			if cmresult := <-Srv.Store.Channel().SaveMember(cm); cmresult.Err != nil {
 				c.Err = cmresult.Err
@@ -405,7 +407,9 @@ func JoinDefaultChannels(user *model.User, channelRole string) *model.AppError {
 	if result := <-Srv.Store.Channel().GetByName(user.TeamId, "town-square"); result.Err != nil {
 		err = result.Err
 	} else {
-		cm := &model.ChannelMember{ChannelId: result.Data.(*model.Channel).Id, UserId: user.Id, NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, Roles: channelRole}
+		cm := &model.ChannelMember{ChannelId: result.Data.(*model.Channel).Id, UserId: user.Id, Roles: channelRole,
+			NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, MarkUnreadLevel: model.CHANNEL_MARK_UNREAD_ALL}
+
 		if cmResult := <-Srv.Store.Channel().SaveMember(cm); cmResult.Err != nil {
 			err = cmResult.Err
 		}
@@ -414,7 +418,9 @@ func JoinDefaultChannels(user *model.User, channelRole string) *model.AppError {
 	if result := <-Srv.Store.Channel().GetByName(user.TeamId, "off-topic"); result.Err != nil {
 		err = result.Err
 	} else {
-		cm := &model.ChannelMember{ChannelId: result.Data.(*model.Channel).Id, UserId: user.Id, NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, Roles: channelRole}
+		cm := &model.ChannelMember{ChannelId: result.Data.(*model.Channel).Id, UserId: user.Id, Roles: channelRole,
+			NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, MarkUnreadLevel: model.CHANNEL_MARK_UNREAD_ALL}
+
 		if cmResult := <-Srv.Store.Channel().SaveMember(cm); cmResult.Err != nil {
 			err = cmResult.Err
 		}
@@ -694,7 +700,7 @@ func addChannelMember(c *Context, w http.ResponseWriter, r *http.Request) {
 		} else {
 			oUser := oresult.Data.(*model.User)
 
-			cm := &model.ChannelMember{ChannelId: channel.Id, UserId: userId, NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT}
+			cm := &model.ChannelMember{ChannelId: channel.Id, UserId: userId, NotifyLevel: model.CHANNEL_NOTIFY_DEFAULT, MarkUnreadLevel: model.CHANNEL_MARK_UNREAD_ALL}
 
 			if cmresult := <-Srv.Store.Channel().SaveMember(cm); cmresult.Err != nil {
 				l4g.Error("Failed to add member user_id=%v channel_id=%v err=%v", userId, id, cmresult.Err)
@@ -821,3 +827,41 @@ func updateNotifyLevel(c *Context, w http.ResponseWriter, r *http.Request) {
 
 	w.Write([]byte(model.MapToJson(data)))
 }
+
+func updateMarkUnreadLevel(c *Context, w http.ResponseWriter, r *http.Request) {
+	data := model.MapFromJson(r.Body)
+	userId := data["user_id"]
+	if len(userId) != 26 {
+		c.SetInvalidParam("updateMarkUnreadLevel", "user_id")
+		return
+	}
+
+	channelId := data["channel_id"]
+	if len(channelId) != 26 {
+		c.SetInvalidParam("updateMarkUnreadLevel", "channel_id")
+		return
+	}
+
+	markUnreadLevel := data["mark_unread_level"]
+	if len(markUnreadLevel) == 0 || !model.IsChannelMarkUnreadLevelValid(markUnreadLevel) {
+		c.SetInvalidParam("updateMarkUnreadLevel", "mark_unread_level")
+		return
+	}
+
+	cchan := Srv.Store.Channel().CheckPermissionsTo(c.Session.TeamId, channelId, c.Session.UserId)
+
+	if !c.HasPermissionsToUser(userId, "updateMarkUnreadLevel") {
+		return
+	}
+
+	if !c.HasPermissionsToChannel(cchan, "updateMarkUnreadLevel") {
+		return
+	}
+
+	if result := <-Srv.Store.Channel().UpdateMarkUnreadLevel(channelId, userId, markUnreadLevel); result.Err != nil {
+		c.Err = result.Err
+		return
+	}
+
+	w.Write([]byte(model.MapToJson(data)))
+}
diff --git a/model/channel_member.go b/model/channel_member.go
index ac0b94ec4..1aafee43d 100644
--- a/model/channel_member.go
+++ b/model/channel_member.go
@@ -10,23 +10,26 @@ import (
 )
 
 const (
-	CHANNEL_ROLE_ADMIN     = "admin"
-	CHANNEL_NOTIFY_DEFAULT = "default"
-	CHANNEL_NOTIFY_ALL     = "all"
-	CHANNEL_NOTIFY_MENTION = "mention"
-	CHANNEL_NOTIFY_NONE    = "none"
-	CHANNEL_NOTIFY_QUIET   = "quiet" // TODO deprecate me
+	CHANNEL_ROLE_ADMIN          = "admin"
+	CHANNEL_NOTIFY_DEFAULT      = "default"
+	CHANNEL_NOTIFY_ALL          = "all"
+	CHANNEL_NOTIFY_MENTION      = "mention"
+	CHANNEL_NOTIFY_NONE         = "none"
+	CHANNEL_NOTIFY_QUIET        = "quiet" // no longer used, should be considered functionally equivalent to CHANNEL_NOTIFY_NONE
+	CHANNEL_MARK_UNREAD_ALL     = "all"
+	CHANNEL_MARK_UNREAD_MENTION = "mention"
 )
 
 type ChannelMember struct {
-	ChannelId    string `json:"channel_id"`
-	UserId       string `json:"user_id"`
-	Roles        string `json:"roles"`
-	LastViewedAt int64  `json:"last_viewed_at"`
-	MsgCount     int64  `json:"msg_count"`
-	MentionCount int64  `json:"mention_count"`
-	NotifyLevel  string `json:"notify_level"`
-	LastUpdateAt int64  `json:"last_update_at"`
+	ChannelId       string `json:"channel_id"`
+	UserId          string `json:"user_id"`
+	Roles           string `json:"roles"`
+	LastViewedAt    int64  `json:"last_viewed_at"`
+	MsgCount        int64  `json:"msg_count"`
+	MentionCount    int64  `json:"mention_count"`
+	NotifyLevel     string `json:"notify_level"`
+	MarkUnreadLevel string `json:"mark_unread_level"`
+	LastUpdateAt    int64  `json:"last_update_at"`
 }
 
 func (o *ChannelMember) ToJson() string {
@@ -69,6 +72,10 @@ func (o *ChannelMember) IsValid() *AppError {
 		return NewAppError("ChannelMember.IsValid", "Invalid notify level", "notify_level="+o.NotifyLevel)
 	}
 
+	if len(o.MarkUnreadLevel) > 20 || !IsChannelMarkUnreadLevelValid(o.MarkUnreadLevel) {
+		return NewAppError("ChannelMember.IsValid", "Invalid mark unread level", "mark_unread_level="+o.MarkUnreadLevel)
+	}
+
 	return nil
 }
 
@@ -83,3 +90,7 @@ func IsChannelNotifyLevelValid(notifyLevel string) bool {
 		notifyLevel == CHANNEL_NOTIFY_NONE ||
 		notifyLevel == CHANNEL_NOTIFY_QUIET
 }
+
+func IsChannelMarkUnreadLevelValid(markUnreadLevel string) bool {
+	return markUnreadLevel == CHANNEL_MARK_UNREAD_ALL || markUnreadLevel == CHANNEL_MARK_UNREAD_MENTION
+}
diff --git a/store/sql_channel_store.go b/store/sql_channel_store.go
index cb686090e..892ee1398 100644
--- a/store/sql_channel_store.go
+++ b/store/sql_channel_store.go
@@ -37,6 +37,7 @@ func NewSqlChannelStore(sqlStore *SqlStore) ChannelStore {
 }
 
 func (s SqlChannelStore) UpgradeSchemaIfNeeded() {
+	s.CreateColumnIfNotExists("ChannelMembers", "MarkUnreadLevel", "varchar(20)", "varchar(20)", model.CHANNEL_MARK_UNREAD_ALL)
 }
 
 func (s SqlChannelStore) CreateIndexesIfNotExists() {
@@ -678,6 +679,35 @@ func (s SqlChannelStore) UpdateNotifyLevel(channelId, userId, notifyLevel string
 	return storeChannel
 }
 
+func (s SqlChannelStore) UpdateMarkUnreadLevel(channelId, userId, markUnreadLevel string) StoreChannel {
+	storeChannel := make(StoreChannel)
+
+	go func() {
+		result := StoreResult{}
+
+		updateAt := model.GetMillis()
+
+		_, err := s.GetMaster().Exec(
+			`UPDATE
+				ChannelMembers
+			SET
+				MarkUnreadLevel = :MarkUnreadLevel,
+				LastUpdateAt = :LastUpdateAt
+			WHERE
+				UserId = :UserId
+					AND ChannelId = :ChannelId`,
+			map[string]interface{}{"ChannelId": channelId, "UserId": userId, "MarkUnreadLevel": markUnreadLevel, "LastUpdateAt": updateAt})
+		if err != nil {
+			result.Err = model.NewAppError("SqlChannelStore.UpdateMarkUnreadLevel", "We couldn't update the mark unread level", "channel_id="+channelId+", user_id="+userId+", "+err.Error())
+		}
+
+		storeChannel <- result
+		close(storeChannel)
+	}()
+
+	return storeChannel
+}
+
 func (s SqlChannelStore) GetForExport(teamId string) StoreChannel {
 	storeChannel := make(StoreChannel)
 
diff --git a/store/store.go b/store/store.go
index 23580f452..83366b79e 100644
--- a/store/store.go
+++ b/store/store.go
@@ -72,6 +72,7 @@ type ChannelStore interface {
 	UpdateLastViewedAt(channelId string, userId string) StoreChannel
 	IncrementMentionCount(channelId string, userId string) StoreChannel
 	UpdateNotifyLevel(channelId string, userId string, notifyLevel string) StoreChannel
+	UpdateMarkUnreadLevel(channelId string, userId string, markUnreadLevel string) StoreChannel
 }
 
 type PostStore interface {
diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index 347d02478..c49e76333 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_level;
+            var markUnreadLevel = member.mark_unread_level;
 
-            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_level;
+        var markUnreadLevel = member.mark_unread_level;
 
         var newState = this.state;
         newState.notifyLevel = notifyLevel;
-        newState.quietMode = quietMode;
+        newState.markUnreadLevel = markUnreadLevel;
 
         if (!Utils.areStatesEqual(this.state, newState)) {
             this.setState(newState);
@@ -65,12 +76,10 @@ 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';
-        }
 
         var data = {};
         data.channel_id = channelId;
@@ -82,26 +91,24 @@ export default class ChannelNotifications extends React.Component {
         }
 
         Client.updateNotifyLevel(data,
-            function success() {
+            () => {
                 var member = ChannelStore.getMember(channelId);
                 member.notify_level = 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();
@@ -137,7 +144,7 @@ export default class ChannelNotifications extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[0]}
-                                onChange={this.handleRadioClick.bind(this, 'default')}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'default')}
                             >
                                 {`Global default (${globalNotifyLevelName})`}
                             </input>
@@ -149,7 +156,7 @@ export default class ChannelNotifications extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[1]}
-                                onChange={this.handleRadioClick.bind(this, 'all')}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'all')}
                             >
                                 {'For all activity'}
                             </input>
@@ -161,7 +168,7 @@ export default class ChannelNotifications extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[2]}
-                                onChange={this.handleRadioClick.bind(this, 'mention')}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'mention')}
                             >
                                 {'Only for mentions'}
                             </input>
@@ -173,7 +180,7 @@ export default class ChannelNotifications extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[3]}
-                                onChange={this.handleRadioClick.bind(this, 'none')}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'none')}
                             >
                                 {'Never'}
                             </input>
@@ -200,7 +207,7 @@ export default class ChannelNotifications extends React.Component {
                 <SettingItemMax
                     title='Send desktop notifications'
                     inputs={inputs}
-                    submit={this.handleUpdate}
+                    submit={this.handleSubmitNotifyLevel}
                     server_error={serverError}
                     updateSection={handleUpdateSection}
                     extraInfo={extraInfo}
@@ -232,101 +239,122 @@ 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;
+
+        const data = {
+            channel_id: channelId,
+            user_id: UserStore.getCurrentId(),
+            mark_unread_level: markUnreadLevel
+        };
+
+        if (!data.mark_unread_level || data.mark_unread_level.length === 0) {
+            return;
+        }
+
+        Client.updateMarkUnreadLevel(data,
+            () => {
+                var member = ChannelStore.getMember(channelId);
+                member.mark_unread_level = 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'
@@ -358,9 +386,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>
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index 715e26197..ce831be0d 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -583,6 +583,21 @@ export function updateNotifyLevel(data, success, error) {
     });
 }
 
+export function updateMarkUnreadLevel(data, success, error) {
+    $.ajax({
+        url: '/api/v1/channels/update_mark_unread_level',
+        dataType: 'json',
+        contentType: 'application/json',
+        type: 'POST',
+        data: JSON.stringify(data),
+        success,
+        error: function onError(xhr, status, err) {
+            var e = handleError('updateMarkUnreadLevel', xhr, status, err);
+            error(e);
+        }
+    });
+}
+
 export function joinChannel(id, success, error) {
     $.ajax({
         url: '/api/v1/channels/' + id + '/join',