diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 00d84ad1fc..f800130a32 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -35,8 +35,9 @@ export default withMatrixClient(React.createClass({ getInitialState: function() { return { fetching: false, + fetchingInvitedMembers: false, members: null, - invited_members: null, + invitedMembers: null, truncateAt: INITIAL_LOAD_NUM_MEMBERS, }; }, @@ -47,7 +48,10 @@ export default withMatrixClient(React.createClass({ }, _fetchMembers: function() { - this.setState({fetching: true}); + this.setState({ + fetching: true, + fetchingInvitedMembers: true, + }); this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => { this.setState({ members: result.chunk.map((apiMember) => { @@ -62,13 +66,13 @@ export default withMatrixClient(React.createClass({ this.props.matrixClient.getGroupInvitedUsers(this.props.groupId).then((result) => { this.setState({ - invited_members: result.chunk.map((apiMember) => { + invitedMembers: result.chunk.map((apiMember) => { return groupMemberFromApiObject(apiMember); }), - fetching: false, + fetchingInvitedMembers: false, }); }).catch((e) => { - this.setState({fetching: false}); + this.setState({fetchingInvitedMembers: false}); console.error("Failed to get group invited member list: " + e); }); }, @@ -98,6 +102,7 @@ export default withMatrixClient(React.createClass({ makeGroupMemberTiles: function(query, memberList) { const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile"); + const TruncatedList = sdk.getComponent("elements.TruncatedList"); query = (query || "").toLowerCase(); if (query) { memberList = memberList.filter((m) => { @@ -129,17 +134,19 @@ export default withMatrixClient(React.createClass({ } }); - return memberList; + return + { memberList } + ; }, render: function() { - if (this.state.fetching) { + if (this.state.fetching || this.state.fetchingInvitedMembers) { const Spinner = sdk.getComponent("elements.Spinner"); return (
); - } else if (this.state.members === null) { - return null; } const inputBox = ( @@ -150,26 +157,21 @@ export default withMatrixClient(React.createClass({ ); - const TruncatedList = sdk.getComponent("elements.TruncatedList"); + const joined = this.state.members ?
+ { this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) } +
:
; + + const invited = this.state.invitedMembers ?
+

{ _t("Invited") }

+ { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) } +
:
; + return (
{ inputBox } -
- - { this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) } - -
-
-

{ _t("Invited") }

-
- - { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invited_members) } - -
-
+ { joined } + { invited }
);