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.setState({
-        this.props.onModalDismissed();
+            show: false,
+            showConfirmModal: false
+        });
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps, prevState) {
-        if (!prevProps.show && this.props.show) {
+        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,
+            showUserSettingsModal: false
-            showInviteMemberModal: 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});

web/react/pages/channel.jsx

@@ -25,6 +25,7 @@ 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');
+var InviteMemberModal = require('../components/invite_member_modal.jsx');
 
 var AsyncClient = require('../utils/async_client.jsx');
 var Constants = require('../utils/constants.jsx');
@@ -78,6 +79,11 @@ function setupChannelPage(props) {
         document.getElementById('get_link_modal')
     );
 
+    ReactDOM.render(
+        <InviteMemberModal />,
+        document.getElementById('invite_member_modal')
+    );
+
     ReactDOM.render(
         <ImportThemeModal />,
         document.getElementById('import_theme_modal')

web/react/stores/modal_store.jsx

@@ -0,0 +1,42 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+const EventEmitter = require('events').EventEmitter;
+
+const Constants = require('../utils/constants.jsx');
+const ActionTypes = Constants.ActionTypes;
+
+class ModalStoreClass extends EventEmitter {
+    constructor() {
+        super();
+
+        this.addModalListener = this.addModalListener.bind(this);
+        this.removeModalListener = this.removeModalListener.bind(this);
+
+        this.handleEventPayload = this.handleEventPayload.bind(this);
+        this.dispatchToken = AppDispatcher.register(this.handleEventPayload);
+    }
+
+    addModalListener(action, callback) {
+        this.on(action, callback);
+    }
+
+    removeModalListener(action, callback) {
+        this.removeListener(action, callback);
+    }
+
+    handleEventPayload(payload) {
+        const action = payload.action;
+
+        switch (action.type) {
+        case ActionTypes.TOGGLE_IMPORT_THEME_MODAL:
+        case ActionTypes.TOGGLE_INVITE_MEMBER_MODAL:
+            this.emit(action.type, action.value);
+            break;
+        }
+    }
+}
+
+const ModalStore = new ModalStoreClass();
+export default ModalStore;

web/react/stores/user_store.jsx

@@ -13,7 +13,6 @@ var CHANGE_EVENT_SESSIONS = 'change_sessions';
 var CHANGE_EVENT_AUDITS = 'change_audits';
 var CHANGE_EVENT_TEAMS = 'change_teams';
 var CHANGE_EVENT_STATUSES = 'change_statuses';
-var TOGGLE_IMPORT_MODAL_EVENT = 'toggle_import_modal';
 
 class UserStoreClass extends EventEmitter {
     constructor() {
@@ -34,9 +33,6 @@ class UserStoreClass extends EventEmitter {
         this.emitStatusesChange = this.emitStatusesChange.bind(this);
         this.addStatusesChangeListener = this.addStatusesChangeListener.bind(this);
         this.removeStatusesChangeListener = this.removeStatusesChangeListener.bind(this);
-        this.emitToggleImportModal = this.emitToggleImportModal.bind(this);
-        this.addImportModalListener = this.addImportModalListener.bind(this);
-        this.removeImportModalListener = this.removeImportModalListener.bind(this);
         this.getCurrentId = this.getCurrentId.bind(this);
         this.getCurrentUser = this.getCurrentUser.bind(this);
         this.setCurrentUser = this.setCurrentUser.bind(this);
@@ -124,18 +120,6 @@ class UserStoreClass extends EventEmitter {
         this.removeListener(CHANGE_EVENT_STATUSES, callback);
     }
 
-    emitToggleImportModal(value) {
-        this.emit(TOGGLE_IMPORT_MODAL_EVENT, value);
-    }
-
-    addImportModalListener(callback) {
-        this.on(TOGGLE_IMPORT_MODAL_EVENT, callback);
-    }
-
-    removeImportModalListener(callback) {
-        this.removeListener(TOGGLE_IMPORT_MODAL_EVENT, callback);
-    }
-
     getCurrentUser() {
         if (this.getProfiles()[global.window.mm_user.id] == null) {
             this.saveProfile(global.window.mm_user);
@@ -350,10 +334,6 @@ UserStore.dispatchToken = AppDispatcher.register((payload) => {
         UserStore.pSetStatuses(action.statuses);
         UserStore.emitStatusesChange();
         break;
-    case ActionTypes.TOGGLE_IMPORT_THEME_MODAL:
-        UserStore.emitToggleImportModal(action.value);
-        break;
-
     default:
     }
 });

web/react/utils/channel_intro_mssages.jsx

@@ -3,6 +3,7 @@
 // See License.txt for license information.
 
 const Utils = require('./utils.jsx');
+const InviteMemberModal = require('../components/invite_member_modal.jsx');
 const UserProfile = require('../components/user_profile.jsx');
 const ChannelStore = require('../stores/channel_store.jsx');
 const Constants = require('../utils/constants.jsx');
@@ -109,8 +110,7 @@ export function createDefaultIntroMessage(channel) {
             <a
                 className='intro-links'
                 href='#'
-                data-toggle='modal'
+                onClick={InviteMemberModal.show}
-                data-target='#invite_member'
             >
                 <i className='fa fa-user-plus'></i>{'Invite others to this team'}
             </a>
@@ -186,8 +186,6 @@ export function createStandardIntroMessage(channel) {
         );
     }
 
-    // TODO show channel_invite modal now that it's a React-Bootstrap modal
-
     return (
         <div className='channel-intro'>
             <h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>

web/react/utils/constants.jsx

@@ -39,7 +39,8 @@ module.exports = {
         RECIEVED_LOGS: null,
         RECIEVED_ALL_TEAMS: null,
 
-        TOGGLE_IMPORT_THEME_MODAL: null
+        TOGGLE_IMPORT_THEME_MODAL: null,
+        TOGGLE_INVITE_MEMBER_MODAL: null
     }),
 
     PayloadSources: keyMirror({