Converted DeleteChannelModal to React-Bootstrap

web/react/components/channel_header.jsx

@@ -9,6 +9,7 @@ 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 DeleteChannelModal = require('./delete_channel_modal.jsx');
 const ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const ChannelStore = require('../stores/channel_store.jsx');
@@ -300,16 +301,13 @@ export default class ChannelHeader extends React.Component {
                             key='delete_channel'
                             role='presentation'
                         >
-                            <a
+                            <ToggleModalButton
                                 role='menuitem'
-                                href='#'
+                                dialogType={DeleteChannelModal}
-                                data-toggle='modal'
+                                dialogProps={{channel}}
-                                data-target='#delete_channel'
-                                data-title={channel.display_name}
-                                data-channelid={channel.id}
                             >
                                 {'Delete '}{channelTerm}{'...'}
-                            </a>
+                            </ToggleModalButton>
                         </li>
                     );
                 }

web/react/components/delete_channel_modal.jsx

@@ -1,102 +1,72 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-const Client = require('../utils/client.jsx');
 const AsyncClient = require('../utils/async_client.jsx');
-const ChannelStore = require('../stores/channel_store.jsx');
+const Client = require('../utils/client.jsx');
-var TeamStore = require('../stores/team_store.jsx');
+const Modal = require('./modal.jsx');
+const TeamStore = require('../stores/team_store.jsx');
+const Utils = require('../utils/utils.jsx');
 
 export default class DeleteChannelModal extends React.Component {
     constructor(props) {
         super(props);
 
         this.handleDelete = this.handleDelete.bind(this);
-        this.onShow = this.onShow.bind(this);
-
-        this.state = {
-            title: '',
-            channelId: ''
-        };
     }
+
     handleDelete() {
-        if (this.state.channelId.length !== 26) {
+        if (this.props.channel.id.length !== 26) {
             return;
         }
 
-        Client.deleteChannel(this.state.channelId,
+        Client.deleteChannel(
-            function handleDeleteSuccess() {
+            this.props.channel.id,
+            () => {
                 AsyncClient.getChannels(true);
                 window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square';
             },
-            function handleDeleteError(err) {
+            (err) => {
                 AsyncClient.dispatchError(err, 'handleDelete');
             }
         );
     }
-    onShow(e) {
+
-        var button = $(e.relatedTarget);
-        this.setState({
-            title: button.attr('data-title'),
-            channelId: button.attr('data-channelid')
-        });
-    }
-    componentDidMount() {
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
-    }
     render() {
-        const channel = ChannelStore.getCurrent();
+        const channelTerm = Utils.getChannelTerm(this.props.channel.type).toLowerCase();
-        let channelType = 'channel';
-        if (channel && channel.type === 'P') {
-            channelType = 'private group';
-        }
 
         return (
-            <div
+            <Modal
-                className='modal fade'
+                show={this.props.show}
-                ref='modal'
+                onHide={this.props.onHide}
-                id='delete_channel'
-                role='dialog'
-                tabIndex='-1'
-                aria-hidden='true'
             >
-                <div className='modal-dialog'>
+                <Modal.Header closeButton={true}>{'Confirm DELETE Channel'}</Modal.Header>
-                    <div className='modal-content'>
+                <Modal.Body>
-                        <div className='modal-header'>
+                    {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`}
-                            <button
+                </Modal.Body>
-                                type='button'
+                <Modal.Footer>
-                                className='close'
+                    <button
-                                data-dismiss='modal'
+                        type='button'
-                                aria-label='Close'
+                        className='btn btn-default'
-                            >
+                        onClick={this.props.onHide}
-                                <span aria-hidden='true'>&times;</span>
+                    >
-                            </button>
+                        {'Cancel'}
-                            <h4 className='modal-title'>Confirm DELETE Channel</h4>
+                    </button>
-                        </div>
+                    <button
-                        <div className='modal-body'>
+                        type='button'
-                            <p>
+                        className='btn btn-danger'
-                                Are you sure you wish to delete the {this.state.title} {channelType}?
+                        data-dismiss='modal'
-                            </p>
+                        onClick={this.handleDelete}
-                        </div>
+                    >
-                        <div className='modal-footer'>
+                        {'Delete'}
-                            <button
+                    </button>
-                                type='button'
+                </Modal.Footer>
-                                className='btn btn-default'
+            </Modal>
-                                data-dismiss='modal'
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                type='button'
-                                className='btn btn-danger'
-                                data-dismiss='modal'
-                                onClick={this.handleDelete}
-                            >
-                                Delete
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
         );
     }
 }
+
+DeleteChannelModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired
+};

web/react/components/navbar.jsx

@@ -8,6 +8,7 @@ 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 DeleteChannelModal = require('./delete_channel_modal.jsx');
 const ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const UserStore = require('../stores/user_store.jsx');
@@ -195,16 +196,13 @@ export default class Navbar extends React.Component {
 
                     deleteChannelOption = (
                         <li role='presentation'>
-                            <a
+                            <ToggleModalButton
                                 role='menuitem'
-                                href='#'
+                                dialogType={DeleteChannelModal}
-                                data-toggle='modal'
+                                dialogProps={{channel}}
-                                data-target='#delete_channel'
-                                data-title={channel.display_name}
-                                data-channelid={channel.id}
                             >
                                 {'Delete Channel...'}
-                            </a>
+                            </ToggleModalButton>
                         </li>
                     );
                 }

web/react/pages/channel.jsx

@@ -10,7 +10,6 @@ var ErrorStore = require('../stores/error_store.jsx');
 var MentionList = require('../components/mention_list.jsx');
 var GetLinkModal = require('../components/get_link_modal.jsx');
 var EditChannelModal = require('../components/edit_channel_modal.jsx');
-var DeleteChannelModal = require('../components/delete_channel_modal.jsx');
 var RenameChannelModal = require('../components/rename_channel_modal.jsx');
 var EditPostModal = require('../components/edit_post_modal.jsx');
 var DeletePostModal = require('../components/delete_post_modal.jsx');
@@ -100,11 +99,6 @@ function setupChannelPage(props) {
         document.getElementById('edit_channel_modal')
     );
 
-    ReactDOM.render(
-        <DeleteChannelModal />,
-        document.getElementById('delete_channel_modal')
-    );
-
     ReactDOM.render(
         <RenameChannelModal />,
         document.getElementById('rename_channel_modal')