Moved InviteMemberModal to be controlled by a store

2015-11-02 17:35:59 -05:00
--- a/web/react/components/invite_member_modal.jsx
+++ b/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
 };
--- a/web/react/components/navbar_dropdown.jsx
+++ b/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>
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/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>
        );
    }
--- a/web/react/components/user_settings/import_theme_modal.jsx
+++ b/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});
--- a/web/react/pages/channel.jsx
+++ b/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')
--- a/web/react/stores/modal_store.jsx
+++ b/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;
--- a/web/react/stores/user_store.jsx
+++ b/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:
    }
 });
--- a/web/react/utils/channel_intro_mssages.jsx
+++ b/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'
-                data-target='#invite_member'
+                onClick={InviteMemberModal.show}
            >
                <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>
--- a/web/react/utils/constants.jsx
+++ b/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({