imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Separate fetching indicator state

Browse source
This commit is contained in:
Luke Barnard 2017-10-16 17:21:05 +01:00
parent 008e8d4f54
commit 9b08f4d11f
1 changed files with 27 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/views/groups/GroupMemberList.js
View file

@ -35,8 +35,9 @@ export default withMatrixClient(React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
fetching: false, fetching: false,
fetchingInvitedMembers: false,
members: null, members: null,
invited_members: null, invitedMembers: null,
truncateAt: INITIAL_LOAD_NUM_MEMBERS, truncateAt: INITIAL_LOAD_NUM_MEMBERS,
}; };
}, },
@ -47,7 +48,10 @@ export default withMatrixClient(React.createClass({
}, },
_fetchMembers: function() { _fetchMembers: function() {
this.setState({fetching: true}); this.setState({
fetching: true,
fetchingInvitedMembers: true,
});
this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => { this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
this.setState({ this.setState({
members: result.chunk.map((apiMember) => { members: result.chunk.map((apiMember) => {
@ -62,13 +66,13 @@ export default withMatrixClient(React.createClass({
this.props.matrixClient.getGroupInvitedUsers(this.props.groupId).then((result) => { this.props.matrixClient.getGroupInvitedUsers(this.props.groupId).then((result) => {
this.setState({ this.setState({
invited_members: result.chunk.map((apiMember) => { invitedMembers: result.chunk.map((apiMember) => {
return groupMemberFromApiObject(apiMember); return groupMemberFromApiObject(apiMember);
}), }),
fetching: false, fetchingInvitedMembers: false,
}); });
}).catch((e) => { }).catch((e) => {
this.setState({fetching: false}); this.setState({fetchingInvitedMembers: false});
console.error("Failed to get group invited member list: " + e); console.error("Failed to get group invited member list: " + e);
}); });
}, },
@ -98,6 +102,7 @@ export default withMatrixClient(React.createClass({
makeGroupMemberTiles: function(query, memberList) { makeGroupMemberTiles: function(query, memberList) {
const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile"); const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile");
const TruncatedList = sdk.getComponent("elements.TruncatedList");
query = (query || "").toLowerCase(); query = (query || "").toLowerCase();
if (query) { if (query) {
memberList = memberList.filter((m) => { memberList = memberList.filter((m) => {
@ -129,17 +134,19 @@ export default withMatrixClient(React.createClass({
} }
}); });
return memberList; return <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile}
>
{ memberList }
</TruncatedList>;
}, },
render: function() { render: function() {
if (this.state.fetching) { if (this.state.fetching || this.state.fetchingInvitedMembers) {
const Spinner = sdk.getComponent("elements.Spinner"); const Spinner = sdk.getComponent("elements.Spinner");
return (<div className="mx_MemberList"> return (<div className="mx_MemberList">
<Spinner /> <Spinner />
</div>); </div>);
} else if (this.state.members === null) {
return null;
} }
const inputBox = ( const inputBox = (
@ -150,26 +157,21 @@ export default withMatrixClient(React.createClass({
</form> </form>
); );
const TruncatedList = sdk.getComponent("elements.TruncatedList"); const joined = this.state.members ? <div className="mx_MemberList_joined">
{ this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) }
</div> : <div />;
const invited = this.state.invitedMembers ? <div className="mx_MemberList_invited">
<h2>{ _t("Invited") }</h2>
{ this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
</div> : <div />;
return ( return (
<div className="mx_MemberList"> <div className="mx_MemberList">
{ inputBox } { inputBox }
<GeminiScrollbar autoshow={true} className="mx_MemberList_outerWrapper"> <GeminiScrollbar autoshow={true} className="mx_MemberList_outerWrapper">
<div className="mx_MemberList_joined"> { joined }
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt} { invited }
createOverflowElement={this._createOverflowTile}>
{ this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) }
</TruncatedList>
</div>
<div className="mx_MemberList_invited">
<h2>{ _t("Invited") }</h2>
<div className="mx_MemberList_wrapper">
<TruncatedList truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile}>
{ this.makeGroupMemberTiles(this.state.searchQuery, this.state.invited_members) }
</TruncatedList>
</div>
</div>
</GeminiScrollbar> </GeminiScrollbar>
</div> </div>
); );