Converted ChannelInfoModal to React-Bootstrap

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'
+                        dialogType={ChannelInfoModal}
-                        data-target='#channel_info'
+                        dialogProps={{channel}}
-                        data-channelid={channel.id}
-                        href='#'
                     >
                         {'View Info'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 

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');
+const Modal = require('./modal.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')});
-            });
-        }
-    }
 
+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 = {
-            channel.display_name = 'No Channel Found';
+                display_name: 'No Channel Found',
-            channel.name = 'No Channel Found';
+                name: 'No Channel Found',
-            channel.id = 'No Channel Found';
+                id: 'No Channel Found'
+            };
         }
 
         return (
-            <div
+            <Modal
-                className='modal fade'
+                show={this.props.show}
-                ref='modal'
+                onHide={this.props.onHide}
-                id='channel_info'
+                onShow={this.onShow}
-                tabIndex='-1'
-                role='dialog'
-                aria-hidden='true'
             >
-               <div className='modal-dialog'>
+                <Modal.Header closeButtton={true}>
-                  <div className='modal-content'>
+                    {channel.display_name}
-                    <div className='modal-header'>
+                </Modal.Header>
-                      <button
+                <Modal.Body ref='modalBody'>
-                          type='button'
+                    <div className='row form-group'>
-                          className='close'
+                        <div className='col-sm-3 info__label'>{'Channel Name:'}</div>
-                          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>
                         <div className='col-sm-9'>{channel.display_name}</div>
-                      </div>
+                    </div>
-                      <div className='row form-group'>
+                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>Channel Handle:</div>
+                        <div className='col-sm-3 info__label'>{'Channel Handle:'}</div>
                         <div className='col-sm-9'>{channel.name}</div>
-                      </div>
+                    </div>
-                      <div className='row'>
+                    <div className='row'>
-                        <div className='col-sm-3 info__label'>Channel ID:</div>
+                        <div className='col-sm-3 info__label'>{'Channel ID:'}</div>
                         <div className='col-sm-9'>{channel.id}</div>
-                      </div>
                     </div>
-                    <div className='modal-footer'>
+                </Modal.Body>
-                      <button
+                <Modal.Footer>
-                          type='button'
+                    <button
-                          className='btn btn-default'
+                        type='button'
-                          data-dismiss='modal'
+                        className='btn btn-default'
-                      >Close</button>
+                        onClick={this.props.onHide}
-                    </div>
+                    >
-                  </div>
+                        {'Close'}
-               </div>
+                    </button>
-            </div>
+                </Modal.Footer>
+            </Modal>
         );
     }
 }
+
+ChannelInfoModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired
+};

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'
+                        dialogType={ChannelInfoModal}
-                        data-target='#channel_info'
+                        dialogProps={{channel}}
-                        data-channelid={channel.id}
-                        href='#'
                     >
                         {'View Info'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 

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');
@@ -117,11 +116,6 @@ function setupChannelPage(props) {
         document.getElementById('channel_notifications_modal')
     );
 
-    ReactDOM.render(
-        <ChannelInfoModal />,
-        document.getElementById('channel_info_modal')
-    );
-
     ReactDOM.render(
         <MoreChannelsModal />,
         document.getElementById('more_channels_modal')