Hoist activeSpace tracking from RoomList to LeftPanel

This commit is contained in:
Michael Telatynski 2021-03-24 19:43:09 +00:00
parent ee5d0d6842
commit 8369d42dd0
2 changed files with 22 additions and 17 deletions

View File

@ -16,9 +16,11 @@ limitations under the License.
import * as React from "react";
import { createRef } from "react";
import classNames from "classnames";
import { Room } from "matrix-js-sdk/src/models/room";
import GroupFilterPanel from "./GroupFilterPanel";
import CustomRoomTagPanel from "./CustomRoomTagPanel";
import classNames from "classnames";
import dis from "../../dispatcher/dispatcher";
import { _t } from "../../languageHandler";
import RoomList from "../views/rooms/RoomList";
@ -40,6 +42,7 @@ import RoomListNumResults from "../views/rooms/RoomListNumResults";
import LeftPanelWidget from "./LeftPanelWidget";
import {replaceableComponent} from "../../utils/replaceableComponent";
import {mediaFromMxc} from "../../customisations/Media";
import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
interface IProps {
isMinimized: boolean;
@ -49,6 +52,7 @@ interface IProps {
interface IState {
showBreadcrumbs: boolean;
showGroupFilterPanel: boolean;
activeSpace?: Room;
}
// List of CSS classes which should be included in keyboard navigation within the room list
@ -74,11 +78,13 @@ export default class LeftPanel extends React.Component<IProps, IState> {
this.state = {
showBreadcrumbs: BreadcrumbsStore.instance.visible,
showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
activeSpace: SpaceStore.instance.activeSpace,
};
BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
this.bgImageWatcherRef = SettingsStore.watchSetting(
"RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
@ -96,9 +102,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
}
private updateActiveSpace = (activeSpace: Room) => {
this.setState({ activeSpace });
};
private onExplore = () => {
dis.fire(Action.ViewRoomDirectory);
};
@ -407,6 +418,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
onBlur={this.onBlur}
isMinimized={this.props.isMinimized}
onResize={this.onResize}
activeSpace={this.state.activeSpace}
/>;
const containerClasses = classNames({

View File

@ -66,13 +66,13 @@ interface IProps {
onResize: () => void;
resizeNotifier: ResizeNotifier;
isMinimized: boolean;
activeSpace: Room;
}
interface IState {
sublists: ITagMap;
isNameFiltering: boolean;
currentRoomId?: string;
activeSpace: Room;
suggestedRooms: ISpaceSummaryRoom[];
}
@ -200,7 +200,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
/>
<IconizedContextMenuOption
label={_t("Explore rooms")}
iconClassName="mx_RoomList_iconExplore"
iconClassName="mx_RoomList_iconBrowse"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -287,7 +287,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
this.state = {
sublists: {},
isNameFiltering: !!RoomListStore.instance.getFirstNameFilterCondition(),
activeSpace: SpaceStore.instance.activeSpace,
suggestedRooms: SpaceStore.instance.suggestedRooms,
};
@ -300,7 +299,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
}
public componentDidMount(): void {
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms);
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists);
@ -308,7 +306,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
}
public componentWillUnmount() {
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
SpaceStore.instance.off(SUGGESTED_ROOMS, this.updateSuggestedRooms);
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
defaultDispatcher.unregister(this.dispatcherRef);
@ -374,10 +371,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
return room;
};
private updateActiveSpace = (activeSpace: Room) => {
this.setState({ activeSpace });
};
private updateSuggestedRooms = (suggestedRooms: ISpaceSummaryRoom[]) => {
this.setState({ suggestedRooms });
};
@ -438,12 +431,12 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
private onSpaceInviteClick = () => {
const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
if (this.state.activeSpace.getJoinRule() === "public") {
if (this.props.activeSpace.getJoinRule() === "public") {
const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
title: _t("Invite to %(spaceName)s", { spaceName: this.state.activeSpace.name }),
title: _t("Invite to %(spaceName)s", { spaceName: this.props.activeSpace.name }),
description: <React.Fragment>
<span>{ _t("Share your public space") }</span>
<SpacePublicShare space={this.state.activeSpace} onFinished={() => modal.close()} />
<SpacePublicShare space={this.props.activeSpace} onFinished={() => modal.close()} />
</React.Fragment>,
fixedWidth: false,
button: false,
@ -451,7 +444,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
hasCloseButton: true,
});
} else {
showRoomInviteDialog(this.state.activeSpace.roomId, initialText);
showRoomInviteDialog(this.props.activeSpace.roomId, initialText);
}
};
@ -600,13 +593,13 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
kind="link"
onClick={this.onExplore}
>
{ this.state.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") }
{ this.props.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") }
</AccessibleButton>
</div>;
} else if (this.state.activeSpace) {
} else if (this.props.activeSpace) {
explorePrompt = <div className="mx_RoomList_explorePrompt">
<div>{ _t("Quick actions") }</div>
{ this.state.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) && <AccessibleButton
{ this.props.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) && <AccessibleButton
className="mx_RoomList_explorePrompt_spaceInvite"
onClick={this.onSpaceInviteClick}
>