From 357063044b2dc4a89a7d30601c16805880514997 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 7 Jan 2016 10:25:56 -0500 Subject: Made ChannelInviteModal pull all channel members before rendering --- web/react/components/channel_invite_modal.jsx | 31 +++++++++++++++++++++------ web/react/utils/async_client.jsx | 3 ++- web/react/utils/client.jsx | 11 ++++++++-- 3 files changed, 35 insertions(+), 10 deletions(-) (limited to 'web') diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index 7dac39942..8b7485e5f 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -20,9 +20,14 @@ export default class ChannelInviteModal extends React.Component { this.onListenerChange = this.onListenerChange.bind(this); this.handleInvite = this.handleInvite.bind(this); - this.state = this.getStateFromStores(); + // the state gets populated when the modal is shown + this.state = {}; } shouldComponentUpdate(nextProps, nextState) { + if (!this.props.show && !nextProps.show) { + return false; + } + if (!Utils.areObjectsEqual(this.props, nextProps)) { return true; } @@ -34,13 +39,25 @@ export default class ChannelInviteModal extends React.Component { return false; } getStateFromStores() { - function getId(user) { - return user.id; + const users = UserStore.getActiveOnlyProfiles(); + + if ($.isEmptyObject(users)) { + return { + loading: true + }; + } + + // make sure we have all members of this channel before rendering + const extraInfo = ChannelStore.getCurrentExtraInfo(); + if (extraInfo.member_count !== extraInfo.members.length) { + AsyncClient.getChannelExtraInfo(this.props.channel.id, -1); + + return { + loading: true + }; } - var users = UserStore.getActiveOnlyProfiles(); - var memberIds = ChannelStore.getCurrentExtraInfo().members.map(getId); - var loading = $.isEmptyObject(users); + const memberIds = extraInfo.members.map((user) => user.id); var nonmembers = []; for (var id in users) { @@ -55,7 +72,7 @@ export default class ChannelInviteModal extends React.Component { return { nonmembers, - loading + loading: false }; } onShow() { diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index f218270da..0ee89b9fa 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -168,7 +168,7 @@ export function getMoreChannels(force) { } } -export function getChannelExtraInfo(id) { +export function getChannelExtraInfo(id, memberLimit) { let channelId; if (id) { channelId = id; @@ -185,6 +185,7 @@ export function getChannelExtraInfo(id) { client.getChannelExtraInfo( channelId, + memberLimit, (data, textStatus, xhr) => { callTracker['getChannelExtraInfo_' + channelId] = 0; diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index e1c331aff..96d1ef720 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -824,10 +824,17 @@ export function getChannelCounts(success, error) { }); } -export function getChannelExtraInfo(id, success, error) { +export function getChannelExtraInfo(id, memberLimit, success, error) { + let url = '/api/v1/channels/' + id + '/extra_info'; + + if (memberLimit) { + url += '/' + memberLimit; + } + $.ajax({ - url: '/api/v1/channels/' + id + '/extra_info', + url, dataType: 'json', + contentType: 'application/json', type: 'GET', success, error: function onError(xhr, status, err) { -- cgit v1.2.3-1-g7c22 From d7230e8753c848725ba5b61d11b29b6280fce94b Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 7 Jan 2016 10:26:43 -0500 Subject: Added a loading screen to ChannelMembersModal and made it pull all channel members before rendering --- web/react/components/channel_members_modal.jsx | 49 +++++++++++++++++++------- 1 file changed, 36 insertions(+), 13 deletions(-) (limited to 'web') diff --git a/web/react/components/channel_members_modal.jsx b/web/react/components/channel_members_modal.jsx index d1b9df988..513a720e7 100644 --- a/web/react/components/channel_members_modal.jsx +++ b/web/react/components/channel_members_modal.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import LoadingScreen from './loading_screen.jsx'; import MemberList from './member_list.jsx'; import ChannelInviteModal from './channel_invite_modal.jsx'; @@ -21,9 +22,10 @@ export default class ChannelMembersModal extends React.Component { this.onChange = this.onChange.bind(this); this.handleRemove = this.handleRemove.bind(this); - const state = this.getStateFromStores(); - state.showInviteModal = false; - this.state = state; + // the rest of the state gets populated when the modal is shown + this.state = { + showInviteModal: false + }; } shouldComponentUpdate(nextProps, nextState) { if (!Utils.areObjectsEqual(this.props, nextProps)) { @@ -37,8 +39,18 @@ export default class ChannelMembersModal extends React.Component { return false; } getStateFromStores() { + const extraInfo = ChannelStore.getCurrentExtraInfo(); + + if (extraInfo.member_count !== extraInfo.members.length) { + AsyncClient.getChannelExtraInfo(this.props.channel.id, -1); + + return { + loading: true + }; + } + const users = UserStore.getActiveOnlyProfiles(); - const memberList = ChannelStore.getCurrentExtraInfo().members; + const memberList = extraInfo.members; const nonmemberList = []; for (const id in users) { @@ -71,14 +83,14 @@ export default class ChannelMembersModal extends React.Component { return { nonmemberList, - memberList + memberList, + loading: false }; } onShow() { if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } - this.onChange(); } componentDidUpdate(prevProps) { if (this.props.show && !prevProps.show) { @@ -89,6 +101,8 @@ export default class ChannelMembersModal extends React.Component { if (!this.props.show && nextProps.show) { ChannelStore.addExtraInfoChangeListener(this.onChange); ChannelStore.addChangeListener(this.onChange); + + this.onChange(); } else if (this.props.show && !nextProps.show) { ChannelStore.removeExtraInfoChangeListener(this.onChange); ChannelStore.removeChangeListener(this.onChange); @@ -154,6 +168,21 @@ export default class ChannelMembersModal extends React.Component { isAdmin = Utils.isAdmin(currentMember.roles) || Utils.isAdmin(UserStore.getCurrentUser().roles); } + let content; + if (this.state.loading) { + content = (); + } else { + content = ( +
+ +
+ ); + } + return (
-
- -
+ {content}