From e64cc3b666c9f2e9ac76ee23218b7c7c55815470 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 21 Sep 2017 13:25:36 +0100
Subject: [PATCH 1/2] Implement `view_group` dispatch when clicking flair

---
 src/components/views/elements/Flair.js | 53 ++++++++++++++++++++------
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js
index cb60be4fef..bb72786073 100644
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -20,6 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClient} from 'matrix-js-sdk';
 import UserSettingsStore from '../../../UserSettingsStore';
+import dis from '../../../dispatcher';
 import Promise from 'bluebird';
 
 const BULK_REQUEST_DEBOUNCE_MS = 200;
@@ -121,14 +122,47 @@ async function getGroupProfileCached(matrixClient, groupId) {
     }
 
     groupProfiles[groupId] = await matrixClient.getGroupProfile(groupId);
+    groupProfiles[groupId].group_id = groupId;
+
     return groupProfiles[groupId];
 }
 
+class FlairAvatar extends React.Component {
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(ev) {
+        ev.preventDefault();
+        // Don't trigger onClick of parent element
+        ev.stopPropagation();
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.groupProfile.group_id,
+        });
+    }
+
+    render() {
+        const httpUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.props.groupProfile.avatar_url, 14, 14, 'scale', false);
+        return <img src={httpUrl} width="14px" height="14px" onClick={this.onClick}/>;
+    }
+}
+
+FlairAvatar.propTypes = {
+    groupProfile: PropTypes.string,
+};
+
+FlairAvatar.contextTypes = {
+    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+};
+
 export default class Flair extends React.Component {
     constructor() {
         super();
         this.state = {
-            avatarUrls: [],
+            profiles: [],
         };
     }
 
@@ -143,7 +177,7 @@ export default class Flair extends React.Component {
         }
     }
 
-    async _getAvatarUrls(groups) {
+    async _getGroupProfiles(groups) {
         const profiles = [];
         for (const groupId of groups) {
             let groupProfile = null;
@@ -154,9 +188,7 @@ export default class Flair extends React.Component {
             }
             profiles.push(groupProfile);
         }
-
-        const avatarUrls = profiles.filter((p) => p !== null).map((p) => p.avatar_url);
-        return avatarUrls;
+        return profiles.filter((p) => p !== null);
     }
 
     async _generateAvatars() {
@@ -176,19 +208,18 @@ export default class Flair extends React.Component {
         if (!groups || groups.length === 0) {
             return;
         }
-        const avatarUrls = await this._getAvatarUrls(groups);
+        const profiles = await this._getGroupProfiles(groups);
         if (!this.unmounted) {
-            this.setState({avatarUrls});
+            this.setState({profiles});
         }
     }
 
     render() {
-        if (this.state.avatarUrls.length === 0) {
+        if (this.state.profiles.length === 0) {
             return <div />;
         }
-        const avatars = this.state.avatarUrls.map((avatarUrl, index) => {
-            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 14, 14, 'scale', false);
-            return <img key={index} src={httpUrl} width="14px" height="14px"/>;
+        const avatars = this.state.profiles.map((profile, index) => {
+            return <FlairAvatar key={index} groupProfile={profile}/>;
         });
         return (
             <span className="mx_Flair" style={{"marginLeft": "5px", "verticalAlign": "-3px"}}>

From 41a9ff22fbbcea2eb2a96071e54afc4d967a2cee Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 21 Sep 2017 14:22:43 +0100
Subject: [PATCH 2/2] Rename profile object properties to camelCase

Also, add correct PropTypes for FlairAvatar
---
 src/components/views/elements/Flair.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js
index bb72786073..cce115dc45 100644
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -121,8 +121,11 @@ async function getGroupProfileCached(matrixClient, groupId) {
         return groupProfiles[groupId];
     }
 
-    groupProfiles[groupId] = await matrixClient.getGroupProfile(groupId);
-    groupProfiles[groupId].group_id = groupId;
+    const profile = await matrixClient.getGroupProfile(groupId);
+    groupProfiles[groupId] = {
+        groupId,
+        avatarUrl: profile.avatar_url,
+    };
 
     return groupProfiles[groupId];
 }
@@ -139,19 +142,22 @@ class FlairAvatar extends React.Component {
         ev.stopPropagation();
         dis.dispatch({
             action: 'view_group',
-            group_id: this.props.groupProfile.group_id,
+            group_id: this.props.groupProfile.groupId,
         });
     }
 
     render() {
         const httpUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.props.groupProfile.avatar_url, 14, 14, 'scale', false);
+            this.props.groupProfile.avatarUrl, 14, 14, 'scale', false);
         return <img src={httpUrl} width="14px" height="14px" onClick={this.onClick}/>;
     }
 }
 
 FlairAvatar.propTypes = {
-    groupProfile: PropTypes.string,
+    groupProfile: PropTypes.shape({
+        groupId: PropTypes.string.isRequired,
+        avatarUrl: PropTypes.string.isRequired,
+    }),
 };
 
 FlairAvatar.contextTypes = {