Moved InviteMemberModal to be controlled by a store

web/react/components/invite_member_modal.jsx

@@ -2,7 +2,10 @@
 // See License.txt for license information.
 
 var utils = require('../utils/utils.jsx');
+var ActionTypes = require('../utils/constants.jsx').ActionTypes;
+var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Client = require('../utils/client.jsx');
+var ModalStore = require('../stores/modal_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
 var ConfirmModal = require('./confirm_modal.jsx');
@@ -13,6 +16,7 @@ export default class InviteMemberModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.handleToggle = this.handleToggle.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleHide = this.handleHide.bind(this);
         this.addInviteFields = this.addInviteFields.bind(this);
@@ -20,6 +24,7 @@ export default class InviteMemberModal extends React.Component {
         this.removeInviteFields = this.removeInviteFields.bind(this);
 
         this.state = {
+            show: false,
             inviteIds: [0],
             idCount: 0,
             emailErrors: {},
@@ -30,6 +35,20 @@ export default class InviteMemberModal extends React.Component {
         };
     }
 
+    componentDidMount() {
+        ModalStore.addModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle);
+    }
+
+    componentWillUnmount() {
+        ModalStore.removeModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle);
+    }
+
+    handleToggle(value) {
+        this.setState({
+            show: value
+        });
+    }
+
     handleSubmit() {
         if (!this.state.emailEnabled) {
             return;
@@ -108,12 +127,14 @@ export default class InviteMemberModal extends React.Component {
 
         this.clearFields();
 
-        this.setState({showConfirmModal: false});
-        this.props.onModalDismissed();
+        this.setState({
+            show: false,
+            showConfirmModal: false
+        });
     }
 
-    componentDidUpdate(prevProps) {
-        if (!prevProps.show && this.props.show) {
+    componentDidUpdate(prevProps, prevState) {
+        if (!prevState.show && this.state.show) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
             if ($(window).width() > 768) {
                 $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
@@ -331,7 +352,7 @@ export default class InviteMemberModal extends React.Component {
                 <div>
                     <Modal
                         className='modal-invite-member'
-                        show={this.props.show}
+                        show={this.state.show}
                         onHide={this.handleHide.bind(this, true)}
                         enforceFocus={!this.state.showConfirmModal}
                     >
@@ -369,9 +390,14 @@ export default class InviteMemberModal extends React.Component {
 
         return null;
     }
+
+    static show() {
+        AppDispatcher.handleViewAction({
+            type: ActionTypes.TOGGLE_INVITE_MEMBER_MODAL,
+            value: true
+        });
+    }
 }
 
 InviteMemberModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
-    onModalDismissed: React.PropTypes.func.isRequired
 };

web/react/components/navbar_dropdown.jsx

@@ -46,7 +46,6 @@ export default class NavbarDropdown extends React.Component {
         const state = getStateFromStores();
         state.showUserSettingsModal = false;
         state.showAboutModal = false;
-        state.showInviteMemberModal = false;
         this.state = state;
     }
     handleLogoutClick(e) {
@@ -102,7 +101,7 @@ export default class NavbarDropdown extends React.Component {
                 <li>
                     <a
                         href='#'
-                        onClick={() => this.setState({showInviteMemberModal: true})}
+                        onClick={InviteMemberModal.show}
                     >
                         {'Invite New Member'}
                     </a>
@@ -276,10 +275,6 @@ export default class NavbarDropdown extends React.Component {
                             show={this.state.showAboutModal}
                             onModalDismissed={this.aboutModalDismissed}
                         />
-                        <InviteMemberModal
-                            show={this.state.showInviteMemberModal}
-                            onModalDismissed={() => this.setState({showInviteMemberModal: false})}
-                        />
                     </ul>
                 </li>
             </ul>

web/react/components/sidebar_right_menu.jsx

@@ -19,8 +19,7 @@ export default class SidebarRightMenu extends React.Component {
         this.handleLogoutClick = this.handleLogoutClick.bind(this);
 
         this.state = {
-            showUserSettingsModal: false,
-            showInviteMemberModal: false
+            showUserSettingsModal: false
         };
     }
 
@@ -47,7 +46,7 @@ export default class SidebarRightMenu extends React.Component {
                 <li>
                     <a
                         href='#'
-                        onClick={() => this.setState({showInviteMemberModal: true})}
+                        onClick={InviteMemberModal.show}
                     >
                         <i className='glyphicon glyphicon-user'></i>Invite New Member
                     </a>
@@ -156,10 +155,6 @@ export default class SidebarRightMenu extends React.Component {
                     show={this.state.showUserSettingsModal}
                     onModalDismissed={() => this.setState({showUserSettingsModal: false})}
                 />
-                <InviteMemberModal
-                    show={this.state.showInviteMemberModal}
-                    onModalDismissed={() => this.setState({showInviteMemberModal: false})}
-                />
             </div>
         );
     }

web/react/components/user_settings/import_theme_modal.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+const ModalStore = require('../../stores/modal_store.jsx');
 const UserStore = require('../../stores/user_store.jsx');
 const Utils = require('../../utils/utils.jsx');
 const Client = require('../../utils/client.jsx');
@@ -24,10 +25,10 @@ export default class ImportThemeModal extends React.Component {
         };
     }
     componentDidMount() {
-        UserStore.addImportModalListener(this.updateShow);
+        ModalStore.addModalListener(ActionTypes.TOGGLE_IMPORT_THEME_MODAL, this.updateShow);
     }
     componentWillUnmount() {
-        UserStore.removeImportModalListener(this.updateShow);
+        ModalStore.removeModalListener(ActionTypes.TOGGLE_IMPORT_THEME_MODAL, this.updateShow);
     }
     updateShow(show) {
         this.setState({show});