diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index e782618872..839d4bccda 100644 --- a/src/components/structures/UserMenu.tsx +++ b/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; interface IState { contextMenuPosition: PartialDOMRect; isDarkTheme: boolean; + selectedCommunityProfile: { + displayName: string; + avatarMxc: string; + }; } export default class UserMenu extends React.Component { private dispatcherRef: string; private themeWatcherRef: string; + private tagStoreRef: fbEmitter.EventSubscription; private buttonRef: React.RefObject = createRef(); constructor(props: IProps) { @@ -65,6 +73,7 @@ export default class UserMenu extends React.Component { 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 { 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 { 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 { public render() { const avatarSize = 32; // should match border-radius of the avatar - let name = {OwnProfileStore.instance.displayName}; + 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 = {displayName}; let buttons = ( {/* masked image in CSS */} @@ -324,9 +366,9 @@ export default class UserMenu extends React.Component {
t !== payload.tag);