From ed709f52d12b4108200ccf76c2e76a2bf75c78b9 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Tue, 7 Nov 2017 16:42:43 +0000
Subject: [PATCH] Use the getProfileInfo API for group inviter profile

---
 src/components/structures/GroupView.js | 46 ++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 24aa552890..97d842729b 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -450,6 +450,11 @@ export default React.createClass({
     },
 
     _initGroupStore: function(groupId) {
+        const group = MatrixClientPeg.get().getGroup(groupId);
+        if (group && group.inviter && group.inviter.userId) {
+            this._fetchInviterProfile(group.inviter.userId);
+        }
+
         this._groupStore = GroupStoreCache.getGroupStore(MatrixClientPeg.get(), groupId);
         this._groupStore.registerListener(() => {
             const summary = this._groupStore.getSummary();
@@ -481,6 +486,26 @@ export default React.createClass({
         });
     },
 
+    _fetchInviterProfile(userId) {
+        this.setState({
+            inviterProfileBusy: true,
+        });
+        MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
+            this.setState({
+                inviterProfile: {
+                    avatarUrl: resp.avatar_url,
+                    displayName: resp.displayname,
+                },
+            });
+        }).catch((e) => {
+            console.error('Error getting group inviter profile', e);
+        }).finally(() => {
+            this.setState({
+                inviterProfileBusy: false,
+            });
+        });
+    },
+
     _onShowRhsClick: function(ev) {
         dis.dispatch({ action: 'show_right_panel' });
     },
@@ -769,20 +794,37 @@ export default React.createClass({
 
     _getMembershipSection: function() {
         const Spinner = sdk.getComponent("elements.Spinner");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
         const group = MatrixClientPeg.get().getGroup(this.props.groupId);
         if (!group) return null;
 
         if (group.myMembership === 'invite') {
-            if (this.state.membershipBusy) {
+            if (this.state.membershipBusy || this.state.inviterProfileBusy) {
                 return <div className="mx_GroupView_membershipSection">
                     <Spinner />
                 </div>;
             }
+            const httpInviterAvatar = this.state.inviterProfile ?
+                MatrixClientPeg.get().mxcUrlToHttp(
+                    this.state.inviterProfile.avatarUrl, 36, 36,
+                ) : null;
+
+            let inviterName = group.inviter.userId;
+            if(this.state.inviterProfile) {
+                inviterName = this.state.inviterProfile.displayName || group.inviter.userId;
+            }
             return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited">
                 <div className="mx_GroupView_membershipSubSection">
                     <div className="mx_GroupView_membershipSection_description">
-                        { _t("%(inviter)s has invited you to join this community", {inviter: group.inviter.userId}) }
+                        <BaseAvatar url={httpInviterAvatar}
+                            name={inviterName}
+                            width={36}
+                            height={36}
+                        />
+                        { _t("%(inviter)s has invited you to join this community", {
+                            inviter: inviterName,
+                        }) }
                     </div>
                     <div className="mx_GroupView_membership_buttonContainer">
                         <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"