From 008e8d4f545309396ca7a4644a31b75f7012f116 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 16 Oct 2017 16:38:32 +0100
Subject: [PATCH 1/2] Show "Invited" section in the user list

---
 .../views/groups/GroupMemberList.js           | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 6a257259f9a..00d84ad1fcd 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -36,6 +36,7 @@ export default withMatrixClient(React.createClass({
         return {
             fetching: false,
             members: null,
+            invited_members: null,
             truncateAt: INITIAL_LOAD_NUM_MEMBERS,
         };
     },
@@ -58,6 +59,18 @@ export default withMatrixClient(React.createClass({
             this.setState({fetching: false});
             console.error("Failed to get group member list: " + e);
         });
+
+        this.props.matrixClient.getGroupInvitedUsers(this.props.groupId).then((result) => {
+            this.setState({
+                invited_members: result.chunk.map((apiMember) => {
+                    return groupMemberFromApiObject(apiMember);
+                }),
+                fetching: false,
+            });
+        }).catch((e) => {
+            this.setState({fetching: false});
+            console.error("Failed to get group invited member list: " + e);
+        });
     },
 
     _createOverflowTile: function(overflowCount, totalCount) {
@@ -83,11 +96,9 @@ export default withMatrixClient(React.createClass({
         this.setState({ searchQuery: ev.target.value });
     },
 
-    makeGroupMemberTiles: function(query) {
+    makeGroupMemberTiles: function(query, memberList) {
         const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile");
         query = (query || "").toLowerCase();
-
-        let memberList = this.state.members;
         if (query) {
             memberList = memberList.filter((m) => {
                 const matchesName = m.displayname.toLowerCase().indexOf(query) !== -1;
@@ -143,11 +154,22 @@ export default withMatrixClient(React.createClass({
         return (
             <div className="mx_MemberList">
                 { inputBox }
-                <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
-                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
-                            createOverflowElement={this._createOverflowTile}>
-                        { this.makeGroupMemberTiles(this.state.searchQuery) }
-                    </TruncatedList>
+                <GeminiScrollbar autoshow={true} className="mx_MemberList_outerWrapper">
+                    <div className="mx_MemberList_joined">
+                        <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
+                                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>
             </div>
         );

From 9b08f4d11f55bdbc823214b75a9b51dc2f9aae48 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 16 Oct 2017 17:21:05 +0100
Subject: [PATCH 2/2] Separate fetching indicator state

---
 .../views/groups/GroupMemberList.js           | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 00d84ad1fcd..f800130a328 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 <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
+            createOverflowElement={this._createOverflowTile}
+        >
+            { memberList }
+        </TruncatedList>;
     },
 
     render: function() {
-        if (this.state.fetching) {
+        if (this.state.fetching || this.state.fetchingInvitedMembers) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return (<div className="mx_MemberList">
                 <Spinner />
             </div>);
-        } else if (this.state.members === null) {
-            return null;
         }
 
         const inputBox = (
@@ -150,26 +157,21 @@ export default withMatrixClient(React.createClass({
             </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 (
             <div className="mx_MemberList">
                 { inputBox }
                 <GeminiScrollbar autoshow={true} className="mx_MemberList_outerWrapper">
-                    <div className="mx_MemberList_joined">
-                        <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
-                                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>
+                    { joined }
+                    { invited }
                 </GeminiScrollbar>
             </div>
         );