Converted ChannelNotificationsModal to React-Bootstrap

web/react/components/channel_header.jsx

@@ -8,6 +8,7 @@ const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
 const ChannelInfoModal = require('./channel_info_modal.jsx');
 const ChannelInviteModal = require('./channel_invite_modal.jsx');
 const ChannelMembersModal = require('./channel_members_modal.jsx');
+const ChannelNotificationsModal = require('./channel_notifications_modal.jsx');
 const ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const ChannelStore = require('../stores/channel_store.jsx');
@@ -263,16 +264,13 @@ export default class ChannelHeader extends React.Component {
                     key='notification_preferences'
                     role='presentation'
                 >
-                    <a
+                    <ToggleModalButton
                         role='menuitem'
-                        href='#'
+                        dialogType={ChannelNotificationsModal}
-                        data-toggle='modal'
+                        dialogProps={{channel}}
-                        data-target='#channel_notifications'
-                        data-title={channel.display_name}
-                        data-channelid={channel.id}
                     >
                         {'Notification Preferences'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 

web/react/components/channel_notifications_modal.jsx

@@ -1,15 +1,15 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+var Modal = require('./modal.jsx');
 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 {
+export default class ChannelNotificationsModal extends React.Component {
     constructor(props) {
         super(props);
 
@@ -23,35 +23,17 @@ export default class ChannelNotifications extends React.Component {
         this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this);
         this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this);
         this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this);
-        this.onShow = this.onShow.bind(this);
 
+        const member = ChannelStore.getMember(props.channel.id);
         this.state = {
-            notifyLevel: '',
+            notifyLevel: member.notify_props.desktop,
-            markUnreadLevel: '',
+            markUnreadLevel: member.notify_props.mark_unread,
-            title: '',
             channelId: '',
             activeSection: ''
         };
     }
-    onShow(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
-        });
-    }
     componentDidMount() {
         ChannelStore.addChangeListener(this.onListenerChange);
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onListenerChange);
@@ -62,15 +44,12 @@ export default class ChannelNotifications extends React.Component {
         }
 
         const member = ChannelStore.getMember(this.state.channelId);
-        var notifyLevel = member.notify_props.desktop;
-        var markUnreadLevel = member.notify_props.mark_unread;
 
-        var newState = this.state;
+        if (member.notify_props.desktop !== this.state.notifyLevel || member.notify_props.mark_unread !== this.state.mark_unread) {
-        newState.notifyLevel = notifyLevel;
+            this.setState({
-        newState.markUnreadLevel = markUnreadLevel;
+                notifyLevel: member.notify_props.desktop,
-
+                markUnreadLevel: member.notify_props.mark_unread
-        if (!Utils.areObjectsEqual(this.state, newState)) {
+            });
-            this.setState(newState);
         }
     }
     updateSection(section) {
@@ -104,7 +83,6 @@ export default class ChannelNotifications extends React.Component {
     }
     handleUpdateNotifyLevel(notifyLevel) {
         this.setState({notifyLevel});
-        ReactDOM.findDOMNode(this.refs.modal).focus();
     }
     createNotifyLevelSection(serverError) {
         var handleUpdateSection;
@@ -262,7 +240,6 @@ export default class ChannelNotifications extends React.Component {
 
     handleUpdateMarkUnreadLevel(markUnreadLevel) {
         this.setState({markUnreadLevel});
-        ReactDOM.findDOMNode(this.refs.modal).focus();
     }
 
     createMarkUnreadLevelSection(serverError) {
@@ -347,48 +324,39 @@ export default class ChannelNotifications extends React.Component {
         }
 
         return (
-            <div
+            <Modal
-                className='modal fade'
+                show={this.props.show}
-                id='channel_notifications'
+                dialogClassName='settings-modal'
-                ref='modal'
+                onHide={this.props.onHide}
-                tabIndex='-1'
-                role='dialog'
-                aria-hidden='true'
             >
-                <div className='modal-dialog settings-modal'>
+                <Modal.Header closeButton={true}>
-                    <div className='modal-content'>
+                    {'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span>
-                        <div className='modal-header'>
+                </Modal.Header>
-                            <button
+                <Modal.Body>
-                                type='button'
+                    <div className='settings-table'>
-                                className='close'
+                        <div className='settings-content'>
-                                data-dismiss='modal'
+                            <div
+                                ref='wrapper'
+                                className='user-settings'
                             >
-                                <span aria-hidden='true'>&times;</span>
+                                <br/>
-                                <span className='sr-only'>{'Close'}</span>
+                                <div className='divider-dark first'/>
-                            </button>
+                                {this.createNotifyLevelSection(serverError)}
-                            <h4 className='modal-title'>Notification Preferences for <span className='name'>{this.state.title}</span></h4>
+                                <div className='divider-light'/>
-                        </div>
+                                {this.createMarkUnreadLevelSection(serverError)}
-                        <div className='modal-body'>
+                                <div className='divider-dark'/>
-                            <div className='settings-table'>
-                            <div className='settings-content'>
-                                <div
-                                    ref='wrapper'
-                                    className='user-settings'
-                                >
-                                    <br/>
-                                    <div className='divider-dark first'/>
-                                    {this.createNotifyLevelSection(serverError)}
-                                    <div className='divider-light'/>
-                                    {this.createMarkUnreadLevelSection(serverError)}
-                                    <div className='divider-dark'/>
-                                </div>
                             </div>
-                            </div>
-                            {serverError}
                         </div>
                     </div>
-                </div>
+                    {serverError}
-            </div>
+                </Modal.Body>
+            </Modal>
         );
     }
 }
+
+ChannelNotificationsModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired
+};

web/react/components/navbar.jsx

@@ -7,6 +7,7 @@ const NotifyCounts = require('./notify_counts.jsx');
 const ChannelMembersModal = require('./channel_members_modal.jsx');
 const ChannelInfoModal = require('./channel_info_modal.jsx');
 const ChannelInviteModal = require('./channel_invite_modal.jsx');
+const ChannelNotificationsModal = require('./channel_notifications_modal.jsx');
 const ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const UserStore = require('../stores/user_store.jsx');
@@ -229,16 +230,13 @@ export default class Navbar extends React.Component {
             if (!isDirect) {
                 notificationPreferenceOption = (
                     <li role='presentation'>
-                        <a
+                        <ToggleModalButton
                             role='menuitem'
-                            href='#'
+                            dialogType={ChannelNotificationsModal}
-                            data-toggle='modal'
+                            dialogProps={{channel}}
-                            data-target='#channel_notifications'
-                            data-title={channel.display_name}
-                            data-channelid={channel.id}
                         >
-                            {'Notification Preferences'}
+                        {'Notification Preferences'}
-                        </a>
+                        </ToggleModalButton>
                     </li>
                 );
             }

web/react/pages/channel.jsx

@@ -16,7 +16,6 @@ var EditPostModal = require('../components/edit_post_modal.jsx');
 var DeletePostModal = require('../components/delete_post_modal.jsx');
 var MoreChannelsModal = require('../components/more_channels.jsx');
 var PostDeletedModal = require('../components/post_deleted_modal.jsx');
-var ChannelNotificationsModal = require('../components/channel_notifications.jsx');
 var TeamSettingsModal = require('../components/team_settings_modal.jsx');
 var TeamMembersModal = require('../components/team_members.jsx');
 var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
@@ -111,11 +110,6 @@ function setupChannelPage(props) {
         document.getElementById('rename_channel_modal')
     );
 
-    ReactDOM.render(
-        <ChannelNotificationsModal />,
-        document.getElementById('channel_notifications_modal')
-    );
-
     ReactDOM.render(
         <MoreChannelsModal />,
         document.getElementById('more_channels_modal')