Switched ChannelInviteModal to use a ToggleModalButton wherever possible

web/react/components/channel_header.jsx

@@ -40,7 +40,6 @@ export default class ChannelHeader extends React.Component {
 
         const state = this.getStateFromStores();
         state.showEditChannelPurposeModal = false;
-        state.showInviteModal = false;
         state.showMembersModal = false;
         this.state = state;
     }
@@ -201,13 +200,12 @@ export default class ChannelHeader extends React.Component {
                         key='add_members'
                         role='presentation'
                     >
-                        <a
+                        <ToggleModalButton
                             role='menuitem'
-                            href='#'
-                            onClick={() => this.setState({showInviteModal: true})}
+                            dialogType={ChannelInviteModal}
                         >
                             {'Add Members'}
-                        </a>
+                        </ToggleModalButton>
                     </li>
                 );
 
@@ -402,10 +400,6 @@ export default class ChannelHeader extends React.Component {
                     onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})}
                     channel={channel}
                 />
-                <ChannelInviteModal
-                    show={this.state.showInviteModal}
-                    onModalDismissed={() => this.setState({showInviteModal: false})}
-                />
                 <ChannelMembersModal
                     show={this.state.showMembersModal}
                     onModalDismissed={() => this.setState({showMembersModal: false})}

web/react/components/channel_invite_modal.jsx

@@ -157,7 +157,7 @@ export default class ChannelInviteModal extends React.Component {
             <Modal
                 dialogClassName='more-modal'
                 show={this.props.show}
-                onHide={this.props.onModalDismissed}
+                onHide={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
                     <Modal.Title>{'Add New Members to '}<span className='name'>{this.state.channelName}</span></Modal.Title>
@@ -173,7 +173,7 @@ export default class ChannelInviteModal extends React.Component {
                     <button
                         type='button'
                         className='btn btn-default'
-                        onClick={this.props.onModalDismissed}
+                        onClick={this.props.onHide}
                     >
                         {'Close'}
                     </button>
@@ -185,5 +185,5 @@ export default class ChannelInviteModal extends React.Component {
 
 ChannelInviteModal.propTypes = {
     show: React.PropTypes.bool.isRequired,
-    onModalDismissed: React.PropTypes.func.isRequired
+    onHide: React.PropTypes.func.isRequired
 };

web/react/components/channel_members_modal.jsx

@@ -205,7 +205,7 @@ export default class ChannelMembersModal extends React.Component {
                 </Modal>
                 <ChannelInviteModal
                     show={this.state.showInviteModal}
-                    onModalDismissed={() => this.setState({showInviteModal: false})}
+                    onHide={() => this.setState({showInviteModal: false})}
                 />
             </div>
         );

web/react/components/navbar.jsx

@@ -44,7 +44,6 @@ export default class Navbar extends React.Component {
         state.showEditChannelPurposeModal = false;
         state.showEditChannelHeaderModal = false;
         state.showMembersModal = false;
-        state.showInviteModal = false;
         this.state = state;
     }
     getStateFromStores() {
@@ -171,13 +170,12 @@ export default class Navbar extends React.Component {
             if (!isDirect && !ChannelStore.isDefault(channel)) {
                 addMembersOption = (
                     <li role='presentation'>
-                        <a
+                        <ToggleModalButton
                             role='menuitem'
-                            href='#'
-                            onClick={() => this.setState({showInviteModal: true})}
+                            dialogType={ChannelInviteModal}
                         >
                             {'Add Members'}
-                        </a>
+                        </ToggleModalButton>
                     </li>
                 );
 
@@ -476,10 +474,6 @@ export default class Navbar extends React.Component {
                     show={this.state.showMembersModal}
                     onModalDismissed={() => this.setState({showMembersModal: false})}
                 />
-                <ChannelInviteModal
-                    show={this.state.showInviteModal}
-                    onModalDismissed={() => this.setState({showInviteModal: false})}
-                />
             </div>
         );
     }

web/react/components/posts_view_container.jsx

@@ -3,7 +3,6 @@
 
 import PostsView from './posts_view.jsx';
 import LoadingScreen from './loading_screen.jsx';
-import ChannelInviteModal from './channel_invite_modal.jsx';
 
 import ChannelStore from '../stores/channel_store.jsx';
 import PostStore from '../stores/post_store.jsx';
@@ -177,7 +176,7 @@ export default class PostsViewContainer extends React.Component {
                     loadMorePostsBottomClicked={() => {}}
                     showMoreMessagesTop={!this.state.atTop[this.state.currentChannelIndex]}
                     showMoreMessagesBottom={false}
-                    introText={channel ? createChannelIntroMessage(channel, () => this.setState({showInviteModal: true})) : null}
+                    introText={channel ? createChannelIntroMessage(channel) : null}
                     messageSeparatorTime={this.state.currentLastViewed}
                 />
             );
@@ -194,10 +193,6 @@ export default class PostsViewContainer extends React.Component {
         return (
             <div id='post-list'>
                 {postListCtls}
-                <ChannelInviteModal
-                    show={this.state.showInviteModal}
-                    onModalDismissed={() => this.setState({showInviteModal: false})}
-                />
             </div>
         );
     }