Add error to UI when group member list fails to load

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>

src/components/views/groups/GroupMemberList.js

@@ -32,7 +32,9 @@ export default React.createClass({
     getInitialState: function() {
         return {
             members: null,
+            membersError: null,
             invitedMembers: null,
+            invitedMembersError: null,
             truncateAt: INITIAL_LOAD_NUM_MEMBERS,
         };
     },
@@ -50,6 +52,19 @@ export default React.createClass({
         GroupStore.registerListener(groupId, () => {
             this._fetchMembers();
         });
+        GroupStore.on('error', (err, errorGroupId, stateKey) => {
+            if (this._unmounted || groupId !== errorGroupId) return;
+            if (stateKey === GroupStore.STATE_KEY.GroupMembers) {
+                this.setState({
+                    membersError: err,
+                });
+            }
+            if (stateKey === GroupStore.STATE_KEY.GroupInvitedMembers) {
+                this.setState({
+                    invitedMembersError: err,
+                });
+            }
+        });
     },
 
     _fetchMembers: function() {
@@ -83,7 +98,11 @@ export default React.createClass({
         this.setState({ searchQuery: ev.target.value });
     },
 
-    makeGroupMemberTiles: function(query, memberList) {
+    makeGroupMemberTiles: function(query, memberList, memberListError) {
+        if (memberListError) {
+            return <div className="warning">{ _t("Failed to load group members") }</div>;
+        }
+
         const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile");
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         query = (query || "").toLowerCase();
@@ -153,15 +172,26 @@ export default React.createClass({
         );
 
         const joined = this.state.members ? <div className="mx_MemberList_joined">
-            { this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) }
+            {
+                this.makeGroupMemberTiles(
+                    this.state.searchQuery,
+                    this.state.members,
+                    this.state.membersError,
+                )
+            }
         </div> : <div />;
 
         const invited = (this.state.invitedMembers && this.state.invitedMembers.length > 0) ?
             <div className="mx_MemberList_invited">
-                <h2>{ _t("Invited") }</h2>
-                { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
+                <h2>{_t("Invited")}</h2>
+                {
+                    this.makeGroupMemberTiles(
+                        this.state.searchQuery,
+                        this.state.invitedMembers,
+                        this.state.invitedMembersError,
+                    )
+                }
             </div> : <div />;
-
         return (
             <div className="mx_MemberList">
                 { inputBox }

src/i18n/strings/en_EN.json

@@ -1107,6 +1107,7 @@
     "Community %(groupId)s not found": "Community %(groupId)s not found",
     "This Home server does not support communities": "This Home server does not support communities",
     "Failed to load %(groupId)s": "Failed to load %(groupId)s",
+    "Failed to load group members": "Failed to load group members",
     "Couldn't load home page": "Couldn't load home page",
     "You are currently using Riot anonymously as a guest.": "You are currently using Riot anonymously as a guest.",
     "If you would like to create a Matrix account you can <a>register</a> now.": "If you would like to create a Matrix account you can <a>register</a> now.",

src/i18n/strings/en_US.json

@@ -134,6 +134,8 @@
     "Failed to join room": "Failed to join room",
     "Failed to kick": "Failed to kick",
     "Failed to leave room": "Failed to leave room",
+    "Failed to load %(groupId)s": "Failed to load %(groupId)s",
+    "Failed to load group members": "Failed to load group members",
     "Failed to load timeline position": "Failed to load timeline position",
     "Failed to mute user": "Failed to mute user",
     "Failed to reject invite": "Failed to reject invite",