From 4a36e32c8d9f274db6d8844b59adaa4b76a9ceec Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 22 Sep 2017 14:52:52 +0100
Subject: [PATCH 1/2] Show displayname & avatar url in group member list

---
 src/components/views/groups/GroupMemberList.js | 4 ++--
 src/components/views/groups/GroupMemberTile.js | 7 +++++--
 src/groups.js                                  | 4 ++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 85e17a5bb3..a6f57e1120 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -91,10 +91,10 @@ export default withMatrixClient(React.createClass({
         if (query) {
             memberList = memberList.filter((m) => {
                 // TODO: add this when we have this info from the API
-                //const matchesName = m.name.toLowerCase().indexOf(query) !== -1;
+                const matchesName = m.displayname.toLowerCase().indexOf(query) !== -1;
                 const matchesId = m.userId.toLowerCase().includes(query);
 
-                if (/*!matchesName &&*/ !matchesId) {
+                if (!matchesName && !matchesId) {
                     return false;
                 }
 
diff --git a/src/components/views/groups/GroupMemberTile.js b/src/components/views/groups/GroupMemberTile.js
index 9ffde967f0..705fa56cae 100644
--- a/src/components/views/groups/GroupMemberTile.js
+++ b/src/components/views/groups/GroupMemberTile.js
@@ -47,10 +47,13 @@ export default withMatrixClient(React.createClass({
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EntityTile = sdk.getComponent('rooms.EntityTile');
 
-        const name = this.props.member.userId;
+        const name = this.props.member.displayname || this.props.member.userId;
 
         const av = (
-            <BaseAvatar name={this.props.member.userId} width={36} height={36} />
+            <BaseAvatar name={this.props.member.userId}
+                width={36} height={36}
+                url={this.props.matrixClient.mxcUrlToHttp(this.props.member.avatarUrl)}
+            />
         );
 
         return (
diff --git a/src/groups.js b/src/groups.js
index 06627a4ae3..24c0562bde 100644
--- a/src/groups.js
+++ b/src/groups.js
@@ -18,10 +18,14 @@ import PropTypes from 'prop-types';
 
 export const GroupMemberType = PropTypes.shape({
     userId: PropTypes.string.isRequired,
+    displayname: PropTypes.string,
+    avatarUrl: PropTypes.string,
 });
 
 export function groupMemberFromApiObject(apiObject) {
     return {
         userId: apiObject.user_id,
+        displayname: apiObject.displayname,
+        avatarUrl: apiObject.avatar_url,
     };
 }

From 0f9f1c85a80232d483403b6820472b25fc0c7124 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 22 Sep 2017 14:58:49 +0100
Subject: [PATCH 2/2] Remove done todo

---
 src/components/views/groups/GroupMemberList.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index a6f57e1120..273a04da20 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -90,7 +90,6 @@ export default withMatrixClient(React.createClass({
         let memberList = this.state.members;
         if (query) {
             memberList = memberList.filter((m) => {
-                // TODO: add this when we have this info from the API
                 const matchesName = m.displayname.toLowerCase().indexOf(query) !== -1;
                 const matchesId = m.userId.toLowerCase().includes(query);