From 6428878e20fa54b7bb6b2bf6e0aaaeb637affa59 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Mon, 2 Nov 2015 17:35:59 -0500 Subject: Moved InviteMemberModal to be controlled by a store --- web/react/components/invite_member_modal.jsx | 40 +++++++++++++++++---- web/react/components/navbar_dropdown.jsx | 7 +--- web/react/components/sidebar_right_menu.jsx | 9 ++--- .../user_settings/import_theme_modal.jsx | 5 +-- web/react/pages/channel.jsx | 6 ++++ web/react/stores/modal_store.jsx | 42 ++++++++++++++++++++++ web/react/stores/user_store.jsx | 20 ----------- web/react/utils/channel_intro_mssages.jsx | 6 ++-- web/react/utils/constants.jsx | 3 +- 9 files changed, 91 insertions(+), 47 deletions(-) create mode 100644 web/react/stores/modal_store.jsx (limited to 'web/react') diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index 71f72625d..c09477a69 100644 --- 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 {
@@ -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 }; diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index 81ff11fb5..6c4b278a0 100644 --- 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 {
  • this.setState({showInviteMemberModal: true})} + onClick={InviteMemberModal.show} > {'Invite New Member'} @@ -276,10 +275,6 @@ export default class NavbarDropdown extends React.Component { show={this.state.showAboutModal} onModalDismissed={this.aboutModalDismissed} /> - this.setState({showInviteMemberModal: false})} - />
    • diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 51f9ab1bc..2135e3ef3 100644 --- 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 {
  • this.setState({showInviteMemberModal: true})} + onClick={InviteMemberModal.show} > Invite New Member @@ -156,10 +155,6 @@ export default class SidebarRightMenu extends React.Component { show={this.state.showUserSettingsModal} onModalDismissed={() => this.setState({showUserSettingsModal: false})} /> - this.setState({showInviteMemberModal: false})} - />
    • ); } diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx index 384226b20..24da106d0 100644 --- 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}); diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 2e7a26d00..2f872effd 100644 --- 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( + , + document.getElementById('invite_member_modal') + ); + ReactDOM.render( , document.getElementById('import_theme_modal') diff --git a/web/react/stores/modal_store.jsx b/web/react/stores/modal_store.jsx new file mode 100644 index 000000000..dc65d48da --- /dev/null +++ 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; diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx index ce80c5ec9..2ad5a2ffa 100644 --- 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: } }); diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_mssages.jsx index fdeb17bc1..161c79761 100644 --- 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) { {'Invite others to this team'} @@ -186,8 +186,6 @@ export function createStandardIntroMessage(channel) { ); } - // TODO show channel_invite modal now that it's a React-Bootstrap modal - return (

    {'Beginning of ' + uiName}

    diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 8884d1d10..51cd41b6d 100644 --- 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({ -- cgit v1.2.3-1-g7c22