Converted ChannelInfoModal to React-Bootstrap

4 files changed, 53 insertions, 89 deletions

diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index 79c7f90a9..33f20cd9e 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -5,8 +5,10 @@ const NavbarSearchBox = require('./search_bar.jsx');
 const MessageWrapper = require('./message_wrapper.jsx');
 const PopoverListMembers = require('./popover_list_members.jsx');
 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 ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const ChannelStore = require('../stores/channel_store.jsx');
 const UserStore = require('../stores/user_store.jsx');
@@ -180,15 +182,13 @@ export default class ChannelHeader extends React.Component {
                     key='view_info'
                     role='presentation'
                 >
-                    <a
+                    <ToggleModalButton
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#channel_info'
-                        data-channelid={channel.id}
-                        href='#'
+                        dialogType={ChannelInfoModal}
+                        dialogProps={{channel}}
                     >
                         {'View Info'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 
diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx
index bccd8d0b9..5eac6be0f 100644
--- a/web/react/components/channel_info_modal.jsx
+++ b/web/react/components/channel_info_modal.jsx
@@ -1,88 +1,58 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var ChannelStore = require('../stores/channel_store.jsx');
-
-export default class CommandList extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            channel_id: ChannelStore.getCurrentId()
-        };
-    }
-
-    componentDidMount() {
-        var self = this;
-        if (this.refs.modal) {
-            $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', function show(e) {
-                var button = e.relatedTarget;
-                self.setState({channel_id: $(button).attr('data-channelid')});
-            });
-        }
-    }
+const Modal = require('./modal.jsx');
 
+export default class ChannelInfoModal extends React.Component {
     render() {
-        var channel = ChannelStore.get(this.state.channel_id);
-
+        let channel = this.props.channel;
         if (!channel) {
-            channel = {};
-            channel.display_name = 'No Channel Found';
-            channel.name = 'No Channel Found';
-            channel.id = 'No Channel Found';
+            channel = {
+                display_name: 'No Channel Found',
+                name: 'No Channel Found',
+                id: 'No Channel Found'
+            };
         }
 
         return (
-            <div
-                className='modal fade'
-                ref='modal'
-                id='channel_info'
-                tabIndex='-1'
-                role='dialog'
-                aria-hidden='true'
+            <Modal
+                show={this.props.show}
+                onHide={this.props.onHide}
+                onShow={this.onShow}
             >
-               <div className='modal-dialog'>
-                  <div className='modal-content'>
-                    <div className='modal-header'>
-                      <button
-                          type='button'
-                          className='close'
-                          data-dismiss='modal'
-                          aria-label='Close'
-                      >
-                        <span aria-hidden='true'>&times;</span>
-                      </button>
-                      <h4
-                          className='modal-title'
-                          id='myModalLabel'
-                      >
-                        <span className='name'>{channel.display_name}</span>
-                      </h4>
-                    </div>
-                    <div className='modal-body'>
-                      <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>Channel Name: </div>
+                <Modal.Header closeButtton={true}>
+                    {channel.display_name}
+                </Modal.Header>
+                <Modal.Body ref='modalBody'>
+                    <div className='row form-group'>
+                        <div className='col-sm-3 info__label'>{'Channel Name:'}</div>
                         <div className='col-sm-9'>{channel.display_name}</div>
-                      </div>
-                      <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>Channel Handle:</div>
+                    </div>
+                    <div className='row form-group'>
+                        <div className='col-sm-3 info__label'>{'Channel Handle:'}</div>
                         <div className='col-sm-9'>{channel.name}</div>
-                      </div>
-                      <div className='row'>
-                        <div className='col-sm-3 info__label'>Channel ID:</div>
-                        <div className='col-sm-9'>{channel.id}</div>
-                      </div>
                     </div>
-                    <div className='modal-footer'>
-                      <button
-                          type='button'
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                      >Close</button>
+                    <div className='row'>
+                        <div className='col-sm-3 info__label'>{'Channel ID:'}</div>
+                        <div className='col-sm-9'>{channel.id}</div>
                     </div>
-                  </div>
-               </div>
-            </div>
+                </Modal.Body>
+                <Modal.Footer>
+                    <button
+                        type='button'
+                        className='btn btn-default'
+                        onClick={this.props.onHide}
+                    >
+                        {'Close'}
+                    </button>
+                </Modal.Footer>
+            </Modal>
         );
     }
 }
+
+ChannelInfoModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired
+};
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 7ad1f9305..d587c1915 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -5,7 +5,9 @@ const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
 const MessageWrapper = require('./message_wrapper.jsx');
 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 ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const UserStore = require('../stores/user_store.jsx');
 const ChannelStore = require('../stores/channel_store.jsx');
@@ -104,15 +106,13 @@ export default class Navbar extends React.Component {
         if (channel) {
             var viewInfoOption = (
                 <li role='presentation'>
-                    <a
+                    <ToggleModalButton
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#channel_info'
-                        data-channelid={channel.id}
-                        href='#'
+                        dialogType={ChannelInfoModal}
+                        dialogProps={{channel}}
                     >
                         {'View Info'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index 8781d52a5..8f4b6b60b 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -19,7 +19,6 @@ 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 ChannelInfoModal = require('../components/channel_info_modal.jsx');
 var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
 var RegisterAppModal = require('../components/register_app_modal.jsx');
 var ImportThemeModal = require('../components/user_settings/import_theme_modal.jsx');
@@ -118,11 +117,6 @@ function setupChannelPage(props) {
     );
 
     ReactDOM.render(
-        <ChannelInfoModal />,
-        document.getElementById('channel_info_modal')
-    );
-
-    ReactDOM.render(
         <MoreChannelsModal />,
         document.getElementById('more_channels_modal')
     );