From d09ace15f24c396fb60809185047adee6db1ab08 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 3 Dec 2015 10:31:05 -0500 Subject: [PATCH 1/3] Switched ChannelInviteModal to use a ToggleModalButton wherever possible --- web/react/components/channel_header.jsx | 12 ++---- web/react/components/channel_invite_modal.jsx | 6 +-- .../components/channel_members_modal.jsx | 2 +- web/react/components/navbar.jsx | 12 ++---- web/react/components/posts_view_container.jsx | 7 +--- web/react/utils/channel_intro_mssages.jsx | 38 +++++++++---------- 6 files changed, 30 insertions(+), 47 deletions(-) diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 08c4a48eaa..ffcb52096b 100644 --- a/web/react/components/channel_header.jsx +++ b/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' > - this.setState({showInviteModal: true})} + dialogType={ChannelInviteModal} > {'Add Members'} - + ); @@ -402,10 +400,6 @@ export default class ChannelHeader extends React.Component { onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})} channel={channel} /> - this.setState({showInviteModal: false})} - /> this.setState({showMembersModal: false})} diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index 0518ccb866..f243bd8cb1 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -157,7 +157,7 @@ export default class ChannelInviteModal extends React.Component { {'Add New Members to '}{this.state.channelName} @@ -173,7 +173,7 @@ export default class ChannelInviteModal extends React.Component { @@ -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 }; diff --git a/web/react/components/channel_members_modal.jsx b/web/react/components/channel_members_modal.jsx index f07fc166af..c7276e60ef 100644 --- a/web/react/components/channel_members_modal.jsx +++ b/web/react/components/channel_members_modal.jsx @@ -205,7 +205,7 @@ export default class ChannelMembersModal extends React.Component { this.setState({showInviteModal: false})} + onHide={() => this.setState({showInviteModal: false})} /> ); diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 6c3bfc7db1..50e2b65e19 100644 --- a/web/react/components/navbar.jsx +++ b/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 = (
  • - this.setState({showInviteModal: true})} + dialogType={ChannelInviteModal} > {'Add Members'} - +
    • ); @@ -476,10 +474,6 @@ export default class Navbar extends React.Component { show={this.state.showMembersModal} onModalDismissed={() => this.setState({showMembersModal: false})} /> - this.setState({showInviteModal: false})} - /> ); } diff --git a/web/react/components/posts_view_container.jsx b/web/react/components/posts_view_container.jsx index 6d6694feca..6dff2a6449 100644 --- a/web/react/components/posts_view_container.jsx +++ b/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 (
    {postListCtls} - this.setState({showInviteModal: false})} - />
    ); } diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_mssages.jsx index 6f83778c9b..312e0d5d6d 100644 --- a/web/react/utils/channel_intro_mssages.jsx +++ b/web/react/utils/channel_intro_mssages.jsx @@ -2,6 +2,7 @@ // See License.txt for license information. import * as Utils from './utils.jsx'; +import ChannelInviteModal from '../components/channel_invite_modal.jsx'; import EditChannelHeaderModal from '../components/edit_channel_header_modal.jsx'; import ToggleModalButton from '../components/toggle_modal_button.jsx'; import UserProfile from '../components/user_profile.jsx'; @@ -10,15 +11,15 @@ import Constants from '../utils/constants.jsx'; import TeamStore from '../stores/team_store.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; -export function createChannelIntroMessage(channel, showInviteModal) { +export function createChannelIntroMessage(channel) { if (channel.type === 'D') { return createDMIntroMessage(channel); } else if (ChannelStore.isDefault(channel)) { return createDefaultIntroMessage(channel); } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { - return createOffTopicIntroMessage(channel, showInviteModal); + return createOffTopicIntroMessage(channel); } else if (channel.type === 'O' || channel.type === 'P') { - return createStandardIntroMessage(channel, showInviteModal); + return createStandardIntroMessage(channel); } } @@ -62,7 +63,7 @@ export function createDMIntroMessage(channel) { ); } -export function createOffTopicIntroMessage(channel, showInviteModal) { +export function createOffTopicIntroMessage(channel) { return (

    {'Beginning of ' + channel.display_name}

    @@ -71,13 +72,7 @@ export function createOffTopicIntroMessage(channel, showInviteModal) {

    {createSetHeaderButton(channel)} - - {'Invite others to this channel'} - + {createInviteChannelMemberButton(channel, 'channel')}
    ); } @@ -122,7 +117,7 @@ export function createDefaultIntroMessage(channel) { ); } -export function createStandardIntroMessage(channel, showInviteModal) { +export function createStandardIntroMessage(channel) { var uiName = channel.display_name; var creatorName = ''; @@ -162,17 +157,22 @@ export function createStandardIntroMessage(channel, showInviteModal) {

    {createSetHeaderButton(channel)} - - {'Invite others to this ' + uiType} - + {createInviteChannelMemberButton(channel, uiType)} ); } +function createInviteChannelMemberButton(channel, uiType) { + return ( + + {'Invite others to this ' + uiType} + + ); +} + function createSetHeaderButton(channel) { return ( Date: Thu, 3 Dec 2015 12:57:34 -0500 Subject: [PATCH 2/3] Removed some internal state from ChannelMembersModal and ChannelInviteModal --- web/react/components/channel_header.jsx | 2 ++ web/react/components/channel_invite_modal.jsx | 34 ++++--------------- .../components/channel_members_modal.jsx | 15 +++----- web/react/components/member_list_item.jsx | 4 +-- web/react/components/navbar.jsx | 2 ++ web/react/stores/channel_store.jsx | 18 +++------- web/react/utils/channel_intro_mssages.jsx | 1 + 7 files changed, 23 insertions(+), 53 deletions(-) diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index ffcb52096b..d5a46721ea 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -203,6 +203,7 @@ export default class ChannelHeader extends React.Component { {'Add Members'} @@ -403,6 +404,7 @@ export default class ChannelHeader extends React.Component { this.setState({showMembersModal: false})} + channel={channel} /> ); diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index f243bd8cb1..56e2e53f93 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -53,15 +53,8 @@ export default class ChannelInviteModal extends React.Component { return a.username.localeCompare(b.username); }); - var channelName = ''; - if (ChannelStore.getCurrent()) { - channelName = ChannelStore.getCurrent().display_name; - } - return { nonmembers, - memberIds, - channelName, loading }; } @@ -94,28 +87,14 @@ export default class ChannelInviteModal extends React.Component { } } handleInvite(userId) { - // Make sure the user isn't already a member of the channel - if (this.state.memberIds.indexOf(userId) > -1) { - return; - } - var data = {}; data.user_id = userId; - Client.addChannelMember(ChannelStore.getCurrentId(), data, + Client.addChannelMember( + this.props.channel.id, + data, () => { - var nonmembers = this.state.nonmembers; - var memberIds = this.state.memberIds; - - for (var i = 0; i < nonmembers.length; i++) { - if (userId === nonmembers[i].id) { - nonmembers[i].invited = true; - memberIds.push(userId); - break; - } - } - - this.setState({inviteError: null, memberIds, nonmembers}); + this.setState({inviteError: null}); AsyncClient.getChannelExtraInfo(); }, (err) => { @@ -160,7 +139,7 @@ export default class ChannelInviteModal extends React.Component { onHide={this.props.onHide} > - {'Add New Members to '}{this.state.channelName} + {'Add New Members to '}{this.props.channel.display_nam} - {this.state.channelName}{' Members'} + {this.props.channel.display_name}{' Members'} this.setState({showInviteModal: false})} + channel={this.props.channel} /> ); @@ -218,5 +212,6 @@ ChannelMembersModal.defaultProps = { ChannelMembersModal.propTypes = { show: React.PropTypes.bool.isRequired, - onModalDismissed: React.PropTypes.func.isRequired + onModalDismissed: React.PropTypes.func.isRequired, + channel: React.PropTypes.object.isRequired }; diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx index f5d5ab28ba..f7f77f48a5 100644 --- a/web/react/components/member_list_item.jsx +++ b/web/react/components/member_list_item.jsx @@ -31,9 +31,7 @@ export default class MemberListItem extends React.Component { var timestamp = UserStore.getCurrentUser().update_at; var invite; - if (member.invited && this.props.handleInvite) { - invite = Added; - } else if (this.props.handleInvite) { + if (this.props.handleInvite) { invite = ( {'Add Members'} @@ -473,6 +474,7 @@ export default class Navbar extends React.Component { this.setState({showMembersModal: false})} + channel={{channel}} /> ); diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx index 5dec869511..0bfde77b4d 100644 --- a/web/react/stores/channel_store.jsx +++ b/web/react/stores/channel_store.jsx @@ -167,18 +167,7 @@ class ChannelStoreClass extends EventEmitter { this.emitChange(); } getCurrentExtraInfo() { - var currentId = this.getCurrentId(); - var extra = null; - - if (currentId) { - extra = this.pGetExtraInfos()[currentId]; - } - - if (extra == null) { - extra = {members: []}; - } - - return extra; + return this.getExtraInfo(this.getCurrentId()); } getExtraInfo(channelId) { var extra = null; @@ -187,7 +176,10 @@ class ChannelStoreClass extends EventEmitter { extra = this.pGetExtraInfos()[channelId]; } - if (extra == null) { + if (extra) { + // create a defensive copy + extra = JSON.parse(JSON.stringify(extra)); + } else { extra = {members: []}; } diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_mssages.jsx index 312e0d5d6d..9685f94b02 100644 --- a/web/react/utils/channel_intro_mssages.jsx +++ b/web/react/utils/channel_intro_mssages.jsx @@ -167,6 +167,7 @@ function createInviteChannelMemberButton(channel, uiType) { {'Invite others to this ' + uiType} From bc173ebcb47f60d5e99081156575a8ace98fe168 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 3 Dec 2015 12:59:49 -0500 Subject: [PATCH 3/3] Renamed channel_intro_mssages.jsx to channel_intro_messages.jsx --- web/react/components/posts_view_container.jsx | 2 +- .../{channel_intro_mssages.jsx => channel_intro_messages.jsx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename web/react/utils/{channel_intro_mssages.jsx => channel_intro_messages.jsx} (100%) diff --git a/web/react/components/posts_view_container.jsx b/web/react/components/posts_view_container.jsx index 6dff2a6449..631bd18724 100644 --- a/web/react/components/posts_view_container.jsx +++ b/web/react/components/posts_view_container.jsx @@ -12,7 +12,7 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; -import {createChannelIntroMessage} from '../utils/channel_intro_mssages.jsx'; +import {createChannelIntroMessage} from '../utils/channel_intro_messages.jsx'; export default class PostsViewContainer extends React.Component { constructor() { diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_messages.jsx similarity index 100% rename from web/react/utils/channel_intro_mssages.jsx rename to web/react/utils/channel_intro_messages.jsx