Show the selected community in the top left menu

src/components/structures/UserMenu.tsx

@@ -42,6 +42,9 @@ import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList
 } from "../views/context_menus/IconizedContextMenu";
+import TagOrderStore from "../../stores/TagOrderStore";
+import * as fbEmitter from "fbemitter";
+import FlairStore from "../../stores/FlairStore";
 
 interface IProps {
     isMinimized: boolean;
@@ -52,11 +55,16 @@ type PartialDOMRect = Pick<DOMRect, "width" | "left" | "top" | "height">;
 interface IState {
     contextMenuPosition: PartialDOMRect;
     isDarkTheme: boolean;
+    selectedCommunityProfile: {
+        displayName: string;
+        avatarMxc: string;
+    };
 }
 
 export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private themeWatcherRef: string;
+    private tagStoreRef: fbEmitter.EventSubscription;
     private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
 
     constructor(props: IProps) {
@@ -65,6 +73,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.state = {
             contextMenuPosition: null,
             isDarkTheme: this.isUserOnDarkTheme(),
+            selectedCommunityProfile: null,
         };
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@@ -77,6 +86,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public componentDidMount() {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
+        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
@@ -93,6 +103,25 @@ export default class UserMenu extends React.Component<IProps, IState> {
         return theme === "dark";
     }
 
+    private onTagStoreUpdate = async () => {
+        if (!SettingsStore.getValue("feature_communities_v2_prototypes")) {
+            return;
+        }
+
+        const selectedId = TagOrderStore.getSelectedTags()[0];
+        if (!selectedId) {
+            this.setState({selectedCommunityProfile: null});
+            return;
+        }
+
+        // For some reason the group's profile info isn't on the js-sdk Group object but
+        // is in the flair store, so get it from there.
+        const profile = await FlairStore.getGroupProfileCached(MatrixClientPeg.get(), selectedId);
+        const displayName = profile.name || selectedId;
+        const avatarMxc = profile.avatarUrl;
+        this.setState({selectedCommunityProfile: {displayName, avatarMxc}});
+    };
+
     private onProfileUpdate = async () => {
         // the store triggered an update, so force a layout update. We don't
         // have any state to store here for that to magically happen.
@@ -295,7 +324,20 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public render() {
         const avatarSize = 32; // should match border-radius of the avatar
 
-        let name = <span className="mx_UserMenu_userName">{OwnProfileStore.instance.displayName}</span>;
+        let displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
+        let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+
+        if (this.state.selectedCommunityProfile) {
+            displayName = this.state.selectedCommunityProfile.displayName
+            const mxc = this.state.selectedCommunityProfile.avatarMxc;
+            if (mxc) {
+                avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(mxc, avatarSize, avatarSize);
+            } else {
+                avatarUrl = null;
+            }
+        }
+
+        let name = <span className="mx_UserMenu_userName">{displayName}</span>;
         let buttons = (
             <span className="mx_UserMenu_headerButtons">
                 {/* masked image in CSS */}
@@ -324,9 +366,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     <div className="mx_UserMenu_row">
                         <span className="mx_UserMenu_userAvatarContainer">
                             <BaseAvatar
-                                idName={MatrixClientPeg.get().getUserId()}
-                                name={OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId()}
-                                url={OwnProfileStore.instance.getHttpAvatarUrl(avatarSize)}
+                                idName={displayName}
+                                name={displayName}
+                                url={avatarUrl}
                                 width={avatarSize}
                                 height={avatarSize}
                                 resizeMethod="crop"