Merge pull request #6079 from matrix-org/gsouquet/switch-rooms

src/components/views/messages/SenderProfile.js

@@ -31,21 +31,23 @@ export default class SenderProfile extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    state = {
-        userGroups: null,
-        relatedGroups: [],
-    };
+    constructor(props) {
+        super(props);
+        const senderId = this.props.mxEvent.getSender();
 
+        this.state = {
+            userGroups: FlairStore.cachedPublicisedGroups(senderId) || [],
+            relatedGroups: [],
+        };
+    }
     componentDidMount() {
         this.unmounted = false;
         this._updateRelatedGroups();
 
-        FlairStore.getPublicisedGroupsCached(
-            this.context, this.props.mxEvent.getSender(),
-        ).then((userGroups) => {
-            if (this.unmounted) return;
-            this.setState({userGroups});
-        });
+        if (this.state.userGroups.length === 0) {
+            this.getPublicisedGroups();
+        }
+
 
         this.context.on('RoomState.events', this.onRoomStateEvents);
     }
@@ -55,6 +57,15 @@ export default class SenderProfile extends React.Component {
         this.context.removeListener('RoomState.events', this.onRoomStateEvents);
     }
 
+    async getPublicisedGroups() {
+        if (!this.unmounted) {
+            const userGroups = await FlairStore.getPublicisedGroupsCached(
+                this.context, this.props.mxEvent.getSender(),
+            );
+            this.setState({userGroups});
+        }
+    }
+
     onRoomStateEvents = event => {
         if (event.getType() === 'm.room.related_groups' &&
             event.getRoomId() === this.props.mxEvent.getRoomId()
@@ -93,10 +104,10 @@ export default class SenderProfile extends React.Component {
         const {msgtype} = mxEvent.getContent();
 
         if (msgtype === 'm.emote') {
-            return <span />; // emote message must include the name so don't duplicate it
+            return null; // emote message must include the name so don't duplicate it
         }
 
-        let flair = <div />;
+        let flair = null;
         if (this.props.enableFlair) {
             const displayedGroups = this._getDisplayedGroups(
                 this.state.userGroups, this.state.relatedGroups,
@@ -110,19 +121,12 @@ export default class SenderProfile extends React.Component {
 
         const nameElem = name || '';
 
-        // Name + flair
-        const nameFlair = <span>
-            <span className={`mx_SenderProfile_name ${colorClass}`}>
-                { nameElem }
-            </span>
-            { flair }
-        </span>;
-
         return (
-            <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
-                <div className="mx_SenderProfile_hover">
-                    { nameFlair }
-                </div>
+            <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
+                <span className={`mx_SenderProfile_name ${colorClass}`}>
+                    { nameElem }
+                </span>
+                { flair }
             </div>
         );
     }