From 2575cb1e689eec250cc1a9dd1baa31a6aaadae82 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 6 Dec 2021 18:43:21 +0100 Subject: [PATCH 01/76] RightPanelStore getSharedInstance() > get instance --- src/components/structures/GroupView.js | 6 +++--- src/components/structures/RightPanel.tsx | 6 +++--- src/components/structures/RoomView.tsx | 8 ++++---- src/components/structures/SpaceRoomView.tsx | 6 +++--- src/components/structures/ThreadView.tsx | 2 +- src/components/views/right_panel/HeaderButtons.tsx | 6 +++--- .../views/right_panel/RoomHeaderButtons.tsx | 4 ++-- src/stores/RightPanelStore.ts | 13 ++++++------- 8 files changed, 25 insertions(+), 26 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index c6aea695c92..d858815b4b6 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -428,7 +428,7 @@ export default class GroupView extends React.Component { membershipBusy: false, publicityBusy: false, inviterProfile: null, - showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup, + showRightPanel: RightPanelStore.instance.isOpenForGroup, showUpgradeNotice: !localStorage.getItem(UPGRADE_NOTICE_LS_KEY), }; @@ -440,7 +440,7 @@ export default class GroupView extends React.Component { this._initGroupStore(this.props.groupId, true); this._dispatcherRef = dis.register(this._onAction); - this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate); + this._rightPanelStoreToken = RightPanelStore.instance.addListener(this._onRightPanelStoreUpdate); } componentWillUnmount() { @@ -469,7 +469,7 @@ export default class GroupView extends React.Component { _onRightPanelStoreUpdate = () => { this.setState({ - showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup, + showRightPanel: RightPanelStore.instance.isOpenForGroup, }); }; diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 63084e589c2..64f5ec8dfa5 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -90,7 +90,7 @@ export default class RightPanel extends React.Component { constructor(props, context) { super(props, context); this.state = { - ...RightPanelStore.getSharedInstance().roomPanelPhaseParams, + ...RightPanelStore.instance.roomPanelPhaseParams, phase: this.getPhaseFromProps(), isUserPrivilegedInGroup: null, member: this.getUserForPanel(), @@ -106,13 +106,13 @@ export default class RightPanel extends React.Component { // as both are called at the same time in the constructor. private getUserForPanel(): RoomMember { if (this.state && this.state.member) return this.state.member; - const lastParams = RightPanelStore.getSharedInstance().roomPanelPhaseParams; + const lastParams = RightPanelStore.instance.roomPanelPhaseParams; return this.props.member || lastParams['member']; } // gets the current phase from the props and also maybe the store private getPhaseFromProps() { - const rps = RightPanelStore.getSharedInstance(); + const rps = RightPanelStore.instance; const userForPanel = this.getUserForPanel(); if (this.props.groupId) { if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 5f3f3413a0d..afe7f37a2f1 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -245,7 +245,7 @@ export class RoomView extends React.Component { canPeek: false, showApps: false, isPeeking: false, - showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom, + showRightPanel: RightPanelStore.instance.isOpenForRoom, joining: false, atEndOfLiveTimeline: true, atEndOfLiveTimelineInit: false, @@ -288,7 +288,7 @@ export class RoomView extends React.Component { this.context.on("Event.decrypted", this.onEventDecrypted); // Start listening for RoomViewStore updates this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); - this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate); + this.rightPanelStoreToken = RightPanelStore.instance.addListener(this.onRightPanelStoreUpdate); WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate); @@ -360,7 +360,7 @@ export class RoomView extends React.Component { // This is a hack to hide the chat. This should not be necessary once the right panel // phase is stored per room. (need to be done after check widget so that mainSplitContentType is updated) if ( - RightPanelStore.getSharedInstance().roomPanelPhase === RightPanelPhases.Timeline && + RightPanelStore.instance.roomPanelPhase === RightPanelPhases.Timeline && this.state.showRightPanel && !WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room) ) { @@ -786,7 +786,7 @@ export class RoomView extends React.Component { private onRightPanelStoreUpdate = () => { this.setState({ - showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom, + showRightPanel: RightPanelStore.instance.isOpenForRoom, }); }; diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index d15552e6888..f2b8e4f781c 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -814,12 +814,12 @@ export default class SpaceRoomView extends React.PureComponent { this.state = { phase, - showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom, + showRightPanel: RightPanelStore.instance.isOpenForRoom, myMembership: this.props.space.getMyMembership(), }; this.dispatcherRef = defaultDispatcher.register(this.onAction); - this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate); + this.rightPanelStoreToken = RightPanelStore.instance.addListener(this.onRightPanelStoreUpdate); this.context.on("Room.myMembership", this.onMyMembership); } @@ -837,7 +837,7 @@ export default class SpaceRoomView extends React.PureComponent { private onRightPanelStoreUpdate = () => { this.setState({ - showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom, + showRightPanel: RightPanelStore.instance.isOpenForRoom, }); }; diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index 5cf8f4a9b6e..9cd1643d647 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -206,7 +206,7 @@ export default class ThreadView extends React.Component { event_id: this.state.thread?.id, }; - let previousPhase = RightPanelStore.getSharedInstance().previousPhase; + let previousPhase = RightPanelStore.instance.previousPhase; if (!SettingsStore.getValue("feature_maximised_widgets")) { previousPhase = RightPanelPhases.ThreadPanel; } diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 8d000a29fc8..2bbe58fff7a 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -50,7 +50,7 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component extends React.Component { private onRoomSummaryClicked = () => { // use roomPanelPhase rather than this.state.phase as it remembers the latest one if we close - const lastPhase = RightPanelStore.getSharedInstance().roomPanelPhase; + const lastPhase = RightPanelStore.instance.roomPanelPhase; if (ROOM_INFO_PHASES.includes(lastPhase)) { if (this.state.phase === lastPhase) { this.setPhase(lastPhase); } else { - this.setPhase(lastPhase, RightPanelStore.getSharedInstance().roomPanelPhaseParams); + this.setPhase(lastPhase, RightPanelStore.instance.roomPanelPhaseParams); } } else { // This toggles for us, if needed diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts index 401eada16c3..be7256bcffe 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/RightPanelStore.ts @@ -67,7 +67,7 @@ const MEMBER_INFO_PHASES = [ * sessions. */ export default class RightPanelStore extends Store { - private static instance: RightPanelStore; + private static internalInstance: RightPanelStore; private state: RightPanelStoreState; private lastRoomId: string; @@ -233,13 +233,12 @@ export default class RightPanelStore extends Store { break; } } - - static getSharedInstance(): RightPanelStore { - if (!RightPanelStore.instance) { - RightPanelStore.instance = new RightPanelStore(); + public static get instance(): RightPanelStore { + if (!RightPanelStore.internalInstance) { + RightPanelStore.internalInstance = new RightPanelStore(); } - return RightPanelStore.instance; + return RightPanelStore.internalInstance; } } -window.mxRightPanelStore = RightPanelStore.getSharedInstance(); +window.mxRightPanelStore = RightPanelStore.instance; From 790e162553c880a1267b3fd9856d4089974c280d Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 14:33:17 +0100 Subject: [PATCH 02/76] initial working refactor --- src/components/structures/GroupView.js | 8 +- src/components/structures/RightPanel.tsx | 131 ++-- src/components/structures/RoomView.tsx | 11 +- src/components/structures/SpaceRoomView.tsx | 7 +- src/components/structures/ThreadView.tsx | 2 +- .../views/right_panel/HeaderButtons.tsx | 23 +- .../views/right_panel/RoomHeaderButtons.tsx | 15 +- src/dispatcher/actions.ts | 10 + src/settings/Settings.tsx | 32 +- src/stores/RightPanelStore.ts | 565 +++++++++++++----- 10 files changed, 559 insertions(+), 245 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index d858815b4b6..57c8b6c5aa6 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -44,6 +44,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent"; import { createSpaceFromCommunity } from "../../utils/space"; import { Action } from "../../dispatcher/actions"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import { UPDATE_EVENT } from "../../stores/AsyncStore"; import { logger } from "matrix-js-sdk/src/logger"; @@ -440,7 +441,7 @@ export default class GroupView extends React.Component { this._initGroupStore(this.props.groupId, true); this._dispatcherRef = dis.register(this._onAction); - this._rightPanelStoreToken = RightPanelStore.instance.addListener(this._onRightPanelStoreUpdate); + RightPanelStore.instance.on(UPDATE_EVENT, this._onRightPanelStoreUpdate); } componentWillUnmount() { @@ -448,10 +449,7 @@ export default class GroupView extends React.Component { this._matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership); dis.unregister(this._dispatcherRef); - // Remove RightPanelStore listener - if (this._rightPanelStoreToken) { - this._rightPanelStoreToken.remove(); - } + RightPanelStore.instance.off(UPDATE_EVENT, this._onRightPanelStoreUpdate); } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 64f5ec8dfa5..9d535fa294d 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -25,8 +25,8 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque import dis from '../../dispatcher/dispatcher'; import GroupStore from '../../stores/GroupStore'; import { - RIGHT_PANEL_PHASES_NO_ARGS, - RIGHT_PANEL_SPACE_PHASES, + // RIGHT_PANEL_PHASES_NO_ARGS, + // RIGHT_PANEL_SPACE_PHASES, RightPanelPhases, } from "../../stores/RightPanelStorePhases"; import RightPanelStore from "../../stores/RightPanelStore"; @@ -50,11 +50,12 @@ import NotificationPanel from "./NotificationPanel"; import ResizeNotifier from "../../utils/ResizeNotifier"; import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard"; import { throttle } from 'lodash'; -import SpaceStore from "../../stores/spaces/SpaceStore"; +// import SpaceStore from "../../stores/spaces/SpaceStore"; import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks'; import { E2EStatus } from '../../utils/ShieldUtils'; import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads'; import TimelineCard from '../views/right_panel/TimelineCard'; +import { UPDATE_EVENT } from '../../stores/AsyncStore'; interface IProps { room?: Room; // if showing panels for a given room, this is set @@ -90,8 +91,9 @@ export default class RightPanel extends React.Component { constructor(props, context) { super(props, context); this.state = { - ...RightPanelStore.instance.roomPanelPhaseParams, - phase: this.getPhaseFromProps(), + // get all the state from the room panel store on inti + ...RightPanelStore.instance.currentRoom?.state, + phase: RightPanelStore.instance.currentRoom?.phase, isUserPrivilegedInGroup: null, member: this.getUserForPanel(), searchQuery: "", @@ -106,52 +108,54 @@ export default class RightPanel extends React.Component { // as both are called at the same time in the constructor. private getUserForPanel(): RoomMember { if (this.state && this.state.member) return this.state.member; - const lastParams = RightPanelStore.instance.roomPanelPhaseParams; - return this.props.member || lastParams['member']; + const lastState = RightPanelStore.instance.currentRoom?.state; + // Should just use the member from the RightPanelStore. Wherever the prop is passed should just update the store beforehand. + return this.props.member || lastState?.member; } // gets the current phase from the props and also maybe the store - private getPhaseFromProps() { - const rps = RightPanelStore.instance; - const userForPanel = this.getUserForPanel(); - if (this.props.groupId) { - if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) { - dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList }); - return RightPanelPhases.GroupMemberList; - } - return rps.groupPanelPhase; - } else if (SpaceStore.spacesEnabled && this.props.room?.isSpaceRoom() - && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase) - ) { - return RightPanelPhases.SpaceMemberList; - } else if (userForPanel) { - // XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state - // from its props and some from a store, except if the contents of the store changes - // while it's mounted in which case it replaces all of its state with that of the store, - // except it uses a dispatch instead of a normal store listener? - // Unfortunately rewriting this would almost certainly break showing the right panel - // in some of the many cases, and I don't have time to re-architect it and test all - // the flows now, so adding yet another special case so if the store thinks there is - // a verification going on for the member we're displaying, we show that, otherwise - // we race if a verification is started while the panel isn't displayed because we're - // not mounted in time to get the dispatch. - // Until then, let this code serve as a warning from history. - if ( - rps.roomPanelPhaseParams.member && - userForPanel.userId === rps.roomPanelPhaseParams.member.userId && - rps.roomPanelPhaseParams.verificationRequest - ) { - return rps.roomPanelPhase; - } - return RightPanelPhases.RoomMemberInfo; - } - return rps.roomPanelPhase; - } + // private getPhaseFromProps() { + // const rps = RightPanelStore.instance; + // const userForPanel = this.getUserForPanel(); + // if (this.props.groupId) { + // if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) { + // dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList }); + // return RightPanelPhases.GroupMemberList; + // } + // return rps.groupPanelPhase; + // } else if (SpaceStore.spacesEnabled && this.props.room?.isSpaceRoom() + // && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase) + // ) { + // return RightPanelPhases.SpaceMemberList; + // } else if (userForPanel) { + // // XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state + // // from its props and some from a store, except if the contents of the store changes + // // while it's mounted in which case it replaces all of its state with that of the store, + // // except it uses a dispatch instead of a normal store listener? + // // Unfortunately rewriting this would almost certainly break showing the right panel + // // in some of the many cases, and I don't have time to re-architect it and test all + // // the flows now, so adding yet another special case so if the store thinks there is + // // a verification going on for the member we're displaying, we show that, otherwise + // // we race if a verification is started while the panel isn't displayed because we're + // // not mounted in time to get the dispatch. + // // Until then, let this code serve as a warning from history. + // if ( + // rps.roomPanelPhaseParams.member && + // userForPanel.userId === rps.roomPanelPhaseParams.member.userId && + // rps.roomPanelPhaseParams.verificationRequest + // ) { + // return rps.roomPanelPhase; + // } + // return RightPanelPhases.RoomMemberInfo; + // } + // return rps.roomPanelPhase; + // } public componentDidMount(): void { this.dispatcherRef = dis.register(this.onAction); const cli = this.context; cli.on("RoomState.members", this.onRoomStateMember); + RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate); this.initGroupStore(this.props.groupId); } @@ -160,6 +164,7 @@ export default class RightPanel extends React.Component { if (this.context) { this.context.removeListener("RoomState.members", this.onRoomStateMember); } + RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate); this.unregisterGroupStore(); } @@ -199,7 +204,13 @@ export default class RightPanel extends React.Component { this.delayedUpdate(); } }; - + private onRightPanelStoreUpdate = () => { + const currentRoom = RightPanelStore.instance.currentRoom; + this.setState({ + ...currentRoom.state, + phase: currentRoom.phase, + }); + }; private onAction = (payload: ActionPayload) => { const isChangingRoom = payload.action === Action.ViewRoom && payload.room_id !== this.props.room.roomId; const isViewingThread = this.state.phase === RightPanelPhases.ThreadView; @@ -207,21 +218,21 @@ export default class RightPanel extends React.Component { dispatchShowThreadsPanelEvent(); } - if (payload.action === Action.AfterRightPanelPhaseChange) { - this.setState({ - phase: payload.phase, - groupRoomId: payload.groupRoomId, - groupId: payload.groupId, - member: payload.member, - event: payload.event, - initialEvent: payload.initialEvent, - initialEventHighlighted: payload.highlighted, - verificationRequest: payload.verificationRequest, - verificationRequestPromise: payload.verificationRequestPromise, - widgetId: payload.widgetId, - space: payload.space, - }); - } + // if (payload.action === Action.AfterRightPanelPhaseChange) { + // this.setState({ + // phase: payload.phase, + // groupRoomId: payload.groupRoomId, + // groupId: payload.groupId, + // member: payload.member, + // event: payload.event, + // initialEvent: payload.initialEvent, + // initialEventHighlighted: payload.highlighted, + // verificationRequest: payload.verificationRequest, + // verificationRequestPromise: payload.verificationRequestPromise, + // widgetId: payload.widgetId, + // space: payload.space, + // }); + // } }; private onClose = () => { @@ -246,7 +257,7 @@ export default class RightPanel extends React.Component { // the RightPanelStore has no way of knowing which mode room/group it is in, so we handle closing here dis.dispatch({ action: Action.ToggleRightPanel, - type: this.props.groupId ? "group" : "room", + // type: this.props.groupId ? "group" : "room", // not needed anymore since group or room is already known by the state }); } }; diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index afe7f37a2f1..71eda9d6308 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -213,7 +213,6 @@ export interface IRoomState { export class RoomView extends React.Component { private readonly dispatcherRef: string; private readonly roomStoreToken: EventSubscription; - private readonly rightPanelStoreToken: EventSubscription; private settingWatchers: string[]; private unmounted = false; @@ -288,9 +287,9 @@ export class RoomView extends React.Component { this.context.on("Event.decrypted", this.onEventDecrypted); // Start listening for RoomViewStore updates this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); - this.rightPanelStoreToken = RightPanelStore.instance.addListener(this.onRightPanelStoreUpdate); WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); + RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate); WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate); this.settingWatchers = [ @@ -357,10 +356,11 @@ export class RoomView extends React.Component { }; private checkRightPanel = (room) => { + // TODO remove this! // This is a hack to hide the chat. This should not be necessary once the right panel // phase is stored per room. (need to be done after check widget so that mainSplitContentType is updated) if ( - RightPanelStore.instance.roomPanelPhase === RightPanelPhases.Timeline && + RightPanelStore.instance.currentRoom?.phase === RightPanelPhases.Timeline && this.state.showRightPanel && !WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room) ) { @@ -749,11 +749,8 @@ export class RoomView extends React.Component { if (this.roomStoreToken) { this.roomStoreToken.remove(); } - // Remove RightPanelStore listener - if (this.rightPanelStoreToken) { - this.rightPanelStoreToken.remove(); - } + RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate); WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate); diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index f2b8e4f781c..41c7b4ae7a0 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -18,7 +18,6 @@ import React, { RefObject, useContext, useRef, useState } from "react"; import { EventType } from "matrix-js-sdk/src/@types/event"; import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials"; import { Room } from "matrix-js-sdk/src/models/room"; -import { EventSubscription } from "fbemitter"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import RoomAvatar from "../views/avatars/RoomAvatar"; @@ -86,6 +85,7 @@ import { useRoomState } from "../../hooks/useRoomState"; import { logger } from "matrix-js-sdk/src/logger"; import { shouldShowComponent } from "../../customisations/helpers/UIComponents"; import { UIComponent } from "../../settings/UIFeature"; +import { UPDATE_EVENT } from "../../stores/AsyncStore"; interface IProps { space: Room; @@ -797,7 +797,6 @@ export default class SpaceRoomView extends React.PureComponent { private readonly creator: string; private readonly dispatcherRef: string; - private readonly rightPanelStoreToken: EventSubscription; constructor(props, context) { super(props, context); @@ -819,13 +818,13 @@ export default class SpaceRoomView extends React.PureComponent { }; this.dispatcherRef = defaultDispatcher.register(this.onAction); - this.rightPanelStoreToken = RightPanelStore.instance.addListener(this.onRightPanelStoreUpdate); + RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate); this.context.on("Room.myMembership", this.onMyMembership); } componentWillUnmount() { defaultDispatcher.unregister(this.dispatcherRef); - this.rightPanelStoreToken.remove(); + RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate); this.context.off("Room.myMembership", this.onMyMembership); } diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index 9cd1643d647..d7b4fb5a9c5 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -206,7 +206,7 @@ export default class ThreadView extends React.Component { event_id: this.state.thread?.id, }; - let previousPhase = RightPanelStore.instance.previousPhase; + let previousPhase = RightPanelStore.instance.previousRoom.phase; if (!SettingsStore.getValue("feature_maximised_widgets")) { previousPhase = RightPanelPhases.ThreadPanel; } diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 2bbe58fff7a..d0a51e79fba 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -27,8 +27,9 @@ import { SetRightPanelPhasePayload, SetRightPanelPhaseRefireParams, } from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; -import type { EventSubscription } from "fbemitter"; +// import type { EventSubscription } from "fbemitter"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { UPDATE_EVENT } from '../../../stores/AsyncStore'; export enum HeaderKind { Room = "room", @@ -44,7 +45,6 @@ interface IProps {} @replaceableComponent("views.right_panel.HeaderButtons") export default abstract class HeaderButtons

extends React.Component { - private storeToken: EventSubscription; private dispatcherRef: string; constructor(props: IProps & P, kind: HeaderKind) { @@ -53,17 +53,17 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component { private onRoomSummaryClicked = () => { // use roomPanelPhase rather than this.state.phase as it remembers the latest one if we close - const lastPhase = RightPanelStore.instance.roomPanelPhase; - if (ROOM_INFO_PHASES.includes(lastPhase)) { - if (this.state.phase === lastPhase) { - this.setPhase(lastPhase); + const currentPhase = RightPanelStore.instance.currentRoom.phase; + if (ROOM_INFO_PHASES.includes(currentPhase)) { + if (this.state.phase === currentPhase) { + this.setPhase(currentPhase); } else { - this.setPhase(lastPhase, RightPanelStore.instance.roomPanelPhaseParams); + this.setPhase(currentPhase, RightPanelStore.instance.currentRoom.state); } } else { // This toggles for us, if needed @@ -188,12 +188,14 @@ export default class RoomHeaderButtons extends HeaderButtons { rightPanelPhaseButtons.set(RightPanelPhases.PinnedMessages, , ); rightPanelPhaseButtons.set(RightPanelPhases.Timeline, , @@ -201,6 +203,7 @@ export default class RoomHeaderButtons extends HeaderButtons { rightPanelPhaseButtons.set(RightPanelPhases.ThreadPanel, SettingsStore.getValue("feature_thread") ? { ); rightPanelPhaseButtons.set(RightPanelPhases.NotificationPanel, { ); rightPanelPhaseButtons.set(RightPanelPhases.RoomSummary, ; + currentRoom?: IPhaseAndState; + previousRoom?: IPhaseAndState; + isOpenRoom?: boolean; +} +interface IPhaseAndState { + phase: RightPanelPhases; + state: any; } -const INITIAL_STATE: RightPanelStoreState = { - showRoomPanel: SettingsStore.getValue("showRightPanelInRoom"), - showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), - lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), - lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), - lastRoomPhaseParams: {}, +const INITIAL_STATE: IState = { + phaseHistoryRoom: [], + currentRoom: null, + previousRoom: null, + isOpenRoom: null, + // byRoom: {}, + // byGroup: {}, + // showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), + // lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), + // lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), + // lastRoomPhaseParams: {}, }; const GROUP_PHASES = [ @@ -66,171 +84,438 @@ const MEMBER_INFO_PHASES = [ * A class for tracking the state of the right panel between layouts and * sessions. */ -export default class RightPanelStore extends Store { +export default class RightPanelStore extends AsyncStore { private static internalInstance: RightPanelStore; - private state: RightPanelStoreState; - private lastRoomId: string; - - constructor() { - super(dis); - - // Initialise state - this.state = INITIAL_STATE; + private viewedRoomId: string; + private isViewingRoom?: boolean; + // private viewedGroupId: string; + private byRoom: { + [roomId: string]: { + isOpen: boolean; + history: Array; + }; + } = {}; + private global?: { + isOpen: boolean; + history: Array; + } = null; + // private byGroup: { + // [groupId: string]: { + // isOpen: boolean; + // history: Array; + // }; + // }; + // private state: RightPanelStoreState; + // private lastRoomId: string; + + private constructor() { + super(defaultDispatcher, INITIAL_STATE); } + // get isOpenForRoom(roomId:): boolean { + // return this.state.showRoomPanel; + // } + get isOpenForRoom(): boolean { - return this.state.showRoomPanel; + return this.state.isOpenRoom ?? false; + // return this.state.byRoom[this.viewedRoomId]?.isOpen; } + // get isOpenForGroup(): boolean { + // return this.state.showGroupPanel; + // } + get isOpenForGroup(): boolean { - return this.state.showGroupPanel; + return this.state.isOpenRoom ?? false; + // return this.state.byGroup[this.viewedGroupId]?.isOpen; } - get roomPanelPhase(): RightPanelPhases { - return this.state.lastRoomPhase; + // get roomPanelPhase(): RightPanelPhases { + // return this.state.lastRoomPhase; + // } + get roomPhaseHistory(): Array { + return this.state.phaseHistoryRoom; + // if (!this.viewedRoomId) return null; + // return this.state.byRoom[this.viewedRoomId]?.history ?? []; } - - get groupPanelPhase(): RightPanelPhases { - return this.state.lastGroupPhase; + get currentRoom(): IPhaseAndState { + return this.state.currentRoom ?? { state: {}, phase: null }; + // const hist = this.roomPhaseHistory; + // if (hist.length >= 1) { + // return hist[hist.length - 1]; + // } + // return null; } - - get previousPhase(): RightPanelPhases | null { - return RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.previousPhase) ? this.state.previousPhase : null; + get previousRoom(): IPhaseAndState { + return this.state.previousRoom ?? { state: {}, phase: null }; + // const hist = this.roomPhaseHistory; + // if (hist.length >= 2) { + // return hist[hist.length - 2]; + // } } - - get visibleRoomPanelPhase(): RightPanelPhases { - return this.isOpenForRoom ? this.roomPanelPhase : null; + // get groupPanelPhase(): RightPanelPhases { + // return this.state.lastGroupPhase; + // } + get groupPhaseHistory(): Array { + return this.roomPhaseHistory; + // if (!this.viewedGroupId) return null; + // return this.state.byRoom[this.viewedGroupId]?.history ?? []; } - - get visibleGroupPanelPhase(): RightPanelPhases { - return this.isOpenForGroup ? this.groupPanelPhase : null; + get currentGroup(): IPhaseAndState { + return this.currentRoom; + // const hist = this.groupPhaseHistory; + // if (hist.length >= 1) { + // return hist[hist.length - 1]; + // } + // return null; + } + get previousGroup(): IPhaseAndState { + return this.previousRoom; + // const hist = this.groupPhaseHistory; + // if (hist.length >= 2) { + // return hist[hist.length - 2]; + // } + // return null; } - get roomPanelPhaseParams(): any { - return this.state.lastRoomPhaseParams || {}; + // get previousPhase(): RightPanelPhases | null { + // return RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.previousPhase) ? this.state.previousPhase : null; + // } + + // get visibleRoomPanelPhase(): RightPanelPhases { + // return this.isOpenForRoom ? this.roomPanelPhase : null; + // } + + // get visibleGroupPanelPhase(): RightPanelPhases { + // return this.isOpenForGroup ? this.groupPanelPhase : null; + // } + + // get roomPanelPhaseParams(): any { + // return this.state.lastRoomPhaseParams || {}; + // } + + // private setState(newState: Partial) { + // this.updateState(newState); + + // SettingsStore.setValue( + // "showRightPanelInRoom", + // null, + // SettingLevel.DEVICE, + // this.state.showRoomPanel, + // ); + // SettingsStore.setValue( + // "showRightPanelInGroup", + // null, + // SettingLevel.DEVICE, + // this.state.showGroupPanel, + // ); + + // if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastRoomPhase)) { + // SettingsStore.setValue( + // "lastRightPanelPhaseForRoom", + // null, + // SettingLevel.DEVICE, + // this.state.lastRoomPhase, + // ); + // } + // if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastGroupPhase)) { + // SettingsStore.setValue( + // "lastRightPanelPhaseForGroup", + // null, + // SettingLevel.DEVICE, + // this.state.lastGroupPhase, + // ); + // } + // } + // getCurrentRoomCache() { + // if (!!this.global) { + // return this.global; + // } else { + // return this.byRoom[this.viewedRoomId]; + // } + // } + // setCurrentRoomCache(roomCache, global) { + // if (!!global) { + // this.global = roomCache; + // } else { + // this.byRoom[this.viewedRoomId] = roomCache; + // } + // } + loadCacheFromSettings() { + this.global = this.global ?? SettingsStore.getValue("RightPanel.phasesGlobal"); + this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] + ?? SettingsStore.getValue("RightPanel.phases", this.viewedRoomId); + } + updateStateAndSettingsFromCache() { + let previous: IPhaseAndState; + let current: IPhaseAndState; + const cacheGlobal = this.global; + const cacheThisRoom = this.byRoom[this.viewedRoomId]; + SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, cacheGlobal); + SettingsStore.setValue("RightPanel.phases", this.viewedRoomId, SettingLevel.DEVICE, cacheThisRoom); + const roomCache = cacheGlobal ?? cacheThisRoom; + const hist = roomCache?.history ?? []; + if (hist?.length >= 2) { + previous = hist[hist.length - 2]; + } + if (hist?.length >= 1) { + current = hist[hist.length - 1]; + } + this.updateState({ + isOpenRoom: roomCache?.isOpen ?? false, + currentRoom: current, + previousRoom: previous, + phaseHistoryRoom: hist, + }); + } + // NEEDED: + // set rigth panel: overrides the history + private setRightPanel(targetPhase, refireParams) { + this.byRoom[this.viewedRoomId] ={ + history: [{ phase: targetPhase, state: refireParams }], + isOpen: true, + }; + this.updateStateAndSettingsFromCache(); } + // // push right panel: appends to the history + // private pushRightPanel(payload) { - private setState(newState: Partial) { - this.state = Object.assign(this.state, newState); + // } + // // pop right panel: removes last eelemnt from history + // private popRightPanel(_payload) { - SettingsStore.setValue( - "showRightPanelInRoom", - null, - SettingLevel.DEVICE, - this.state.showRoomPanel, - ); - SettingsStore.setValue( - "showRightPanelInGroup", - null, - SettingLevel.DEVICE, - this.state.showGroupPanel, - ); + // } - if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastRoomPhase)) { - SettingsStore.setValue( - "lastRightPanelPhaseForRoom", - null, - SettingLevel.DEVICE, - this.state.lastRoomPhase, - ); - } - if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastGroupPhase)) { - SettingsStore.setValue( - "lastRightPanelPhaseForGroup", - null, - SettingLevel.DEVICE, - this.state.lastGroupPhase, - ); + // CHECKS: + // - RoomMemberInfo -> needs to be changed to EncryptionPanel if pendingVerificationRequestForUser + // - hide/show when setting the same panel twice + private togglePanel() { + this.byRoom[this.viewedRoomId].isOpen = !this.byRoom[this.viewedRoomId].isOpen; + this.updateStateAndSettingsFromCache(); + } + + private getVerificationRedirect(targetPhase, payload): { targetPhase: RightPanelPhases, refireParams: {} } { + if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { + const { member } = payload.refireParams; + const pendingRequest = pendingVerificationRequestForUser(member); + if (pendingRequest) { + return { + targetPhase: RightPanelPhases.EncryptionPanel, + refireParams: { + verificationRequest: pendingRequest, + member, + }, + }; + } } + return null; + } - this.__emitChange(); + private isPhaseActionIsValid(targetPhase) { + if (!RightPanelPhases[targetPhase]) { + logger.warn(`Tried to switch right panel to unknown phase: ${targetPhase}`); + return false; + } + if (GROUP_PHASES.includes(targetPhase) && this.isViewingRoom) { + logger.warn(`Tried to switch right panel to a group phase: ${targetPhase}, + but we are currently not viewing a group`); + return false; + } else if (!GROUP_PHASES.includes(targetPhase) && !this.isViewingRoom) { + logger.warn(`Tried to switch right panel to a room phase: ${targetPhase}, + but we are currently not viewing a room`); + return false; + } + return true; } - __onDispatch(payload: ActionPayload) { // eslint-disable-line @typescript-eslint/naming-convention + onDispatch(payload: ActionPayload) { + // __onDispatch(payload: ActionPayload) { // eslint-disable-line @typescript-eslint/naming-convention switch (payload.action) { - case Action.ViewRoom: - if (payload.room_id === this.lastRoomId) break; // skip this transition, probably a permalink - // fallthrough case 'view_group': - this.lastRoomId = payload.room_id; - - // Reset to the member list if we're viewing member info - if (MEMBER_INFO_PHASES.includes(this.state.lastRoomPhase)) { - this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); + case Action.ViewRoom: { + console.log("ORDER_DEBUG: action:", payload.action); + if (payload.room_id === this.viewedRoomId) break; // skip this transition, probably a permalink + + // Put group in the same/similar view to what was open from the previously viewed room + // Is contradictory to the new "per room" philosophy but it is the legacy behaviour for groups. + if ((this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { + if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(this.currentRoom?.phase)) { + // switch from group to room + this.setRightPanel(RightPanelPhases.RoomMemberList, {}); + // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); + } else if (payload.action == "view_group" + && this.state.currentRoom?.phase === RightPanelPhases.GroupMemberInfo) { + // switch from room to group + this.setRightPanel(RightPanelPhases.GroupMemberList, {}); + // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); + } } - // Do the same for groups - if (this.state.lastGroupPhase === RightPanelPhases.GroupMemberInfo) { - this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); - } + // Update the current room here, so that all the other functions dont need to be room dependant. + // The right panel store always will return the state for the current room. + this.viewedRoomId = payload.room_id; + this.isViewingRoom = payload.action == Action.ViewRoom; + // load values from byRoomCache with the viewedRoomId. + this.loadCacheFromSettings(); + this.updateStateAndSettingsFromCache(); + console.log("right panel store for current room: ", this.byRoom[this.viewedRoomId]); break; + // Reset to the member list if we're viewing member info + } + + // case 'view_group': + // this.viewedGroupId = payload.room_id; + // this.viewedRoomId = undefined; + + // Not necassary anymore since we store everything per room/ per group + // this.lastRoomId = payload.room_id; + + // // Reset to the member list if we're viewing member info + // if (MEMBER_INFO_PHASES.includes(this.currentRoomPhaseState.phase)) { + // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); + // } + + // // Do the same for groups + // if (this.state.lastGroupPhase === RightPanelPhases.GroupMemberInfo) { + // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); + // } + // break; + case Action.SetRightPanelPhase: { - let targetPhase = payload.phase; - let refireParams = payload.refireParams; + console.log("ORDER_DEBUG: action:", Action.SetRightPanelPhase); + // this was previously a very multifuncitonal command: + // TogglePanel: if the same phase is send but without refireParams + // UpdateState: if the same phase is send but with refireParams + // SetRightPanel and erase history: if a "differnt to the current" phase is send (with or without refireParams) + const redirect = this.getVerificationRedirect(payload, payload.phase); + const targetPhase = redirect?.targetPhase ?? payload.phase; + const refireParams = redirect?.refireParams ?? payload.refireParams; + const allowClose = payload.allowClose ?? true; - // redirect to EncryptionPanel if there is an ongoing verification request - if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { - const { member } = payload.refireParams; - const pendingRequest = pendingVerificationRequestForUser(member); - if (pendingRequest) { - targetPhase = RightPanelPhases.EncryptionPanel; - refireParams = { - verificationRequest: pendingRequest, - member, - }; - } - } - if (!RightPanelPhases[targetPhase]) { - logger.warn(`Tried to switch right panel to unknown phase: ${targetPhase}`); - return; + + // Checks for wrong SetRightPanelPhase requests + if (!this.isPhaseActionIsValid(targetPhase)) break; + + if (targetPhase === this.currentRoom?.phase && allowClose && !refireParams) { + // Toggle command: a toggle command needs to fullfill the following: + // - the same phase + // - the panel can be closed + // - does not contain any state information (refireParams) + this.togglePanel(); + break; + } else if ((targetPhase === this.currentRoom?.phase && !!refireParams)) { + // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) + const hist = this.byRoom[this.viewedRoomId].history; + hist[hist.length - 1].state = refireParams; + this.updateStateAndSettingsFromCache(); + break; + } else if (targetPhase !== this.currentRoom?.phase) { + // SetRightPanel and erase history. + this.setRightPanel(targetPhase, refireParams); + // this.byRoom[this.viewedRoomId] = { + // history: [{ phase: targetPhase, state: refireParams }], + // isOpen: true, + // }; + // this.updateStateFromCache(); } + // redirect to EncryptionPanel if there is an ongoing verification request + // if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { + // const { member } = payload.refireParams; + // const pendingRequest = pendingVerificationRequestForUser(member); + // if (pendingRequest) { + // targetPhase = RightPanelPhases.EncryptionPanel; + // refireParams = { + // verificationRequest: pendingRequest, + // member, + // }; + // } + // } + + // if (GROUP_PHASES.includes(targetPhase)) { + // if (targetPhase === this.state.lastGroupPhase) { + // // hide when already open + // this.setState({ + // showGroupPanel: !this.state.showGroupPanel, + // previousPhase: null, + // }); + // } else { + // this.setState({ + // lastGroupPhase: targetPhase, + // showGroupPanel: true, + // previousPhase: this.state.lastGroupPhase, + // }); + // } + // } else { + // if (targetPhase === this.state.lastRoomPhase && !refireParams && allowClose) { + // this.setState({ + // showRoomPanel: !this.state.showRoomPanel, + // previousPhase: null, + // }); + // } else { + // this.setState({ + // lastRoomPhase: targetPhase, + // showRoomPanel: true, + // lastRoomPhaseParams: refireParams || {}, + // previousPhase: this.state.lastRoomPhase, + // }); + // } + // } - if (GROUP_PHASES.includes(targetPhase)) { - if (targetPhase === this.state.lastGroupPhase) { - this.setState({ - showGroupPanel: !this.state.showGroupPanel, - previousPhase: null, - }); - } else { - this.setState({ - lastGroupPhase: targetPhase, - showGroupPanel: true, - previousPhase: this.state.lastGroupPhase, - }); - } + // Let things like the member info panel actually open to the right member. + // Dont do the dispatch anymore, instead use a listener + // defaultDispatcher.dispatch({ + // action: Action.AfterRightPanelPhaseChange, + // phase: targetPhase, + // ...(refireParams || {}), + // }); + break; + } + case Action.PushRightPanelPhase: { + console.log("ORDER_DEBUG: action:", payload.action); + const redirect = this.getVerificationRedirect(payload, payload.phase); + const targetPhase = redirect?.targetPhase ?? payload.phase; + const refireParams = redirect?.refireParams ?? payload.refireParams; + + const allowClose = payload.allowClose ?? true; + + // Checks for wrong SetRightPanelPhase requests + if (!this.isPhaseActionIsValid(targetPhase)) break; + + let roomCache = this.byRoom[this.viewedRoomId]; + if (!!roomCache) { + // append new phase + roomCache.history.push({ state: refireParams, phase: targetPhase }); + roomCache.isOpen = allowClose ? roomCache.isOpen : true; } else { - if (targetPhase === this.state.lastRoomPhase && !refireParams && allowClose) { - this.setState({ - showRoomPanel: !this.state.showRoomPanel, - previousPhase: null, - }); - } else { - this.setState({ - lastRoomPhase: targetPhase, - showRoomPanel: true, - lastRoomPhaseParams: refireParams || {}, - previousPhase: this.state.lastRoomPhase, - }); - } + // create new phase + roomCache = { + history: [{ phase: targetPhase, state: refireParams }], + // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false + isOpen: !allowClose, + }; } - // Let things like the member info panel actually open to the right member. - dis.dispatch({ - action: Action.AfterRightPanelPhaseChange, - phase: targetPhase, - ...(refireParams || {}), - }); + this.updateStateAndSettingsFromCache(); + break; + } + case Action.PopRightPanelPhase: { + const roomCache = this.byRoom[this.viewedRoomId]; + roomCache.history.pop(); + this.updateStateAndSettingsFromCache(); break; } case Action.ToggleRightPanel: - if (payload.type === "room") { - this.setState({ showRoomPanel: !this.state.showRoomPanel }); - } else { // group - this.setState({ showGroupPanel: !this.state.showGroupPanel }); - } + console.log("ORDER_DEBUG: action:", payload.action); + this.togglePanel(); break; + // if (payload.type === "room") { + // this.setState({ showRoomPanel: !this.state.showRoomPanel }); + // } else { // group + // this.setState({ showGroupPanel: !this.state.showGroupPanel }); + // } + // break; } } public static get instance(): RightPanelStore { From cdb56d170a1e22956fa7ec2d9bf95a609e14dd5f Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 14:33:38 +0100 Subject: [PATCH 03/76] remove check right panel --- src/components/structures/RoomView.tsx | 36 +++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 71eda9d6308..add798297b4 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -337,7 +337,7 @@ export class RoomView extends React.Component { }); } this.checkWidgets(this.state.room); - this.checkRightPanel(this.state.room); + // this.checkRightPanel(this.state.room); }; private checkWidgets = (room) => { @@ -355,22 +355,22 @@ export class RoomView extends React.Component { : MainSplitContentType.Timeline; }; - private checkRightPanel = (room) => { - // TODO remove this! - // This is a hack to hide the chat. This should not be necessary once the right panel - // phase is stored per room. (need to be done after check widget so that mainSplitContentType is updated) - if ( - RightPanelStore.instance.currentRoom?.phase === RightPanelPhases.Timeline && - this.state.showRightPanel && - !WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room) - ) { - // Two timelines are shown prevent this by hiding the right panel - dis.dispatch({ - action: Action.ToggleRightPanel, - type: "room", - }); - } - }; + // private checkRightPanel = (room) => { + // // TODO remove this! + // // This is a hack to hide the chat. This should not be necessary once the right panel + // // phase is stored per room. (need to be done after check widget so that mainSplitContentType is updated) + // if ( + // RightPanelStore.instance.currentRoom?.phase === RightPanelPhases.Timeline && + // this.state.showRightPanel && + // !WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room) + // ) { + // // Two timelines are shown prevent this by hiding the right panel + // dis.dispatch({ + // action: Action.ToggleRightPanel, + // type: "room", + // }); + // } + // }; private onReadReceiptsChange = () => { this.setState({ @@ -1029,7 +1029,7 @@ export class RoomView extends React.Component { this.updateE2EStatus(room); this.updatePermissions(room); this.checkWidgets(room); - this.checkRightPanel(room); + // this.checkRightPanel(room); this.setState({ liveTimeline: room.getLiveTimeline(), From b0c4558718010144e4fbe6d3fbbeb97b0b2be88f Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 15:36:18 +0100 Subject: [PATCH 04/76] change to fucntions instaed of actions Rename refire params --- src/stores/RightPanelStore.ts | 413 ++++++++++++++++++++-------------- 1 file changed, 241 insertions(+), 172 deletions(-) diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts index 865f08c93e5..a95304f99e0 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/RightPanelStore.ts @@ -23,7 +23,7 @@ import { Action } from '../dispatcher/actions'; import { SettingLevel } from "../settings/SettingLevel"; import { logger } from "matrix-js-sdk/src/logger"; -import { AsyncStore } from './AsyncStore'; +import { AsyncStore, UPDATE_EVENT } from './AsyncStore'; // import RightPanel from '../components/structures/RightPanel'; // import { Playback } from '../audio/Playback'; // import { RoomView } from '../components/structures/RoomView'; @@ -44,10 +44,10 @@ interface IState { // lastRoomPhaseParams: {[key: string]: any}; // Replicate everything for group - phaseHistoryRoom: Array; - currentRoom?: IPhaseAndState; - previousRoom?: IPhaseAndState; - isOpenRoom?: boolean; + panelHistory: Array; + currentPanel?: IPhaseAndState; + previousPanel?: IPhaseAndState; + isOpen?: boolean; } interface IPhaseAndState { phase: RightPanelPhases; @@ -55,10 +55,10 @@ interface IPhaseAndState { } const INITIAL_STATE: IState = { - phaseHistoryRoom: [], - currentRoom: null, - previousRoom: null, - isOpenRoom: null, + panelHistory: [], + currentPanel: null, + previousPanel: null, + isOpen: null, // byRoom: {}, // byGroup: {}, // showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), @@ -115,9 +115,9 @@ export default class RightPanelStore extends AsyncStore { // get isOpenForRoom(roomId:): boolean { // return this.state.showRoomPanel; // } - + // ALL GETTERS: get isOpenForRoom(): boolean { - return this.state.isOpenRoom ?? false; + return this.state.isOpen ?? false; // return this.state.byRoom[this.viewedRoomId]?.isOpen; } @@ -126,7 +126,7 @@ export default class RightPanelStore extends AsyncStore { // } get isOpenForGroup(): boolean { - return this.state.isOpenRoom ?? false; + return this.state.isOpen ?? false; // return this.state.byGroup[this.viewedGroupId]?.isOpen; } @@ -134,12 +134,24 @@ export default class RightPanelStore extends AsyncStore { // return this.state.lastRoomPhase; // } get roomPhaseHistory(): Array { - return this.state.phaseHistoryRoom; + return this.state.panelHistory; // if (!this.viewedRoomId) return null; // return this.state.byRoom[this.viewedRoomId]?.history ?? []; } get currentRoom(): IPhaseAndState { - return this.state.currentRoom ?? { state: {}, phase: null }; + return this.state.currentPanel ?? { state: {}, phase: null }; + // const hist = this.roomPhaseHistory; + // if (hist.length >= 1) { + // return hist[hist.length - 1]; + // } + // return null; + } + currentPanel(roomId: string): IPhaseAndState { + const hist = this.byRoom[roomId]?.history ?? []; + if (hist.length > 0) { + return hist[hist.length - 1]; + } + return this.state.currentPanel ?? { state: {}, phase: null }; // const hist = this.roomPhaseHistory; // if (hist.length >= 1) { // return hist[hist.length - 1]; @@ -147,7 +159,7 @@ export default class RightPanelStore extends AsyncStore { // return null; } get previousRoom(): IPhaseAndState { - return this.state.previousRoom ?? { state: {}, phase: null }; + return this.state.previousPanel ?? { state: {}, phase: null }; // const hist = this.roomPhaseHistory; // if (hist.length >= 2) { // return hist[hist.length - 2]; @@ -178,6 +190,76 @@ export default class RightPanelStore extends AsyncStore { // return null; } + // ALL SETTERS: + public setRightPanel(phase: RightPanelPhases, state: any, allowClose = true, roomId: string = null) { + const rId = roomId ?? this.viewedRoomId; + console.log("ORDER_DEBUG: action:", Action.SetRightPanelPhase); + // this was previously a very multifuncitonal command: + // TogglePanel: if the same phase is send but without refireParams + // UpdateState: if the same phase is send but with refireParams + // SetRightPanel and erase history: if a "differnt to the current" phase is send (with or without refireParams) + const redirect = this.getVerificationRedirect(phase, state); + const targetPhase = redirect?.targetPhase ?? phase; + const panelState = redirect?.panelState ?? state; + + // Checks for wrong SetRightPanelPhase requests + if (!this.isPhaseActionIsValid(targetPhase)) return; + + if (targetPhase === this.currentRoom?.phase && allowClose && !panelState) { + // Toggle command: a toggle command needs to fullfill the following: + // - the same phase + // - the panel can be closed + // - does not contain any state information (refireParams) + this.togglePanel(rId); + return; + } else if ((targetPhase === this.currentPanel(rId)?.phase && !!panelState)) { + // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) + const hist = this.byRoom[rId].history; + hist[hist.length - 1].state = panelState; + this.updateStateAndSettingsFromCache(); + return; + } else if (targetPhase !== this.currentRoom?.phase) { + // SetRightPanel and erase history. + this.setRightPanelCacheAndState(targetPhase, panelState); + } + } + // push right panel: appends to the history + public pushRightPanel(roomId: string, phase: RightPanelPhases, panelState: any, allowClose = true) { + console.log("ORDER_DEBUG: action: pushRightPanel"); + const redirect = this.getVerificationRedirect(phase, panelState); + const targetPhase = redirect?.targetPhase ?? phase; + const refireParams = redirect?.panelState ?? panelState; + + // Checks for wrong SetRightPanelPhase requests + if (!this.isPhaseActionIsValid(targetPhase)) return; + + let roomCache = this.byRoom[roomId]; + if (!!roomCache) { + // append new phase + roomCache.history.push({ state: refireParams, phase: targetPhase }); + roomCache.isOpen = allowClose ? roomCache.isOpen : true; + } else { + // create new phase + roomCache = { + history: [{ phase: targetPhase, state: refireParams }], + // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false + isOpen: !allowClose, + }; + } + + this.updateStateAndSettingsFromCache(); + } + // pop right panel: removes last eelemnt from history + public popRightPanel(roomId: string) { + const roomCache = this.byRoom[roomId]; + roomCache.history.pop(); + this.updateStateAndSettingsFromCache(); + } + + public togglePanel(roomId: string) { + this.byRoom[roomId].isOpen = !this.byRoom[roomId].isOpen; + this.updateStateAndSettingsFromCache(); + } // get previousPhase(): RightPanelPhases | null { // return RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.previousPhase) ? this.state.previousPhase : null; // } @@ -241,12 +323,12 @@ export default class RightPanelStore extends AsyncStore { // this.byRoom[this.viewedRoomId] = roomCache; // } // } - loadCacheFromSettings() { + private loadCacheFromSettings() { this.global = this.global ?? SettingsStore.getValue("RightPanel.phasesGlobal"); this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ?? SettingsStore.getValue("RightPanel.phases", this.viewedRoomId); } - updateStateAndSettingsFromCache() { + private updateStateAndSettingsFromCache() { let previous: IPhaseAndState; let current: IPhaseAndState; const cacheGlobal = this.global; @@ -262,46 +344,33 @@ export default class RightPanelStore extends AsyncStore { current = hist[hist.length - 1]; } this.updateState({ - isOpenRoom: roomCache?.isOpen ?? false, - currentRoom: current, - previousRoom: previous, - phaseHistoryRoom: hist, + isOpen: roomCache?.isOpen ?? false, + currentPanel: current, + previousPanel: previous, + panelHistory: hist, }); } // NEEDED: // set rigth panel: overrides the history - private setRightPanel(targetPhase, refireParams) { - this.byRoom[this.viewedRoomId] ={ - history: [{ phase: targetPhase, state: refireParams }], + private setRightPanelCacheAndState(targetPhase: RightPanelPhases, panelState: any) { + this.byRoom[this.viewedRoomId] = { + history: [{ phase: targetPhase, state: panelState }], isOpen: true, }; this.updateStateAndSettingsFromCache(); } - // // push right panel: appends to the history - // private pushRightPanel(payload) { - - // } - // // pop right panel: removes last eelemnt from history - // private popRightPanel(_payload) { - - // } - // CHECKS: // - RoomMemberInfo -> needs to be changed to EncryptionPanel if pendingVerificationRequestForUser // - hide/show when setting the same panel twice - private togglePanel() { - this.byRoom[this.viewedRoomId].isOpen = !this.byRoom[this.viewedRoomId].isOpen; - this.updateStateAndSettingsFromCache(); - } - - private getVerificationRedirect(targetPhase, payload): { targetPhase: RightPanelPhases, refireParams: {} } { - if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { - const { member } = payload.refireParams; + private getVerificationRedirect(targetPhase: RightPanelPhases, panelState): + { targetPhase: RightPanelPhases, panelState } { + if (targetPhase === RightPanelPhases.RoomMemberInfo && panelState) { + const { member } = panelState; const pendingRequest = pendingVerificationRequestForUser(member); if (pendingRequest) { return { targetPhase: RightPanelPhases.EncryptionPanel, - refireParams: { + panelState: { verificationRequest: pendingRequest, member, }, @@ -341,12 +410,12 @@ export default class RightPanelStore extends AsyncStore { if ((this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(this.currentRoom?.phase)) { // switch from group to room - this.setRightPanel(RightPanelPhases.RoomMemberList, {}); + this.setRightPanelCacheAndState(RightPanelPhases.RoomMemberList, {}); // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); } else if (payload.action == "view_group" - && this.state.currentRoom?.phase === RightPanelPhases.GroupMemberInfo) { + && this.state.currentPanel?.phase === RightPanelPhases.GroupMemberInfo) { // switch from room to group - this.setRightPanel(RightPanelPhases.GroupMemberList, {}); + this.setRightPanelCacheAndState(RightPanelPhases.GroupMemberList, {}); // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); } } @@ -382,134 +451,134 @@ export default class RightPanelStore extends AsyncStore { // } // break; - case Action.SetRightPanelPhase: { - console.log("ORDER_DEBUG: action:", Action.SetRightPanelPhase); - // this was previously a very multifuncitonal command: - // TogglePanel: if the same phase is send but without refireParams - // UpdateState: if the same phase is send but with refireParams - // SetRightPanel and erase history: if a "differnt to the current" phase is send (with or without refireParams) - const redirect = this.getVerificationRedirect(payload, payload.phase); - const targetPhase = redirect?.targetPhase ?? payload.phase; - const refireParams = redirect?.refireParams ?? payload.refireParams; - - const allowClose = payload.allowClose ?? true; - - // Checks for wrong SetRightPanelPhase requests - if (!this.isPhaseActionIsValid(targetPhase)) break; - - if (targetPhase === this.currentRoom?.phase && allowClose && !refireParams) { - // Toggle command: a toggle command needs to fullfill the following: - // - the same phase - // - the panel can be closed - // - does not contain any state information (refireParams) - this.togglePanel(); - break; - } else if ((targetPhase === this.currentRoom?.phase && !!refireParams)) { - // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) - const hist = this.byRoom[this.viewedRoomId].history; - hist[hist.length - 1].state = refireParams; - this.updateStateAndSettingsFromCache(); - break; - } else if (targetPhase !== this.currentRoom?.phase) { - // SetRightPanel and erase history. - this.setRightPanel(targetPhase, refireParams); - // this.byRoom[this.viewedRoomId] = { - // history: [{ phase: targetPhase, state: refireParams }], - // isOpen: true, - // }; - // this.updateStateFromCache(); - } - // redirect to EncryptionPanel if there is an ongoing verification request - // if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { - // const { member } = payload.refireParams; - // const pendingRequest = pendingVerificationRequestForUser(member); - // if (pendingRequest) { - // targetPhase = RightPanelPhases.EncryptionPanel; - // refireParams = { - // verificationRequest: pendingRequest, - // member, - // }; - // } - // } - - // if (GROUP_PHASES.includes(targetPhase)) { - // if (targetPhase === this.state.lastGroupPhase) { - // // hide when already open - // this.setState({ - // showGroupPanel: !this.state.showGroupPanel, - // previousPhase: null, - // }); - // } else { - // this.setState({ - // lastGroupPhase: targetPhase, - // showGroupPanel: true, - // previousPhase: this.state.lastGroupPhase, - // }); - // } - // } else { - // if (targetPhase === this.state.lastRoomPhase && !refireParams && allowClose) { - // this.setState({ - // showRoomPanel: !this.state.showRoomPanel, - // previousPhase: null, - // }); - // } else { - // this.setState({ - // lastRoomPhase: targetPhase, - // showRoomPanel: true, - // lastRoomPhaseParams: refireParams || {}, - // previousPhase: this.state.lastRoomPhase, - // }); - // } - // } - - // Let things like the member info panel actually open to the right member. - // Dont do the dispatch anymore, instead use a listener - // defaultDispatcher.dispatch({ - // action: Action.AfterRightPanelPhaseChange, - // phase: targetPhase, - // ...(refireParams || {}), - // }); - break; - } - case Action.PushRightPanelPhase: { - console.log("ORDER_DEBUG: action:", payload.action); - const redirect = this.getVerificationRedirect(payload, payload.phase); - const targetPhase = redirect?.targetPhase ?? payload.phase; - const refireParams = redirect?.refireParams ?? payload.refireParams; - - const allowClose = payload.allowClose ?? true; - - // Checks for wrong SetRightPanelPhase requests - if (!this.isPhaseActionIsValid(targetPhase)) break; - - let roomCache = this.byRoom[this.viewedRoomId]; - if (!!roomCache) { - // append new phase - roomCache.history.push({ state: refireParams, phase: targetPhase }); - roomCache.isOpen = allowClose ? roomCache.isOpen : true; - } else { - // create new phase - roomCache = { - history: [{ phase: targetPhase, state: refireParams }], - // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false - isOpen: !allowClose, - }; - } - - this.updateStateAndSettingsFromCache(); - break; - } - case Action.PopRightPanelPhase: { - const roomCache = this.byRoom[this.viewedRoomId]; - roomCache.history.pop(); - this.updateStateAndSettingsFromCache(); - break; - } + // case Action.SetRightPanelPhase: { + // console.log("ORDER_DEBUG: action:", Action.SetRightPanelPhase); + // // this was previously a very multifuncitonal command: + // // TogglePanel: if the same phase is send but without refireParams + // // UpdateState: if the same phase is send but with refireParams + // // SetRightPanel and erase history: if a "differnt to the current" phase is send (with or without refireParams) + // const redirect = this.getVerificationRedirect(payload, payload.phase); + // const targetPhase = redirect?.targetPhase ?? payload.phase; + // const refireParams = redirect?.refireParams ?? payload.refireParams; + + // const allowClose = payload.allowClose ?? true; + + // // Checks for wrong SetRightPanelPhase requests + // if (!this.isPhaseActionIsValid(targetPhase)) break; + + // if (targetPhase === this.currentRoom?.phase && allowClose && !refireParams) { + // // Toggle command: a toggle command needs to fullfill the following: + // // - the same phase + // // - the panel can be closed + // // - does not contain any state information (refireParams) + // this.togglePanel(); + // break; + // } else if ((targetPhase === this.currentRoom?.phase && !!refireParams)) { + // // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) + // const hist = this.byRoom[this.viewedRoomId].history; + // hist[hist.length - 1].state = refireParams; + // this.updateStateAndSettingsFromCache(); + // break; + // } else if (targetPhase !== this.currentRoom?.phase) { + // // SetRightPanel and erase history. + // this.setRightPanel(targetPhase, refireParams); + // // this.byRoom[this.viewedRoomId] = { + // // history: [{ phase: targetPhase, state: refireParams }], + // // isOpen: true, + // // }; + // // this.updateStateFromCache(); + // } + // // redirect to EncryptionPanel if there is an ongoing verification request + // // if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { + // // const { member } = payload.refireParams; + // // const pendingRequest = pendingVerificationRequestForUser(member); + // // if (pendingRequest) { + // // targetPhase = RightPanelPhases.EncryptionPanel; + // // refireParams = { + // // verificationRequest: pendingRequest, + // // member, + // // }; + // // } + // // } + + // // if (GROUP_PHASES.includes(targetPhase)) { + // // if (targetPhase === this.state.lastGroupPhase) { + // // // hide when already open + // // this.setState({ + // // showGroupPanel: !this.state.showGroupPanel, + // // previousPhase: null, + // // }); + // // } else { + // // this.setState({ + // // lastGroupPhase: targetPhase, + // // showGroupPanel: true, + // // previousPhase: this.state.lastGroupPhase, + // // }); + // // } + // // } else { + // // if (targetPhase === this.state.lastRoomPhase && !refireParams && allowClose) { + // // this.setState({ + // // showRoomPanel: !this.state.showRoomPanel, + // // previousPhase: null, + // // }); + // // } else { + // // this.setState({ + // // lastRoomPhase: targetPhase, + // // showRoomPanel: true, + // // lastRoomPhaseParams: refireParams || {}, + // // previousPhase: this.state.lastRoomPhase, + // // }); + // // } + // // } + + // // Let things like the member info panel actually open to the right member. + // // Dont do the dispatch anymore, instead use a listener + // // defaultDispatcher.dispatch({ + // // action: Action.AfterRightPanelPhaseChange, + // // phase: targetPhase, + // // ...(refireParams || {}), + // // }); + // break; + // } + // case Action.PushRightPanelPhase: { + // console.log("ORDER_DEBUG: action:", payload.action); + // const redirect = this.getVerificationRedirect(payload, payload.phase); + // const targetPhase = redirect?.targetPhase ?? payload.phase; + // const refireParams = redirect?.refireParams ?? payload.refireParams; + + // const allowClose = payload.allowClose ?? true; + + // // Checks for wrong SetRightPanelPhase requests + // if (!this.isPhaseActionIsValid(targetPhase)) break; + + // let roomCache = this.byRoom[this.viewedRoomId]; + // if (!!roomCache) { + // // append new phase + // roomCache.history.push({ state: refireParams, phase: targetPhase }); + // roomCache.isOpen = allowClose ? roomCache.isOpen : true; + // } else { + // // create new phase + // roomCache = { + // history: [{ phase: targetPhase, state: refireParams }], + // // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false + // isOpen: !allowClose, + // }; + // } + + // this.updateStateAndSettingsFromCache(); + // break; + // } + // case Action.PopRightPanelPhase: { + // const roomCache = this.byRoom[this.viewedRoomId]; + // roomCache.history.pop(); + // this.updateStateAndSettingsFromCache(); + // break; + // } - case Action.ToggleRightPanel: - console.log("ORDER_DEBUG: action:", payload.action); - this.togglePanel(); - break; + // case Action.ToggleRightPanel: + // console.log("ORDER_DEBUG: action:", payload.action); + // this.togglePanel(); + // break; // if (payload.type === "room") { // this.setState({ showRoomPanel: !this.state.showRoomPanel }); // } else { // group From 78f4e5e947898746f0cffe68e1250fc2d0599ad9 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 16:18:15 +0100 Subject: [PATCH 05/76] refactor to readyWatchingStore --- src/stores/RightPanelStore.ts | 139 ++++++++++++++++++++-------------- 1 file changed, 81 insertions(+), 58 deletions(-) diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts index a95304f99e0..081f0a0dac2 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/RightPanelStore.ts @@ -23,7 +23,11 @@ import { Action } from '../dispatcher/actions'; import { SettingLevel } from "../settings/SettingLevel"; import { logger } from "matrix-js-sdk/src/logger"; -import { AsyncStore, UPDATE_EVENT } from './AsyncStore'; +import { UPDATE_EVENT } from './AsyncStore'; +// import { AsyncStoreWithClient } from './AsyncStoreWithClient'; +import { ReadyWatchingStore } from './ReadyWatchingStore'; +import RoomViewStore from './RoomViewStore'; +import { EventSubscription } from 'fbemitter'; // import RightPanel from '../components/structures/RightPanel'; // import { Playback } from '../audio/Playback'; // import { RoomView } from '../components/structures/RoomView'; @@ -54,18 +58,18 @@ interface IPhaseAndState { state: any; } -const INITIAL_STATE: IState = { - panelHistory: [], - currentPanel: null, - previousPanel: null, - isOpen: null, - // byRoom: {}, - // byGroup: {}, - // showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), - // lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), - // lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), - // lastRoomPhaseParams: {}, -}; +// const INITIAL_STATE: IState = { +// panelHistory: [], +// currentPanel: null, +// previousPanel: null, +// isOpen: null, +// // byRoom: {}, +// // byGroup: {}, +// // showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), +// // lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), +// // lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), +// // lastRoomPhaseParams: {}, +// }; const GROUP_PHASES = [ RightPanelPhases.GroupMemberList, @@ -84,11 +88,13 @@ const MEMBER_INFO_PHASES = [ * A class for tracking the state of the right panel between layouts and * sessions. */ -export default class RightPanelStore extends AsyncStore { +export default class RightPanelStore extends ReadyWatchingStore { private static internalInstance: RightPanelStore; private viewedRoomId: string; private isViewingRoom?: boolean; - // private viewedGroupId: string; + private dispatcherRefRightPanelStore: string; + private roomStoreToken: EventSubscription; + private byRoom: { [roomId: string]: { isOpen: boolean; @@ -109,7 +115,20 @@ export default class RightPanelStore extends AsyncStore { // private lastRoomId: string; private constructor() { - super(defaultDispatcher, INITIAL_STATE); + super(defaultDispatcher); + } + + protected async onReady(): Promise { + this.dispatcherRefRightPanelStore = this.dispatcher.register(this.onDispatch); + this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); + } + + protected async onNotReady(): Promise { + this.dispatcher.unregister(this.dispatcherRefRightPanelStore); + // Remove RoomStore listener + if (this.roomStoreToken) { + this.roomStoreToken.remove(); + } } // get isOpenForRoom(roomId:): boolean { @@ -117,8 +136,8 @@ export default class RightPanelStore extends AsyncStore { // } // ALL GETTERS: get isOpenForRoom(): boolean { - return this.state.isOpen ?? false; - // return this.state.byRoom[this.viewedRoomId]?.isOpen; + // return this.state.isOpen ?? false; + return this.byRoom[this.viewedRoomId]?.isOpen ?? false; } // get isOpenForGroup(): boolean { @@ -126,32 +145,33 @@ export default class RightPanelStore extends AsyncStore { // } get isOpenForGroup(): boolean { - return this.state.isOpen ?? false; - // return this.state.byGroup[this.viewedGroupId]?.isOpen; + // return this.state.isOpen ?? false; + return this.isOpenForRoom; + // return this.byRoom[this.viewedRoomId]?.isOpen; } // get roomPanelPhase(): RightPanelPhases { // return this.state.lastRoomPhase; // } get roomPhaseHistory(): Array { - return this.state.panelHistory; + // return this.state.panelHistory; // if (!this.viewedRoomId) return null; - // return this.state.byRoom[this.viewedRoomId]?.history ?? []; + return this.byRoom[this.viewedRoomId]?.history ?? []; } get currentRoom(): IPhaseAndState { - return this.state.currentPanel ?? { state: {}, phase: null }; - // const hist = this.roomPhaseHistory; - // if (hist.length >= 1) { - // return hist[hist.length - 1]; - // } - // return null; + // return this.state.currentPanel ?? { state: {}, phase: null }; + const hist = this.roomPhaseHistory; + if (hist.length >= 1) { + return hist[hist.length - 1]; + } + return { state: {}, phase: null }; } currentPanel(roomId: string): IPhaseAndState { const hist = this.byRoom[roomId]?.history ?? []; if (hist.length > 0) { return hist[hist.length - 1]; } - return this.state.currentPanel ?? { state: {}, phase: null }; + return this.currentRoom ?? { state: {}, phase: null }; // const hist = this.roomPhaseHistory; // if (hist.length >= 1) { // return hist[hist.length - 1]; @@ -159,7 +179,12 @@ export default class RightPanelStore extends AsyncStore { // return null; } get previousRoom(): IPhaseAndState { - return this.state.previousPanel ?? { state: {}, phase: null }; + // const roomCache = cacheGlobal ?? cacheThisRoom; + const hist = this.roomPhaseHistory; + if (hist?.length >= 2) { + return hist[hist.length - 2]; + } + return { state: {}, phase: null }; // const hist = this.roomPhaseHistory; // if (hist.length >= 2) { // return hist[hist.length - 2]; @@ -216,11 +241,11 @@ export default class RightPanelStore extends AsyncStore { // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) const hist = this.byRoom[rId].history; hist[hist.length - 1].state = panelState; - this.updateStateAndSettingsFromCache(); + this.emitAndUpdateSettings(); return; } else if (targetPhase !== this.currentRoom?.phase) { // SetRightPanel and erase history. - this.setRightPanelCacheAndState(targetPhase, panelState); + this.setRightPanelCache(targetPhase, panelState); } } // push right panel: appends to the history @@ -247,18 +272,18 @@ export default class RightPanelStore extends AsyncStore { }; } - this.updateStateAndSettingsFromCache(); + this.emitAndUpdateSettings(); } // pop right panel: removes last eelemnt from history public popRightPanel(roomId: string) { const roomCache = this.byRoom[roomId]; roomCache.history.pop(); - this.updateStateAndSettingsFromCache(); + this.emitAndUpdateSettings(); } public togglePanel(roomId: string) { this.byRoom[roomId].isOpen = !this.byRoom[roomId].isOpen; - this.updateStateAndSettingsFromCache(); + this.emitAndUpdateSettings(); } // get previousPhase(): RightPanelPhases | null { // return RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.previousPhase) ? this.state.previousPhase : null; @@ -328,36 +353,27 @@ export default class RightPanelStore extends AsyncStore { this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ?? SettingsStore.getValue("RightPanel.phases", this.viewedRoomId); } - private updateStateAndSettingsFromCache() { - let previous: IPhaseAndState; - let current: IPhaseAndState; + private emitAndUpdateSettings() { const cacheGlobal = this.global; const cacheThisRoom = this.byRoom[this.viewedRoomId]; SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, cacheGlobal); SettingsStore.setValue("RightPanel.phases", this.viewedRoomId, SettingLevel.DEVICE, cacheThisRoom); - const roomCache = cacheGlobal ?? cacheThisRoom; - const hist = roomCache?.history ?? []; - if (hist?.length >= 2) { - previous = hist[hist.length - 2]; - } - if (hist?.length >= 1) { - current = hist[hist.length - 1]; - } - this.updateState({ - isOpen: roomCache?.isOpen ?? false, - currentPanel: current, - previousPanel: previous, - panelHistory: hist, - }); + this.emit(UPDATE_EVENT, null); + // this.updateState({ + // isOpen: roomCache?.isOpen ?? false, + // currentPanel: current, + // previousPanel: previous, + // panelHistory: hist, + // }); } // NEEDED: // set rigth panel: overrides the history - private setRightPanelCacheAndState(targetPhase: RightPanelPhases, panelState: any) { + private setRightPanelCache(targetPhase: RightPanelPhases, panelState: any) { this.byRoom[this.viewedRoomId] = { history: [{ phase: targetPhase, state: panelState }], isOpen: true, }; - this.updateStateAndSettingsFromCache(); + this.emitAndUpdateSettings(); } // CHECKS: // - RoomMemberInfo -> needs to be changed to EncryptionPanel if pendingVerificationRequestForUser @@ -396,6 +412,13 @@ export default class RightPanelStore extends AsyncStore { } return true; } + onRoomViewStoreUpdate() { + // TODO: use this function instead of the onDispatch (the whole onDispatch can get removed!) as soon groups are removed + // this.viewedRoomId = RoomViewStore.getRoomId(); + // this.isViewingRoom = true; // Is viewing room will of course be removed when removing groups + // // load values from byRoomCache with the viewedRoomId. + // this.loadCacheFromSettings(); + } onDispatch(payload: ActionPayload) { // __onDispatch(payload: ActionPayload) { // eslint-disable-line @typescript-eslint/naming-convention @@ -410,12 +433,12 @@ export default class RightPanelStore extends AsyncStore { if ((this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(this.currentRoom?.phase)) { // switch from group to room - this.setRightPanelCacheAndState(RightPanelPhases.RoomMemberList, {}); + this.setRightPanelCache(RightPanelPhases.RoomMemberList, {}); // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); } else if (payload.action == "view_group" - && this.state.currentPanel?.phase === RightPanelPhases.GroupMemberInfo) { + && this.currentRoom?.phase === RightPanelPhases.GroupMemberInfo) { // switch from room to group - this.setRightPanelCacheAndState(RightPanelPhases.GroupMemberList, {}); + this.setRightPanelCache(RightPanelPhases.GroupMemberList, {}); // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); } } @@ -426,7 +449,7 @@ export default class RightPanelStore extends AsyncStore { this.isViewingRoom = payload.action == Action.ViewRoom; // load values from byRoomCache with the viewedRoomId. this.loadCacheFromSettings(); - this.updateStateAndSettingsFromCache(); + this.emitAndUpdateSettings(); console.log("right panel store for current room: ", this.byRoom[this.viewedRoomId]); break; From b4f1a95c7e86ffb5d8eb2128f30cbc548921aaf1 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 21:42:48 +0100 Subject: [PATCH 06/76] using the new functions, fixing import cycle, and DEVICE setting --- src/TextForEvent.tsx | 13 ++-- src/components/structures/FilePanel.tsx | 2 +- src/components/structures/GroupView.js | 9 ++- src/components/structures/RoomView.tsx | 10 +-- src/components/structures/SpaceRoomView.tsx | 78 +++++++++++-------- src/components/structures/ThreadView.tsx | 10 +-- .../views/context_menus/RoomContextMenu.tsx | 15 ++-- .../views/elements/MemberEventListSummary.tsx | 15 ++-- .../views/groups/GroupMemberList.js | 18 +++-- .../messages/MKeyVerificationRequest.tsx | 14 ++-- src/components/views/right_panel/BaseCard.tsx | 17 ++-- .../views/right_panel/EncryptionPanel.tsx | 17 ++-- .../views/right_panel/HeaderButtons.tsx | 13 ++-- .../views/right_panel/RoomSummaryCard.tsx | 43 +++++----- src/components/views/right_panel/UserInfo.tsx | 15 ++-- .../views/right_panel/WidgetCard.tsx | 15 ++-- src/components/views/rooms/RoomListHeader.tsx | 4 +- .../views/toasts/VerificationRequestToast.tsx | 20 +++-- src/dispatcher/dispatch-actions/threads.ts | 32 +++++--- src/settings/Settings.tsx | 4 +- src/stores/RightPanelStore.ts | 27 ++++--- src/verification.ts | 50 +++++++----- 22 files changed, 252 insertions(+), 189 deletions(-) diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx index 112e6d62275..18fe0ec4040 100644 --- a/src/TextForEvent.tsx +++ b/src/TextForEvent.tsx @@ -24,7 +24,6 @@ import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore"; import { RightPanelPhases } from './stores/RightPanelStorePhases'; import { Action } from './dispatcher/actions'; import defaultDispatcher from './dispatcher/dispatcher'; -import { SetRightPanelPhasePayload } from './dispatcher/payloads/SetRightPanelPhasePayload'; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials"; import { EventType, MsgType } from "matrix-js-sdk/src/@types/event"; @@ -33,6 +32,7 @@ import { ROOM_SECURITY_TAB } from "./components/views/dialogs/RoomSettingsDialog import { logger } from "matrix-js-sdk/src/logger"; import { removeDirectionOverrideChars } from 'matrix-js-sdk/src/utils'; +import RightPanelStore from './stores/RightPanelStore'; // These functions are frequently used just to check whether an event has // any text to display at all. For this reason they return deferred values @@ -503,11 +503,12 @@ const onPinnedOrUnpinnedMessageClick = (messageId: string, roomId: string): void }; const onPinnedMessagesClick = (): void => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.PinnedMessages, - allowClose: false, - }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.PinnedMessages, null, false); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.PinnedMessages, + // allowClose: false, + // }); }; function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null { diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index 9a354e4d217..871e18f2f89 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -27,9 +27,9 @@ import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window'; import { MatrixClientPeg } from '../../MatrixClientPeg'; import EventIndexPeg from "../../indexing/EventIndexPeg"; import { _t } from '../../languageHandler'; -import BaseCard from "../views/right_panel/BaseCard"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice"; +import BaseCard from "../views/right_panel/BaseCard"; import { replaceableComponent } from "../../utils/replaceableComponent"; import ResizeNotifier from '../../utils/ResizeNotifier'; diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 57c8b6c5aa6..4bd1292d860 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -823,10 +823,11 @@ export default class GroupView extends React.Component { }; _onAdminsLinkClick = () => { - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.GroupMemberList, - }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.GroupMemberList); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.GroupMemberList, + // }); }; _getGroupSection() { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index add798297b4..92885212ec9 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -97,7 +97,6 @@ import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threa import { fetchInitialEvent } from "../../utils/EventUtils"; import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload"; import AppsDrawer from '../views/rooms/AppsDrawer'; -import { SetRightPanelPhasePayload } from '../../dispatcher/payloads/SetRightPanelPhasePayload'; import { RightPanelPhases } from '../../stores/RightPanelStorePhases'; const DEBUG = false; @@ -331,10 +330,11 @@ export class RoomView extends React.Component { if (!this.state.room) return; if (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) { // Show chat in right panel when a widget is maximised - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.Timeline, - }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.Timeline); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.Timeline, + // }); } this.checkWidgets(this.state.room); // this.checkRightPanel(this.state.room); diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 41c7b4ae7a0..5c20077d1a8 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -43,7 +43,6 @@ import { ActionPayload } from "../../dispatcher/payloads"; import RightPanel from "./RightPanel"; import RightPanelStore from "../../stores/RightPanelStore"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; -import { SetRightPanelPhasePayload } from "../../dispatcher/payloads/SetRightPanelPhasePayload"; import { useStateArray } from "../../hooks/useStateArray"; import SpacePublicShare from "../views/spaces/SpacePublicShare"; import { @@ -165,11 +164,13 @@ const SpaceInfo = ({ space }: { space: Room }) => { kind="link" className="mx_SpaceRoomView_info_memberCount" onClick={() => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.RoomMemberList, - refireParams: { space }, - }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, { space } ); + + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.RoomMemberList, + // refireParams: { space }, + // }); }} > { _t("%(count)s members", { count }) } @@ -474,11 +475,12 @@ const SpaceLanding = ({ space }: { space: Room }) => { } const onMembersClick = () => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.RoomMemberList, - refireParams: { space }, - }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, { space } ); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.RoomMemberList, + // refireParams: { space }, + // }); }; return

@@ -849,29 +851,41 @@ export default class SpaceRoomView extends React.PureComponent { if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return; if (payload.action === Action.ViewUser && payload.member) { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.SpaceMemberInfo, - refireParams: { - space: this.props.space, - member: payload.member, - }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.SpaceMemberInfo, + { space: this.props.space, member: payload.member }, + ); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.SpaceMemberInfo, + // refireParams: { + // space: this.props.space, + // member: payload.member, + // }, + // }); } else if (payload.action === "view_3pid_invite" && payload.event) { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.Space3pidMemberInfo, - refireParams: { - space: this.props.space, - event: payload.event, - }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.Space3pidMemberInfo, + { space: this.props.space, member: payload.member }, + ); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.Space3pidMemberInfo, + // refireParams: { + // space: this.props.space, + // event: payload.event, + // }, + // }); } else { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.SpaceMemberList, - refireParams: { space: this.props.space }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.SpaceMemberList, + { space: this.props.space }, + ); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.SpaceMemberList, + // refireParams: { space: this.props.space }, + // }); } }; diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index d7b4fb5a9c5..be3e9e5a187 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -31,7 +31,6 @@ import { Layout } from '../../settings/enums/Layout'; import TimelinePanel from './TimelinePanel'; import dis from "../../dispatcher/dispatcher"; import { ActionPayload } from '../../dispatcher/payloads'; -import { SetRightPanelPhasePayload } from '../../dispatcher/payloads/SetRightPanelPhasePayload'; import { Action } from '../../dispatcher/actions'; import { MatrixClientPeg } from '../../MatrixClientPeg'; import { E2EStatus } from '../../utils/ShieldUtils'; @@ -94,10 +93,11 @@ export default class ThreadView extends React.Component { } if (prevProps.room !== this.props.room) { - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.RoomSummary, - }); + RightPanelStore.instance.setRightPanel( RightPanelPhases.RoomSummary ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.RoomSummary, + // }); } } diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx index 38cbdd69e4f..1319c6e6cac 100644 --- a/src/components/views/context_menus/RoomContextMenu.tsx +++ b/src/components/views/context_menus/RoomContextMenu.tsx @@ -38,12 +38,10 @@ import Modal from "../../../Modal"; import ExportDialog from "../dialogs/ExportDialog"; import { onRoomFilesClick, onRoomMembersClick } from "../right_panel/RoomSummaryCard"; import RoomViewStore from "../../../stores/RoomViewStore"; -import defaultDispatcher from "../../../dispatcher/dispatcher"; -import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; -import { Action } from "../../../dispatcher/actions"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; import { ROOM_NOTIFICATIONS_TAB } from "../dialogs/RoomSettingsDialog"; import { useEventEmitterState } from "../../../hooks/useEventEmitter"; +import RightPanelStore from "../../../stores/RightPanelStore"; interface IProps extends IContextMenuProps { room: Room; @@ -249,11 +247,12 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => { ev.stopPropagation(); ensureViewingRoom(); - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.RoomSummary, - allowClose: false, - }); + RightPanelStore.instance.setRightPanel( RightPanelPhases.RoomSummary, null, false ); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.RoomSummary, + // allowClose: false, + // }); onFinished(); }} label={_t("Widgets")} diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 13dcb114f91..5bb2d8976bb 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -25,20 +25,19 @@ import { formatCommaSeparatedList } from '../../../utils/FormattingUtils'; import { isValid3pidInvite } from "../../../RoomInvite"; import EventListSummary from "./EventListSummary"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import defaultDispatcher from '../../../dispatcher/dispatcher'; import { RightPanelPhases } from '../../../stores/RightPanelStorePhases'; -import { Action } from '../../../dispatcher/actions'; -import { SetRightPanelPhasePayload } from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; import { jsxJoin } from '../../../utils/ReactUtils'; import { EventType } from 'matrix-js-sdk/src/@types/event'; import { Layout } from '../../../settings/enums/Layout'; +import RightPanelStore from '../../../stores/RightPanelStore'; const onPinnedMessagesClick = (): void => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.PinnedMessages, - allowClose: false, - }); + RightPanelStore.instance.setRightPanel( RightPanelPhases.PinnedMessages, null, false ); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.PinnedMessages, + // allowClose: false, + // }); }; const SENDER_AS_DISPLAY_NAME_EVENTS = [EventType.RoomServerAcl, EventType.RoomPinnedEvents]; diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 3204f82e823..b97f75d3127 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -18,16 +18,14 @@ limitations under the License. import React from 'react'; import { _t } from '../../../languageHandler'; import * as sdk from '../../../index'; -import dis from '../../../dispatcher/dispatcher'; import GroupStore from '../../../stores/GroupStore'; import PropTypes from 'prop-types'; import { showGroupInviteDialog } from '../../../GroupAddressPicker'; import AccessibleButton from '../elements/AccessibleButton'; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; -import { Action } from "../../../dispatcher/actions"; import { replaceableComponent } from "../../../utils/replaceableComponent"; - +import RightPanelStore from '../../../stores/RightPanelStore'; const INITIAL_LOAD_NUM_MEMBERS = 30; @replaceableComponent("views.groups.GroupMemberList") @@ -169,11 +167,15 @@ export default class GroupMemberList extends React.Component { onInviteToGroupButtonClick = () => { showGroupInviteDialog(this.props.groupId).then(() => { - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.GroupMemberList, - refireParams: { groupId: this.props.groupId }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.GroupMemberList, + { groupId: this.props.groupId }, + ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.GroupMemberList, + // refireParams: { groupId: this.props.groupId }, + // }); }); }; diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index e1b91f63d76..3df2edb5ac1 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -20,14 +20,13 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { _t } from '../../../languageHandler'; import { getNameForEventRoom, userLabelForEventRoom } from '../../../utils/KeyVerificationStateObserver'; -import dis from "../../../dispatcher/dispatcher"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import { Action } from "../../../dispatcher/actions"; import EventTileBubble from "./EventTileBubble"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import AccessibleButton from '../elements/AccessibleButton'; import { logger } from "matrix-js-sdk/src/logger"; +import RightPanelStore from '../../../stores/RightPanelStore'; interface IProps { mxEvent: MatrixEvent; @@ -52,11 +51,12 @@ export default class MKeyVerificationRequest extends React.Component { private openRequest = () => { const { verificationRequest } = this.props.mxEvent; const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId); - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.EncryptionPanel, - refireParams: { verificationRequest, member }, - }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.EncryptionPanel, { verificationRequest, member } ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.EncryptionPanel, + // refireParams: { verificationRequest, member }, + // }); }; private onRequestChanged = () => { diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 4b18c63e120..c302e6ebc1b 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -24,6 +24,8 @@ import defaultDispatcher from "../../../dispatcher/dispatcher"; import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; import { Action } from "../../../dispatcher/actions"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +// import RoomListStore from '../../../stores/room-list/RoomListStore'; +import RightPanelStore from '../../../stores/RightPanelStore'; interface IProps { header?: ReactNode; @@ -64,11 +66,16 @@ const BaseCard: React.FC = ({ let backButton; if (previousPhase) { const onBackClick = () => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: previousPhase, - refireParams: refireParams, - }); + // console.log(RoomListStore.instance); + // TODO RightPanelStore: this should ideally be: + // RightPanelStore.instance.popRightPanel(); + + RightPanelStore.instance.setRightPanel(previousPhase, refireParams ); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: previousPhase, + // refireParams: refireParams, + // }); }; const label = previousPhaseLabel ?? _t("Back"); backButton = ; diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index 12d0cca258b..ffc1675c97e 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -28,9 +28,8 @@ import { useEventEmitter } from "../../../hooks/useEventEmitter"; import Modal from "../../../Modal"; import * as sdk from "../../../index"; import { _t } from "../../../languageHandler"; -import dis from "../../../dispatcher/dispatcher"; -import { Action } from "../../../dispatcher/actions"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import RightPanelStore from "../../../stores/RightPanelStore"; // cancellation codes which constitute a key mismatch const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"]; @@ -114,11 +113,15 @@ const EncryptionPanel: React.FC = (props: IProps) => { setRequest(verificationRequest_); setPhase(verificationRequest_.phase); // Notify the RightPanelStore about this - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.EncryptionPanel, - refireParams: { member, verificationRequest: verificationRequest_ }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.EncryptionPanel, + { member, verificationRequest: verificationRequest_ }, + ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.EncryptionPanel, + // refireParams: { member, verificationRequest: verificationRequest_ }, + // }); }, [member]); const requested = diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index d0a51e79fba..7456ce695c5 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -22,9 +22,7 @@ import React from 'react'; import dis from '../../../dispatcher/dispatcher'; import RightPanelStore from "../../../stores/RightPanelStore"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import { Action } from '../../../dispatcher/actions'; import { - SetRightPanelPhasePayload, SetRightPanelPhaseRefireParams, } from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; // import type { EventSubscription } from "fbemitter"; @@ -70,11 +68,12 @@ export default abstract class HeaderButtons

extends React.Component) { - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: phase, - refireParams: extras, - }); + RightPanelStore.instance.setRightPanel(phase, extras); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: phase, + // refireParams: extras, + // }); } public isPhase(phases: string | string[]) { diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 6aaddccdd91..a3fcc29f005 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -25,9 +25,7 @@ import { _t } from '../../../languageHandler'; import RoomAvatar from "../avatars/RoomAvatar"; import AccessibleButton from "../elements/AccessibleButton"; import defaultDispatcher from "../../../dispatcher/dispatcher"; -import { Action } from "../../../dispatcher/actions"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; import Modal from "../../../Modal"; import ShareDialog from '../dialogs/ShareDialog'; import { useEventEmitter } from "../../../hooks/useEventEmitter"; @@ -48,6 +46,7 @@ import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widget import RoomName from "../elements/RoomName"; import UIStore from "../../../stores/UIStore"; import ExportDialog from "../dialogs/ExportDialog"; +import RightPanelStore from "../../../stores/RightPanelStore"; interface IProps { room: Room; @@ -98,13 +97,15 @@ const AppRow: React.FC = ({ app, room }) => { const subtitle = dataTitle && " - " + dataTitle; const onOpenWidgetClick = () => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.Widget, - refireParams: { - widgetId: app.id, - }, - }); + // TODO RightPanelPhase: should push the widget + RightPanelStore.instance.setRightPanel(RightPanelPhases.Widget, { widgetId: app.id }); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.Widget, + // refireParams: { + // widgetId: app.id, + // }, + // }); }; const isPinned = WidgetLayoutStore.instance.isInContainer(room, app, Container.Top); @@ -232,19 +233,23 @@ const AppsSection: React.FC = ({ room }) => { }; export const onRoomMembersClick = (allowClose = true) => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.RoomMemberList, - allowClose, - }); + // TODO RightPanelStore: should push the phase + RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, undefined, allowClose); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.RoomMemberList, + // allowClose, + // }); }; export const onRoomFilesClick = (allowClose = true) => { - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.FilePanel, - allowClose, - }); + // TODO RightPanelStore: should push the phase + RightPanelStore.instance.setRightPanel(RightPanelPhases.FilePanel, undefined, allowClose); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.FilePanel, + // allowClose, + // }); }; const onRoomSettingsClick = () => { diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 8c7b29777ed..e06558e7736 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -63,8 +63,6 @@ import QuestionDialog from "../dialogs/QuestionDialog"; import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog"; import InfoDialog from "../dialogs/InfoDialog"; import { EventType } from "matrix-js-sdk/src/@types/event"; -import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; -import RoomAvatar from "../avatars/RoomAvatar"; import RoomName from "../elements/RoomName"; import { mediaFromMxc } from "../../../customisations/Media"; import UIStore from "../../../stores/UIStore"; @@ -77,6 +75,7 @@ import { logger } from "matrix-js-sdk/src/logger"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; import { TimelineRenderingType } from "../../../contexts/RoomContext"; +import RightPanelStore from '../../../stores/RightPanelStore'; export interface IDevice { deviceId: string; @@ -1657,11 +1656,13 @@ const UserInfo: React.FC = ({ } const onEncryptionPanelClose = () => { - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: previousPhase, - refireParams: refireParams, - }); + // TODO RightPanelStore: here we want to pop the panel + RightPanelStore.instance.setRightPanel(previousPhase, refireParams); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: previousPhase, + // refireParams: refireParams, + // }); }; let content; diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 8ab73483df3..0d8757e15f7 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -24,13 +24,11 @@ import AppTile from "../elements/AppTile"; import { _t } from "../../../languageHandler"; import { useWidgets } from "./RoomSummaryCard"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import defaultDispatcher from "../../../dispatcher/dispatcher"; -import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; -import { Action } from "../../../dispatcher/actions"; import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu"; import WidgetContextMenu from "../context_menus/WidgetContextMenu"; import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import UIStore from "../../../stores/UIStore"; +import RightPanelStore from "../../../stores/RightPanelStore"; interface IProps { room: Room; @@ -50,10 +48,13 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { useEffect(() => { if (!app || isPinned) { // stop showing this card - defaultDispatcher.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.RoomSummary, - }); + + //TODO RightPanelStore: here we want to just pop the widget card. + RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomSummary); + // defaultDispatcher.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.RoomSummary, + // }); } }, [app, isPinned]); diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index e04e5fb165d..a6d73b8b627 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -51,6 +51,7 @@ import { UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE, } from "../../../stores/spaces"; +import RightPanelStore from "../../../stores/RightPanelStore"; const contextMenuBelow = (elementRect: DOMRect) => { // align the context menu's icons with the icon which opened the context menu @@ -99,7 +100,8 @@ const PrototypeCommunityContextMenu = (props) => { action: 'view_room', room_id: chat.roomId, }, true); - dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, undefined, undefined, chat.roomId); + // dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList }); } else { // "This should never happen" clauses go here for the prototype. Modal.createTrackedDialog('Failed to find general chat', '', ErrorDialog, { diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index 94507662b22..5208448e1be 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -19,7 +19,6 @@ import React from "react"; import { _t } from '../../../languageHandler'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; import { userLabelForEventRoom } from "../../../utils/KeyVerificationStateObserver"; import dis from "../../../dispatcher/dispatcher"; import ToastStore from "../../../stores/ToastStore"; @@ -32,6 +31,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; import VerificationRequestDialog from "../dialogs/VerificationRequestDialog"; import { logger } from "matrix-js-sdk/src/logger"; +import RightPanelStore from "../../../stores/RightPanelStore"; interface IProps { toastKey: string; @@ -116,14 +116,20 @@ export default class VerificationRequestToast extends React.PureComponent({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.EncryptionPanel, - refireParams: { + RightPanelStore.instance.setRightPanel(RightPanelPhases.EncryptionPanel, + { verificationRequest: request, member: cli.getUser(request.otherUserId), - }, - }); + }, undefined, request.channel.roomId, + ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.EncryptionPanel, + // refireParams: { + // verificationRequest: request, + // member: cli.getUser(request.otherUserId), + // }, + // }); } else { Modal.createTrackedDialog('Incoming Verification', '', VerificationRequestDialog, { verificationRequest: request, diff --git a/src/dispatcher/dispatch-actions/threads.ts b/src/dispatcher/dispatch-actions/threads.ts index 31d5ba5bf77..da312054fc5 100644 --- a/src/dispatcher/dispatch-actions/threads.ts +++ b/src/dispatcher/dispatch-actions/threads.ts @@ -14,31 +14,39 @@ See the License for the specific language governing permissions and limitations under the License. */ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import RightPanelStore from "../../stores/RightPanelStore"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; -import { Action } from "../actions"; -import dis from '../dispatcher'; -import { SetRightPanelPhasePayload } from "../payloads/SetRightPanelPhasePayload"; export const dispatchShowThreadEvent = ( rootEvent: MatrixEvent, initialEvent?: MatrixEvent, highlighted?: boolean, ) => { - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.ThreadView, - refireParams: { + // TODO RightPanelStore: this should really be a push! + RightPanelStore.instance.setRightPanel( + RightPanelPhases.ThreadView, + { event: rootEvent, initialEvent, highlighted, }, - }); + ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.ThreadView, + // refireParams: { + // event: rootEvent, + // initialEvent, + // highlighted, + // }, + // }); }; export const dispatchShowThreadsPanelEvent = () => { - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.ThreadPanel, - }); + RightPanelStore.instance.setRightPanel(RightPanelPhases.ThreadPanel); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.ThreadPanel, + // }); }; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 4d76761a691..2a0e14a1269 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -750,11 +750,11 @@ export const SETTINGS: {[setting: string]: ISetting} = { default: true, }, "RightPanel.phasesGlobal": { - supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, + supportedLevels: [SettingLevel.DEVICE], default: null, }, "RightPanel.phases": { - supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, + supportedLevels: [SettingLevel.ROOM_DEVICE], default: null, }, // "showRightPanelInRoom": { diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts index 081f0a0dac2..123ed5b8425 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/RightPanelStore.ts @@ -357,7 +357,9 @@ export default class RightPanelStore extends ReadyWatchingStore { const cacheGlobal = this.global; const cacheThisRoom = this.byRoom[this.viewedRoomId]; SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, cacheGlobal); - SettingsStore.setValue("RightPanel.phases", this.viewedRoomId, SettingLevel.DEVICE, cacheThisRoom); + if (!!this.viewedRoomId) { + SettingsStore.setValue("RightPanel.phases", this.viewedRoomId, SettingLevel.ROOM_DEVICE, cacheThisRoom); + } this.emit(UPDATE_EVENT, null); // this.updateState({ // isOpen: roomCache?.isOpen ?? false, @@ -425,32 +427,33 @@ export default class RightPanelStore extends ReadyWatchingStore { switch (payload.action) { case 'view_group': case Action.ViewRoom: { + const _this = RightPanelStore.instance; console.log("ORDER_DEBUG: action:", payload.action); - if (payload.room_id === this.viewedRoomId) break; // skip this transition, probably a permalink + if (payload.room_id === _this.viewedRoomId) break; // skip this transition, probably a permalink // Put group in the same/similar view to what was open from the previously viewed room // Is contradictory to the new "per room" philosophy but it is the legacy behaviour for groups. - if ((this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { - if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(this.currentRoom?.phase)) { + if ((_this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { + if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentRoom?.phase)) { // switch from group to room - this.setRightPanelCache(RightPanelPhases.RoomMemberList, {}); + _this.setRightPanelCache(RightPanelPhases.RoomMemberList, {}); // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); } else if (payload.action == "view_group" - && this.currentRoom?.phase === RightPanelPhases.GroupMemberInfo) { + && _this.currentRoom?.phase === RightPanelPhases.GroupMemberInfo) { // switch from room to group - this.setRightPanelCache(RightPanelPhases.GroupMemberList, {}); + _this.setRightPanelCache(RightPanelPhases.GroupMemberList, {}); // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); } } // Update the current room here, so that all the other functions dont need to be room dependant. // The right panel store always will return the state for the current room. - this.viewedRoomId = payload.room_id; - this.isViewingRoom = payload.action == Action.ViewRoom; + _this.viewedRoomId = payload.room_id; + _this.isViewingRoom = payload.action == Action.ViewRoom; // load values from byRoomCache with the viewedRoomId. - this.loadCacheFromSettings(); - this.emitAndUpdateSettings(); - console.log("right panel store for current room: ", this.byRoom[this.viewedRoomId]); + _this.loadCacheFromSettings(); + _this.emitAndUpdateSettings(); + console.log("right panel store for current room: ", _this.byRoom[_this.viewedRoomId]); break; // Reset to the member list if we're viewing member info diff --git a/src/verification.ts b/src/verification.ts index dfee6608ea3..9601ab983f9 100644 --- a/src/verification.ts +++ b/src/verification.ts @@ -23,10 +23,10 @@ import { RightPanelPhases } from "./stores/RightPanelStorePhases"; import { findDMForUser } from './createRoom'; import { accessSecretStorage } from './SecurityManager'; import { verificationMethods as VerificationMethods } from 'matrix-js-sdk/src/crypto'; -import { Action } from './dispatcher/actions'; import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDialog"; import { IDevice } from "./components/views/right_panel/UserInfo"; import ManualDeviceKeyVerificationDialog from "./components/views/dialogs/ManualDeviceKeyVerificationDialog"; +import RightPanelStore from "./stores/RightPanelStore"; async function enable4SIfNeeded() { const cli = MatrixClientPeg.get(); @@ -65,11 +65,15 @@ export async function verifyDevice(user: User, device: IDevice) { device.deviceId, VerificationMethods.SAS, ); - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.EncryptionPanel, - refireParams: { member: user, verificationRequestPromise }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.EncryptionPanel, + { member: user, verificationRequestPromise }, + ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.EncryptionPanel, + // refireParams: { member: user, verificationRequestPromise }, + // }); } else if (action === "legacy") { Modal.createTrackedDialog("Legacy verify session", "legacy verify session", ManualDeviceKeyVerificationDialog, @@ -96,11 +100,15 @@ export async function legacyVerifyUser(user: User) { } } const verificationRequestPromise = cli.requestVerification(user.userId); - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.EncryptionPanel, - refireParams: { member: user, verificationRequestPromise }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.EncryptionPanel, + { member: user, verificationRequestPromise }, + ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.EncryptionPanel, + // refireParams: { member: user, verificationRequestPromise }, + // }); } export async function verifyUser(user: User) { @@ -113,14 +121,18 @@ export async function verifyUser(user: User) { return; } const existingRequest = pendingVerificationRequestForUser(user); - dis.dispatch({ - action: Action.SetRightPanelPhase, - phase: RightPanelPhases.EncryptionPanel, - refireParams: { - member: user, - verificationRequest: existingRequest, - }, - }); + RightPanelStore.instance.setRightPanel( + RightPanelPhases.EncryptionPanel, + { member: user, verificationRequest: existingRequest }, + ); + // dis.dispatch({ + // action: Action.SetRightPanelPhase, + // phase: RightPanelPhases.EncryptionPanel, + // refireParams: { + // member: user, + // verificationRequest: existingRequest, + // }, + // }); } export function pendingVerificationRequestForUser(user: User) { From 4f010e8b6154096670c7ac620912fe70c107dd4d Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 21:57:30 +0100 Subject: [PATCH 07/76] refactor toggle to RightPanelStore.togglePanel() comment out deprecated actions --- src/components/structures/LoggedInView.tsx | 7 ++-- src/components/structures/RightPanel.tsx | 11 ++++--- .../views/right_panel/RoomHeaderButtons.tsx | 5 +-- src/dispatcher/actions.ts | 33 ++++++++----------- .../payloads/ToggleRightPanelPayload.ts | 27 --------------- src/stores/RightPanelStore.ts | 15 +++++---- 6 files changed, 32 insertions(+), 66 deletions(-) delete mode 100644 src/dispatcher/payloads/ToggleRightPanelPayload.ts diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 427e5f84674..b52c97c368d 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -44,7 +44,6 @@ import CallContainer from '../views/voip/CallContainer'; import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload"; import RoomListStore from "../../stores/room-list/RoomListStore"; import NonUrgentToastContainer from "./NonUrgentToastContainer"; -import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload"; import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore"; import Modal from "../../Modal"; import { ICollapseConfig } from "../../resizer/distributors/collapse"; @@ -70,6 +69,7 @@ import GroupFilterPanel from './GroupFilterPanel'; import CustomRoomTagPanel from './CustomRoomTagPanel'; import { mediaFromMxc } from "../../customisations/Media"; import LegacyCommunityPreview from "./LegacyCommunityPreview"; +import RightPanelStore from '../../stores/RightPanelStore'; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. @@ -507,10 +507,7 @@ class LoggedInView extends React.Component { break; case NavigationAction.ToggleRoomSidePanel: if (this.props.page_type === "room_view" || this.props.page_type === "group_view") { - dis.dispatch({ - action: Action.ToggleRightPanel, - type: this.props.page_type === "room_view" ? "room" : "group", - }); + RightPanelStore.instance.togglePanel(); handled = true; } break; diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 9d535fa294d..3b32c43d17b 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -254,11 +254,12 @@ export default class RightPanel extends React.Component { // When the user clicks close on the encryption panel cancel the pending request first if any this.state.verificationRequest.cancel(); } else { - // the RightPanelStore has no way of knowing which mode room/group it is in, so we handle closing here - dis.dispatch({ - action: Action.ToggleRightPanel, - // type: this.props.groupId ? "group" : "room", // not needed anymore since group or room is already known by the state - }); + // the RightPanelStore knows which mode room/group it is in, so we handle closing here + RightPanelStore.instance.togglePanel(); + // dis.dispatch({ + // action: Action.ToggleRightPanel, + // // type: this.props.groupId ? "group" : "room", // not needed anymore since group or room is already known by the state + // }); } }; diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index d09c8a0054e..bb31e6581b1 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -174,10 +174,7 @@ export default class RoomHeaderButtons extends HeaderButtons { private onThreadsPanelClicked = () => { if (RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) { - dis.dispatch({ - action: Action.ToggleRightPanel, - type: "room", - }); + RightPanelStore.instance.togglePanel(); } else { dispatchShowThreadsPanelEvent(); } diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts index 1904e59fd5b..2ffa41f6711 100644 --- a/src/dispatcher/actions.ts +++ b/src/dispatcher/actions.ts @@ -97,25 +97,20 @@ export enum Action { */ ViewRoomDelta = "view_room_delta", - /** - * Sets the phase for the right panel. Should be used with SetRightPanelPhasePayload. - */ - SetRightPanelPhase = "set_right_panel_phase", - - /** - * Pushes a new phase to the history array for the right panel. Should be used with SetRightPanelPhasePayload. - */ - PushRightPanelPhase = "push_right_panel_phase", - - /** - * Pops the current phase for the right panel. So that the previous phase is show with its associated state (refireParams) - */ - PopRightPanelPhase = "pop_right_panel_phase", - - /** - * Toggles the right panel. Should be used with ToggleRightPanelPayload. - */ - ToggleRightPanel = "toggle_right_panel", + // /** + // * Sets the phase for the right panel. Should be used with SetRightPanelPhasePayload. + // */ + // SetRightPanelPhase = "set_right_panel_phase", + + // /** + // * Pushes a new phase to the history array for the right panel. Should be used with SetRightPanelPhasePayload. + // */ + // PushRightPanelPhase = "push_right_panel_phase", + + // /** + // * Pops the current phase for the right panel. So that the previous phase is show with its associated state (refireParams) + // */ + // PopRightPanelPhase = "pop_right_panel_phase", /** * Trigged after the phase of the right panel is set. Should be used with AfterRightPanelPhaseChangePayload. diff --git a/src/dispatcher/payloads/ToggleRightPanelPayload.ts b/src/dispatcher/payloads/ToggleRightPanelPayload.ts deleted file mode 100644 index 06351948901..00000000000 --- a/src/dispatcher/payloads/ToggleRightPanelPayload.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { ActionPayload } from "../payloads"; -import { Action } from "../actions"; - -export interface ToggleRightPanelPayload extends ActionPayload { - action: Action.ToggleRightPanel; - - /** - * The type of room that the panel is toggled in. - */ - type: "group" | "room"; -} diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts index 123ed5b8425..725af8740cb 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/RightPanelStore.ts @@ -249,7 +249,8 @@ export default class RightPanelStore extends ReadyWatchingStore { } } // push right panel: appends to the history - public pushRightPanel(roomId: string, phase: RightPanelPhases, panelState: any, allowClose = true) { + public pushRightPanel(phase: RightPanelPhases, panelState: any, allowClose = true, roomId: string = null) { + const rId = roomId ?? this.viewedRoomId; console.log("ORDER_DEBUG: action: pushRightPanel"); const redirect = this.getVerificationRedirect(phase, panelState); const targetPhase = redirect?.targetPhase ?? phase; @@ -258,7 +259,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; - let roomCache = this.byRoom[roomId]; + let roomCache = this.byRoom[rId]; if (!!roomCache) { // append new phase roomCache.history.push({ state: refireParams, phase: targetPhase }); @@ -275,14 +276,16 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emitAndUpdateSettings(); } // pop right panel: removes last eelemnt from history - public popRightPanel(roomId: string) { - const roomCache = this.byRoom[roomId]; + public popRightPanel(roomId: string = null) { + const rId = roomId ?? this.viewedRoomId; + const roomCache = this.byRoom[rId]; roomCache.history.pop(); this.emitAndUpdateSettings(); } - public togglePanel(roomId: string) { - this.byRoom[roomId].isOpen = !this.byRoom[roomId].isOpen; + public togglePanel(roomId: string = null) { + const rId = roomId ?? this.viewedRoomId; + this.byRoom[rId].isOpen = !this.byRoom[rId].isOpen; this.emitAndUpdateSettings(); } // get previousPhase(): RightPanelPhases | null { From 560585f5c5b65e7d998f85d18a4acff313c480b6 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 22:02:23 +0100 Subject: [PATCH 08/76] fix viewedRoomId undefined --- src/stores/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts index 725af8740cb..162838183e3 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/RightPanelStore.ts @@ -116,10 +116,10 @@ export default class RightPanelStore extends ReadyWatchingStore { private constructor() { super(defaultDispatcher); + this.dispatcherRefRightPanelStore = this.dispatcher.register(this.onDispatch); } protected async onReady(): Promise { - this.dispatcherRefRightPanelStore = this.dispatcher.register(this.onDispatch); this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); } From 88bf032afc8103665753fc39f278b5f50ff64ffe Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 22:11:55 +0100 Subject: [PATCH 09/76] refactor SetRightPanelPhasePayload to IPanelState --- .../views/right_panel/HeaderButtons.tsx | 6 +-- .../AfterRightPanelPhaseChangePayload.ts | 4 +- .../payloads/SetRightPanelPhasePayload.ts | 17 +-------- src/stores/RightPanelStore.ts | 37 ++++++------------- 4 files changed, 16 insertions(+), 48 deletions(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 7456ce695c5..0527fb763b3 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -22,9 +22,7 @@ import React from 'react'; import dis from '../../../dispatcher/dispatcher'; import RightPanelStore from "../../../stores/RightPanelStore"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import { - SetRightPanelPhaseRefireParams, -} from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; +import { IPanelState } from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; // import type { EventSubscription } from "fbemitter"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { UPDATE_EVENT } from '../../../stores/AsyncStore'; @@ -67,7 +65,7 @@ export default abstract class HeaderButtons

extends React.Component) { + public setPhase(phase: RightPanelPhases, extras?: Partial) { RightPanelStore.instance.setRightPanel(phase, extras); // dis.dispatch({ // action: Action.SetRightPanelPhase, diff --git a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts index cfd4a2d3cc6..c6215ee69e3 100644 --- a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts +++ b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts @@ -15,7 +15,7 @@ limitations under the License. */ import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; -import { SetRightPanelPhaseRefireParams } from "./SetRightPanelPhasePayload"; +import { IPanelState } from "./SetRightPanelPhasePayload"; import { ActionPayload } from "../payloads"; import { Action } from "../actions"; import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; @@ -27,4 +27,4 @@ interface AfterRightPanelPhaseChangeAction extends ActionPayload { } export type AfterRightPanelPhaseChangePayload - = AfterRightPanelPhaseChangeAction & SetRightPanelPhaseRefireParams; + = AfterRightPanelPhaseChangeAction & IPanelState; diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts index ea997e4ed13..f0e8dbd7b52 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts @@ -18,23 +18,8 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { User } from "matrix-js-sdk/src/models/user"; -import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; -import { ActionPayload } from "../payloads"; -import { Action } from "../actions"; -export interface SetRightPanelPhasePayload extends ActionPayload { - action: Action.SetRightPanelPhase; - - phase: RightPanelPhases; - refireParams?: SetRightPanelPhaseRefireParams; - - /** - * By default SetRightPanelPhase can close the panel, this allows overriding that behaviour - */ - allowClose?: boolean; -} - -export interface SetRightPanelPhaseRefireParams { +export interface IPanelState { member?: RoomMember | User; verificationRequest?: VerificationRequest; groupId?: string; diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts index 162838183e3..df36ae2d85e 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/RightPanelStore.ts @@ -28,34 +28,14 @@ import { UPDATE_EVENT } from './AsyncStore'; import { ReadyWatchingStore } from './ReadyWatchingStore'; import RoomViewStore from './RoomViewStore'; import { EventSubscription } from 'fbemitter'; +import { IPanelState } from '../dispatcher/payloads/SetRightPanelPhasePayload'; // import RightPanel from '../components/structures/RightPanel'; // import { Playback } from '../audio/Playback'; // import { RoomView } from '../components/structures/RoomView'; -interface IState { - // Whether or not to show the right panel at all. We split out rooms and groups - // because they're different flows for the user to follow. - // showRoomPanel: boolean; - // showGroupPanel: boolean; - - // The last phase (screen) the right panel was showing - // lastRoomPhase: RightPanelPhases; - // lastGroupPhase: RightPanelPhases; - - // previousPhase?: RightPanelPhases; - - // Extra information about the last phase - // lastRoomPhaseParams: {[key: string]: any}; - - // Replicate everything for group - panelHistory: Array; - currentPanel?: IPhaseAndState; - previousPanel?: IPhaseAndState; - isOpen?: boolean; -} interface IPhaseAndState { phase: RightPanelPhases; - state: any; + state: IPanelState; } // const INITIAL_STATE: IState = { @@ -216,9 +196,9 @@ export default class RightPanelStore extends ReadyWatchingStore { } // ALL SETTERS: - public setRightPanel(phase: RightPanelPhases, state: any, allowClose = true, roomId: string = null) { + public setRightPanel(phase: RightPanelPhases, state: IPanelState = null, allowClose = true, roomId: string = null) { const rId = roomId ?? this.viewedRoomId; - console.log("ORDER_DEBUG: action:", Action.SetRightPanelPhase); + console.log("ORDER_DEBUG: setRightPanel "); // this was previously a very multifuncitonal command: // TogglePanel: if the same phase is send but without refireParams // UpdateState: if the same phase is send but with refireParams @@ -249,7 +229,12 @@ export default class RightPanelStore extends ReadyWatchingStore { } } // push right panel: appends to the history - public pushRightPanel(phase: RightPanelPhases, panelState: any, allowClose = true, roomId: string = null) { + public pushRightPanel( + phase: RightPanelPhases, + panelState: IPanelState = null, + allowClose = true, + roomId: string = null, + ) { const rId = roomId ?? this.viewedRoomId; console.log("ORDER_DEBUG: action: pushRightPanel"); const redirect = this.getVerificationRedirect(phase, panelState); @@ -373,7 +358,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } // NEEDED: // set rigth panel: overrides the history - private setRightPanelCache(targetPhase: RightPanelPhases, panelState: any) { + private setRightPanelCache(targetPhase: RightPanelPhases, panelState: IPanelState = null) { this.byRoom[this.viewedRoomId] = { history: [{ phase: targetPhase, state: panelState }], isOpen: true, From 094bf112b311b5e4431a6b8d3c5155902e2aa225 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 22:12:51 +0100 Subject: [PATCH 10/76] remove AfterRightPanelPhaseChangeAction --- .../AfterRightPanelPhaseChangePayload.ts | 30 ------------------- 1 file changed, 30 deletions(-) delete mode 100644 src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts diff --git a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts b/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts deleted file mode 100644 index c6215ee69e3..00000000000 --- a/src/dispatcher/payloads/AfterRightPanelPhaseChangePayload.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; -import { IPanelState } from "./SetRightPanelPhasePayload"; -import { ActionPayload } from "../payloads"; -import { Action } from "../actions"; -import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; - -interface AfterRightPanelPhaseChangeAction extends ActionPayload { - action: Action.AfterRightPanelPhaseChange; - phase: RightPanelPhases; - verificationRequestPromise?: Promise; -} - -export type AfterRightPanelPhaseChangePayload - = AfterRightPanelPhaseChangeAction & IPanelState; From 4620154f662194ce26a1340bc7961262a13a6d88 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 8 Dec 2021 22:13:16 +0100 Subject: [PATCH 11/76] remove imports --- src/components/views/right_panel/BaseCard.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index c302e6ebc1b..a44f2ad6305 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -20,11 +20,7 @@ import classNames from 'classnames'; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; -import defaultDispatcher from "../../../dispatcher/dispatcher"; -import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; -import { Action } from "../../../dispatcher/actions"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -// import RoomListStore from '../../../stores/room-list/RoomListStore'; import RightPanelStore from '../../../stores/RightPanelStore'; interface IProps { From 334907677179f0622c8e8c3d5187f1849ed74fdc Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 9 Dec 2021 13:33:35 +0100 Subject: [PATCH 12/76] Update typing and move RightPanelStore to folder - Also fixes some missing state updates for the right panel --- src/@types/global.d.ts | 2 +- src/TextForEvent.tsx | 4 +- src/components/structures/FilePanel.tsx | 2 +- src/components/structures/GroupView.js | 4 +- src/components/structures/LoggedInView.tsx | 2 +- src/components/structures/RightPanel.tsx | 52 ++++++++++++------- src/components/structures/RoomView.tsx | 4 +- src/components/structures/SpaceRoomView.tsx | 4 +- src/components/structures/ThreadView.tsx | 4 +- .../views/context_menus/RoomContextMenu.tsx | 4 +- .../views/elements/MemberEventListSummary.tsx | 4 +- .../views/groups/GroupMemberList.js | 4 +- .../messages/MKeyVerificationRequest.tsx | 4 +- src/components/views/right_panel/BaseCard.tsx | 4 +- .../views/right_panel/EncryptionPanel.tsx | 4 +- .../views/right_panel/GroupHeaderButtons.tsx | 2 +- .../views/right_panel/HeaderButtons.tsx | 10 ++-- .../views/right_panel/RoomHeaderButtons.tsx | 9 ++-- .../views/right_panel/RoomSummaryCard.tsx | 4 +- src/components/views/right_panel/UserInfo.tsx | 8 +-- .../views/right_panel/WidgetCard.tsx | 4 +- src/components/views/rooms/MemberList.tsx | 2 +- src/components/views/rooms/RoomHeader.tsx | 2 +- src/components/views/rooms/RoomListHeader.tsx | 4 +- .../views/toasts/VerificationRequestToast.tsx | 4 +- src/dispatcher/dispatch-actions/threads.ts | 4 +- src/settings/Settings.tsx | 1 - .../{ => right-panel}/RightPanelStore.ts | 40 +++++++------- .../RightPanelStoreIPanelState.ts} | 9 +++- .../RightPanelStorePhases.ts | 0 src/verification.ts | 4 +- 31 files changed, 114 insertions(+), 95 deletions(-) rename src/stores/{ => right-panel}/RightPanelStore.ts (95%) rename src/{dispatcher/payloads/SetRightPanelPhasePayload.ts => stores/right-panel/RightPanelStoreIPanelState.ts} (78%) rename src/stores/{ => right-panel}/RightPanelStorePhases.ts (100%) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index ed14483fb6c..e21b6e2fdcb 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -32,7 +32,7 @@ import SettingsStore from "../settings/SettingsStore"; import { ActiveRoomObserver } from "../ActiveRoomObserver"; import { Notifier } from "../Notifier"; import type { Renderer } from "react-dom"; -import RightPanelStore from "../stores/RightPanelStore"; +import RightPanelStore from "../stores/right-panel/RightPanelStore"; import WidgetStore from "../stores/WidgetStore"; import CallHandler from "../CallHandler"; import { Analytics } from "../Analytics"; diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx index 18fe0ec4040..398b3568cf1 100644 --- a/src/TextForEvent.tsx +++ b/src/TextForEvent.tsx @@ -21,7 +21,7 @@ import { isValid3pidInvite } from "./RoomInvite"; import SettingsStore from "./settings/SettingsStore"; import { ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES } from "./mjolnir/BanList"; import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore"; -import { RightPanelPhases } from './stores/RightPanelStorePhases'; +import { RightPanelPhases } from './stores/right-panel/RightPanelStorePhases'; import { Action } from './dispatcher/actions'; import defaultDispatcher from './dispatcher/dispatcher'; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; @@ -32,7 +32,7 @@ import { ROOM_SECURITY_TAB } from "./components/views/dialogs/RoomSettingsDialog import { logger } from "matrix-js-sdk/src/logger"; import { removeDirectionOverrideChars } from 'matrix-js-sdk/src/utils'; -import RightPanelStore from './stores/RightPanelStore'; +import RightPanelStore from './stores/right-panel/RightPanelStore'; // These functions are frequently used just to check whether an event has // any text to display at all. For this reason they return deferred values diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index 871e18f2f89..38b637afa7e 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -27,7 +27,7 @@ import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window'; import { MatrixClientPeg } from '../../MatrixClientPeg'; import EventIndexPeg from "../../indexing/EventIndexPeg"; import { _t } from '../../languageHandler'; -import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice"; import BaseCard from "../views/right_panel/BaseCard"; import { replaceableComponent } from "../../utils/replaceableComponent"; diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 4bd1292d860..637a8cc4a4e 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -37,13 +37,13 @@ import { showGroupAddRoomDialog } from '../../GroupAddressPicker'; import { makeGroupPermalink, makeUserPermalink } from "../../utils/permalinks/Permalinks"; import { Group } from "matrix-js-sdk/src/models/group"; import { sleep } from "matrix-js-sdk/src/utils"; -import RightPanelStore from "../../stores/RightPanelStore"; +import RightPanelStore from "../../stores/right-panel/RightPanelStore"; import AutoHideScrollbar from "./AutoHideScrollbar"; import { mediaFromMxc } from "../../customisations/Media"; import { replaceableComponent } from "../../utils/replaceableComponent"; import { createSpaceFromCommunity } from "../../utils/space"; import { Action } from "../../dispatcher/actions"; -import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index b52c97c368d..b90ba768821 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -69,7 +69,7 @@ import GroupFilterPanel from './GroupFilterPanel'; import CustomRoomTagPanel from './CustomRoomTagPanel'; import { mediaFromMxc } from "../../customisations/Media"; import LegacyCommunityPreview from "./LegacyCommunityPreview"; -import RightPanelStore from '../../stores/RightPanelStore'; +import RightPanelStore from '../../stores/right-panel/RightPanelStore'; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 3b32c43d17b..036997d228d 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -24,12 +24,8 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque import dis from '../../dispatcher/dispatcher'; import GroupStore from '../../stores/GroupStore'; -import { - // RIGHT_PANEL_PHASES_NO_ARGS, - // RIGHT_PANEL_SPACE_PHASES, - RightPanelPhases, -} from "../../stores/RightPanelStorePhases"; -import RightPanelStore from "../../stores/RightPanelStore"; +import { RightPanelPhases } from '../../stores/right-panel/RightPanelStorePhases'; +import RightPanelStore from "../../stores/right-panel/RightPanelStore"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import { Action } from "../../dispatcher/actions"; import RoomSummaryCard from "../views/right_panel/RoomSummaryCard"; @@ -41,7 +37,7 @@ import MemberList from "../views/rooms/MemberList"; import GroupMemberList from "../views/groups/GroupMemberList"; import GroupRoomList from "../views/groups/GroupRoomList"; import GroupRoomInfo from "../views/groups/GroupRoomInfo"; -import UserInfo from "../views/right_panel/UserInfo"; +import UserInfo, { GroupMember } from "../views/right_panel/UserInfo"; import ThirdPartyMemberInfo from "../views/rooms/ThirdPartyMemberInfo"; import FilePanel from "./FilePanel"; import ThreadView from "./ThreadView"; @@ -56,6 +52,7 @@ import { E2EStatus } from '../../utils/ShieldUtils'; import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads'; import TimelineCard from '../views/right_panel/TimelineCard'; import { UPDATE_EVENT } from '../../stores/AsyncStore'; +import { User } from 'matrix-js-sdk/src/models/user'; interface IProps { room?: Room; // if showing panels for a given room, this is set @@ -69,14 +66,14 @@ interface IProps { interface IState { phase: RightPanelPhases; isUserPrivilegedInGroup?: boolean; - member?: RoomMember; + member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; verificationRequestPromise?: Promise; space?: Room; widgetId?: string; groupRoomId?: string; groupId?: string; - event: MatrixEvent; + event?: MatrixEvent; initialEvent?: MatrixEvent; initialEventHighlighted?: boolean; searchQuery: string; @@ -92,8 +89,8 @@ export default class RightPanel extends React.Component { super(props, context); this.state = { // get all the state from the room panel store on inti - ...RightPanelStore.instance.currentRoom?.state, - phase: RightPanelStore.instance.currentRoom?.phase, + ...RightPanelStore.instance.currentPanel?.state, + phase: RightPanelStore.instance.currentPanel?.phase, isUserPrivilegedInGroup: null, member: this.getUserForPanel(), searchQuery: "", @@ -106,11 +103,12 @@ export default class RightPanel extends React.Component { // Helper function to split out the logic for getPhaseFromProps() and the constructor // as both are called at the same time in the constructor. - private getUserForPanel(): RoomMember { + private getUserForPanel(): RoomMember | User | GroupMember { if (this.state && this.state.member) return this.state.member; - const lastState = RightPanelStore.instance.currentRoom?.state; + const lastState = RightPanelStore.instance.currentPanel?.state; // Should just use the member from the RightPanelStore. Wherever the prop is passed should just update the store beforehand. - return this.props.member || lastState?.member; + return this.props.member ?? lastState?.member; + // (lastState?.member instanceof RoomMember ? lastState?.member as RoomMember : undefined); } // gets the current phase from the props and also maybe the store @@ -199,16 +197,29 @@ export default class RightPanel extends React.Component { if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.room.roomId) { this.delayedUpdate(); } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId && - member.userId === this.state.member.userId) { + member.userId === this.state.member.userId) { // refresh the member info (e.g. new power level) this.delayedUpdate(); } }; private onRightPanelStoreUpdate = () => { - const currentRoom = RightPanelStore.instance.currentRoom; + const currentRoom = RightPanelStore.instance.currentPanel; this.setState({ - ...currentRoom.state, phase: currentRoom.phase, + member: currentRoom.state?.member, + verificationRequest: currentRoom.state.verificationRequest, + verificationRequestPromise: currentRoom.state.verificationRequestPromise, + + groupId: currentRoom.state.groupId, + groupRoomId: currentRoom.state.groupRoomId, + event: currentRoom.state.event, + + widgetId: currentRoom.state.widgetId, + + space: currentRoom.state.space, + + initialEvent: currentRoom.state.initialEvent, + initialEventHighlighted: currentRoom.state.highlighted, }); }; private onAction = (payload: ActionPayload) => { @@ -305,10 +316,11 @@ export default class RightPanel extends React.Component { case RightPanelPhases.RoomMemberInfo: case RightPanelPhases.SpaceMemberInfo: - case RightPanelPhases.EncryptionPanel: + case RightPanelPhases.EncryptionPanel: { + const roomMember = this.state.member instanceof RoomMember ? this.state.member: undefined; panel = { verificationRequestPromise={this.state.verificationRequestPromise} />; break; - + } case RightPanelPhases.Room3pidMemberInfo: case RightPanelPhases.Space3pidMemberInfo: panel = ; diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 92885212ec9..e4e827100c2 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -50,7 +50,7 @@ import WidgetEchoStore from '../../stores/WidgetEchoStore'; import SettingsStore from "../../settings/SettingsStore"; import { Layout } from "../../settings/enums/Layout"; import AccessibleButton from "../views/elements/AccessibleButton"; -import RightPanelStore from "../../stores/RightPanelStore"; +import RightPanelStore from "../../stores/right-panel/RightPanelStore"; import { haveTileForEvent } from "../views/rooms/EventTile"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import MatrixClientContext, { withMatrixClientHOC, MatrixClientProps } from "../../contexts/MatrixClientContext"; @@ -97,7 +97,7 @@ import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threa import { fetchInitialEvent } from "../../utils/EventUtils"; import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload"; import AppsDrawer from '../views/rooms/AppsDrawer'; -import { RightPanelPhases } from '../../stores/RightPanelStorePhases'; +import { RightPanelPhases } from '../../stores/right-panel/RightPanelStorePhases'; const DEBUG = false; let debuglog = function(msg: string) {}; diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 5c20077d1a8..0ddc5a03576 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -41,8 +41,8 @@ import MainSplit from './MainSplit'; import ErrorBoundary from "../views/elements/ErrorBoundary"; import { ActionPayload } from "../../dispatcher/payloads"; import RightPanel from "./RightPanel"; -import RightPanelStore from "../../stores/RightPanelStore"; -import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import RightPanelStore from "../../stores/right-panel/RightPanelStore"; +import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; import { useStateArray } from "../../hooks/useStateArray"; import SpacePublicShare from "../views/spaces/SpacePublicShare"; import { diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index be3e9e5a187..ffc65c97970 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -20,7 +20,7 @@ import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread'; import { RelationType } from 'matrix-js-sdk/src/@types/event'; import BaseCard from "../views/right_panel/BaseCard"; -import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; import { replaceableComponent } from "../../utils/replaceableComponent"; import ResizeNotifier from '../../utils/ResizeNotifier'; @@ -40,7 +40,7 @@ import ContentMessages from '../../ContentMessages'; import UploadBar from './UploadBar'; import { _t } from '../../languageHandler'; import ThreadListContextMenu from '../views/context_menus/ThreadListContextMenu'; -import RightPanelStore from '../../stores/RightPanelStore'; +import RightPanelStore from '../../stores/right-panel/RightPanelStore'; import SettingsStore from '../../settings/SettingsStore'; import { WidgetLayoutStore } from '../../stores/widgets/WidgetLayoutStore'; diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx index 1319c6e6cac..a9b69cd8b4e 100644 --- a/src/components/views/context_menus/RoomContextMenu.tsx +++ b/src/components/views/context_menus/RoomContextMenu.tsx @@ -38,10 +38,10 @@ import Modal from "../../../Modal"; import ExportDialog from "../dialogs/ExportDialog"; import { onRoomFilesClick, onRoomMembersClick } from "../right_panel/RoomSummaryCard"; import RoomViewStore from "../../../stores/RoomViewStore"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import { ROOM_NOTIFICATIONS_TAB } from "../dialogs/RoomSettingsDialog"; import { useEventEmitterState } from "../../../hooks/useEventEmitter"; -import RightPanelStore from "../../../stores/RightPanelStore"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; interface IProps extends IContextMenuProps { room: Room; diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 5bb2d8976bb..55a994e6f77 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -25,11 +25,11 @@ import { formatCommaSeparatedList } from '../../../utils/FormattingUtils'; import { isValid3pidInvite } from "../../../RoomInvite"; import EventListSummary from "./EventListSummary"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import { RightPanelPhases } from '../../../stores/RightPanelStorePhases'; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import { jsxJoin } from '../../../utils/ReactUtils'; import { EventType } from 'matrix-js-sdk/src/@types/event'; import { Layout } from '../../../settings/enums/Layout'; -import RightPanelStore from '../../../stores/RightPanelStore'; +import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; const onPinnedMessagesClick = (): void => { RightPanelStore.instance.setRightPanel( RightPanelPhases.PinnedMessages, null, false ); diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index b97f75d3127..82aaeb0541c 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -22,10 +22,10 @@ import GroupStore from '../../../stores/GroupStore'; import PropTypes from 'prop-types'; import { showGroupInviteDialog } from '../../../GroupAddressPicker'; import AccessibleButton from '../elements/AccessibleButton'; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import RightPanelStore from '../../../stores/RightPanelStore'; +import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; const INITIAL_LOAD_NUM_MEMBERS = 30; @replaceableComponent("views.groups.GroupMemberList") diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index 3df2edb5ac1..f10e22657f2 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -20,13 +20,13 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { _t } from '../../../languageHandler'; import { getNameForEventRoom, userLabelForEventRoom } from '../../../utils/KeyVerificationStateObserver'; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import EventTileBubble from "./EventTileBubble"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import AccessibleButton from '../elements/AccessibleButton'; import { logger } from "matrix-js-sdk/src/logger"; -import RightPanelStore from '../../../stores/RightPanelStore'; +import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; interface IProps { mxEvent: MatrixEvent; diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index a44f2ad6305..13447ef50fe 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -20,8 +20,8 @@ import classNames from 'classnames'; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import RightPanelStore from '../../../stores/RightPanelStore'; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; +import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; interface IProps { header?: ReactNode; diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index ffc1675c97e..6bb7edb9059 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -28,8 +28,8 @@ import { useEventEmitter } from "../../../hooks/useEventEmitter"; import Modal from "../../../Modal"; import * as sdk from "../../../index"; import { _t } from "../../../languageHandler"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import RightPanelStore from "../../../stores/RightPanelStore"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; // cancellation codes which constitute a key mismatch const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"]; diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx index 132a76e891c..d359d432275 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.tsx +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -22,7 +22,7 @@ import React from 'react'; import { _t } from '../../../languageHandler'; import HeaderButton from './HeaderButton'; import HeaderButtons, { HeaderKind } from './HeaderButtons'; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import { Action } from "../../../dispatcher/actions"; import { ActionPayload } from "../../../dispatcher/payloads"; import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload"; diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 0527fb763b3..e693c1810c3 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -20,9 +20,9 @@ limitations under the License. import React from 'react'; import dis from '../../../dispatcher/dispatcher'; -import RightPanelStore from "../../../stores/RightPanelStore"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; -import { IPanelState } from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; +import { IPanelState } from '../../../stores/right-panel/RightPanelStoreIPanelState'; // import type { EventSubscription } from "fbemitter"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { UPDATE_EVENT } from '../../../stores/AsyncStore'; @@ -49,7 +49,7 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component { private onRoomSummaryClicked = () => { // use roomPanelPhase rather than this.state.phase as it remembers the latest one if we close - const currentPhase = RightPanelStore.instance.currentRoom.phase; + const currentPhase = RightPanelStore.instance.currentPanel.phase; if (ROOM_INFO_PHASES.includes(currentPhase)) { if (this.state.phase === currentPhase) { this.setPhase(currentPhase); } else { - this.setPhase(currentPhase, RightPanelStore.instance.currentRoom.state); + this.setPhase(currentPhase, RightPanelStore.instance.currentPanel.state); } } else { // This toggles for us, if needed diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index a3fcc29f005..68f1262c367 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -25,7 +25,7 @@ import { _t } from '../../../languageHandler'; import RoomAvatar from "../avatars/RoomAvatar"; import AccessibleButton from "../elements/AccessibleButton"; import defaultDispatcher from "../../../dispatcher/dispatcher"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import Modal from "../../../Modal"; import ShareDialog from '../dialogs/ShareDialog'; import { useEventEmitter } from "../../../hooks/useEventEmitter"; @@ -46,7 +46,7 @@ import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widget import RoomName from "../elements/RoomName"; import UIStore from "../../../stores/UIStore"; import ExportDialog from "../dialogs/ExportDialog"; -import RightPanelStore from "../../../stores/RightPanelStore"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; interface IProps { room: Room; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index e06558e7736..6e0ef62b776 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -43,7 +43,7 @@ import E2EIcon from "../rooms/E2EIcon"; import { useEventEmitter } from "../../../hooks/useEventEmitter"; import { textualPowerLevel } from '../../../Roles'; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import EncryptionPanel from "./EncryptionPanel"; import { useAsyncMemo } from '../../../hooks/useAsyncMemo'; import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification'; @@ -75,7 +75,9 @@ import { logger } from "matrix-js-sdk/src/logger"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; import { TimelineRenderingType } from "../../../contexts/RoomContext"; -import RightPanelStore from '../../../stores/RightPanelStore'; +import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; +import RoomAvatar from '../avatars/RoomAvatar'; +import { IPanelState } from '../../../stores/right-panel/RightPanelStoreIPanelState'; export interface IDevice { deviceId: string; @@ -1642,7 +1644,7 @@ const UserInfo: React.FC = ({ const classes = ["mx_UserInfo"]; - let refireParams; + let refireParams: IPanelState; let previousPhase: RightPanelPhases; // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time if (room && phase === RightPanelPhases.EncryptionPanel) { diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 0d8757e15f7..6d1e79f7f37 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -23,12 +23,12 @@ import WidgetUtils from "../../../utils/WidgetUtils"; import AppTile from "../elements/AppTile"; import { _t } from "../../../languageHandler"; import { useWidgets } from "./RoomSummaryCard"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu"; import WidgetContextMenu from "../context_menus/WidgetContextMenu"; import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import UIStore from "../../../stores/UIStore"; -import RightPanelStore from "../../../stores/RightPanelStore"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; interface IProps { room: Room; diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 224bb03ff64..f71490fee7e 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -25,7 +25,7 @@ import { isValid3pidInvite } from "../../../RoomInvite"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore"; import BaseCard from "../right_panel/BaseCard"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import RoomAvatar from "../avatars/RoomAvatar"; import RoomName from "../elements/RoomName"; import { replaceableComponent } from "../../../utils/replaceableComponent"; diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 69b91f02b05..3f7b2bac866 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -39,7 +39,7 @@ import RoomContextMenu from "../context_menus/RoomContextMenu"; import { contextMenuBelow } from './RoomTile'; import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNotificationStateStore'; import { NOTIFICATION_STATE_UPDATE } from '../../../stores/notifications/NotificationState'; -import { RightPanelPhases } from '../../../stores/RightPanelStorePhases'; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; export interface ISearchInfo { searchTerm: string; diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index a6d73b8b627..18c4fce36a0 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -36,7 +36,7 @@ import { ButtonEvent } from "../elements/AccessibleButton"; import Modal from "../../../Modal"; import EditCommunityPrototypeDialog from "../dialogs/EditCommunityPrototypeDialog"; import { Action } from "../../../dispatcher/actions"; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; import ErrorDialog from "../dialogs/ErrorDialog"; import { showCommunityInviteDialog } from "../../../RoomInvite"; import { useDispatcher } from "../../../hooks/useDispatcher"; @@ -51,7 +51,7 @@ import { UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE, } from "../../../stores/spaces"; -import RightPanelStore from "../../../stores/RightPanelStore"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; const contextMenuBelow = (elementRect: DOMRect) => { // align the context menu's icons with the icon which opened the context menu diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index 5208448e1be..65fcc3fa54f 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -18,7 +18,7 @@ import React from "react"; import { _t } from '../../../languageHandler'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; -import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import { userLabelForEventRoom } from "../../../utils/KeyVerificationStateObserver"; import dis from "../../../dispatcher/dispatcher"; import ToastStore from "../../../stores/ToastStore"; @@ -31,7 +31,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; import VerificationRequestDialog from "../dialogs/VerificationRequestDialog"; import { logger } from "matrix-js-sdk/src/logger"; -import RightPanelStore from "../../../stores/RightPanelStore"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; interface IProps { toastKey: string; diff --git a/src/dispatcher/dispatch-actions/threads.ts b/src/dispatcher/dispatch-actions/threads.ts index da312054fc5..89006629461 100644 --- a/src/dispatcher/dispatch-actions/threads.ts +++ b/src/dispatcher/dispatch-actions/threads.ts @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import RightPanelStore from "../../stores/RightPanelStore"; -import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; +import RightPanelStore from "../../stores/right-panel/RightPanelStore"; +import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; export const dispatchShowThreadEvent = ( rootEvent: MatrixEvent, diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 2a0e14a1269..f051543f0f3 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -32,7 +32,6 @@ import SystemFontController from './controllers/SystemFontController'; import UseSystemFontController from './controllers/UseSystemFontController'; import { SettingLevel } from "./SettingLevel"; import SettingController from "./controllers/SettingController"; -import { RightPanelPhases } from "../stores/RightPanelStorePhases"; import { isMac } from '../Keyboard'; import UIFeatureController from "./controllers/UIFeatureController"; import { UIFeature } from "./UIFeature"; diff --git a/src/stores/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts similarity index 95% rename from src/stores/RightPanelStore.ts rename to src/stores/right-panel/RightPanelStore.ts index df36ae2d85e..aea2dce6400 100644 --- a/src/stores/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -14,21 +14,21 @@ See the License for the specific language governing permissions and limitations under the License. */ -import defaultDispatcher from '../dispatcher/dispatcher'; -import { pendingVerificationRequestForUser } from '../verification'; -import SettingsStore from "../settings/SettingsStore"; +import defaultDispatcher from '../../dispatcher/dispatcher'; +import { pendingVerificationRequestForUser } from '../../verification'; +import SettingsStore from "../../settings/SettingsStore"; import { RightPanelPhases/*, RIGHT_PANEL_PHASES_NO_ARGS */ } from "./RightPanelStorePhases"; -import { ActionPayload } from "../dispatcher/payloads"; -import { Action } from '../dispatcher/actions'; -import { SettingLevel } from "../settings/SettingLevel"; +import { ActionPayload } from "../../dispatcher/payloads"; +import { Action } from '../../dispatcher/actions'; +import { SettingLevel } from "../../settings/SettingLevel"; import { logger } from "matrix-js-sdk/src/logger"; -import { UPDATE_EVENT } from './AsyncStore'; +import { UPDATE_EVENT } from '../AsyncStore'; // import { AsyncStoreWithClient } from './AsyncStoreWithClient'; -import { ReadyWatchingStore } from './ReadyWatchingStore'; -import RoomViewStore from './RoomViewStore'; +import { ReadyWatchingStore } from '../ReadyWatchingStore'; +import RoomViewStore from '../RoomViewStore'; import { EventSubscription } from 'fbemitter'; -import { IPanelState } from '../dispatcher/payloads/SetRightPanelPhasePayload'; +import { IPanelState } from './RightPanelStoreIPanelState'; // import RightPanel from '../components/structures/RightPanel'; // import { Playback } from '../audio/Playback'; // import { RoomView } from '../components/structures/RoomView'; @@ -138,7 +138,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // if (!this.viewedRoomId) return null; return this.byRoom[this.viewedRoomId]?.history ?? []; } - get currentRoom(): IPhaseAndState { + get currentPanel(): IPhaseAndState { // return this.state.currentPanel ?? { state: {}, phase: null }; const hist = this.roomPhaseHistory; if (hist.length >= 1) { @@ -146,12 +146,12 @@ export default class RightPanelStore extends ReadyWatchingStore { } return { state: {}, phase: null }; } - currentPanel(roomId: string): IPhaseAndState { + currentPanelById(roomId: string): IPhaseAndState { const hist = this.byRoom[roomId]?.history ?? []; if (hist.length > 0) { return hist[hist.length - 1]; } - return this.currentRoom ?? { state: {}, phase: null }; + return this.currentPanel ?? { state: {}, phase: null }; // const hist = this.roomPhaseHistory; // if (hist.length >= 1) { // return hist[hist.length - 1]; @@ -179,7 +179,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // return this.state.byRoom[this.viewedGroupId]?.history ?? []; } get currentGroup(): IPhaseAndState { - return this.currentRoom; + return this.currentPanel; // const hist = this.groupPhaseHistory; // if (hist.length >= 1) { // return hist[hist.length - 1]; @@ -210,20 +210,20 @@ export default class RightPanelStore extends ReadyWatchingStore { // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; - if (targetPhase === this.currentRoom?.phase && allowClose && !panelState) { + if (targetPhase === this.currentPanel?.phase && allowClose && !panelState) { // Toggle command: a toggle command needs to fullfill the following: // - the same phase // - the panel can be closed // - does not contain any state information (refireParams) this.togglePanel(rId); return; - } else if ((targetPhase === this.currentPanel(rId)?.phase && !!panelState)) { + } else if ((targetPhase === this.currentPanelById(rId)?.phase && !!panelState)) { // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) const hist = this.byRoom[rId].history; hist[hist.length - 1].state = panelState; this.emitAndUpdateSettings(); return; - } else if (targetPhase !== this.currentRoom?.phase) { + } else if (targetPhase !== this.currentPanel?.phase) { // SetRightPanel and erase history. this.setRightPanelCache(targetPhase, panelState); } @@ -360,7 +360,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // set rigth panel: overrides the history private setRightPanelCache(targetPhase: RightPanelPhases, panelState: IPanelState = null) { this.byRoom[this.viewedRoomId] = { - history: [{ phase: targetPhase, state: panelState }], + history: [{ phase: targetPhase, state: panelState ?? {} }], isOpen: true, }; this.emitAndUpdateSettings(); @@ -422,12 +422,12 @@ export default class RightPanelStore extends ReadyWatchingStore { // Put group in the same/similar view to what was open from the previously viewed room // Is contradictory to the new "per room" philosophy but it is the legacy behaviour for groups. if ((_this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { - if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentRoom?.phase)) { + if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentPanel?.phase)) { // switch from group to room _this.setRightPanelCache(RightPanelPhases.RoomMemberList, {}); // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); } else if (payload.action == "view_group" - && _this.currentRoom?.phase === RightPanelPhases.GroupMemberInfo) { + && _this.currentPanel?.phase === RightPanelPhases.GroupMemberInfo) { // switch from room to group _this.setRightPanelCache(RightPanelPhases.GroupMemberList, {}); // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts similarity index 78% rename from src/dispatcher/payloads/SetRightPanelPhasePayload.ts rename to src/stores/right-panel/RightPanelStoreIPanelState.ts index f0e8dbd7b52..1a4d0a06e84 100644 --- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -14,18 +14,25 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { MatrixEvent } from "matrix-js-sdk"; import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { User } from "matrix-js-sdk/src/models/user"; +import { GroupMember } from "../../components/views/right_panel/UserInfo"; export interface IPanelState { - member?: RoomMember | User; + member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; + verificationRequestPromise?: Promise; + // group groupId?: string; groupRoomId?: string; // XXX: The type for event should 'view_3pid_invite' action's payload event?: any; widgetId?: string; space?: Room; + // treads + initialEvent?: MatrixEvent; + highlighted?: boolean; } diff --git a/src/stores/RightPanelStorePhases.ts b/src/stores/right-panel/RightPanelStorePhases.ts similarity index 100% rename from src/stores/RightPanelStorePhases.ts rename to src/stores/right-panel/RightPanelStorePhases.ts diff --git a/src/verification.ts b/src/verification.ts index 9601ab983f9..4cb54bab196 100644 --- a/src/verification.ts +++ b/src/verification.ts @@ -19,14 +19,14 @@ import { User } from "matrix-js-sdk/src/models/user"; import { MatrixClientPeg } from './MatrixClientPeg'; import dis from "./dispatcher/dispatcher"; import Modal from './Modal'; -import { RightPanelPhases } from "./stores/RightPanelStorePhases"; +import { RightPanelPhases } from "./stores/right-panel/RightPanelStorePhases"; import { findDMForUser } from './createRoom'; import { accessSecretStorage } from './SecurityManager'; import { verificationMethods as VerificationMethods } from 'matrix-js-sdk/src/crypto'; import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDialog"; import { IDevice } from "./components/views/right_panel/UserInfo"; import ManualDeviceKeyVerificationDialog from "./components/views/dialogs/ManualDeviceKeyVerificationDialog"; -import RightPanelStore from "./stores/RightPanelStore"; +import RightPanelStore from "./stores/right-panel/RightPanelStore"; async function enable4SIfNeeded() { const cli = MatrixClientPeg.get(); From 3bad57ffe2496b1bbe2f9f75da463219f816bd95 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 9 Dec 2021 14:03:59 +0100 Subject: [PATCH 13/76] remove all the comments --- src/TextForEvent.tsx | 5 - src/components/structures/GroupView.js | 4 - src/components/structures/RoomView.tsx | 4 - src/components/structures/SpaceRoomView.tsx | 32 -- src/components/structures/ThreadView.tsx | 6 +- .../views/context_menus/RoomContextMenu.tsx | 5 - .../views/elements/MemberEventListSummary.tsx | 5 - .../views/groups/GroupMemberList.js | 5 - .../messages/MKeyVerificationRequest.tsx | 5 - src/components/views/right_panel/BaseCard.tsx | 5 - .../views/right_panel/EncryptionPanel.tsx | 5 - .../views/right_panel/HeaderButtons.tsx | 5 - .../views/right_panel/RoomSummaryCard.tsx | 17 - src/components/views/right_panel/UserInfo.tsx | 5 - .../views/right_panel/WidgetCard.tsx | 4 - src/components/views/rooms/RoomListHeader.tsx | 1 - src/stores/right-panel/RightPanelStore.ts | 306 +----------------- src/verification.ts | 18 -- 18 files changed, 17 insertions(+), 420 deletions(-) diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx index 398b3568cf1..0895f9378e0 100644 --- a/src/TextForEvent.tsx +++ b/src/TextForEvent.tsx @@ -504,11 +504,6 @@ const onPinnedOrUnpinnedMessageClick = (messageId: string, roomId: string): void const onPinnedMessagesClick = (): void => { RightPanelStore.instance.setRightPanel(RightPanelPhases.PinnedMessages, null, false); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.PinnedMessages, - // allowClose: false, - // }); }; function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null { diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 637a8cc4a4e..361d9334948 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -824,10 +824,6 @@ export default class GroupView extends React.Component { _onAdminsLinkClick = () => { RightPanelStore.instance.setRightPanel(RightPanelPhases.GroupMemberList); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.GroupMemberList, - // }); }; _getGroupSection() { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index e4e827100c2..a2cbf70052a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -331,10 +331,6 @@ export class RoomView extends React.Component { if (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) { // Show chat in right panel when a widget is maximised RightPanelStore.instance.setRightPanel(RightPanelPhases.Timeline); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.Timeline, - // }); } this.checkWidgets(this.state.room); // this.checkRightPanel(this.state.room); diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 0ddc5a03576..5400ae5d07b 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -165,12 +165,6 @@ const SpaceInfo = ({ space }: { space: Room }) => { className="mx_SpaceRoomView_info_memberCount" onClick={() => { RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, { space } ); - - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.RoomMemberList, - // refireParams: { space }, - // }); }} > { _t("%(count)s members", { count }) } @@ -476,11 +470,6 @@ const SpaceLanding = ({ space }: { space: Room }) => { const onMembersClick = () => { RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, { space } ); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.RoomMemberList, - // refireParams: { space }, - // }); }; return

@@ -855,37 +844,16 @@ export default class SpaceRoomView extends React.PureComponent { RightPanelPhases.SpaceMemberInfo, { space: this.props.space, member: payload.member }, ); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.SpaceMemberInfo, - // refireParams: { - // space: this.props.space, - // member: payload.member, - // }, - // }); } else if (payload.action === "view_3pid_invite" && payload.event) { RightPanelStore.instance.setRightPanel( RightPanelPhases.Space3pidMemberInfo, { space: this.props.space, member: payload.member }, ); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.Space3pidMemberInfo, - // refireParams: { - // space: this.props.space, - // event: payload.event, - // }, - // }); } else { RightPanelStore.instance.setRightPanel( RightPanelPhases.SpaceMemberList, { space: this.props.space }, ); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.SpaceMemberList, - // refireParams: { space: this.props.space }, - // }); } }; diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index ffc65c97970..809594965a8 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -94,10 +94,6 @@ export default class ThreadView extends React.Component { if (prevProps.room !== this.props.room) { RightPanelStore.instance.setRightPanel( RightPanelPhases.RoomSummary ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.RoomSummary, - // }); } } @@ -206,7 +202,7 @@ export default class ThreadView extends React.Component { event_id: this.state.thread?.id, }; - let previousPhase = RightPanelStore.instance.previousRoom.phase; + let previousPhase = RightPanelStore.instance.previousPanel.phase; if (!SettingsStore.getValue("feature_maximised_widgets")) { previousPhase = RightPanelPhases.ThreadPanel; } diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx index a9b69cd8b4e..e783f14bc2b 100644 --- a/src/components/views/context_menus/RoomContextMenu.tsx +++ b/src/components/views/context_menus/RoomContextMenu.tsx @@ -248,11 +248,6 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => { ensureViewingRoom(); RightPanelStore.instance.setRightPanel( RightPanelPhases.RoomSummary, null, false ); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.RoomSummary, - // allowClose: false, - // }); onFinished(); }} label={_t("Widgets")} diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 55a994e6f77..10d44f0954c 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -33,11 +33,6 @@ import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; const onPinnedMessagesClick = (): void => { RightPanelStore.instance.setRightPanel( RightPanelPhases.PinnedMessages, null, false ); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.PinnedMessages, - // allowClose: false, - // }); }; const SENDER_AS_DISPLAY_NAME_EVENTS = [EventType.RoomServerAcl, EventType.RoomPinnedEvents]; diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 82aaeb0541c..03da84c7577 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -171,11 +171,6 @@ export default class GroupMemberList extends React.Component { RightPanelPhases.GroupMemberList, { groupId: this.props.groupId }, ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.GroupMemberList, - // refireParams: { groupId: this.props.groupId }, - // }); }); }; diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index f10e22657f2..5020f0bbd46 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -52,11 +52,6 @@ export default class MKeyVerificationRequest extends React.Component { const { verificationRequest } = this.props.mxEvent; const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId); RightPanelStore.instance.setRightPanel(RightPanelPhases.EncryptionPanel, { verificationRequest, member } ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.EncryptionPanel, - // refireParams: { verificationRequest, member }, - // }); }; private onRequestChanged = () => { diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 13447ef50fe..4949123b057 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -67,11 +67,6 @@ const BaseCard: React.FC = ({ // RightPanelStore.instance.popRightPanel(); RightPanelStore.instance.setRightPanel(previousPhase, refireParams ); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: previousPhase, - // refireParams: refireParams, - // }); }; const label = previousPhaseLabel ?? _t("Back"); backButton = ; diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index 6bb7edb9059..8998efad049 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -117,11 +117,6 @@ const EncryptionPanel: React.FC = (props: IProps) => { RightPanelPhases.EncryptionPanel, { member, verificationRequest: verificationRequest_ }, ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.EncryptionPanel, - // refireParams: { member, verificationRequest: verificationRequest_ }, - // }); }, [member]); const requested = diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index e693c1810c3..98ce3ae8451 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -67,11 +67,6 @@ export default abstract class HeaderButtons

extends React.Component) { RightPanelStore.instance.setRightPanel(phase, extras); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: phase, - // refireParams: extras, - // }); } public isPhase(phases: string | string[]) { diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 68f1262c367..a0a3d3f98cb 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -99,13 +99,6 @@ const AppRow: React.FC = ({ app, room }) => { const onOpenWidgetClick = () => { // TODO RightPanelPhase: should push the widget RightPanelStore.instance.setRightPanel(RightPanelPhases.Widget, { widgetId: app.id }); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.Widget, - // refireParams: { - // widgetId: app.id, - // }, - // }); }; const isPinned = WidgetLayoutStore.instance.isInContainer(room, app, Container.Top); @@ -235,21 +228,11 @@ const AppsSection: React.FC = ({ room }) => { export const onRoomMembersClick = (allowClose = true) => { // TODO RightPanelStore: should push the phase RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, undefined, allowClose); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.RoomMemberList, - // allowClose, - // }); }; export const onRoomFilesClick = (allowClose = true) => { // TODO RightPanelStore: should push the phase RightPanelStore.instance.setRightPanel(RightPanelPhases.FilePanel, undefined, allowClose); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.FilePanel, - // allowClose, - // }); }; const onRoomSettingsClick = () => { diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 6e0ef62b776..f9651e8bc98 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1660,11 +1660,6 @@ const UserInfo: React.FC = ({ const onEncryptionPanelClose = () => { // TODO RightPanelStore: here we want to pop the panel RightPanelStore.instance.setRightPanel(previousPhase, refireParams); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: previousPhase, - // refireParams: refireParams, - // }); }; let content; diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 6d1e79f7f37..37f4750239d 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -51,10 +51,6 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { //TODO RightPanelStore: here we want to just pop the widget card. RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomSummary); - // defaultDispatcher.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.RoomSummary, - // }); } }, [app, isPinned]); diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index 18c4fce36a0..e8b069972ca 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -101,7 +101,6 @@ const PrototypeCommunityContextMenu = (props) => { room_id: chat.roomId, }, true); RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, undefined, undefined, chat.roomId); - // dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList }); } else { // "This should never happen" clauses go here for the prototype. Modal.createTrackedDialog('Failed to find general chat', '', ErrorDialog, { diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index aea2dce6400..32e0d1f5712 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -38,19 +38,6 @@ interface IPhaseAndState { state: IPanelState; } -// const INITIAL_STATE: IState = { -// panelHistory: [], -// currentPanel: null, -// previousPanel: null, -// isOpen: null, -// // byRoom: {}, -// // byGroup: {}, -// // showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), -// // lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), -// // lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), -// // lastRoomPhaseParams: {}, -// }; - const GROUP_PHASES = [ RightPanelPhases.GroupMemberList, RightPanelPhases.GroupRoomList, @@ -66,7 +53,12 @@ const MEMBER_INFO_PHASES = [ /** * A class for tracking the state of the right panel between layouts and - * sessions. + * sessions. This state includes a history for each room. Each history element contains + * the phase (e.g. RoomMemberInfo) and the state (e.g. the member) associated with it. + * + * Groups are treated the same then rooms (They are also stored in the byRoom object). + * This is possible since the store keeps track of the opened room/group -> the store will + * provide the correct history for that group/room. */ export default class RightPanelStore extends ReadyWatchingStore { private static internalInstance: RightPanelStore; @@ -85,14 +77,6 @@ export default class RightPanelStore extends ReadyWatchingStore { isOpen: boolean; history: Array; } = null; - // private byGroup: { - // [groupId: string]: { - // isOpen: boolean; - // history: Array; - // }; - // }; - // private state: RightPanelStoreState; - // private lastRoomId: string; private constructor() { super(defaultDispatcher); @@ -111,35 +95,21 @@ export default class RightPanelStore extends ReadyWatchingStore { } } - // get isOpenForRoom(roomId:): boolean { - // return this.state.showRoomPanel; - // } // ALL GETTERS: get isOpenForRoom(): boolean { - // return this.state.isOpen ?? false; return this.byRoom[this.viewedRoomId]?.isOpen ?? false; } - // get isOpenForGroup(): boolean { - // return this.state.showGroupPanel; - // } - get isOpenForGroup(): boolean { // return this.state.isOpen ?? false; return this.isOpenForRoom; // return this.byRoom[this.viewedRoomId]?.isOpen; } - // get roomPanelPhase(): RightPanelPhases { - // return this.state.lastRoomPhase; - // } get roomPhaseHistory(): Array { - // return this.state.panelHistory; - // if (!this.viewedRoomId) return null; return this.byRoom[this.viewedRoomId]?.history ?? []; } get currentPanel(): IPhaseAndState { - // return this.state.currentPanel ?? { state: {}, phase: null }; const hist = this.roomPhaseHistory; if (hist.length >= 1) { return hist[hist.length - 1]; @@ -152,47 +122,24 @@ export default class RightPanelStore extends ReadyWatchingStore { return hist[hist.length - 1]; } return this.currentPanel ?? { state: {}, phase: null }; - // const hist = this.roomPhaseHistory; - // if (hist.length >= 1) { - // return hist[hist.length - 1]; - // } - // return null; } - get previousRoom(): IPhaseAndState { - // const roomCache = cacheGlobal ?? cacheThisRoom; + get previousPanel(): IPhaseAndState { const hist = this.roomPhaseHistory; if (hist?.length >= 2) { return hist[hist.length - 2]; } return { state: {}, phase: null }; - // const hist = this.roomPhaseHistory; - // if (hist.length >= 2) { - // return hist[hist.length - 2]; - // } } - // get groupPanelPhase(): RightPanelPhases { - // return this.state.lastGroupPhase; - // } + + // The Group stuff is just for backwards compatibility. Can be removed when depracating groups get groupPhaseHistory(): Array { return this.roomPhaseHistory; - // if (!this.viewedGroupId) return null; - // return this.state.byRoom[this.viewedGroupId]?.history ?? []; } get currentGroup(): IPhaseAndState { return this.currentPanel; - // const hist = this.groupPhaseHistory; - // if (hist.length >= 1) { - // return hist[hist.length - 1]; - // } - // return null; } get previousGroup(): IPhaseAndState { - return this.previousRoom; - // const hist = this.groupPhaseHistory; - // if (hist.length >= 2) { - // return hist[hist.length - 2]; - // } - // return null; + return this.previousPanel; } // ALL SETTERS: @@ -228,6 +175,7 @@ export default class RightPanelStore extends ReadyWatchingStore { this.setRightPanelCache(targetPhase, panelState); } } + // push right panel: appends to the history public pushRightPanel( phase: RightPanelPhases, @@ -260,6 +208,7 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emitAndUpdateSettings(); } + // pop right panel: removes last eelemnt from history public popRightPanel(roomId: string = null) { const rId = roomId ?? this.viewedRoomId; @@ -273,69 +222,8 @@ export default class RightPanelStore extends ReadyWatchingStore { this.byRoom[rId].isOpen = !this.byRoom[rId].isOpen; this.emitAndUpdateSettings(); } - // get previousPhase(): RightPanelPhases | null { - // return RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.previousPhase) ? this.state.previousPhase : null; - // } - - // get visibleRoomPanelPhase(): RightPanelPhases { - // return this.isOpenForRoom ? this.roomPanelPhase : null; - // } - - // get visibleGroupPanelPhase(): RightPanelPhases { - // return this.isOpenForGroup ? this.groupPanelPhase : null; - // } - - // get roomPanelPhaseParams(): any { - // return this.state.lastRoomPhaseParams || {}; - // } - - // private setState(newState: Partial) { - // this.updateState(newState); - - // SettingsStore.setValue( - // "showRightPanelInRoom", - // null, - // SettingLevel.DEVICE, - // this.state.showRoomPanel, - // ); - // SettingsStore.setValue( - // "showRightPanelInGroup", - // null, - // SettingLevel.DEVICE, - // this.state.showGroupPanel, - // ); - - // if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastRoomPhase)) { - // SettingsStore.setValue( - // "lastRightPanelPhaseForRoom", - // null, - // SettingLevel.DEVICE, - // this.state.lastRoomPhase, - // ); - // } - // if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this.state.lastGroupPhase)) { - // SettingsStore.setValue( - // "lastRightPanelPhaseForGroup", - // null, - // SettingLevel.DEVICE, - // this.state.lastGroupPhase, - // ); - // } - // } - // getCurrentRoomCache() { - // if (!!this.global) { - // return this.global; - // } else { - // return this.byRoom[this.viewedRoomId]; - // } - // } - // setCurrentRoomCache(roomCache, global) { - // if (!!global) { - // this.global = roomCache; - // } else { - // this.byRoom[this.viewedRoomId] = roomCache; - // } - // } + + // Private private loadCacheFromSettings() { this.global = this.global ?? SettingsStore.getValue("RightPanel.phasesGlobal"); this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] @@ -349,14 +237,8 @@ export default class RightPanelStore extends ReadyWatchingStore { SettingsStore.setValue("RightPanel.phases", this.viewedRoomId, SettingLevel.ROOM_DEVICE, cacheThisRoom); } this.emit(UPDATE_EVENT, null); - // this.updateState({ - // isOpen: roomCache?.isOpen ?? false, - // currentPanel: current, - // previousPanel: previous, - // panelHistory: hist, - // }); } - // NEEDED: + // set rigth panel: overrides the history private setRightPanelCache(targetPhase: RightPanelPhases, panelState: IPanelState = null) { this.byRoom[this.viewedRoomId] = { @@ -365,9 +247,9 @@ export default class RightPanelStore extends ReadyWatchingStore { }; this.emitAndUpdateSettings(); } + // CHECKS: // - RoomMemberInfo -> needs to be changed to EncryptionPanel if pendingVerificationRequestForUser - // - hide/show when setting the same panel twice private getVerificationRedirect(targetPhase: RightPanelPhases, panelState): { targetPhase: RightPanelPhases, panelState } { if (targetPhase === RightPanelPhases.RoomMemberInfo && panelState) { @@ -411,7 +293,6 @@ export default class RightPanelStore extends ReadyWatchingStore { } onDispatch(payload: ActionPayload) { - // __onDispatch(payload: ActionPayload) { // eslint-disable-line @typescript-eslint/naming-convention switch (payload.action) { case 'view_group': case Action.ViewRoom: { @@ -443,162 +324,7 @@ export default class RightPanelStore extends ReadyWatchingStore { _this.emitAndUpdateSettings(); console.log("right panel store for current room: ", _this.byRoom[_this.viewedRoomId]); break; - - // Reset to the member list if we're viewing member info } - - // case 'view_group': - // this.viewedGroupId = payload.room_id; - // this.viewedRoomId = undefined; - - // Not necassary anymore since we store everything per room/ per group - // this.lastRoomId = payload.room_id; - - // // Reset to the member list if we're viewing member info - // if (MEMBER_INFO_PHASES.includes(this.currentRoomPhaseState.phase)) { - // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); - // } - - // // Do the same for groups - // if (this.state.lastGroupPhase === RightPanelPhases.GroupMemberInfo) { - // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); - // } - // break; - - // case Action.SetRightPanelPhase: { - // console.log("ORDER_DEBUG: action:", Action.SetRightPanelPhase); - // // this was previously a very multifuncitonal command: - // // TogglePanel: if the same phase is send but without refireParams - // // UpdateState: if the same phase is send but with refireParams - // // SetRightPanel and erase history: if a "differnt to the current" phase is send (with or without refireParams) - // const redirect = this.getVerificationRedirect(payload, payload.phase); - // const targetPhase = redirect?.targetPhase ?? payload.phase; - // const refireParams = redirect?.refireParams ?? payload.refireParams; - - // const allowClose = payload.allowClose ?? true; - - // // Checks for wrong SetRightPanelPhase requests - // if (!this.isPhaseActionIsValid(targetPhase)) break; - - // if (targetPhase === this.currentRoom?.phase && allowClose && !refireParams) { - // // Toggle command: a toggle command needs to fullfill the following: - // // - the same phase - // // - the panel can be closed - // // - does not contain any state information (refireParams) - // this.togglePanel(); - // break; - // } else if ((targetPhase === this.currentRoom?.phase && !!refireParams)) { - // // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) - // const hist = this.byRoom[this.viewedRoomId].history; - // hist[hist.length - 1].state = refireParams; - // this.updateStateAndSettingsFromCache(); - // break; - // } else if (targetPhase !== this.currentRoom?.phase) { - // // SetRightPanel and erase history. - // this.setRightPanel(targetPhase, refireParams); - // // this.byRoom[this.viewedRoomId] = { - // // history: [{ phase: targetPhase, state: refireParams }], - // // isOpen: true, - // // }; - // // this.updateStateFromCache(); - // } - // // redirect to EncryptionPanel if there is an ongoing verification request - // // if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) { - // // const { member } = payload.refireParams; - // // const pendingRequest = pendingVerificationRequestForUser(member); - // // if (pendingRequest) { - // // targetPhase = RightPanelPhases.EncryptionPanel; - // // refireParams = { - // // verificationRequest: pendingRequest, - // // member, - // // }; - // // } - // // } - - // // if (GROUP_PHASES.includes(targetPhase)) { - // // if (targetPhase === this.state.lastGroupPhase) { - // // // hide when already open - // // this.setState({ - // // showGroupPanel: !this.state.showGroupPanel, - // // previousPhase: null, - // // }); - // // } else { - // // this.setState({ - // // lastGroupPhase: targetPhase, - // // showGroupPanel: true, - // // previousPhase: this.state.lastGroupPhase, - // // }); - // // } - // // } else { - // // if (targetPhase === this.state.lastRoomPhase && !refireParams && allowClose) { - // // this.setState({ - // // showRoomPanel: !this.state.showRoomPanel, - // // previousPhase: null, - // // }); - // // } else { - // // this.setState({ - // // lastRoomPhase: targetPhase, - // // showRoomPanel: true, - // // lastRoomPhaseParams: refireParams || {}, - // // previousPhase: this.state.lastRoomPhase, - // // }); - // // } - // // } - - // // Let things like the member info panel actually open to the right member. - // // Dont do the dispatch anymore, instead use a listener - // // defaultDispatcher.dispatch({ - // // action: Action.AfterRightPanelPhaseChange, - // // phase: targetPhase, - // // ...(refireParams || {}), - // // }); - // break; - // } - // case Action.PushRightPanelPhase: { - // console.log("ORDER_DEBUG: action:", payload.action); - // const redirect = this.getVerificationRedirect(payload, payload.phase); - // const targetPhase = redirect?.targetPhase ?? payload.phase; - // const refireParams = redirect?.refireParams ?? payload.refireParams; - - // const allowClose = payload.allowClose ?? true; - - // // Checks for wrong SetRightPanelPhase requests - // if (!this.isPhaseActionIsValid(targetPhase)) break; - - // let roomCache = this.byRoom[this.viewedRoomId]; - // if (!!roomCache) { - // // append new phase - // roomCache.history.push({ state: refireParams, phase: targetPhase }); - // roomCache.isOpen = allowClose ? roomCache.isOpen : true; - // } else { - // // create new phase - // roomCache = { - // history: [{ phase: targetPhase, state: refireParams }], - // // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false - // isOpen: !allowClose, - // }; - // } - - // this.updateStateAndSettingsFromCache(); - // break; - // } - // case Action.PopRightPanelPhase: { - // const roomCache = this.byRoom[this.viewedRoomId]; - // roomCache.history.pop(); - // this.updateStateAndSettingsFromCache(); - // break; - // } - - // case Action.ToggleRightPanel: - // console.log("ORDER_DEBUG: action:", payload.action); - // this.togglePanel(); - // break; - // if (payload.type === "room") { - // this.setState({ showRoomPanel: !this.state.showRoomPanel }); - // } else { // group - // this.setState({ showGroupPanel: !this.state.showGroupPanel }); - // } - // break; } } public static get instance(): RightPanelStore { diff --git a/src/verification.ts b/src/verification.ts index 4cb54bab196..6b5e9956975 100644 --- a/src/verification.ts +++ b/src/verification.ts @@ -69,11 +69,6 @@ export async function verifyDevice(user: User, device: IDevice) { RightPanelPhases.EncryptionPanel, { member: user, verificationRequestPromise }, ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.EncryptionPanel, - // refireParams: { member: user, verificationRequestPromise }, - // }); } else if (action === "legacy") { Modal.createTrackedDialog("Legacy verify session", "legacy verify session", ManualDeviceKeyVerificationDialog, @@ -104,11 +99,6 @@ export async function legacyVerifyUser(user: User) { RightPanelPhases.EncryptionPanel, { member: user, verificationRequestPromise }, ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.EncryptionPanel, - // refireParams: { member: user, verificationRequestPromise }, - // }); } export async function verifyUser(user: User) { @@ -125,14 +115,6 @@ export async function verifyUser(user: User) { RightPanelPhases.EncryptionPanel, { member: user, verificationRequest: existingRequest }, ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.EncryptionPanel, - // refireParams: { - // member: user, - // verificationRequest: existingRequest, - // }, - // }); } export function pendingVerificationRequestForUser(user: User) { From 1116c977ec6831d6bc86555c0a019ef66ff9ed4a Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 9 Dec 2021 17:40:56 +0100 Subject: [PATCH 14/76] remove more commnets --- .../views/toasts/VerificationRequestToast.tsx | 8 -------- src/dispatcher/dispatch-actions/threads.ts | 13 ------------- 2 files changed, 21 deletions(-) diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index 65fcc3fa54f..aaefcd08b96 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -122,14 +122,6 @@ export default class VerificationRequestToast extends React.PureComponent({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.EncryptionPanel, - // refireParams: { - // verificationRequest: request, - // member: cli.getUser(request.otherUserId), - // }, - // }); } else { Modal.createTrackedDialog('Incoming Verification', '', VerificationRequestDialog, { verificationRequest: request, diff --git a/src/dispatcher/dispatch-actions/threads.ts b/src/dispatcher/dispatch-actions/threads.ts index 89006629461..2f7d61449fb 100644 --- a/src/dispatcher/dispatch-actions/threads.ts +++ b/src/dispatcher/dispatch-actions/threads.ts @@ -31,22 +31,9 @@ export const dispatchShowThreadEvent = ( highlighted, }, ); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.ThreadView, - // refireParams: { - // event: rootEvent, - // initialEvent, - // highlighted, - // }, - // }); }; export const dispatchShowThreadsPanelEvent = () => { RightPanelStore.instance.setRightPanel(RightPanelPhases.ThreadPanel); - // dis.dispatch({ - // action: Action.SetRightPanelPhase, - // phase: RightPanelPhases.ThreadPanel, - // }); }; From 766377f5fdfc63f3f27d90ffd673e5b8146a1cd2 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 9 Dec 2021 17:42:42 +0100 Subject: [PATCH 15/76] fix loading and saving to device settings - A list of conversion function is intruduced for the panel history that just stores the eventId's (instead of the full event) - loading is only done when the client is ready to have acces to the getRoom function --- src/stores/right-panel/RightPanelStore.ts | 40 +++++++---- .../right-panel/RightPanelStoreIPanelState.ts | 69 ++++++++++++++++++- 2 files changed, 93 insertions(+), 16 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 32e0d1f5712..08c907326bd 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -28,16 +28,11 @@ import { UPDATE_EVENT } from '../AsyncStore'; import { ReadyWatchingStore } from '../ReadyWatchingStore'; import RoomViewStore from '../RoomViewStore'; import { EventSubscription } from 'fbemitter'; -import { IPanelState } from './RightPanelStoreIPanelState'; +import { IPhaseAndState, IPanelState, convertToStateRoom, convertToStoreRoom } from './RightPanelStoreIPanelState'; // import RightPanel from '../components/structures/RightPanel'; // import { Playback } from '../audio/Playback'; // import { RoomView } from '../components/structures/RoomView'; -interface IPhaseAndState { - phase: RightPanelPhases; - state: IPanelState; -} - const GROUP_PHASES = [ RightPanelPhases.GroupMemberList, RightPanelPhases.GroupRoomList, @@ -85,6 +80,8 @@ export default class RightPanelStore extends ReadyWatchingStore { protected async onReady(): Promise { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); + this.loadCacheFromSettings(); + this.emitAndUpdateSettings(); } protected async onNotReady(): Promise { @@ -224,17 +221,25 @@ export default class RightPanelStore extends ReadyWatchingStore { } // Private + private loadCacheFromSettings() { - this.global = this.global ?? SettingsStore.getValue("RightPanel.phasesGlobal"); - this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] - ?? SettingsStore.getValue("RightPanel.phases", this.viewedRoomId); + const room = this.mxClient?.getRoom(this.viewedRoomId); + if (!!room) { + this.global = this.global ?? convertToStateRoom(SettingsStore.getValue("RightPanel.phasesGlobal"), room); + this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] + ?? convertToStateRoom(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); + } } private emitAndUpdateSettings() { - const cacheGlobal = this.global; - const cacheThisRoom = this.byRoom[this.viewedRoomId]; - SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, cacheGlobal); + const storePanelGlobal = convertToStoreRoom(this.global); + const storePanelThisRoom = convertToStoreRoom(this.byRoom[this.viewedRoomId]); + SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, storePanelGlobal); if (!!this.viewedRoomId) { - SettingsStore.setValue("RightPanel.phases", this.viewedRoomId, SettingLevel.ROOM_DEVICE, cacheThisRoom); + SettingsStore.setValue("RightPanel.phases", + this.viewedRoomId, + SettingLevel.ROOM_DEVICE, + storePanelThisRoom, + ); } this.emit(UPDATE_EVENT, null); } @@ -320,8 +325,13 @@ export default class RightPanelStore extends ReadyWatchingStore { _this.viewedRoomId = payload.room_id; _this.isViewingRoom = payload.action == Action.ViewRoom; // load values from byRoomCache with the viewedRoomId. - _this.loadCacheFromSettings(); - _this.emitAndUpdateSettings(); + if (!!this.roomStoreToken) { + // skip loading here since we need the client to be ready to get the events form the ids of the settings + // this loading will be done in the onready function + // all this nonsense is not necassary anymore as soon as we use: onRoomViewStoreUpdate + _this.loadCacheFromSettings(); + _this.emitAndUpdateSettings(); + } console.log("right panel store for current room: ", _this.byRoom[_this.viewedRoomId]); break; } diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 1a4d0a06e84..721d4ea7fd5 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -20,6 +20,7 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { User } from "matrix-js-sdk/src/models/user"; import { GroupMember } from "../../components/views/right_panel/UserInfo"; +import { RightPanelPhases } from "./RightPanelStorePhases"; export interface IPanelState { member?: RoomMember | User | GroupMember; @@ -29,10 +30,76 @@ export interface IPanelState { groupId?: string; groupRoomId?: string; // XXX: The type for event should 'view_3pid_invite' action's payload - event?: any; widgetId?: string; space?: Room; // treads + event?: MatrixEvent; initialEvent?: MatrixEvent; highlighted?: boolean; } + +export interface IPanelStateStored { + member?: RoomMember | User | GroupMember; + verificationRequest?: VerificationRequest; + verificationRequestPromise?: Promise; + // group + groupId?: string; + groupRoomId?: string; + // XXX: The type for event should 'view_3pid_invite' action's payload + eventId?: string; + widgetId?: string; + space?: Room; + // treads + initialEventId?: string; + highlighted?: boolean; +} + +export interface IPhaseAndState { + phase: RightPanelPhases; + state: IPanelState; +} + +export interface IPhaseAndStateStored { + phase: RightPanelPhases; + state: IPanelStateStored; +} + +export function convertToStoreRoom(cacheRoom: { isOpen: boolean, history: Array }): +{ history: Array, isOpen: boolean } { + if (!cacheRoom) return cacheRoom; + const storeHistory = [...cacheRoom.history].map(panelState => convertStateToStore(panelState)); + return { isOpen: cacheRoom.isOpen, history: storeHistory }; +} + +export function convertToStateRoom(storeRoom: { history: Array, isOpen: boolean }, room: Room): +{ history: Array, isOpen: boolean } { + if (!storeRoom) return storeRoom; + const stateHistory = [...storeRoom.history].map(panelStateStore => convertStoreToState(panelStateStore, room)); + return { history: stateHistory, isOpen: storeRoom.isOpen }; +} + +function convertStateToStore(panelState: IPhaseAndState): IPhaseAndStateStored { + const panelStateThisRoomStored = { ...panelState.state } as any; + if (!!panelState?.state?.event?.getId()) { + panelStateThisRoomStored.eventId = panelState.state.event.getId(); + } + if (!!panelState?.state?.initialEvent?.getId()) { + panelStateThisRoomStored.initialEventId = panelState.state.initialEvent.getId(); + } + delete panelStateThisRoomStored.event; + delete panelStateThisRoomStored.initialEvent; + return { state: panelStateThisRoomStored as IPhaseAndStateStored, phase: panelState.phase } as IPhaseAndStateStored; +} +function convertStoreToState(panelStateStore: IPhaseAndStateStored, room: Room): IPhaseAndState { + const panelStateThisRoom = { ...panelStateStore?.state } as any; + if (!!panelStateThisRoom.eventId) { + panelStateThisRoom.event = room.findEventById(panelStateThisRoom.eventId); + } + if (!!panelStateThisRoom.initialEventId) { + panelStateThisRoom.initialEvent = room.findEventById(panelStateThisRoom.initialEventId); + } + delete panelStateThisRoom.eventId; + delete panelStateThisRoom.initialEventId; + + return { state: panelStateThisRoom as IPanelState, phase: panelStateStore.phase } as IPhaseAndState; +} From 9ddf830ad17ac973b976767f3fa12fa834f61e13 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 9 Dec 2021 18:25:47 +0100 Subject: [PATCH 16/76] remove more comments --- src/components/structures/RightPanel.tsx | 59 ------------------------ 1 file changed, 59 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 036997d228d..08c8fe6d586 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -108,47 +108,8 @@ export default class RightPanel extends React.Component { const lastState = RightPanelStore.instance.currentPanel?.state; // Should just use the member from the RightPanelStore. Wherever the prop is passed should just update the store beforehand. return this.props.member ?? lastState?.member; - // (lastState?.member instanceof RoomMember ? lastState?.member as RoomMember : undefined); } - // gets the current phase from the props and also maybe the store - // private getPhaseFromProps() { - // const rps = RightPanelStore.instance; - // const userForPanel = this.getUserForPanel(); - // if (this.props.groupId) { - // if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) { - // dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList }); - // return RightPanelPhases.GroupMemberList; - // } - // return rps.groupPanelPhase; - // } else if (SpaceStore.spacesEnabled && this.props.room?.isSpaceRoom() - // && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase) - // ) { - // return RightPanelPhases.SpaceMemberList; - // } else if (userForPanel) { - // // XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state - // // from its props and some from a store, except if the contents of the store changes - // // while it's mounted in which case it replaces all of its state with that of the store, - // // except it uses a dispatch instead of a normal store listener? - // // Unfortunately rewriting this would almost certainly break showing the right panel - // // in some of the many cases, and I don't have time to re-architect it and test all - // // the flows now, so adding yet another special case so if the store thinks there is - // // a verification going on for the member we're displaying, we show that, otherwise - // // we race if a verification is started while the panel isn't displayed because we're - // // not mounted in time to get the dispatch. - // // Until then, let this code serve as a warning from history. - // if ( - // rps.roomPanelPhaseParams.member && - // userForPanel.userId === rps.roomPanelPhaseParams.member.userId && - // rps.roomPanelPhaseParams.verificationRequest - // ) { - // return rps.roomPanelPhase; - // } - // return RightPanelPhases.RoomMemberInfo; - // } - // return rps.roomPanelPhase; - // } - public componentDidMount(): void { this.dispatcherRef = dis.register(this.onAction); const cli = this.context; @@ -228,22 +189,6 @@ export default class RightPanel extends React.Component { if (isChangingRoom && isViewingThread) { dispatchShowThreadsPanelEvent(); } - - // if (payload.action === Action.AfterRightPanelPhaseChange) { - // this.setState({ - // phase: payload.phase, - // groupRoomId: payload.groupRoomId, - // groupId: payload.groupId, - // member: payload.member, - // event: payload.event, - // initialEvent: payload.initialEvent, - // initialEventHighlighted: payload.highlighted, - // verificationRequest: payload.verificationRequest, - // verificationRequestPromise: payload.verificationRequestPromise, - // widgetId: payload.widgetId, - // space: payload.space, - // }); - // } }; private onClose = () => { @@ -267,10 +212,6 @@ export default class RightPanel extends React.Component { } else { // the RightPanelStore knows which mode room/group it is in, so we handle closing here RightPanelStore.instance.togglePanel(); - // dis.dispatch({ - // action: Action.ToggleRightPanel, - // // type: this.props.groupId ? "group" : "room", // not needed anymore since group or room is already known by the state - // }); } }; From 1522f85d60572052e45ebb8def2c4d676546fb94 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 9 Dec 2021 18:33:45 +0100 Subject: [PATCH 17/76] rename thread realted properites for IPanelState --- src/components/structures/RightPanel.tsx | 31 ++++++++++--------- src/components/structures/ThreadView.tsx | 6 ++-- .../views/right_panel/RoomHeaderButtons.tsx | 2 +- .../views/right_panel/TimelineCard.tsx | 8 ++--- src/dispatcher/dispatch-actions/threads.ts | 4 +-- .../right-panel/RightPanelStoreIPanelState.ts | 13 ++++---- 6 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 08c8fe6d586..a922c558547 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -73,9 +73,9 @@ interface IState { widgetId?: string; groupRoomId?: string; groupId?: string; - event?: MatrixEvent; + threadHeadEvent?: MatrixEvent; initialEvent?: MatrixEvent; - initialEventHighlighted?: boolean; + isInitialEventHighlighted?: boolean; searchQuery: string; } @@ -166,21 +166,22 @@ export default class RightPanel extends React.Component { private onRightPanelStoreUpdate = () => { const currentRoom = RightPanelStore.instance.currentPanel; this.setState({ + ...currentRoom.state, phase: currentRoom.phase, - member: currentRoom.state?.member, - verificationRequest: currentRoom.state.verificationRequest, - verificationRequestPromise: currentRoom.state.verificationRequestPromise, + // member: currentRoom.state?.member, + // verificationRequest: currentRoom.state.verificationRequest, + // verificationRequestPromise: currentRoom.state.verificationRequestPromise, - groupId: currentRoom.state.groupId, - groupRoomId: currentRoom.state.groupRoomId, - event: currentRoom.state.event, + // groupId: currentRoom.state.groupId, + // groupRoomId: currentRoom.state.groupRoomId, + // threadHeadEvent: currentRoom.state.threadHeadEvent, - widgetId: currentRoom.state.widgetId, + // widgetId: currentRoom.state.widgetId, - space: currentRoom.state.space, + // space: currentRoom.state.space, - initialEvent: currentRoom.state.initialEvent, - initialEventHighlighted: currentRoom.state.highlighted, + // initialEvent: currentRoom.state.initialEvent, + // isInitialEventHighlighted: currentRoom.state.isInitialEventHighlighted, }); }; private onAction = (payload: ActionPayload) => { @@ -272,7 +273,7 @@ export default class RightPanel extends React.Component { } case RightPanelPhases.Room3pidMemberInfo: case RightPanelPhases.Space3pidMemberInfo: - panel = ; + panel = ; break; case RightPanelPhases.GroupMemberInfo: @@ -320,9 +321,9 @@ export default class RightPanel extends React.Component { room={this.props.room} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} - mxEvent={this.state.event} + mxEvent={this.state.threadHeadEvent} initialEvent={this.state.initialEvent} - initialEventHighlighted={this.state.initialEventHighlighted} + isInitialEventHighlighted={this.state.isInitialEventHighlighted} permalinkCreator={this.props.permalinkCreator} e2eStatus={this.props.e2eStatus} />; break; diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index c70bf1aa09b..be5983faa63 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -52,7 +52,7 @@ interface IProps { permalinkCreator?: RoomPermalinkCreator; e2eStatus?: E2EStatus; initialEvent?: MatrixEvent; - initialEventHighlighted?: boolean; + isInitialEventHighlighted?: boolean; } interface IState { thread?: Thread; @@ -174,7 +174,7 @@ export default class ThreadView extends React.Component { }; private onScroll = (): void => { - if (this.props.initialEvent && this.props.initialEventHighlighted) { + if (this.props.initialEvent && this.props.isInitialEventHighlighted) { dis.dispatch({ action: Action.ViewRoom, room_id: this.props.room.roomId, @@ -195,7 +195,7 @@ export default class ThreadView extends React.Component { }; public render(): JSX.Element { - const highlightedEventId = this.props.initialEventHighlighted + const highlightedEventId = this.props.isInitialEventHighlighted ? this.props.initialEvent?.getId() : null; diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 8790cf21105..29d6cb00cc7 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -136,7 +136,7 @@ export default class RoomHeaderButtons extends HeaderButtons { } } else if (payload.action === "view_3pid_invite") { if (payload.event) { - this.setPhase(RightPanelPhases.Room3pidMemberInfo, { event: payload.event }); + this.setPhase(RightPanelPhases.Room3pidMemberInfo, { threadHeadEvent: payload.event }); } else { this.setPhase(RightPanelPhases.RoomMemberList); } diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index 5bc875b8c60..8274e91c349 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -55,7 +55,7 @@ interface IState { editState?: EditorStateTransfer; replyToEvent?: MatrixEvent; initialEventId?: string; - initialEventHighlighted?: boolean; + isInitialEventHighlighted?: boolean; // settings: showReadReceipts?: boolean; @@ -102,7 +102,7 @@ export default class TimelineCard extends React.Component { showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId), initialEventId: RoomViewStore.getInitialEventId(), - initialEventHighlighted: RoomViewStore.isInitialEventHighlighted(), + isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(), replyToEvent: RoomViewStore.getQuotingEvent(), }; @@ -131,7 +131,7 @@ export default class TimelineCard extends React.Component { }; private onScroll = (): void => { - if (this.state.initialEventId && this.state.initialEventHighlighted) { + if (this.state.initialEventId && this.state.isInitialEventHighlighted) { dis.dispatch({ action: Action.ViewRoom, room_id: this.props.room.roomId, @@ -149,7 +149,7 @@ export default class TimelineCard extends React.Component { }; public render(): JSX.Element { - const highlightedEventId = this.state.initialEventHighlighted + const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : null; diff --git a/src/dispatcher/dispatch-actions/threads.ts b/src/dispatcher/dispatch-actions/threads.ts index 2f7d61449fb..fa91a942658 100644 --- a/src/dispatcher/dispatch-actions/threads.ts +++ b/src/dispatcher/dispatch-actions/threads.ts @@ -26,9 +26,9 @@ export const dispatchShowThreadEvent = ( RightPanelStore.instance.setRightPanel( RightPanelPhases.ThreadView, { - event: rootEvent, + threadHeadEvent: rootEvent, initialEvent, - highlighted, + isInitialEventHighlighted: highlighted, }, ); }; diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 721d4ea7fd5..91747195980 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -33,11 +33,10 @@ export interface IPanelState { widgetId?: string; space?: Room; // treads - event?: MatrixEvent; + threadHeadEvent?: MatrixEvent; initialEvent?: MatrixEvent; - highlighted?: boolean; + isInitialEventHighlighted?: boolean; } - export interface IPanelStateStored { member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; @@ -46,12 +45,12 @@ export interface IPanelStateStored { groupId?: string; groupRoomId?: string; // XXX: The type for event should 'view_3pid_invite' action's payload - eventId?: string; widgetId?: string; space?: Room; // treads + threadHeadEventId?: string; initialEventId?: string; - highlighted?: boolean; + isInitialEventHighlighted?: boolean; } export interface IPhaseAndState { @@ -80,8 +79,8 @@ export function convertToStateRoom(storeRoom: { history: Array Date: Thu, 9 Dec 2021 18:39:33 +0100 Subject: [PATCH 18/76] remove more comments --- src/components/structures/RightPanel.tsx | 3 +-- src/components/structures/RoomView.tsx | 19 ------------------- 2 files changed, 1 insertion(+), 21 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index a922c558547..5abafd54241 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -46,7 +46,6 @@ import NotificationPanel from "./NotificationPanel"; import ResizeNotifier from "../../utils/ResizeNotifier"; import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard"; import { throttle } from 'lodash'; -// import SpaceStore from "../../stores/spaces/SpaceStore"; import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks'; import { E2EStatus } from '../../utils/ShieldUtils'; import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads'; @@ -88,7 +87,7 @@ export default class RightPanel extends React.Component { constructor(props, context) { super(props, context); this.state = { - // get all the state from the room panel store on inti + // get all the state from the room panel store on init ...RightPanelStore.instance.currentPanel?.state, phase: RightPanelStore.instance.currentPanel?.phase, isUserPrivilegedInGroup: null, diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index a2cbf70052a..70d3dcec879 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -333,7 +333,6 @@ export class RoomView extends React.Component { RightPanelStore.instance.setRightPanel(RightPanelPhases.Timeline); } this.checkWidgets(this.state.room); - // this.checkRightPanel(this.state.room); }; private checkWidgets = (room) => { @@ -351,23 +350,6 @@ export class RoomView extends React.Component { : MainSplitContentType.Timeline; }; - // private checkRightPanel = (room) => { - // // TODO remove this! - // // This is a hack to hide the chat. This should not be necessary once the right panel - // // phase is stored per room. (need to be done after check widget so that mainSplitContentType is updated) - // if ( - // RightPanelStore.instance.currentRoom?.phase === RightPanelPhases.Timeline && - // this.state.showRightPanel && - // !WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room) - // ) { - // // Two timelines are shown prevent this by hiding the right panel - // dis.dispatch({ - // action: Action.ToggleRightPanel, - // type: "room", - // }); - // } - // }; - private onReadReceiptsChange = () => { this.setState({ showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId), @@ -1025,7 +1007,6 @@ export class RoomView extends React.Component { this.updateE2EStatus(room); this.updatePermissions(room); this.checkWidgets(room); - // this.checkRightPanel(room); this.setState({ liveTimeline: room.getLiveTimeline(), From 8ea987b396614fb75e7fe8cf4d83c413192c5160 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 10 Dec 2021 14:45:18 +0100 Subject: [PATCH 19/76] fix saving with new thread event names --- src/stores/right-panel/RightPanelStoreIPanelState.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 91747195980..eaa9a28369e 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -80,24 +80,24 @@ export function convertToStateRoom(storeRoom: { history: Array Date: Fri, 10 Dec 2021 16:08:05 +0100 Subject: [PATCH 20/76] fix wrong this. (needed to use _this) - this caused multiple issues --- src/stores/right-panel/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 08c907326bd..c9aa33fa45b 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -325,7 +325,7 @@ export default class RightPanelStore extends ReadyWatchingStore { _this.viewedRoomId = payload.room_id; _this.isViewingRoom = payload.action == Action.ViewRoom; // load values from byRoomCache with the viewedRoomId. - if (!!this.roomStoreToken) { + if (!!_this.roomStoreToken) { // skip loading here since we need the client to be ready to get the events form the ids of the settings // this loading will be done in the onready function // all this nonsense is not necassary anymore as soon as we use: onRoomViewStoreUpdate From 9071ee24c1297a416013e27394e1284be0e0f7e7 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 10 Dec 2021 16:31:32 +0100 Subject: [PATCH 21/76] fix git ci --- src/stores/right-panel/RightPanelStoreIPanelState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index eaa9a28369e..75ca5bca0b5 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { MatrixEvent } from "matrix-js-sdk"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; From a9e9fbf266e40b411f641d9a5a0259850f3491b0 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 10 Dec 2021 16:42:10 +0100 Subject: [PATCH 22/76] comment clean up --- src/components/structures/RightPanel.tsx | 18 ++++-------------- src/stores/right-panel/RightPanelStore.ts | 4 ---- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index e2926edb456..367a5456a4b 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -65,6 +65,10 @@ interface IProps { interface IState { phase: RightPanelPhases; isUserPrivilegedInGroup?: boolean; + searchQuery: string; + + // Parameters for the states of the different right panels (handled by the RightPanelStore) + // see: IPanelState member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; verificationRequestPromise?: Promise; @@ -75,7 +79,6 @@ interface IState { threadHeadEvent?: MatrixEvent; initialEvent?: MatrixEvent; isInitialEventHighlighted?: boolean; - searchQuery: string; } @replaceableComponent("structures.RightPanel") @@ -167,20 +170,7 @@ export default class RightPanel extends React.Component { this.setState({ ...currentRoom.state, phase: currentRoom.phase, - // member: currentRoom.state?.member, - // verificationRequest: currentRoom.state.verificationRequest, - // verificationRequestPromise: currentRoom.state.verificationRequestPromise, - - // groupId: currentRoom.state.groupId, - // groupRoomId: currentRoom.state.groupRoomId, - // threadHeadEvent: currentRoom.state.threadHeadEvent, - - // widgetId: currentRoom.state.widgetId, - - // space: currentRoom.state.space, - // initialEvent: currentRoom.state.initialEvent, - // isInitialEventHighlighted: currentRoom.state.isInitialEventHighlighted, }); }; private onAction = (payload: ActionPayload) => { diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index c9aa33fa45b..0ae7e213d6d 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -24,14 +24,10 @@ import { SettingLevel } from "../../settings/SettingLevel"; import { logger } from "matrix-js-sdk/src/logger"; import { UPDATE_EVENT } from '../AsyncStore'; -// import { AsyncStoreWithClient } from './AsyncStoreWithClient'; import { ReadyWatchingStore } from '../ReadyWatchingStore'; import RoomViewStore from '../RoomViewStore'; import { EventSubscription } from 'fbemitter'; import { IPhaseAndState, IPanelState, convertToStateRoom, convertToStoreRoom } from './RightPanelStoreIPanelState'; -// import RightPanel from '../components/structures/RightPanel'; -// import { Playback } from '../audio/Playback'; -// import { RoomView } from '../components/structures/RoomView'; const GROUP_PHASES = [ RightPanelPhases.GroupMemberList, From eab46c41999d99497bc1adeffbff3d49d6db0d51 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 10 Dec 2021 19:05:46 +0100 Subject: [PATCH 23/76] make the group stuff more compact --- src/stores/right-panel/RightPanelStore.ts | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 0ae7e213d6d..8faaec85969 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -93,12 +93,6 @@ export default class RightPanelStore extends ReadyWatchingStore { return this.byRoom[this.viewedRoomId]?.isOpen ?? false; } - get isOpenForGroup(): boolean { - // return this.state.isOpen ?? false; - return this.isOpenForRoom; - // return this.byRoom[this.viewedRoomId]?.isOpen; - } - get roomPhaseHistory(): Array { return this.byRoom[this.viewedRoomId]?.history ?? []; } @@ -109,7 +103,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } return { state: {}, phase: null }; } - currentPanelById(roomId: string): IPhaseAndState { + currentPanelForRoom(roomId: string): IPhaseAndState { const hist = this.byRoom[roomId]?.history ?? []; if (hist.length > 0) { return hist[hist.length - 1]; @@ -125,15 +119,10 @@ export default class RightPanelStore extends ReadyWatchingStore { } // The Group stuff is just for backwards compatibility. Can be removed when depracating groups - get groupPhaseHistory(): Array { - return this.roomPhaseHistory; - } - get currentGroup(): IPhaseAndState { - return this.currentPanel; - } - get previousGroup(): IPhaseAndState { - return this.previousPanel; - } + get isOpenForGroup(): boolean {return this.isOpenForRoom;} + get groupPhaseHistory(): Array {return this.roomPhaseHistory;} + get currentGroup(): IPhaseAndState {return this.currentPanel;} + get previousGroup(): IPhaseAndState {return this.previousPanel;} // ALL SETTERS: public setRightPanel(phase: RightPanelPhases, state: IPanelState = null, allowClose = true, roomId: string = null) { @@ -157,7 +146,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // - does not contain any state information (refireParams) this.togglePanel(rId); return; - } else if ((targetPhase === this.currentPanelById(rId)?.phase && !!panelState)) { + } else if ((targetPhase === this.currentPanelForRoom(rId)?.phase && !!panelState)) { // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) const hist = this.byRoom[rId].history; hist[hist.length - 1].state = panelState; From 0a209bc5572f20a10c2830699b12b548763ec5bb Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 13 Dec 2021 13:01:34 +0100 Subject: [PATCH 24/76] fix import order --- src/components/structures/RightPanel.tsx | 2 +- src/components/structures/SpaceRoomView.tsx | 1 + src/dispatcher/dispatch-actions/threads.ts | 1 + src/stores/right-panel/RightPanelStore.ts | 6 +++--- src/stores/right-panel/RightPanelStoreIPanelState.ts | 5 +++-- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 367a5456a4b..0714a3078c1 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -22,6 +22,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import { throttle } from 'lodash'; +import { User } from 'matrix-js-sdk/src/models/user'; import dis from '../../dispatcher/dispatcher'; import GroupStore from '../../stores/GroupStore'; @@ -51,7 +52,6 @@ import { E2EStatus } from '../../utils/ShieldUtils'; import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads'; import TimelineCard from '../views/right_panel/TimelineCard'; import { UPDATE_EVENT } from '../../stores/AsyncStore'; -import { User } from 'matrix-js-sdk/src/models/user'; interface IProps { room?: Room; // if showing panels for a given room, this is set diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 6de4357ecbf..b6981a49a97 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -19,6 +19,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event"; import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials"; import { Room } from "matrix-js-sdk/src/models/room"; import { logger } from "matrix-js-sdk/src/logger"; + import MatrixClientContext from "../../contexts/MatrixClientContext"; import RoomAvatar from "../views/avatars/RoomAvatar"; import { _t } from "../../languageHandler"; diff --git a/src/dispatcher/dispatch-actions/threads.ts b/src/dispatcher/dispatch-actions/threads.ts index fa91a942658..3af5c28d49b 100644 --- a/src/dispatcher/dispatch-actions/threads.ts +++ b/src/dispatcher/dispatch-actions/threads.ts @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; + import RightPanelStore from "../../stores/right-panel/RightPanelStore"; import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 8faaec85969..b5ceb38ddde 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -14,6 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { logger } from "matrix-js-sdk/src/logger"; +import { EventSubscription } from 'fbemitter'; + import defaultDispatcher from '../../dispatcher/dispatcher'; import { pendingVerificationRequestForUser } from '../../verification'; import SettingsStore from "../../settings/SettingsStore"; @@ -21,12 +24,9 @@ import { RightPanelPhases/*, RIGHT_PANEL_PHASES_NO_ARGS */ } from "./RightPanelS import { ActionPayload } from "../../dispatcher/payloads"; import { Action } from '../../dispatcher/actions'; import { SettingLevel } from "../../settings/SettingLevel"; - -import { logger } from "matrix-js-sdk/src/logger"; import { UPDATE_EVENT } from '../AsyncStore'; import { ReadyWatchingStore } from '../ReadyWatchingStore'; import RoomViewStore from '../RoomViewStore'; -import { EventSubscription } from 'fbemitter'; import { IPhaseAndState, IPanelState, convertToStateRoom, convertToStoreRoom } from './RightPanelStoreIPanelState'; const GROUP_PHASES = [ diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 75ca5bca0b5..54f4d5baece 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -15,10 +15,11 @@ limitations under the License. */ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import { User } from "matrix-js-sdk/src/models/user"; import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; -import { User } from "matrix-js-sdk/src/models/user"; +import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; + import { GroupMember } from "../../components/views/right_panel/UserInfo"; import { RightPanelPhases } from "./RightPanelStorePhases"; From 5839777c978fec309a5bced651099d6be9cd16af Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 13 Dec 2021 17:57:31 +0100 Subject: [PATCH 25/76] add console log --- src/stores/right-panel/RightPanelStore.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index b5ceb38ddde..204b513adb1 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -81,6 +81,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onNotReady(): Promise { + console.log("unregiter dispatcher: ", this.dispatcherRefRightPanelStore ); this.dispatcher.unregister(this.dispatcherRefRightPanelStore); // Remove RoomStore listener if (this.roomStoreToken) { From 49e89d0803c0f8ae82d52e341842bba6fdf0444b Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 13 Dec 2021 22:18:25 +0100 Subject: [PATCH 26/76] rename room -> panel --- src/components/structures/RightPanel.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 6668839ea19..f99f06a7129 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -166,10 +166,10 @@ export default class RightPanel extends React.Component { } }; private onRightPanelStoreUpdate = () => { - const currentRoom = RightPanelStore.instance.currentPanel; + const currentPanel = RightPanelStore.instance.currentPanel; this.setState({ - ...currentRoom.state, - phase: currentRoom.phase, + ...currentPanel.state, + phase: currentPanel.phase, }); }; From 0eff48eda4c8895e976126f9b46621a00a9b8219 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:31:55 +0100 Subject: [PATCH 27/76] Update src/components/structures/RightPanel.tsx Co-authored-by: J. Ryan Stinnett --- src/components/structures/RightPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index f99f06a7129..94753623497 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -90,7 +90,7 @@ export default class RightPanel extends React.Component { constructor(props, context) { super(props, context); this.state = { - // get all the state from the room panel store on init + // get all the state from the right panel store on init ...RightPanelStore.instance.currentPanel?.state, phase: RightPanelStore.instance.currentPanel?.phase, isUserPrivilegedInGroup: null, From 5f690a328a95a5fecf68f8f1e31cc10e1f4abacf Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:33:18 +0100 Subject: [PATCH 28/76] Update src/components/views/right_panel/HeaderButtons.tsx Co-authored-by: J. Ryan Stinnett --- src/components/views/right_panel/HeaderButtons.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index a5effab44a2..115823057ee 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -24,7 +24,6 @@ import dis from '../../../dispatcher/dispatcher'; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import { IPanelState } from '../../../stores/right-panel/RightPanelStoreIPanelState'; -// import type { EventSubscription } from "fbemitter"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { UPDATE_EVENT } from '../../../stores/AsyncStore'; import { NotificationColor } from '../../../stores/notifications/NotificationColor'; From 7c82f8d9589aaa17d339eaeb6fd0c32fce525eb0 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:34:47 +0100 Subject: [PATCH 29/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 204b513adb1..493901eda42 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -1,5 +1,5 @@ /* -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019-2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. From 726243a585d6dcd207160c8ae55aa02dd747216b Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:35:20 +0100 Subject: [PATCH 30/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 493901eda42..791d9f4aff3 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -20,7 +20,7 @@ import { EventSubscription } from 'fbemitter'; import defaultDispatcher from '../../dispatcher/dispatcher'; import { pendingVerificationRequestForUser } from '../../verification'; import SettingsStore from "../../settings/SettingsStore"; -import { RightPanelPhases/*, RIGHT_PANEL_PHASES_NO_ARGS */ } from "./RightPanelStorePhases"; +import { RightPanelPhases } from "./RightPanelStorePhases"; import { ActionPayload } from "../../dispatcher/payloads"; import { Action } from '../../dispatcher/actions'; import { SettingLevel } from "../../settings/SettingLevel"; From 52d87c465dfe59be7ad748b27f18b2bd9bbf7d4d Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:35:36 +0100 Subject: [PATCH 31/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 791d9f4aff3..5c0b0153338 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -47,7 +47,7 @@ const MEMBER_INFO_PHASES = [ * sessions. This state includes a history for each room. Each history element contains * the phase (e.g. RoomMemberInfo) and the state (e.g. the member) associated with it. * - * Groups are treated the same then rooms (They are also stored in the byRoom object). + * Groups are treated the same as rooms (they are also stored in the byRoom object). * This is possible since the store keeps track of the opened room/group -> the store will * provide the correct history for that group/room. */ From cec03301e773e8f8670a8846e4afaf1e50f1c5b4 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:35:52 +0100 Subject: [PATCH 32/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 5c0b0153338..ed1ce8afc3f 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -81,7 +81,6 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onNotReady(): Promise { - console.log("unregiter dispatcher: ", this.dispatcherRefRightPanelStore ); this.dispatcher.unregister(this.dispatcherRefRightPanelStore); // Remove RoomStore listener if (this.roomStoreToken) { From 125ff03915b5b0dc00658537e77043ba750905a8 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:36:09 +0100 Subject: [PATCH 33/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index ed1ce8afc3f..24971db5d31 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -88,7 +88,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } } - // ALL GETTERS: + // Getters get isOpenForRoom(): boolean { return this.byRoom[this.viewedRoomId]?.isOpen ?? false; } From 97b2210cd0e8477a3f827677b5a2bcc375bcfe54 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:36:35 +0100 Subject: [PATCH 34/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 24971db5d31..754cd5a45ac 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -124,7 +124,7 @@ export default class RightPanelStore extends ReadyWatchingStore { get currentGroup(): IPhaseAndState {return this.currentPanel;} get previousGroup(): IPhaseAndState {return this.previousPanel;} - // ALL SETTERS: + // Setters public setRightPanel(phase: RightPanelPhases, state: IPanelState = null, allowClose = true, roomId: string = null) { const rId = roomId ?? this.viewedRoomId; console.log("ORDER_DEBUG: setRightPanel "); From ab32836fd31ccf7e9f13161e08e801e983c15f46 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:36:49 +0100 Subject: [PATCH 35/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 754cd5a45ac..ce94544e405 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -96,6 +96,7 @@ export default class RightPanelStore extends ReadyWatchingStore { get roomPhaseHistory(): Array { return this.byRoom[this.viewedRoomId]?.history ?? []; } + get currentPanel(): IPhaseAndState { const hist = this.roomPhaseHistory; if (hist.length >= 1) { From ab6771a2db40b0c577b9f590fd60f71ddbdb55bc Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:37:06 +0100 Subject: [PATCH 36/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index ce94544e405..0df92186ebc 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -104,6 +104,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } return { state: {}, phase: null }; } + currentPanelForRoom(roomId: string): IPhaseAndState { const hist = this.byRoom[roomId]?.history ?? []; if (hist.length > 0) { From 2ffb5b9437c4cdf8a2b954422364205987dfa1a6 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 14 Dec 2021 17:33:29 +0100 Subject: [PATCH 37/76] resolve review --- src/components/structures/RightPanel.tsx | 6 +- src/components/views/right_panel/BaseCard.tsx | 3 +- .../views/right_panel/HeaderButtons.tsx | 6 - .../views/right_panel/RoomSummaryCard.tsx | 6 +- src/components/views/right_panel/UserInfo.tsx | 2 +- .../views/right_panel/WidgetCard.tsx | 2 +- src/dispatcher/actions.ts | 15 -- src/dispatcher/dispatch-actions/threads.ts | 2 +- src/settings/Settings.tsx | 16 -- .../handlers/DeviceSettingsHandler.ts | 25 ---- src/stores/right-panel/RightPanelStore.ts | 138 +++++++++--------- .../right-panel/RightPanelStoreIPanelState.ts | 19 ++- src/verification.ts | 5 +- 13 files changed, 97 insertions(+), 148 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 94753623497..0be77163340 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -159,8 +159,10 @@ export default class RightPanel extends React.Component { // redraw the badge on the membership list if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.room.roomId) { this.delayedUpdate(); - } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId && - member.userId === this.state.member.userId) { + } else if ( + this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId && + member.userId === this.state.member.userId + ) { // refresh the member info (e.g. new power level) this.delayedUpdate(); } diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 4949123b057..a1220128a7e 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -62,8 +62,7 @@ const BaseCard: React.FC = ({ let backButton; if (previousPhase) { const onBackClick = () => { - // console.log(RoomListStore.instance); - // TODO RightPanelStore: this should ideally be: + // TODO RightPanelStore (will be addressed in a follow up PR): this should ideally be: // RightPanelStore.instance.popRightPanel(); RightPanelStore.instance.setRightPanel(previousPhase, refireParams ); diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 115823057ee..7e3e2a61ce6 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -82,12 +82,6 @@ export default abstract class HeaderButtons

extends React.Component = ({ app, room }) => { }, [room.roomId]); const onOpenWidgetClick = () => { - // TODO RightPanelPhase: should push the widget + // TODO RightPanelStore (will be addressed in a follow up PR): should push the widget RightPanelStore.instance.setRightPanel(RightPanelPhases.Widget, { widgetId: app.id }); }; @@ -231,12 +231,12 @@ const AppsSection: React.FC = ({ room }) => { }; export const onRoomMembersClick = (allowClose = true) => { - // TODO RightPanelStore: should push the phase + // TODO RightPanelStore (will be addressed in a follow up PR): should push the phase RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, undefined, allowClose); }; export const onRoomFilesClick = (allowClose = true) => { - // TODO RightPanelStore: should push the phase + // TODO RightPanelStore (will be addressed in a follow up PR): should push the phase RightPanelStore.instance.setRightPanel(RightPanelPhases.FilePanel, undefined, allowClose); }; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 63e4f5e5b6d..ae7b1f121f4 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1648,7 +1648,7 @@ const UserInfo: React.FC = ({ } const onEncryptionPanelClose = () => { - // TODO RightPanelStore: here we want to pop the panel + // TODO RightPanelStore (will be addressed in a follow up PR): here we want to pop the panel RightPanelStore.instance.setRightPanel(previousPhase, refireParams); }; diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 37f4750239d..821f952b135 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -49,7 +49,7 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { if (!app || isPinned) { // stop showing this card - //TODO RightPanelStore: here we want to just pop the widget card. + //TODO RightPanelStore (will be addressed in a follow up PR): here we want to just pop the widget card. RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomSummary); } }, [app, isPinned]); diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts index 4e1fa7f53b6..b0bb02d79ec 100644 --- a/src/dispatcher/actions.ts +++ b/src/dispatcher/actions.ts @@ -102,21 +102,6 @@ export enum Action { */ ViewRoomDelta = "view_room_delta", - // /** - // * Sets the phase for the right panel. Should be used with SetRightPanelPhasePayload. - // */ - // SetRightPanelPhase = "set_right_panel_phase", - - // /** - // * Pushes a new phase to the history array for the right panel. Should be used with SetRightPanelPhasePayload. - // */ - // PushRightPanelPhase = "push_right_panel_phase", - - // /** - // * Pops the current phase for the right panel. So that the previous phase is show with its associated state (refireParams) - // */ - // PopRightPanelPhase = "pop_right_panel_phase", - /** * Trigged after the phase of the right panel is set. Should be used with AfterRightPanelPhaseChangePayload. */ diff --git a/src/dispatcher/dispatch-actions/threads.ts b/src/dispatcher/dispatch-actions/threads.ts index 3af5c28d49b..ad36c2989a2 100644 --- a/src/dispatcher/dispatch-actions/threads.ts +++ b/src/dispatcher/dispatch-actions/threads.ts @@ -23,7 +23,7 @@ export const dispatchShowThreadEvent = ( initialEvent?: MatrixEvent, highlighted?: boolean, ) => { - // TODO RightPanelStore: this should really be a push! + // TODO RightPanelStore (will be addressed in a follow up PR): this should really be a push! RightPanelStore.instance.setRightPanel( RightPanelPhases.ThreadView, { diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index a0f4fa30d45..87126a79cb9 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -768,22 +768,6 @@ export const SETTINGS: {[setting: string]: ISetting} = { supportedLevels: [SettingLevel.ROOM_DEVICE], default: null, }, - // "showRightPanelInRoom": { - // supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, - // default: false, - // }, - // "showRightPanelInGroup": { - // supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, - // default: false, - // }, - // "lastRightPanelPhaseForRoom": { - // supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, - // default: RightPanelPhases.RoomSummary, - // }, - // "lastRightPanelPhaseForGroup": { - // supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, - // default: RightPanelPhases.GroupMemberList, - // }, "enableEventIndexing": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, displayName: _td("Enable message search in encrypted rooms"), diff --git a/src/settings/handlers/DeviceSettingsHandler.ts b/src/settings/handlers/DeviceSettingsHandler.ts index f7a9fe9108d..2857e4aa1ac 100644 --- a/src/settings/handlers/DeviceSettingsHandler.ts +++ b/src/settings/handlers/DeviceSettingsHandler.ts @@ -57,17 +57,6 @@ export default class DeviceSettingsHandler extends SettingsHandler { return null; // wrong type or otherwise not set } - // Special case the right panel - see `setValue` for rationale. - if ([ - "showRightPanelInRoom", - "showRightPanelInGroup", - "lastRightPanelPhaseForRoom", - "lastRightPanelPhaseForGroup", - ].includes(settingName)) { - const val = JSON.parse(localStorage.getItem(`mx_${settingName}`) || "{}"); - return val['value']; - } - // Special case for old useIRCLayout setting if (settingName === "layout") { const settings = this.getSettings() || {}; @@ -106,20 +95,6 @@ export default class DeviceSettingsHandler extends SettingsHandler { return Promise.resolve(); } - // Special case the right panel because we want to be able to update these all - // concurrently without stomping on one another. We could use async/await, though - // that introduces just enough latency to be annoying. - if ([ - "showRightPanelInRoom", - "showRightPanelInGroup", - "lastRightPanelPhaseForRoom", - "lastRightPanelPhaseForGroup", - ].includes(settingName)) { - localStorage.setItem(`mx_${settingName}`, JSON.stringify({ value: newValue })); - this.watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue); - return Promise.resolve(); - } - // Special case for old useIRCLayout setting if (settingName === "layout") { const settings = this.getSettings() || {}; diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 0df92186ebc..a81d9d9380c 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -26,8 +26,14 @@ import { Action } from '../../dispatcher/actions'; import { SettingLevel } from "../../settings/SettingLevel"; import { UPDATE_EVENT } from '../AsyncStore'; import { ReadyWatchingStore } from '../ReadyWatchingStore'; -import RoomViewStore from '../RoomViewStore'; -import { IPhaseAndState, IPanelState, convertToStateRoom, convertToStoreRoom } from './RightPanelStoreIPanelState'; +// import RoomViewStore from '../RoomViewStore'; +import { + IPhaseAndState, + IPanelState, + convertToStateRoom, + convertToStoreRoom, + IRightPanelForRoom, +} from './RightPanelStoreIPanelState'; const GROUP_PHASES = [ RightPanelPhases.GroupMemberList, @@ -44,13 +50,14 @@ const MEMBER_INFO_PHASES = [ /** * A class for tracking the state of the right panel between layouts and - * sessions. This state includes a history for each room. Each history element contains - * the phase (e.g. RoomMemberInfo) and the state (e.g. the member) associated with it. - * - * Groups are treated the same as rooms (they are also stored in the byRoom object). - * This is possible since the store keeps track of the opened room/group -> the store will - * provide the correct history for that group/room. - */ + * sessions. This state includes a history for each room. Each history element + * contains the phase (e.g. RightPanelPhase.RoomMemberInfo) and the state (e.g. the + * member) associated with it. + * Groups are treated the same as rooms (they are also + * stored in the byRoom object).This is possible since the store keeps track of the + * opened room/group -> the store will provide the correct history for that + * group/room. +*/ export default class RightPanelStore extends ReadyWatchingStore { private static internalInstance: RightPanelStore; private viewedRoomId: string; @@ -59,15 +66,9 @@ export default class RightPanelStore extends ReadyWatchingStore { private roomStoreToken: EventSubscription; private byRoom: { - [roomId: string]: { - isOpen: boolean; - history: Array; - }; + [roomId: string]: IRightPanelForRoom; } = {}; - private global?: { - isOpen: boolean; - history: Array; - } = null; + private global?: IRightPanelForRoom = null; private constructor() { super(defaultDispatcher); @@ -75,7 +76,8 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onReady(): Promise { - this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); + // this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); + // TODO RightPanelStore (will be addressed in a follow up PR): This should be used instead of the onDispatch callback when groups are removed. this.loadCacheFromSettings(); this.emitAndUpdateSettings(); } @@ -89,15 +91,15 @@ export default class RightPanelStore extends ReadyWatchingStore { } // Getters - get isOpenForRoom(): boolean { + public get isOpenForRoom(): boolean { return this.byRoom[this.viewedRoomId]?.isOpen ?? false; } - get roomPhaseHistory(): Array { + public get roomPhaseHistory(): Array { return this.byRoom[this.viewedRoomId]?.history ?? []; } - get currentPanel(): IPhaseAndState { + public get currentPanel(): IPhaseAndState { const hist = this.roomPhaseHistory; if (hist.length >= 1) { return hist[hist.length - 1]; @@ -105,14 +107,15 @@ export default class RightPanelStore extends ReadyWatchingStore { return { state: {}, phase: null }; } - currentPanelForRoom(roomId: string): IPhaseAndState { + public currentPanelForRoom(roomId: string): IPhaseAndState { const hist = this.byRoom[roomId]?.history ?? []; if (hist.length > 0) { return hist[hist.length - 1]; } return this.currentPanel ?? { state: {}, phase: null }; } - get previousPanel(): IPhaseAndState { + + public get previousPanel(): IPhaseAndState { const hist = this.roomPhaseHistory; if (hist?.length >= 2) { return hist[hist.length - 2]; @@ -120,47 +123,45 @@ export default class RightPanelStore extends ReadyWatchingStore { return { state: {}, phase: null }; } - // The Group stuff is just for backwards compatibility. Can be removed when depracating groups - get isOpenForGroup(): boolean {return this.isOpenForRoom;} - get groupPhaseHistory(): Array {return this.roomPhaseHistory;} - get currentGroup(): IPhaseAndState {return this.currentPanel;} - get previousGroup(): IPhaseAndState {return this.previousPanel;} + // The Group associated getters are just for backwards compatibility. Can be removed when deprecating groups. + public get isOpenForGroup(): boolean { return this.isOpenForRoom; } + public get groupPhaseHistory(): Array { return this.roomPhaseHistory; } + public get currentGroup(): IPhaseAndState { return this.currentPanel; } + public get previousGroup(): IPhaseAndState { return this.previousPanel; } // Setters public setRightPanel(phase: RightPanelPhases, state: IPanelState = null, allowClose = true, roomId: string = null) { const rId = roomId ?? this.viewedRoomId; - console.log("ORDER_DEBUG: setRightPanel "); - // this was previously a very multifuncitonal command: - // TogglePanel: if the same phase is send but without refireParams - // UpdateState: if the same phase is send but with refireParams - // SetRightPanel and erase history: if a "differnt to the current" phase is send (with or without refireParams) - const redirect = this.getVerificationRedirect(phase, state); - const targetPhase = redirect?.targetPhase ?? phase; - const panelState = redirect?.panelState ?? state; + // this was previously a very multifunctional command: + // Toggle panel: if the same phase is send but without a state + // Update state: if the same phase is send but with a state + // Set right panel and erase history: if a "different to the current" phase is send (with or without a state) + const redirect = this.getVerificationRedirect({ phase, state }); + const targetPhase = redirect?.phase ?? phase; + const panelState = redirect?.state ?? state; // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; if (targetPhase === this.currentPanel?.phase && allowClose && !panelState) { - // Toggle command: a toggle command needs to fullfill the following: + // Toggle panel: a toggle command needs to fullfil the following: // - the same phase // - the panel can be closed // - does not contain any state information (refireParams) this.togglePanel(rId); return; } else if ((targetPhase === this.currentPanelForRoom(rId)?.phase && !!panelState)) { - // Update Command: set right panel phase with a new state but keep the phase (dont know it this is ever needed...) + // Update state: set right panel with a new state but keep the phase (dont know it this is ever needed...) const hist = this.byRoom[rId].history; hist[hist.length - 1].state = panelState; this.emitAndUpdateSettings(); return; } else if (targetPhase !== this.currentPanel?.phase) { - // SetRightPanel and erase history. + // Set right panel and erase history. this.setRightPanelCache(targetPhase, panelState); } } - // push right panel: appends to the history public pushRightPanel( phase: RightPanelPhases, panelState: IPanelState = null, @@ -168,10 +169,9 @@ export default class RightPanelStore extends ReadyWatchingStore { roomId: string = null, ) { const rId = roomId ?? this.viewedRoomId; - console.log("ORDER_DEBUG: action: pushRightPanel"); - const redirect = this.getVerificationRedirect(phase, panelState); - const targetPhase = redirect?.targetPhase ?? phase; - const refireParams = redirect?.panelState ?? panelState; + const redirect = this.getVerificationRedirect({ phase, state: panelState }); + const targetPhase = redirect?.phase ?? phase; + const pState = redirect?.state ?? panelState; // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; @@ -179,12 +179,12 @@ export default class RightPanelStore extends ReadyWatchingStore { let roomCache = this.byRoom[rId]; if (!!roomCache) { // append new phase - roomCache.history.push({ state: refireParams, phase: targetPhase }); + roomCache.history.push({ state: pState, phase: targetPhase }); roomCache.isOpen = allowClose ? roomCache.isOpen : true; } else { // create new phase roomCache = { - history: [{ phase: targetPhase, state: refireParams }], + history: [{ phase: targetPhase, state: pState }], // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false isOpen: !allowClose, }; @@ -193,7 +193,6 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emitAndUpdateSettings(); } - // pop right panel: removes last eelemnt from history public popRightPanel(roomId: string = null) { const rId = roomId ?? this.viewedRoomId; const roomCache = this.byRoom[rId]; @@ -213,10 +212,11 @@ export default class RightPanelStore extends ReadyWatchingStore { const room = this.mxClient?.getRoom(this.viewedRoomId); if (!!room) { this.global = this.global ?? convertToStateRoom(SettingsStore.getValue("RightPanel.phasesGlobal"), room); - this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] - ?? convertToStateRoom(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); + this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ?? + convertToStateRoom(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); } } + private emitAndUpdateSettings() { const storePanelGlobal = convertToStoreRoom(this.global); const storePanelThisRoom = convertToStoreRoom(this.byRoom[this.viewedRoomId]); @@ -231,8 +231,8 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emit(UPDATE_EVENT, null); } - // set rigth panel: overrides the history private setRightPanelCache(targetPhase: RightPanelPhases, panelState: IPanelState = null) { + // this overrides the history for the right panel in the current room. this.byRoom[this.viewedRoomId] = { history: [{ phase: targetPhase, state: panelState ?? {} }], isOpen: true, @@ -240,17 +240,15 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emitAndUpdateSettings(); } - // CHECKS: - // - RoomMemberInfo -> needs to be changed to EncryptionPanel if pendingVerificationRequestForUser - private getVerificationRedirect(targetPhase: RightPanelPhases, panelState): - { targetPhase: RightPanelPhases, panelState } { - if (targetPhase === RightPanelPhases.RoomMemberInfo && panelState) { - const { member } = panelState; + private getVerificationRedirect(phaseAndState: IPhaseAndState): IPhaseAndState { + if (phaseAndState.phase === RightPanelPhases.RoomMemberInfo && phaseAndState.state) { + // RightPanelPhases.RoomMemberInfo -> needs to be changed to RightPanelPhases.EncryptionPanel if there is a pending verification request + const { member } = phaseAndState.state; const pendingRequest = pendingVerificationRequestForUser(member); if (pendingRequest) { return { - targetPhase: RightPanelPhases.EncryptionPanel, - panelState: { + phase: RightPanelPhases.EncryptionPanel, + state: { verificationRequest: pendingRequest, member, }, @@ -266,16 +264,21 @@ export default class RightPanelStore extends ReadyWatchingStore { return false; } if (GROUP_PHASES.includes(targetPhase) && this.isViewingRoom) { - logger.warn(`Tried to switch right panel to a group phase: ${targetPhase}, - but we are currently not viewing a group`); + logger.warn( + `Tried to switch right panel to a group phase: ${targetPhase}, ` + + `but we are currently not viewing a group`, + ); return false; } else if (!GROUP_PHASES.includes(targetPhase) && !this.isViewingRoom) { - logger.warn(`Tried to switch right panel to a room phase: ${targetPhase}, - but we are currently not viewing a room`); + logger.warn( + `Tried to switch right panel to a room phase: ${targetPhase}, ` + + `but we are currently not viewing a room`, + ); return false; } return true; } + onRoomViewStoreUpdate() { // TODO: use this function instead of the onDispatch (the whole onDispatch can get removed!) as soon groups are removed // this.viewedRoomId = RoomViewStore.getRoomId(); @@ -289,21 +292,18 @@ export default class RightPanelStore extends ReadyWatchingStore { case 'view_group': case Action.ViewRoom: { const _this = RightPanelStore.instance; - console.log("ORDER_DEBUG: action:", payload.action); if (payload.room_id === _this.viewedRoomId) break; // skip this transition, probably a permalink // Put group in the same/similar view to what was open from the previously viewed room - // Is contradictory to the new "per room" philosophy but it is the legacy behaviour for groups. + // Is contradictory to the new "per room" philosophy but it is the legacy behavior for groups. if ((_this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentPanel?.phase)) { // switch from group to room _this.setRightPanelCache(RightPanelPhases.RoomMemberList, {}); - // this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} }); } else if (payload.action == "view_group" && _this.currentPanel?.phase === RightPanelPhases.GroupMemberInfo) { // switch from room to group _this.setRightPanelCache(RightPanelPhases.GroupMemberList, {}); - // this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList }); } } @@ -314,16 +314,16 @@ export default class RightPanelStore extends ReadyWatchingStore { // load values from byRoomCache with the viewedRoomId. if (!!_this.roomStoreToken) { // skip loading here since we need the client to be ready to get the events form the ids of the settings - // this loading will be done in the onready function - // all this nonsense is not necassary anymore as soon as we use: onRoomViewStoreUpdate + // this loading will be done in the onReady function + // all the logic in this case is not necessary anymore as soon as groups are dropped and we use: onRoomViewStoreUpdate _this.loadCacheFromSettings(); _this.emitAndUpdateSettings(); } - console.log("right panel store for current room: ", _this.byRoom[_this.viewedRoomId]); break; } } } + public static get instance(): RightPanelStore { if (!RightPanelStore.internalInstance) { RightPanelStore.internalInstance = new RightPanelStore(); diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 54f4d5baece..1f96b74d088 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -1,5 +1,5 @@ /* -Copyright 2020 The Matrix.org Foundation C.I.C. +Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -64,15 +64,23 @@ export interface IPhaseAndStateStored { state: IPanelStateStored; } -export function convertToStoreRoom(cacheRoom: { isOpen: boolean, history: Array }): -{ history: Array, isOpen: boolean } { +export interface IRightPanelForRoom { + isOpen: boolean; + history: Array; +} + +interface IRightPanelForRoomStored { + isOpen: boolean; + history: Array; +} + +export function convertToStoreRoom(cacheRoom: IRightPanelForRoom): IRightPanelForRoomStored { if (!cacheRoom) return cacheRoom; const storeHistory = [...cacheRoom.history].map(panelState => convertStateToStore(panelState)); return { isOpen: cacheRoom.isOpen, history: storeHistory }; } -export function convertToStateRoom(storeRoom: { history: Array, isOpen: boolean }, room: Room): -{ history: Array, isOpen: boolean } { +export function convertToStateRoom(storeRoom: IRightPanelForRoomStored, room: Room): IRightPanelForRoom { if (!storeRoom) return storeRoom; const stateHistory = [...storeRoom.history].map(panelStateStore => convertStoreToState(panelStateStore, room)); return { history: stateHistory, isOpen: storeRoom.isOpen }; @@ -90,6 +98,7 @@ function convertStateToStore(panelState: IPhaseAndState): IPhaseAndStateStored { delete panelStateThisRoomStored.initialEvent; return { state: panelStateThisRoomStored as IPhaseAndStateStored, phase: panelState.phase } as IPhaseAndStateStored; } + function convertStoreToState(panelStateStore: IPhaseAndStateStored, room: Room): IPhaseAndState { const panelStateThisRoom = { ...panelStateStore?.state } as any; if (!!panelStateThisRoom.threadHeadEventId) { diff --git a/src/verification.ts b/src/verification.ts index 0c8a44b465e..ee63d6f4e7d 100644 --- a/src/verification.ts +++ b/src/verification.ts @@ -16,6 +16,7 @@ limitations under the License. import { User } from "matrix-js-sdk/src/models/user"; import { verificationMethods as VerificationMethods } from 'matrix-js-sdk/src/crypto'; +import { RoomMember } from "matrix-js-sdk/src/matrix"; import { MatrixClientPeg } from './MatrixClientPeg'; import dis from "./dispatcher/dispatcher"; @@ -24,7 +25,7 @@ import { RightPanelPhases } from "./stores/right-panel/RightPanelStorePhases"; import { findDMForUser } from './createRoom'; import { accessSecretStorage } from './SecurityManager'; import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDialog"; -import { IDevice } from "./components/views/right_panel/UserInfo"; +import { GroupMember, IDevice } from "./components/views/right_panel/UserInfo"; import ManualDeviceKeyVerificationDialog from "./components/views/dialogs/ManualDeviceKeyVerificationDialog"; import RightPanelStore from "./stores/right-panel/RightPanelStore"; @@ -117,7 +118,7 @@ export async function verifyUser(user: User) { ); } -export function pendingVerificationRequestForUser(user: User) { +export function pendingVerificationRequestForUser(user: User | RoomMember | GroupMember ) { const cli = MatrixClientPeg.get(); const dmRoom = findDMForUser(cli, user.userId); if (dmRoom) { From 7301c649222bdea467841b9c07978527d87dd6cd Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 14 Dec 2021 17:43:38 +0100 Subject: [PATCH 38/76] remove comment (review) --- src/components/views/right_panel/HeaderButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 7e3e2a61ce6..9e653b929f5 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -51,7 +51,7 @@ export default abstract class HeaderButtons

extends React.Component Date: Tue, 14 Dec 2021 18:42:20 +0100 Subject: [PATCH 39/76] use default dispatcher --- src/stores/right-panel/RightPanelStore.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index a81d9d9380c..1b3303ba5db 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -72,7 +72,7 @@ export default class RightPanelStore extends ReadyWatchingStore { private constructor() { super(defaultDispatcher); - this.dispatcherRefRightPanelStore = this.dispatcher.register(this.onDispatch); + this.dispatcherRefRightPanelStore = defaultDispatcher.register(this.onDispatch); } protected async onReady(): Promise { @@ -83,7 +83,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onNotReady(): Promise { - this.dispatcher.unregister(this.dispatcherRefRightPanelStore); + defaultDispatcher.unregister(this.dispatcherRefRightPanelStore); // Remove RoomStore listener if (this.roomStoreToken) { this.roomStoreToken.remove(); From 9be935fec3e8f764f085c39f15b6f8176b037015 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 14 Dec 2021 19:00:15 +0100 Subject: [PATCH 40/76] check for dispatcherRef --- src/stores/right-panel/RightPanelStore.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 1b3303ba5db..7c0f629387a 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -83,7 +83,9 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onNotReady(): Promise { - defaultDispatcher.unregister(this.dispatcherRefRightPanelStore); + if (this.dispatcherRefRightPanelStore) { + defaultDispatcher.unregister(this.dispatcherRefRightPanelStore); + } // Remove RoomStore listener if (this.roomStoreToken) { this.roomStoreToken.remove(); From c739f7763e22260deb6880180b863ca48ad36f4c Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 11:35:14 +0100 Subject: [PATCH 41/76] not unregisting dispatcher (for wrench test) --- src/stores/right-panel/RightPanelStore.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 7c0f629387a..80867567189 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -83,9 +83,9 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onNotReady(): Promise { - if (this.dispatcherRefRightPanelStore) { - defaultDispatcher.unregister(this.dispatcherRefRightPanelStore); - } + // if (this.dispatcherRefRightPanelStore) { + // defaultDispatcher.unregister(this.dispatcherRefRightPanelStore); + // } // Remove RoomStore listener if (this.roomStoreToken) { this.roomStoreToken.remove(); From 02ca9995ec47cdd3cdc4924b65454b1ae21f2272 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 12:39:29 +0100 Subject: [PATCH 42/76] unregister in destory --- src/stores/right-panel/RightPanelStore.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 80867567189..9bd872f3676 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -81,11 +81,14 @@ export default class RightPanelStore extends ReadyWatchingStore { this.loadCacheFromSettings(); this.emitAndUpdateSettings(); } + public destroy() { + if (this.dispatcherRefRightPanelStore) { + defaultDispatcher.unregister(this.dispatcherRefRightPanelStore); + } + super.destroy(); + } protected async onNotReady(): Promise { - // if (this.dispatcherRefRightPanelStore) { - // defaultDispatcher.unregister(this.dispatcherRefRightPanelStore); - // } // Remove RoomStore listener if (this.roomStoreToken) { this.roomStoreToken.remove(); From 86bbb581b0256a64dcc908736bb512b767c2d8ce Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 14:02:41 +0100 Subject: [PATCH 43/76] "react set state on unmounted" fixes --- src/components/structures/RoomStatusBar.tsx | 4 +++- src/components/structures/TimelinePanel.tsx | 1 + src/components/views/rooms/AppsDrawer.tsx | 4 +++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 76835d7c29d..8faf0624fb0 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -85,8 +85,8 @@ interface IState { @replaceableComponent("structures.RoomStatusBar") export default class RoomStatusBar extends React.PureComponent { + private unmounted = false; public static contextType = MatrixClientContext; - constructor(props: IProps, context: typeof MatrixClientContext) { super(props, context); @@ -111,6 +111,7 @@ export default class RoomStatusBar extends React.PureComponent { } public componentWillUnmount(): void { + this.unmounted = true; // we may have entirely lost our client as we're logging out before clicking login on the guest bar... const client = this.context; if (client) { @@ -123,6 +124,7 @@ export default class RoomStatusBar extends React.PureComponent { if (state === "SYNCING" && prevState === "SYNCING") { return; } + if (this.unmounted) return; this.setState({ syncState: state, syncStateData: data, diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index ea0492e1fc9..3b4ee65726c 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -680,6 +680,7 @@ class TimelinePanel extends React.Component { }; private onSync = (clientSyncState: SyncState, prevState: SyncState, data: object): void => { + if (this.unmounted) return; this.setState({ clientSyncState }); }; diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx index 01696d22d3b..a8995c3eae5 100644 --- a/src/components/views/rooms/AppsDrawer.tsx +++ b/src/components/views/rooms/AppsDrawer.tsx @@ -56,6 +56,7 @@ interface IState { @replaceableComponent("views.rooms.AppsDrawer") export default class AppsDrawer extends React.Component { + private unmounted = false; private resizeContainer: HTMLDivElement; private resizer: Resizer; private dispatcherRef: string; @@ -74,7 +75,6 @@ export default class AppsDrawer extends React.Component { }; this.resizer = this.createResizer(); - this.props.resizeNotifier.on("isResizing", this.onIsResizing); } @@ -85,6 +85,7 @@ export default class AppsDrawer extends React.Component { } public componentWillUnmount(): void { + this.unmounted = true; ScalarMessaging.stopListening(); WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps); if (this.dispatcherRef) dis.unregister(this.dispatcherRef); @@ -213,6 +214,7 @@ export default class AppsDrawer extends React.Component { private centerApps = (): IApp[] => this.state.apps[Container.Center]; private updateApps = (): void => { + if (this.unmounted) return; this.setState({ apps: this.getApps(), }); From b8d0b7cb9925178a7a092da29447aeab98fe5e43 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 14:03:11 +0100 Subject: [PATCH 44/76] header button highlighting fix - they were always highlighted --- src/components/views/right_panel/HeaderButtons.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 9e653b929f5..7e2073c5c91 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -57,12 +57,12 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component Date: Wed, 15 Dec 2021 14:03:33 +0100 Subject: [PATCH 45/76] comments --- src/stores/right-panel/RightPanelStore.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 9bd872f3676..967e5457841 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -76,8 +76,8 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onReady(): Promise { - // this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); // TODO RightPanelStore (will be addressed in a follow up PR): This should be used instead of the onDispatch callback when groups are removed. + // RoomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate); this.loadCacheFromSettings(); this.emitAndUpdateSettings(); } @@ -89,10 +89,10 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onNotReady(): Promise { - // Remove RoomStore listener if (this.roomStoreToken) { this.roomStoreToken.remove(); } + // RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate); } // Getters From 715cf05cebf9f2185ad261d1737df7ea92ec9cb5 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 17:33:35 +0100 Subject: [PATCH 46/76] rename interfaces and function signatures: - IPhaseAndState -> IRightPanelCard (a card in thr irght panel history) - IPanelState -> IRightPanelCardState (the state of a card) - IRightPanelForRoom (the history of the RightPanel and isOpen for a room) - setRightPanel(phase: RightPanelPhases, state:IPanelState) -> setCard(card: IRightPanelCard) --- src/TextForEvent.tsx | 2 +- src/components/structures/RightPanel.tsx | 8 +- src/components/structures/RoomView.tsx | 2 +- src/components/structures/SpaceRoomView.tsx | 28 +++--- src/components/structures/ThreadView.tsx | 4 +- .../views/context_menus/RoomContextMenu.tsx | 2 +- .../views/elements/MemberEventListSummary.tsx | 2 +- .../messages/MKeyVerificationRequest.tsx | 5 +- src/components/views/right_panel/BaseCard.tsx | 6 +- .../views/right_panel/EncryptionPanel.tsx | 8 +- .../views/right_panel/HeaderButtons.tsx | 10 +-- .../views/right_panel/RoomHeaderButtons.tsx | 4 +- .../views/right_panel/RoomSummaryCard.tsx | 9 +- src/components/views/right_panel/UserInfo.tsx | 12 +-- .../views/right_panel/WidgetCard.tsx | 2 +- src/components/views/rooms/RoomListHeader.tsx | 2 +- .../views/toasts/VerificationRequestToast.tsx | 10 ++- src/dispatcher/dispatch-actions/threads.ts | 10 +-- src/stores/right-panel/RightPanelStore.ts | 89 +++++++++---------- .../right-panel/RightPanelStoreIPanelState.ts | 33 +++---- src/verification.ts | 24 ++--- 21 files changed, 140 insertions(+), 132 deletions(-) diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx index 8025e360878..14d4768e83e 100644 --- a/src/TextForEvent.tsx +++ b/src/TextForEvent.tsx @@ -503,7 +503,7 @@ const onPinnedOrUnpinnedMessageClick = (messageId: string, roomId: string): void }; const onPinnedMessagesClick = (): void => { - RightPanelStore.instance.setRightPanel(RightPanelPhases.PinnedMessages, null, false); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.PinnedMessages }, false); }; function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null { diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 0be77163340..72bca80edcc 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -91,8 +91,8 @@ export default class RightPanel extends React.Component { super(props, context); this.state = { // get all the state from the right panel store on init - ...RightPanelStore.instance.currentPanel?.state, - phase: RightPanelStore.instance.currentPanel?.phase, + ...RightPanelStore.instance.currentCard?.state, + phase: RightPanelStore.instance.currentCard?.phase, isUserPrivilegedInGroup: null, member: this.getUserForPanel(), searchQuery: "", @@ -107,7 +107,7 @@ export default class RightPanel extends React.Component { // as both are called at the same time in the constructor. private getUserForPanel(): RoomMember | User | GroupMember { if (this.state && this.state.member) return this.state.member; - const lastState = RightPanelStore.instance.currentPanel?.state; + const lastState = RightPanelStore.instance.currentCard?.state; // Should just use the member from the RightPanelStore. Wherever the prop is passed should just update the store beforehand. return this.props.member ?? lastState?.member; } @@ -168,7 +168,7 @@ export default class RightPanel extends React.Component { } }; private onRightPanelStoreUpdate = () => { - const currentPanel = RightPanelStore.instance.currentPanel; + const currentPanel = RightPanelStore.instance.currentCard; this.setState({ ...currentPanel.state, phase: currentPanel.phase, diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index efd3165cb5d..b6f8d02b2e5 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -335,7 +335,7 @@ export class RoomView extends React.Component { }); if (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) { // Show chat in right panel when a widget is maximised - RightPanelStore.instance.setRightPanel(RightPanelPhases.Timeline); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.Timeline }); } this.checkWidgets(this.state.room); }; diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index b6981a49a97..2ec35974920 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -163,7 +163,7 @@ const SpaceInfo = ({ space }: { space: Room }) => { kind="link" className="mx_SpaceRoomView_info_memberCount" onClick={() => { - RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, { space } ); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList, state: { space } }); }} > { _t("%(count)s members", { count }) } @@ -468,7 +468,7 @@ const SpaceLanding = ({ space }: { space: Room }) => { } const onMembersClick = () => { - RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, { space } ); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList, state: { space } }); }; return

@@ -839,20 +839,20 @@ export default class SpaceRoomView extends React.PureComponent { if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return; if (payload.action === Action.ViewUser && payload.member) { - RightPanelStore.instance.setRightPanel( - RightPanelPhases.SpaceMemberInfo, - { space: this.props.space, member: payload.member }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.SpaceMemberInfo, + state: { space: this.props.space, member: payload.member }, + }); } else if (payload.action === "view_3pid_invite" && payload.event) { - RightPanelStore.instance.setRightPanel( - RightPanelPhases.Space3pidMemberInfo, - { space: this.props.space, member: payload.member }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.Space3pidMemberInfo, + state: { space: this.props.space, member: payload.member }, + }); } else { - RightPanelStore.instance.setRightPanel( - RightPanelPhases.SpaceMemberList, - { space: this.props.space }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.SpaceMemberList, + state: { space: this.props.space }, + }); } }; diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index c5d06f249c8..c1f10c7470a 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -93,7 +93,7 @@ export default class ThreadView extends React.Component { } if (prevProps.room !== this.props.room) { - RightPanelStore.instance.setRightPanel( RightPanelPhases.RoomSummary ); + RightPanelStore.instance.setCard( { phase: RightPanelPhases.RoomSummary }); } } @@ -203,7 +203,7 @@ export default class ThreadView extends React.Component { event_id: this.state.thread?.id, }; - let previousPhase = RightPanelStore.instance.previousPanel.phase; + let previousPhase = RightPanelStore.instance.previousCard.phase; if (!SettingsStore.getValue("feature_maximised_widgets")) { previousPhase = RightPanelPhases.ThreadPanel; } diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx index ab1e8f5b31f..ab8ca90fed0 100644 --- a/src/components/views/context_menus/RoomContextMenu.tsx +++ b/src/components/views/context_menus/RoomContextMenu.tsx @@ -270,7 +270,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => { ev.stopPropagation(); ensureViewingRoom(); - RightPanelStore.instance.setRightPanel( RightPanelPhases.RoomSummary, null, false ); + RightPanelStore.instance.setCard( { phase: RightPanelPhases.RoomSummary }, false ); onFinished(); }} label={_t("Widgets")} diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 4e378696b92..2c0e6496c8f 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -32,7 +32,7 @@ import { Layout } from '../../../settings/enums/Layout'; import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; const onPinnedMessagesClick = (): void => { - RightPanelStore.instance.setRightPanel( RightPanelPhases.PinnedMessages, null, false ); + RightPanelStore.instance.setCard( { phase: RightPanelPhases.PinnedMessages }, false ); }; const SENDER_AS_DISPLAY_NAME_EVENTS = [EventType.RoomServerAcl, EventType.RoomPinnedEvents]; diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index 836b5e941df..0361258833c 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -51,7 +51,10 @@ export default class MKeyVerificationRequest extends React.Component { private openRequest = () => { const { verificationRequest } = this.props.mxEvent; const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId); - RightPanelStore.instance.setRightPanel(RightPanelPhases.EncryptionPanel, { verificationRequest, member } ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.EncryptionPanel, + state: { verificationRequest, member }, + }); }; private onRequestChanged = () => { diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index a1220128a7e..9a3a3fe2e54 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -32,7 +32,7 @@ interface IProps { previousPhaseLabel?: string; closeLabel?: string; onClose?(): void; - refireParams?; + cardState?; } interface IGroupProps { @@ -57,7 +57,7 @@ const BaseCard: React.FC = ({ previousPhase, previousPhaseLabel, children, - refireParams, + cardState, }) => { let backButton; if (previousPhase) { @@ -65,7 +65,7 @@ const BaseCard: React.FC = ({ // TODO RightPanelStore (will be addressed in a follow up PR): this should ideally be: // RightPanelStore.instance.popRightPanel(); - RightPanelStore.instance.setRightPanel(previousPhase, refireParams ); + RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState } ); }; const label = previousPhaseLabel ?? _t("Back"); backButton = ; diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index a9b98b89710..a87c3c925d0 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -116,10 +116,10 @@ const EncryptionPanel: React.FC = (props: IProps) => { setRequest(verificationRequest_); setPhase(verificationRequest_.phase); // Notify the RightPanelStore about this - RightPanelStore.instance.setRightPanel( - RightPanelPhases.EncryptionPanel, - { member, verificationRequest: verificationRequest_ }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.EncryptionPanel, + state: { member, verificationRequest: verificationRequest_ }, + }); }, [member]); const requested = diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 7e2073c5c91..4dfb355a286 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -23,7 +23,7 @@ import React from 'react'; import dis from '../../../dispatcher/dispatcher'; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; -import { IPanelState } from '../../../stores/right-panel/RightPanelStoreIPanelState'; +import { IRightPanelCardState } from '../../../stores/right-panel/RightPanelStoreIPanelState'; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { UPDATE_EVENT } from '../../../stores/AsyncStore'; import { NotificationColor } from '../../../stores/notifications/NotificationColor'; @@ -51,7 +51,7 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component) { - RightPanelStore.instance.setRightPanel(phase, extras); + public setPhase(phase: RightPanelPhases, cardState?: Partial) { + RightPanelStore.instance.setCard({ phase, state: cardState }); } public isPhase(phases: string | string[]) { @@ -81,7 +81,7 @@ export default abstract class HeaderButtons

extends React.Component { private onRoomSummaryClicked = () => { // use roomPanelPhase rather than this.state.phase as it remembers the latest one if we close - const currentPhase = RightPanelStore.instance.currentPanel.phase; + const currentPhase = RightPanelStore.instance.currentCard.phase; if (ROOM_INFO_PHASES.includes(currentPhase)) { if (this.state.phase === currentPhase) { this.setPhase(currentPhase); } else { - this.setPhase(currentPhase, RightPanelStore.instance.currentPanel.state); + this.setPhase(currentPhase, RightPanelStore.instance.currentCard.state); } } else { // This toggles for us, if needed diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 9f5e2ae0989..c3aeb6fe486 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -103,7 +103,10 @@ const AppRow: React.FC = ({ app, room }) => { const onOpenWidgetClick = () => { // TODO RightPanelStore (will be addressed in a follow up PR): should push the widget - RightPanelStore.instance.setRightPanel(RightPanelPhases.Widget, { widgetId: app.id }); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.Widget, + state: { widgetId: app.id }, + }); }; const isPinned = WidgetLayoutStore.instance.isInContainer(room, app, Container.Top); @@ -232,12 +235,12 @@ const AppsSection: React.FC = ({ room }) => { export const onRoomMembersClick = (allowClose = true) => { // TODO RightPanelStore (will be addressed in a follow up PR): should push the phase - RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomMemberList, undefined, allowClose); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList }, allowClose); }; export const onRoomFilesClick = (allowClose = true) => { // TODO RightPanelStore (will be addressed in a follow up PR): should push the phase - RightPanelStore.instance.setRightPanel(RightPanelPhases.FilePanel, undefined, allowClose); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.FilePanel }, allowClose); }; const onRoomSettingsClick = () => { diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 9a042307318..e4655727127 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -75,7 +75,7 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent import { UIComponent } from "../../../settings/UIFeature"; import { TimelineRenderingType } from "../../../contexts/RoomContext"; import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; -import { IPanelState } from '../../../stores/right-panel/RightPanelStoreIPanelState'; +import { IRightPanelCardState } from '../../../stores/right-panel/RightPanelStoreIPanelState'; import { useUserStatusMessage } from "../../../hooks/useUserStatusMessage"; export interface IDevice { @@ -1650,22 +1650,22 @@ const UserInfo: React.FC = ({ const classes = ["mx_UserInfo"]; - let refireParams: IPanelState; + let cardState: IRightPanelCardState; let previousPhase: RightPanelPhases; // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time if (room && phase === RightPanelPhases.EncryptionPanel) { previousPhase = RightPanelPhases.RoomMemberInfo; - refireParams = { member }; + cardState = { member }; } else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) { previousPhase = previousPhase = RightPanelPhases.SpaceMemberList; - refireParams = { space: room }; + cardState = { space: room }; } else if (room) { previousPhase = RightPanelPhases.RoomMemberList; } const onEncryptionPanelClose = () => { // TODO RightPanelStore (will be addressed in a follow up PR): here we want to pop the panel - RightPanelStore.instance.setRightPanel(previousPhase, refireParams); + RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState }); }; let content; @@ -1721,7 +1721,7 @@ const UserInfo: React.FC = ({ onClose={onClose} closeLabel={closeLabel} previousPhase={previousPhase} - refireParams={refireParams} + cardState={cardState} > { content } ; diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 821f952b135..4f864945457 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -50,7 +50,7 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { // stop showing this card //TODO RightPanelStore (will be addressed in a follow up PR): here we want to just pop the widget card. - RightPanelStore.instance.setRightPanel(RightPanelPhases.RoomSummary); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }); } }, [app, isPinned]); diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index 954395e1c6e..2bb9349ac6f 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -100,7 +100,7 @@ const PrototypeCommunityContextMenu = (props: ComponentProps { // TODO RightPanelStore (will be addressed in a follow up PR): this should really be a push! - RightPanelStore.instance.setRightPanel( - RightPanelPhases.ThreadView, - { + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.ThreadView, + state: { threadHeadEvent: rootEvent, initialEvent, isInitialEventHighlighted: highlighted, }, - ); + }); }; export const dispatchShowThreadsPanelEvent = () => { - RightPanelStore.instance.setRightPanel(RightPanelPhases.ThreadPanel); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.ThreadPanel }); }; diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 967e5457841..20516ff6cd6 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -28,10 +28,9 @@ import { UPDATE_EVENT } from '../AsyncStore'; import { ReadyWatchingStore } from '../ReadyWatchingStore'; // import RoomViewStore from '../RoomViewStore'; import { - IPhaseAndState, - IPanelState, - convertToStateRoom, - convertToStoreRoom, + IRightPanelCard, + convertToStatePanel, + convertToStorePanel, IRightPanelForRoom, } from './RightPanelStoreIPanelState'; @@ -100,11 +99,11 @@ export default class RightPanelStore extends ReadyWatchingStore { return this.byRoom[this.viewedRoomId]?.isOpen ?? false; } - public get roomPhaseHistory(): Array { + public get roomPhaseHistory(): Array { return this.byRoom[this.viewedRoomId]?.history ?? []; } - public get currentPanel(): IPhaseAndState { + public get currentCard(): IRightPanelCard { const hist = this.roomPhaseHistory; if (hist.length >= 1) { return hist[hist.length - 1]; @@ -112,15 +111,15 @@ export default class RightPanelStore extends ReadyWatchingStore { return { state: {}, phase: null }; } - public currentPanelForRoom(roomId: string): IPhaseAndState { + public currentCardForRoom(roomId: string): IRightPanelCard { const hist = this.byRoom[roomId]?.history ?? []; if (hist.length > 0) { return hist[hist.length - 1]; } - return this.currentPanel ?? { state: {}, phase: null }; + return this.currentCard ?? { state: {}, phase: null }; } - public get previousPanel(): IPhaseAndState { + public get previousCard(): IRightPanelCard { const hist = this.roomPhaseHistory; if (hist?.length >= 2) { return hist[hist.length - 2]; @@ -130,53 +129,52 @@ export default class RightPanelStore extends ReadyWatchingStore { // The Group associated getters are just for backwards compatibility. Can be removed when deprecating groups. public get isOpenForGroup(): boolean { return this.isOpenForRoom; } - public get groupPhaseHistory(): Array { return this.roomPhaseHistory; } - public get currentGroup(): IPhaseAndState { return this.currentPanel; } - public get previousGroup(): IPhaseAndState { return this.previousPanel; } + public get groupPhaseHistory(): Array { return this.roomPhaseHistory; } + public get currentGroup(): IRightPanelCard { return this.currentCard; } + public get previousGroup(): IRightPanelCard { return this.previousCard; } // Setters - public setRightPanel(phase: RightPanelPhases, state: IPanelState = null, allowClose = true, roomId: string = null) { + public setCard(card: IRightPanelCard, allowClose = true, roomId: string = null) { const rId = roomId ?? this.viewedRoomId; // this was previously a very multifunctional command: // Toggle panel: if the same phase is send but without a state // Update state: if the same phase is send but with a state // Set right panel and erase history: if a "different to the current" phase is send (with or without a state) - const redirect = this.getVerificationRedirect({ phase, state }); - const targetPhase = redirect?.phase ?? phase; - const panelState = redirect?.state ?? state; + const redirect = this.getVerificationRedirect(card); + const targetPhase = redirect?.phase ?? card.phase; + const cardState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state); // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; - if (targetPhase === this.currentPanel?.phase && allowClose && !panelState) { + if (targetPhase === this.currentCard?.phase && allowClose && !cardState) { // Toggle panel: a toggle command needs to fullfil the following: // - the same phase // - the panel can be closed - // - does not contain any state information (refireParams) + // - does not contain any state information (state) this.togglePanel(rId); return; - } else if ((targetPhase === this.currentPanelForRoom(rId)?.phase && !!panelState)) { + } else if ((targetPhase === this.currentCardForRoom(rId)?.phase && !!cardState)) { // Update state: set right panel with a new state but keep the phase (dont know it this is ever needed...) - const hist = this.byRoom[rId].history; - hist[hist.length - 1].state = panelState; + const hist = this.byRoom[rId].history ?? []; + hist[hist.length - 1].state = cardState; this.emitAndUpdateSettings(); return; - } else if (targetPhase !== this.currentPanel?.phase) { + } else if (targetPhase !== this.currentCard?.phase) { // Set right panel and erase history. - this.setRightPanelCache(targetPhase, panelState); + this.setRightPanelCache({ phase: targetPhase, state: cardState ?? {} }); } } - public pushRightPanel( - phase: RightPanelPhases, - panelState: IPanelState = null, + public pushCard( + card: IRightPanelCard, allowClose = true, roomId: string = null, ) { const rId = roomId ?? this.viewedRoomId; - const redirect = this.getVerificationRedirect({ phase, state: panelState }); - const targetPhase = redirect?.phase ?? phase; - const pState = redirect?.state ?? panelState; + const redirect = this.getVerificationRedirect(card); + const targetPhase = redirect?.phase ?? card.phase; + const pState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state); // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; @@ -189,7 +187,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } else { // create new phase roomCache = { - history: [{ phase: targetPhase, state: pState }], + history: [{ phase: targetPhase, state: pState ?? {} }], // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false isOpen: !allowClose, }; @@ -198,11 +196,12 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emitAndUpdateSettings(); } - public popRightPanel(roomId: string = null) { + public popCard(roomId: string = null) { const rId = roomId ?? this.viewedRoomId; const roomCache = this.byRoom[rId]; - roomCache.history.pop(); + const removedCard = roomCache.history.pop(); this.emitAndUpdateSettings(); + return removedCard; } public togglePanel(roomId: string = null) { @@ -216,15 +215,15 @@ export default class RightPanelStore extends ReadyWatchingStore { private loadCacheFromSettings() { const room = this.mxClient?.getRoom(this.viewedRoomId); if (!!room) { - this.global = this.global ?? convertToStateRoom(SettingsStore.getValue("RightPanel.phasesGlobal"), room); + this.global = this.global ?? convertToStatePanel(SettingsStore.getValue("RightPanel.phasesGlobal"), room); this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ?? - convertToStateRoom(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); + convertToStatePanel(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); } } private emitAndUpdateSettings() { - const storePanelGlobal = convertToStoreRoom(this.global); - const storePanelThisRoom = convertToStoreRoom(this.byRoom[this.viewedRoomId]); + const storePanelGlobal = convertToStorePanel(this.global); + const storePanelThisRoom = convertToStorePanel(this.byRoom[this.viewedRoomId]); SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, storePanelGlobal); if (!!this.viewedRoomId) { SettingsStore.setValue("RightPanel.phases", @@ -236,19 +235,19 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emit(UPDATE_EVENT, null); } - private setRightPanelCache(targetPhase: RightPanelPhases, panelState: IPanelState = null) { + private setRightPanelCache(card: IRightPanelCard) { // this overrides the history for the right panel in the current room. this.byRoom[this.viewedRoomId] = { - history: [{ phase: targetPhase, state: panelState ?? {} }], + history: [{ phase: card.phase, state: card.state ?? {} }], isOpen: true, }; this.emitAndUpdateSettings(); } - private getVerificationRedirect(phaseAndState: IPhaseAndState): IPhaseAndState { - if (phaseAndState.phase === RightPanelPhases.RoomMemberInfo && phaseAndState.state) { + private getVerificationRedirect(card: IRightPanelCard): IRightPanelCard { + if (card.phase === RightPanelPhases.RoomMemberInfo && card.state) { // RightPanelPhases.RoomMemberInfo -> needs to be changed to RightPanelPhases.EncryptionPanel if there is a pending verification request - const { member } = phaseAndState.state; + const { member } = card.state; const pendingRequest = pendingVerificationRequestForUser(member); if (pendingRequest) { return { @@ -302,13 +301,13 @@ export default class RightPanelStore extends ReadyWatchingStore { // Put group in the same/similar view to what was open from the previously viewed room // Is contradictory to the new "per room" philosophy but it is the legacy behavior for groups. if ((_this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { - if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentPanel?.phase)) { + if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentCard?.phase)) { // switch from group to room - _this.setRightPanelCache(RightPanelPhases.RoomMemberList, {}); + _this.setRightPanelCache({ phase: RightPanelPhases.RoomMemberList, state: {} }); } else if (payload.action == "view_group" - && _this.currentPanel?.phase === RightPanelPhases.GroupMemberInfo) { + && _this.currentCard?.phase === RightPanelPhases.GroupMemberInfo) { // switch from room to group - _this.setRightPanelCache(RightPanelPhases.GroupMemberList, {}); + _this.setRightPanelCache({ phase: RightPanelPhases.GroupMemberList, state: {} }); } } diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 1f96b74d088..2364e29c014 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -23,7 +23,7 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque import { GroupMember } from "../../components/views/right_panel/UserInfo"; import { RightPanelPhases } from "./RightPanelStorePhases"; -export interface IPanelState { +export interface IRightPanelCardState { member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; verificationRequestPromise?: Promise; @@ -38,7 +38,7 @@ export interface IPanelState { initialEvent?: MatrixEvent; isInitialEventHighlighted?: boolean; } -export interface IPanelStateStored { +export interface IRightPanelCardStateStored { member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; verificationRequestPromise?: Promise; @@ -54,39 +54,39 @@ export interface IPanelStateStored { isInitialEventHighlighted?: boolean; } -export interface IPhaseAndState { +export interface IRightPanelCard { phase: RightPanelPhases; - state: IPanelState; + state?: IRightPanelCardState; } -export interface IPhaseAndStateStored { +export interface IRightPanelCardStored { phase: RightPanelPhases; - state: IPanelStateStored; + state?: IRightPanelCardStateStored; } export interface IRightPanelForRoom { isOpen: boolean; - history: Array; + history: Array; } interface IRightPanelForRoomStored { isOpen: boolean; - history: Array; + history: Array; } -export function convertToStoreRoom(cacheRoom: IRightPanelForRoom): IRightPanelForRoomStored { +export function convertToStorePanel(cacheRoom: IRightPanelForRoom): IRightPanelForRoomStored { if (!cacheRoom) return cacheRoom; - const storeHistory = [...cacheRoom.history].map(panelState => convertStateToStore(panelState)); + const storeHistory = [...cacheRoom.history].map(panelState => convertCardToStore(panelState)); return { isOpen: cacheRoom.isOpen, history: storeHistory }; } -export function convertToStateRoom(storeRoom: IRightPanelForRoomStored, room: Room): IRightPanelForRoom { +export function convertToStatePanel(storeRoom: IRightPanelForRoomStored, room: Room): IRightPanelForRoom { if (!storeRoom) return storeRoom; - const stateHistory = [...storeRoom.history].map(panelStateStore => convertStoreToState(panelStateStore, room)); + const stateHistory = [...storeRoom.history].map(panelStateStore => convertStoreToCard(panelStateStore, room)); return { history: stateHistory, isOpen: storeRoom.isOpen }; } -function convertStateToStore(panelState: IPhaseAndState): IPhaseAndStateStored { +function convertCardToStore(panelState: IRightPanelCard): IRightPanelCardStored { const panelStateThisRoomStored = { ...panelState.state } as any; if (!!panelState?.state?.threadHeadEvent?.getId()) { panelStateThisRoomStored.threadHeadEventId = panelState.state.threadHeadEvent.getId(); @@ -96,10 +96,11 @@ function convertStateToStore(panelState: IPhaseAndState): IPhaseAndStateStored { } delete panelStateThisRoomStored.threadHeadEvent; delete panelStateThisRoomStored.initialEvent; - return { state: panelStateThisRoomStored as IPhaseAndStateStored, phase: panelState.phase } as IPhaseAndStateStored; + const storedCard = { state: panelStateThisRoomStored as IRightPanelCardStored, phase: panelState.phase }; + return storedCard as IRightPanelCardStored; } -function convertStoreToState(panelStateStore: IPhaseAndStateStored, room: Room): IPhaseAndState { +function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): IRightPanelCard { const panelStateThisRoom = { ...panelStateStore?.state } as any; if (!!panelStateThisRoom.threadHeadEventId) { panelStateThisRoom.threadHeadEvent = room.findEventById(panelStateThisRoom.threadHeadEventId); @@ -110,5 +111,5 @@ function convertStoreToState(panelStateStore: IPhaseAndStateStored, room: Room): delete panelStateThisRoom.threadHeadEventId; delete panelStateThisRoom.initialEventId; - return { state: panelStateThisRoom as IPanelState, phase: panelStateStore.phase } as IPhaseAndState; + return { state: panelStateThisRoom as IRightPanelCardState, phase: panelStateStore.phase } as IRightPanelCard; } diff --git a/src/verification.ts b/src/verification.ts index ee63d6f4e7d..2652733975a 100644 --- a/src/verification.ts +++ b/src/verification.ts @@ -66,10 +66,10 @@ export async function verifyDevice(user: User, device: IDevice) { device.deviceId, VerificationMethods.SAS, ); - RightPanelStore.instance.setRightPanel( - RightPanelPhases.EncryptionPanel, - { member: user, verificationRequestPromise }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.EncryptionPanel, + state: { member: user, verificationRequestPromise }, + }); } else if (action === "legacy") { Modal.createTrackedDialog("Legacy verify session", "legacy verify session", ManualDeviceKeyVerificationDialog, @@ -96,10 +96,10 @@ export async function legacyVerifyUser(user: User) { } } const verificationRequestPromise = cli.requestVerification(user.userId); - RightPanelStore.instance.setRightPanel( - RightPanelPhases.EncryptionPanel, - { member: user, verificationRequestPromise }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.EncryptionPanel, + state: { member: user, verificationRequestPromise }, + }); } export async function verifyUser(user: User) { @@ -112,10 +112,10 @@ export async function verifyUser(user: User) { return; } const existingRequest = pendingVerificationRequestForUser(user); - RightPanelStore.instance.setRightPanel( - RightPanelPhases.EncryptionPanel, - { member: user, verificationRequest: existingRequest }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.EncryptionPanel, + state: { member: user, verificationRequest: existingRequest }, + }); } export function pendingVerificationRequestForUser(user: User | RoomMember | GroupMember ) { From 5211c5faa3006470fc2151edf96b32e918afd2ed Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 17:36:05 +0100 Subject: [PATCH 47/76] another `unmounted` fix --- src/components/views/right_panel/HeaderButtons.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 4dfb355a286..cc3af0f7c08 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -43,6 +43,7 @@ interface IProps {} @replaceableComponent("views.right_panel.HeaderButtons") export default abstract class HeaderButtons

extends React.Component { + private unmounted = false; private dispatcherRef: string; constructor(props: IProps & P, kind: HeaderKind) { @@ -62,6 +63,7 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component Date: Wed, 15 Dec 2021 18:21:05 +0100 Subject: [PATCH 48/76] add memberInfoEvent --- src/components/structures/RightPanel.tsx | 5 +++-- .../views/right_panel/RoomHeaderButtons.tsx | 2 +- .../right-panel/RightPanelStoreIPanelState.ts | 15 +++++++++++++-- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 72bca80edcc..afcbd9889a9 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -68,7 +68,7 @@ interface IState { searchQuery: string; // Parameters for the states of the different right panels (handled by the RightPanelStore) - // see: IPanelState + // see: IRightPanelCardState member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; verificationRequestPromise?: Promise; @@ -76,6 +76,7 @@ interface IState { widgetId?: string; groupRoomId?: string; groupId?: string; + memberInfoEvent?: MatrixEvent; threadHeadEvent?: MatrixEvent; initialEvent?: MatrixEvent; isInitialEventHighlighted?: boolean; @@ -264,7 +265,7 @@ export default class RightPanel extends React.Component { } case RightPanelPhases.Room3pidMemberInfo: case RightPanelPhases.Space3pidMemberInfo: - panel = ; + panel = ; break; case RightPanelPhases.GroupMemberInfo: diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 446e0665bf6..0cf4c9a5eeb 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -160,7 +160,7 @@ export default class RoomHeaderButtons extends HeaderButtons { } } else if (payload.action === "view_3pid_invite") { if (payload.event) { - this.setPhase(RightPanelPhases.Room3pidMemberInfo, { threadHeadEvent: payload.event }); + this.setPhase(RightPanelPhases.Room3pidMemberInfo, { memberInfoEvent: payload.event }); } else { this.setPhase(RightPanelPhases.RoomMemberList); } diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 2364e29c014..7daab9e523a 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -30,9 +30,10 @@ export interface IRightPanelCardState { // group groupId?: string; groupRoomId?: string; - // XXX: The type for event should 'view_3pid_invite' action's payload widgetId?: string; space?: Room; + // Room3pidMemberInfo, Space3pidMemberInfo, + memberInfoEvent?: MatrixEvent; // treads threadHeadEvent?: MatrixEvent; initialEvent?: MatrixEvent; @@ -45,9 +46,10 @@ export interface IRightPanelCardStateStored { // group groupId?: string; groupRoomId?: string; - // XXX: The type for event should 'view_3pid_invite' action's payload widgetId?: string; space?: Room; + // 3pidMemberInfo + memberInfoEventId?: string; // treads threadHeadEventId?: string; initialEventId?: string; @@ -91,11 +93,16 @@ function convertCardToStore(panelState: IRightPanelCard): IRightPanelCardStored if (!!panelState?.state?.threadHeadEvent?.getId()) { panelStateThisRoomStored.threadHeadEventId = panelState.state.threadHeadEvent.getId(); } + if (!!panelState?.state?.memberInfoEvent?.getId()) { + panelStateThisRoomStored.memberInfoEventId = panelState.state.memberInfoEvent.getId(); + } if (!!panelState?.state?.initialEvent?.getId()) { panelStateThisRoomStored.initialEventId = panelState.state.initialEvent.getId(); } delete panelStateThisRoomStored.threadHeadEvent; delete panelStateThisRoomStored.initialEvent; + delete panelStateThisRoomStored.memberInfoEvent; + const storedCard = { state: panelStateThisRoomStored as IRightPanelCardStored, phase: panelState.phase }; return storedCard as IRightPanelCardStored; } @@ -105,11 +112,15 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): if (!!panelStateThisRoom.threadHeadEventId) { panelStateThisRoom.threadHeadEvent = room.findEventById(panelStateThisRoom.threadHeadEventId); } + if (!!panelStateThisRoom.memberInfoEventId) { + panelStateThisRoom.memberInfoEvent = room.findEventById(panelStateThisRoom.memberInfoEventId); + } if (!!panelStateThisRoom.initialEventId) { panelStateThisRoom.initialEvent = room.findEventById(panelStateThisRoom.initialEventId); } delete panelStateThisRoom.threadHeadEventId; delete panelStateThisRoom.initialEventId; + delete panelStateThisRoom.memberInfoEventId; return { state: panelStateThisRoom as IRightPanelCardState, phase: panelStateStore.phase } as IRightPanelCard; } From 8a2a3de1ed5bb9b101cd8ecc8f2df43e6783a52f Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 18:57:23 +0100 Subject: [PATCH 49/76] rightPanel state uses a cardState param --- src/components/structures/RightPanel.tsx | 75 +++++++++++------------- 1 file changed, 34 insertions(+), 41 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index afcbd9889a9..c88bebc620a 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -20,7 +20,6 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { RoomState } from "matrix-js-sdk/src/models/room-state"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import { throttle } from 'lodash'; import { User } from 'matrix-js-sdk/src/models/user'; @@ -52,6 +51,7 @@ import { E2EStatus } from '../../utils/ShieldUtils'; import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads'; import TimelineCard from '../views/right_panel/TimelineCard'; import { UPDATE_EVENT } from '../../stores/AsyncStore'; +import { IRightPanelCardState } from '../../stores/right-panel/RightPanelStoreIPanelState'; interface IProps { room?: Room; // if showing panels for a given room, this is set @@ -66,20 +66,7 @@ interface IState { phase: RightPanelPhases; isUserPrivilegedInGroup?: boolean; searchQuery: string; - - // Parameters for the states of the different right panels (handled by the RightPanelStore) - // see: IRightPanelCardState - member?: RoomMember | User | GroupMember; - verificationRequest?: VerificationRequest; - verificationRequestPromise?: Promise; - space?: Room; - widgetId?: string; - groupRoomId?: string; - groupId?: string; - memberInfoEvent?: MatrixEvent; - threadHeadEvent?: MatrixEvent; - initialEvent?: MatrixEvent; - isInitialEventHighlighted?: boolean; + cardState?: IRightPanelCardState; } @replaceableComponent("structures.RightPanel") @@ -90,12 +77,13 @@ export default class RightPanel extends React.Component { constructor(props, context) { super(props, context); + const cardState = RightPanelStore.instance.currentCard?.state; + cardState.member = this.getUserForPanel(); this.state = { // get all the state from the right panel store on init - ...RightPanelStore.instance.currentCard?.state, + cardState, phase: RightPanelStore.instance.currentCard?.phase, isUserPrivilegedInGroup: null, - member: this.getUserForPanel(), searchQuery: "", }; } @@ -107,10 +95,10 @@ export default class RightPanel extends React.Component { // Helper function to split out the logic for getPhaseFromProps() and the constructor // as both are called at the same time in the constructor. private getUserForPanel(): RoomMember | User | GroupMember { - if (this.state && this.state.member) return this.state.member; - const lastState = RightPanelStore.instance.currentCard?.state; - // Should just use the member from the RightPanelStore. Wherever the prop is passed should just update the store beforehand. - return this.props.member ?? lastState?.member; + // TODO RightPanelStore (will be addressed in a follow up PR): Should just use the member from the RightPanelStore. Wherever the prop is passed should just update the store beforehand. + return this.state?.cardState?.member ?? + this.props.member ?? + RightPanelStore.instance.currentCard?.state?.member; } public componentDidMount(): void { @@ -162,7 +150,7 @@ export default class RightPanel extends React.Component { this.delayedUpdate(); } else if ( this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId && - member.userId === this.state.member.userId + member.userId === this.state.cardState.member.userId ) { // refresh the member info (e.g. new power level) this.delayedUpdate(); @@ -171,7 +159,7 @@ export default class RightPanel extends React.Component { private onRightPanelStoreUpdate = () => { const currentPanel = RightPanelStore.instance.currentCard; this.setState({ - ...currentPanel.state, + cardState: currentPanel.state, phase: currentPanel.phase, }); @@ -198,10 +186,10 @@ export default class RightPanel extends React.Component { }); } else if ( this.state.phase === RightPanelPhases.EncryptionPanel && - this.state.verificationRequest && this.state.verificationRequest.pending + this.state.cardState.verificationRequest && this.state.cardState.verificationRequest.pending ) { // When the user clicks close on the encryption panel cancel the pending request first if any - this.state.verificationRequest.cancel(); + this.state.cardState.verificationRequest.cancel(); } else { // the RightPanelStore knows which mode room/group it is in, so we handle closing here RightPanelStore.instance.togglePanel(); @@ -230,8 +218,8 @@ export default class RightPanel extends React.Component { break; case RightPanelPhases.SpaceMemberList: panel = { case RightPanelPhases.RoomMemberInfo: case RightPanelPhases.SpaceMemberInfo: case RightPanelPhases.EncryptionPanel: { - const roomMember = this.state.member instanceof RoomMember ? this.state.member: undefined; + const roomMember = this.state.cardState.member instanceof RoomMember + ? this.state.cardState.member + : undefined; panel = ; break; } case RightPanelPhases.Room3pidMemberInfo: case RightPanelPhases.Space3pidMemberInfo: - panel = ; + panel = ; break; case RightPanelPhases.GroupMemberInfo: panel = ; break; case RightPanelPhases.GroupRoomInfo: panel = ; + key={this.state.cardState.groupRoomId} />; break; case RightPanelPhases.NotificationPanel: @@ -314,9 +304,9 @@ export default class RightPanel extends React.Component { room={this.props.room} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} - mxEvent={this.state.threadHeadEvent} - initialEvent={this.state.initialEvent} - isInitialEventHighlighted={this.state.isInitialEventHighlighted} + mxEvent={this.state.cardState.threadHeadEvent} + initialEvent={this.state.cardState.initialEvent} + isInitialEventHighlighted={this.state.cardState.isInitialEventHighlighted} permalinkCreator={this.props.permalinkCreator} e2eStatus={this.props.e2eStatus} />; break; @@ -335,7 +325,10 @@ export default class RightPanel extends React.Component { break; case RightPanelPhases.Widget: - panel = ; + panel = ; break; } From baf1471f1c69ec4db0dc517b583e54e22b099a1f Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 19:06:46 +0100 Subject: [PATCH 50/76] fix displaying user in UserView --- src/components/structures/RightPanel.tsx | 61 ++++++++++-------------- src/components/structures/UserView.tsx | 5 +- 2 files changed, 30 insertions(+), 36 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index c88bebc620a..7b92e09b957 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -51,12 +51,12 @@ import { E2EStatus } from '../../utils/ShieldUtils'; import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads'; import TimelineCard from '../views/right_panel/TimelineCard'; import { UPDATE_EVENT } from '../../stores/AsyncStore'; -import { IRightPanelCardState } from '../../stores/right-panel/RightPanelStoreIPanelState'; +import { IRightPanelCard, IRightPanelCardState } from '../../stores/right-panel/RightPanelStoreIPanelState'; interface IProps { room?: Room; // if showing panels for a given room, this is set groupId?: string; // if showing panels for a given group, this is set - member?: RoomMember; // used if we know the room member ahead of opening the panel + overwriteCard?: IRightPanelCard; // used to display a custom card ignoring the store (for UserView) resizeNotifier: ResizeNotifier; permalinkCreator?: RoomPermalinkCreator; e2eStatus?: E2EStatus; @@ -77,11 +77,10 @@ export default class RightPanel extends React.Component { constructor(props, context) { super(props, context); - const cardState = RightPanelStore.instance.currentCard?.state; - cardState.member = this.getUserForPanel(); + this.state = { // get all the state from the right panel store on init - cardState, + cardState: RightPanelStore.instance.currentCard?.state, phase: RightPanelStore.instance.currentCard?.phase, isUserPrivilegedInGroup: null, searchQuery: "", @@ -92,15 +91,6 @@ export default class RightPanel extends React.Component { this.forceUpdate(); }, 500, { leading: true, trailing: true }); - // Helper function to split out the logic for getPhaseFromProps() and the constructor - // as both are called at the same time in the constructor. - private getUserForPanel(): RoomMember | User | GroupMember { - // TODO RightPanelStore (will be addressed in a follow up PR): Should just use the member from the RightPanelStore. Wherever the prop is passed should just update the store beforehand. - return this.state?.cardState?.member ?? - this.props.member ?? - RightPanelStore.instance.currentCard?.state?.member; - } - public componentDidMount(): void { this.dispatcherRef = dis.register(this.onAction); const cli = this.context; @@ -203,8 +193,9 @@ export default class RightPanel extends React.Component { public render(): JSX.Element { let panel =

; const roomId = this.props.room ? this.props.room.roomId : undefined; - - switch (this.state.phase) { + const phase = this.props.overwriteCard?.phase ?? this.state.phase; + const cardState = this.props.overwriteCard?.state ?? this.state.cardState; + switch (phase) { case RightPanelPhases.RoomMemberList: if (roomId) { panel = { break; case RightPanelPhases.SpaceMemberList: panel = { case RightPanelPhases.RoomMemberInfo: case RightPanelPhases.SpaceMemberInfo: case RightPanelPhases.EncryptionPanel: { - const roomMember = this.state.cardState.member instanceof RoomMember - ? this.state.cardState.member + const roomMember = cardState.member instanceof RoomMember + ? cardState.member : undefined; panel = ; break; } case RightPanelPhases.Room3pidMemberInfo: case RightPanelPhases.Space3pidMemberInfo: - panel = ; + panel = ; break; case RightPanelPhases.GroupMemberInfo: panel = ; break; case RightPanelPhases.GroupRoomInfo: panel = ; + key={cardState.groupRoomId} />; break; case RightPanelPhases.NotificationPanel: @@ -304,9 +295,9 @@ export default class RightPanel extends React.Component { room={this.props.room} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} - mxEvent={this.state.cardState.threadHeadEvent} - initialEvent={this.state.cardState.initialEvent} - isInitialEventHighlighted={this.state.cardState.isInitialEventHighlighted} + mxEvent={cardState.threadHeadEvent} + initialEvent={cardState.initialEvent} + isInitialEventHighlighted={cardState.isInitialEventHighlighted} permalinkCreator={this.props.permalinkCreator} e2eStatus={this.props.e2eStatus} />; break; @@ -327,7 +318,7 @@ export default class RightPanel extends React.Component { case RightPanelPhases.Widget: panel = ; break; } diff --git a/src/components/structures/UserView.tsx b/src/components/structures/UserView.tsx index 04e97bc0572..6ff89204e3b 100644 --- a/src/components/structures/UserView.tsx +++ b/src/components/structures/UserView.tsx @@ -29,6 +29,7 @@ import MainSplit from "./MainSplit"; import RightPanel from "./RightPanel"; import Spinner from "../views/elements/Spinner"; import ResizeNotifier from "../../utils/ResizeNotifier"; +import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; interface IProps { userId?: string; @@ -88,7 +89,9 @@ export default class UserView extends React.Component { if (this.state.loading) { return ; } else if (this.state.member) { - const panel = ; + const panel = ; return ( ); From fc82e1e737729d6d19e498f3e592eb5f73c40729 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 19:14:38 +0100 Subject: [PATCH 51/76] fix error on close of overwrite card --- src/stores/right-panel/RightPanelStore.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 20516ff6cd6..594c5cb8ee8 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -136,6 +136,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // Setters public setCard(card: IRightPanelCard, allowClose = true, roomId: string = null) { const rId = roomId ?? this.viewedRoomId; + if (!this.byRoom[rId]) return; // this was previously a very multifunctional command: // Toggle panel: if the same phase is send but without a state // Update state: if the same phase is send but with a state @@ -172,6 +173,7 @@ export default class RightPanelStore extends ReadyWatchingStore { roomId: string = null, ) { const rId = roomId ?? this.viewedRoomId; + if (!this.byRoom[rId]) return; const redirect = this.getVerificationRedirect(card); const targetPhase = redirect?.phase ?? card.phase; const pState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state); @@ -198,6 +200,7 @@ export default class RightPanelStore extends ReadyWatchingStore { public popCard(roomId: string = null) { const rId = roomId ?? this.viewedRoomId; + if (!this.byRoom[rId]) return; const roomCache = this.byRoom[rId]; const removedCard = roomCache.history.pop(); this.emitAndUpdateSettings(); @@ -206,6 +209,7 @@ export default class RightPanelStore extends ReadyWatchingStore { public togglePanel(roomId: string = null) { const rId = roomId ?? this.viewedRoomId; + if (!this.byRoom[rId]) return; this.byRoom[rId].isOpen = !this.byRoom[rId].isOpen; this.emitAndUpdateSettings(); } From a31196e17db68bdb42e3c5ed062e02033fd927e5 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 19:17:41 +0100 Subject: [PATCH 52/76] fix missing setRightPanel->setCard --- src/components/structures/GroupView.js | 2 +- src/components/views/groups/GroupMemberList.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index eaa3750a806..f891c4100e1 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -822,7 +822,7 @@ export default class GroupView extends React.Component { }; _onAdminsLinkClick = () => { - RightPanelStore.instance.setRightPanel(RightPanelPhases.GroupMemberList); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.GroupMemberList }); }; _getGroupSection() { diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 9f16cf4cecb..ae999db6871 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -168,10 +168,10 @@ export default class GroupMemberList extends React.Component { onInviteToGroupButtonClick = () => { showGroupInviteDialog(this.props.groupId).then(() => { - RightPanelStore.instance.setRightPanel( - RightPanelPhases.GroupMemberList, - { groupId: this.props.groupId }, - ); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.GroupMemberList, + state: { groupId: this.props.groupId }, + }); }); }; From eea2af1952c84acef83faf6061a2c26c12cee636 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 19:33:29 +0100 Subject: [PATCH 53/76] review fixes --- src/components/structures/RightPanel.tsx | 7 ++++--- src/components/structures/RoomStatusBar.tsx | 1 + src/components/views/groups/GroupMemberList.js | 1 + src/stores/right-panel/RightPanelStore.ts | 11 ++++++----- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 7b92e09b957..34e9fd9493f 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -21,7 +21,6 @@ import { RoomState } from "matrix-js-sdk/src/models/room-state"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { throttle } from 'lodash'; -import { User } from 'matrix-js-sdk/src/models/user'; import dis from '../../dispatcher/dispatcher'; import GroupStore from '../../stores/GroupStore'; @@ -38,7 +37,7 @@ import MemberList from "../views/rooms/MemberList"; import GroupMemberList from "../views/groups/GroupMemberList"; import GroupRoomList from "../views/groups/GroupRoomList"; import GroupRoomInfo from "../views/groups/GroupRoomInfo"; -import UserInfo, { GroupMember } from "../views/right_panel/UserInfo"; +import UserInfo from "../views/right_panel/UserInfo"; import ThirdPartyMemberInfo from "../views/rooms/ThirdPartyMemberInfo"; import FilePanel from "./FilePanel"; import ThreadView from "./ThreadView"; @@ -146,6 +145,7 @@ export default class RightPanel extends React.Component { this.delayedUpdate(); } }; + private onRightPanelStoreUpdate = () => { const currentPanel = RightPanelStore.instance.currentCard; this.setState({ @@ -154,6 +154,7 @@ export default class RightPanel extends React.Component { }); }; + private onAction = (payload: ActionPayload) => { const isChangingRoom = payload.action === Action.ViewRoom && payload.room_id !== this.props.room.roomId; const isViewingThread = this.state.phase === RightPanelPhases.ThreadView; @@ -166,7 +167,7 @@ export default class RightPanel extends React.Component { // XXX: There are three different ways of 'closing' this panel depending on what state // things are in... this knows far more than it should do about the state of the rest // of the app and is generally a bit silly. - if (this.props.member) { + if (this.props.overwriteCard?.state?.member) { // If we have a user prop then we're displaying a user from the 'user' page type // in LoggedInView, so need to change the page type to close the panel (we switch // to the home page which is not obviously the correct thing to do, but I'm not sure diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 8faf0624fb0..fb6cdc90e3f 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -87,6 +87,7 @@ interface IState { export default class RoomStatusBar extends React.PureComponent { private unmounted = false; public static contextType = MatrixClientContext; + constructor(props: IProps, context: typeof MatrixClientContext) { super(props, context); diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index ae999db6871..43651e20e60 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -27,6 +27,7 @@ import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePha import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; + const INITIAL_LOAD_NUM_MEMBERS = 30; @replaceableComponent("views.groups.GroupMemberList") diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 594c5cb8ee8..c8e38fa116b 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -53,7 +53,7 @@ const MEMBER_INFO_PHASES = [ * contains the phase (e.g. RightPanelPhase.RoomMemberInfo) and the state (e.g. the * member) associated with it. * Groups are treated the same as rooms (they are also - * stored in the byRoom object).This is possible since the store keeps track of the + * stored in the byRoom object). This is possible since the store keeps track of the * opened room/group -> the store will provide the correct history for that * group/room. */ @@ -187,7 +187,7 @@ export default class RightPanelStore extends ReadyWatchingStore { roomCache.history.push({ state: pState, phase: targetPhase }); roomCache.isOpen = allowClose ? roomCache.isOpen : true; } else { - // create new phase + // setup room panel cache with the new card roomCache = { history: [{ phase: targetPhase, state: pState ?? {} }], // if there was no right panel store object the the panel was closed -> keep it closed, except if allowClose==false @@ -215,7 +215,6 @@ export default class RightPanelStore extends ReadyWatchingStore { } // Private - private loadCacheFromSettings() { const room = this.mxClient?.getRoom(this.viewedRoomId); if (!!room) { @@ -308,8 +307,10 @@ export default class RightPanelStore extends ReadyWatchingStore { if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentCard?.phase)) { // switch from group to room _this.setRightPanelCache({ phase: RightPanelPhases.RoomMemberList, state: {} }); - } else if (payload.action == "view_group" - && _this.currentCard?.phase === RightPanelPhases.GroupMemberInfo) { + } else if ( + payload.action == "view_group" && + _this.currentCard?.phase === RightPanelPhases.GroupMemberInfo + ) { // switch from room to group _this.setRightPanelCache({ phase: RightPanelPhases.GroupMemberList, state: {} }); } From 0c63bdd877fab99583863b941d796772fefa8aa7 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 19:51:17 +0100 Subject: [PATCH 54/76] this.byRoom does not need to be set... --- src/stores/right-panel/RightPanelStore.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index c8e38fa116b..ffea74f1aa7 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -136,7 +136,6 @@ export default class RightPanelStore extends ReadyWatchingStore { // Setters public setCard(card: IRightPanelCard, allowClose = true, roomId: string = null) { const rId = roomId ?? this.viewedRoomId; - if (!this.byRoom[rId]) return; // this was previously a very multifunctional command: // Toggle panel: if the same phase is send but without a state // Update state: if the same phase is send but with a state @@ -157,7 +156,7 @@ export default class RightPanelStore extends ReadyWatchingStore { return; } else if ((targetPhase === this.currentCardForRoom(rId)?.phase && !!cardState)) { // Update state: set right panel with a new state but keep the phase (dont know it this is ever needed...) - const hist = this.byRoom[rId].history ?? []; + const hist = this.byRoom[rId]?.history ?? []; hist[hist.length - 1].state = cardState; this.emitAndUpdateSettings(); return; @@ -173,7 +172,6 @@ export default class RightPanelStore extends ReadyWatchingStore { roomId: string = null, ) { const rId = roomId ?? this.viewedRoomId; - if (!this.byRoom[rId]) return; const redirect = this.getVerificationRedirect(card); const targetPhase = redirect?.phase ?? card.phase; const pState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state); From 4dfdee922b79186c3114729b684fe3f4136fbc5c Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Dec 2021 20:18:18 +0100 Subject: [PATCH 55/76] some more cleanup --- src/components/structures/RightPanel.tsx | 53 ++++++++++--------- src/components/structures/RoomView.tsx | 3 +- src/components/views/rooms/AppsDrawer.tsx | 1 + src/stores/right-panel/RightPanelStore.ts | 23 ++++---- .../right-panel/RightPanelStoreIPanelState.ts | 1 + 5 files changed, 45 insertions(+), 36 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 34e9fd9493f..36d6208df3d 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -55,7 +55,7 @@ import { IRightPanelCard, IRightPanelCardState } from '../../stores/right-panel/ interface IProps { room?: Room; // if showing panels for a given room, this is set groupId?: string; // if showing panels for a given group, this is set - overwriteCard?: IRightPanelCard; // used to display a custom card ignoring the store (for UserView) + overwriteCard?: IRightPanelCard; // used to display a custom card and ignoring the RightPanelStore (used for UserView) resizeNotifier: ResizeNotifier; permalinkCreator?: RoomPermalinkCreator; e2eStatus?: E2EStatus; @@ -78,7 +78,6 @@ export default class RightPanel extends React.Component { super(props, context); this.state = { - // get all the state from the right panel store on init cardState: RightPanelStore.instance.currentCard?.state, phase: RightPanelStore.instance.currentCard?.phase, isUserPrivilegedInGroup: null, @@ -151,7 +150,6 @@ export default class RightPanel extends React.Component { this.setState({ cardState: currentPanel.state, phase: currentPanel.phase, - }); }; @@ -182,7 +180,6 @@ export default class RightPanel extends React.Component { // When the user clicks close on the encryption panel cancel the pending request first if any this.state.cardState.verificationRequest.cancel(); } else { - // the RightPanelStore knows which mode room/group it is in, so we handle closing here RightPanelStore.instance.togglePanel(); } }; @@ -192,14 +189,14 @@ export default class RightPanel extends React.Component { }; public render(): JSX.Element { - let panel =
; + let card =
; const roomId = this.props.room ? this.props.room.roomId : undefined; const phase = this.props.overwriteCard?.phase ?? this.state.phase; const cardState = this.props.overwriteCard?.state ?? this.state.cardState; switch (phase) { case RightPanelPhases.RoomMemberList: if (roomId) { - panel = { } break; case RightPanelPhases.SpaceMemberList: - panel = { case RightPanelPhases.GroupMemberList: if (this.props.groupId) { - panel = ; + card = ; } break; case RightPanelPhases.GroupRoomList: - panel = ; + card = ; break; case RightPanelPhases.RoomMemberInfo: @@ -234,7 +231,7 @@ export default class RightPanel extends React.Component { const roomMember = cardState.member instanceof RoomMember ? cardState.member : undefined; - panel = { } case RightPanelPhases.Room3pidMemberInfo: case RightPanelPhases.Space3pidMemberInfo: - panel = ; + card = ; break; case RightPanelPhases.GroupMemberInfo: - panel = ; + onClose={this.onClose} + />; break; case RightPanelPhases.GroupRoomInfo: - panel = ; + key={cardState.groupRoomId} + />; break; case RightPanelPhases.NotificationPanel: - panel = ; + card = ; break; case RightPanelPhases.PinnedMessages: if (SettingsStore.getValue("feature_pinning")) { - panel = ; + card = ; } break; case RightPanelPhases.Timeline: if (!SettingsStore.getValue("feature_maximised_widgets")) break; - panel = { />; break; case RightPanelPhases.FilePanel: - panel = ; + card = ; break; case RightPanelPhases.ThreadView: - panel = { initialEvent={cardState.initialEvent} isInitialEventHighlighted={cardState.isInitialEventHighlighted} permalinkCreator={this.props.permalinkCreator} - e2eStatus={this.props.e2eStatus} />; + e2eStatus={this.props.e2eStatus} + />; break; case RightPanelPhases.ThreadPanel: - panel = { break; case RightPanelPhases.RoomSummary: - panel = ; + card = ; break; case RightPanelPhases.Widget: - panel = ; + onClose={this.onClose} + />; break; } return ( ); } diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 620df31073a..6943503f012 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -288,8 +288,9 @@ export class RoomView extends React.Component { // Start listening for RoomViewStore updates this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); - WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate); + + WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate); this.settingWatchers = [ diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx index a8995c3eae5..e6d2157f975 100644 --- a/src/components/views/rooms/AppsDrawer.tsx +++ b/src/components/views/rooms/AppsDrawer.tsx @@ -75,6 +75,7 @@ export default class AppsDrawer extends React.Component { }; this.resizer = this.createResizer(); + this.props.resizeNotifier.on("isResizing", this.onIsResizing); } diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index ffea74f1aa7..122eb82e4ec 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -26,13 +26,13 @@ import { Action } from '../../dispatcher/actions'; import { SettingLevel } from "../../settings/SettingLevel"; import { UPDATE_EVENT } from '../AsyncStore'; import { ReadyWatchingStore } from '../ReadyWatchingStore'; -// import RoomViewStore from '../RoomViewStore'; import { IRightPanelCard, convertToStatePanel, convertToStorePanel, IRightPanelForRoom, } from './RightPanelStoreIPanelState'; +// import RoomViewStore from '../RoomViewStore'; const GROUP_PHASES = [ RightPanelPhases.GroupMemberList, @@ -64,10 +64,10 @@ export default class RightPanelStore extends ReadyWatchingStore { private dispatcherRefRightPanelStore: string; private roomStoreToken: EventSubscription; + private global?: IRightPanelForRoom = null; private byRoom: { [roomId: string]: IRightPanelForRoom; } = {}; - private global?: IRightPanelForRoom = null; private constructor() { super(defaultDispatcher); @@ -75,7 +75,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onReady(): Promise { - // TODO RightPanelStore (will be addressed in a follow up PR): This should be used instead of the onDispatch callback when groups are removed. + // TODO RightPanelStore (will be addressed when dropping groups): This should be used instead of the onDispatch callback when groups are removed. // RoomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate); this.loadCacheFromSettings(); this.emitAndUpdateSettings(); @@ -91,6 +91,7 @@ export default class RightPanelStore extends ReadyWatchingStore { if (this.roomStoreToken) { this.roomStoreToken.remove(); } + // TODO RightPanelStore (will be addressed when dropping groups): User this instead of the dispatcher. // RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate); } @@ -199,8 +200,8 @@ export default class RightPanelStore extends ReadyWatchingStore { public popCard(roomId: string = null) { const rId = roomId ?? this.viewedRoomId; if (!this.byRoom[rId]) return; - const roomCache = this.byRoom[rId]; - const removedCard = roomCache.history.pop(); + + const removedCard = this.byRoom[rId].history.pop(); this.emitAndUpdateSettings(); return removedCard; } @@ -208,6 +209,7 @@ export default class RightPanelStore extends ReadyWatchingStore { public togglePanel(roomId: string = null) { const rId = roomId ?? this.viewedRoomId; if (!this.byRoom[rId]) return; + this.byRoom[rId].isOpen = !this.byRoom[rId].isOpen; this.emitAndUpdateSettings(); } @@ -216,7 +218,9 @@ export default class RightPanelStore extends ReadyWatchingStore { private loadCacheFromSettings() { const room = this.mxClient?.getRoom(this.viewedRoomId); if (!!room) { - this.global = this.global ?? convertToStatePanel(SettingsStore.getValue("RightPanel.phasesGlobal"), room); + this.global = this.global ?? + convertToStatePanel(SettingsStore.getValue("RightPanel.phasesGlobal"), room); + this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ?? convertToStatePanel(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); } @@ -224,10 +228,12 @@ export default class RightPanelStore extends ReadyWatchingStore { private emitAndUpdateSettings() { const storePanelGlobal = convertToStorePanel(this.global); - const storePanelThisRoom = convertToStorePanel(this.byRoom[this.viewedRoomId]); SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, storePanelGlobal); + if (!!this.viewedRoomId) { - SettingsStore.setValue("RightPanel.phases", + const storePanelThisRoom = convertToStorePanel(this.byRoom[this.viewedRoomId]); + SettingsStore.setValue( + "RightPanel.phases", this.viewedRoomId, SettingLevel.ROOM_DEVICE, storePanelThisRoom, @@ -237,7 +243,6 @@ export default class RightPanelStore extends ReadyWatchingStore { } private setRightPanelCache(card: IRightPanelCard) { - // this overrides the history for the right panel in the current room. this.byRoom[this.viewedRoomId] = { history: [{ phase: card.phase, state: card.state ?? {} }], isOpen: true, diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 7daab9e523a..594c8e2ca7e 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -39,6 +39,7 @@ export interface IRightPanelCardState { initialEvent?: MatrixEvent; isInitialEventHighlighted?: boolean; } + export interface IRightPanelCardStateStored { member?: RoomMember | User | GroupMember; verificationRequest?: VerificationRequest; From 7ec26c47aeaad834109de5b22f2178a8f733197a Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 16 Dec 2021 12:23:38 +0100 Subject: [PATCH 56/76] Update src/stores/right-panel/RightPanelStoreIPanelState.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStoreIPanelState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 594c8e2ca7e..f454d12d1d0 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -34,7 +34,7 @@ export interface IRightPanelCardState { space?: Room; // Room3pidMemberInfo, Space3pidMemberInfo, memberInfoEvent?: MatrixEvent; - // treads + // threads threadHeadEvent?: MatrixEvent; initialEvent?: MatrixEvent; isInitialEventHighlighted?: boolean; From f6ae28badc3dc22577d3c440ee36f765d349dc1c Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 16 Dec 2021 12:23:47 +0100 Subject: [PATCH 57/76] Update src/stores/right-panel/RightPanelStoreIPanelState.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStoreIPanelState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index f454d12d1d0..30892b97662 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -51,7 +51,7 @@ export interface IRightPanelCardStateStored { space?: Room; // 3pidMemberInfo memberInfoEventId?: string; - // treads + // threads threadHeadEventId?: string; initialEventId?: string; isInitialEventHighlighted?: boolean; From 9f0383d25f106b5a6210af5694203cb0f6bacb7c Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 16 Dec 2021 12:25:46 +0100 Subject: [PATCH 58/76] Update src/components/structures/UserView.tsx Co-authored-by: J. Ryan Stinnett --- src/components/structures/UserView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/structures/UserView.tsx b/src/components/structures/UserView.tsx index 6ff89204e3b..657b9ab6ff5 100644 --- a/src/components/structures/UserView.tsx +++ b/src/components/structures/UserView.tsx @@ -91,7 +91,8 @@ export default class UserView extends React.Component { } else if (this.state.member) { const panel = ; + resizeNotifier={this.props.resizeNotifier} + />; return ( ); From 8288bfb7a7cd47d28b7000ea672c01d7ae2bb361 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 16 Dec 2021 12:26:02 +0100 Subject: [PATCH 59/76] Update src/components/structures/ThreadView.tsx Co-authored-by: J. Ryan Stinnett --- src/components/structures/ThreadView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index c1f10c7470a..d19ac76acd4 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -93,7 +93,7 @@ export default class ThreadView extends React.Component { } if (prevProps.room !== this.props.room) { - RightPanelStore.instance.setCard( { phase: RightPanelPhases.RoomSummary }); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }); } } From d2c06822138e031b7a33185a0e6e690071cb723f Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 16 Dec 2021 12:26:09 +0100 Subject: [PATCH 60/76] Update src/components/views/context_menus/RoomContextMenu.tsx Co-authored-by: J. Ryan Stinnett --- src/components/views/context_menus/RoomContextMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx index 8651a3bc8f3..ee7e7e16945 100644 --- a/src/components/views/context_menus/RoomContextMenu.tsx +++ b/src/components/views/context_menus/RoomContextMenu.tsx @@ -270,7 +270,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => { ev.stopPropagation(); ensureViewingRoom(); - RightPanelStore.instance.setCard( { phase: RightPanelPhases.RoomSummary }, false ); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }, false); onFinished(); }} label={_t("Widgets")} From 9192ec04bcb6ba45d65c27e6ed60dd60aa38b3ea Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 16 Dec 2021 12:26:17 +0100 Subject: [PATCH 61/76] Update src/components/views/elements/MemberEventListSummary.tsx Co-authored-by: J. Ryan Stinnett --- src/components/views/elements/MemberEventListSummary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 2c0e6496c8f..f14e89d5597 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -32,7 +32,7 @@ import { Layout } from '../../../settings/enums/Layout'; import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; const onPinnedMessagesClick = (): void => { - RightPanelStore.instance.setCard( { phase: RightPanelPhases.PinnedMessages }, false ); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.PinnedMessages }, false); }; const SENDER_AS_DISPLAY_NAME_EVENTS = [EventType.RoomServerAcl, EventType.RoomPinnedEvents]; From 7cdd1bca123669b9fb909d20a537b15d4afe651d Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 16 Dec 2021 12:26:38 +0100 Subject: [PATCH 62/76] Update src/components/views/right_panel/BaseCard.tsx Co-authored-by: J. Ryan Stinnett --- src/components/views/right_panel/BaseCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 9a3a3fe2e54..94cfed71ed2 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -65,7 +65,7 @@ const BaseCard: React.FC = ({ // TODO RightPanelStore (will be addressed in a follow up PR): this should ideally be: // RightPanelStore.instance.popRightPanel(); - RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState } ); + RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState }); }; const label = previousPhaseLabel ?? _t("Back"); backButton = ; From 36b9bdd29b2f75893fcdec8d5abfeea3aa6ec014 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 16 Dec 2021 12:27:08 +0100 Subject: [PATCH 63/76] rewrap try 2 --- src/stores/right-panel/RightPanelStore.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 122eb82e4ec..6e7c9b6c6a4 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -50,12 +50,11 @@ const MEMBER_INFO_PHASES = [ /** * A class for tracking the state of the right panel between layouts and * sessions. This state includes a history for each room. Each history element - * contains the phase (e.g. RightPanelPhase.RoomMemberInfo) and the state (e.g. the - * member) associated with it. - * Groups are treated the same as rooms (they are also - * stored in the byRoom object). This is possible since the store keeps track of the - * opened room/group -> the store will provide the correct history for that - * group/room. + * contains the phase (e.g. RightPanelPhase.RoomMemberInfo) and the state (e.g. + * the member) associated with it. + * Groups are treated the same as rooms (they are also stored in the byRoom + * object). This is possible since the store keeps track of the opened + * room/group -> the store will provide the correct history for that group/room. */ export default class RightPanelStore extends ReadyWatchingStore { private static internalInstance: RightPanelStore; From dad8ffdf5dd4f09f51cf4685ec220f035348191f Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 16 Dec 2021 15:42:55 +0100 Subject: [PATCH 64/76] fix saving space (now saves with only Id not space object) --- src/components/structures/RightPanel.tsx | 4 ++-- src/components/structures/SpaceRoomView.tsx | 13 ++++++++----- .../right-panel/RightPanelStoreIPanelState.ts | 4 ++-- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 36d6208df3d..b01f7b90108 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -207,8 +207,8 @@ export default class RightPanel extends React.Component { break; case RightPanelPhases.SpaceMemberList: card = { kind="link" className="mx_SpaceRoomView_info_memberCount" onClick={() => { - RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList, state: { space } }); + RightPanelStore.instance.setCard({ + phase: RightPanelPhases.RoomMemberList, + state: { spaceId: space.roomId }, + }); }} > { _t("%(count)s members", { count }) } @@ -468,7 +471,7 @@ const SpaceLanding = ({ space }: { space: Room }) => { } const onMembersClick = () => { - RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList, state: { space } }); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList, state: { spaceId: space.roomId } }); }; return
@@ -841,17 +844,17 @@ export default class SpaceRoomView extends React.PureComponent { if (payload.action === Action.ViewUser && payload.member) { RightPanelStore.instance.setCard({ phase: RightPanelPhases.SpaceMemberInfo, - state: { space: this.props.space, member: payload.member }, + state: { spaceId: this.props.space.roomId, member: payload.member }, }); } else if (payload.action === "view_3pid_invite" && payload.event) { RightPanelStore.instance.setCard({ phase: RightPanelPhases.Space3pidMemberInfo, - state: { space: this.props.space, member: payload.member }, + state: { spaceId: this.props.space.roomId, member: payload.member }, }); } else { RightPanelStore.instance.setCard({ phase: RightPanelPhases.SpaceMemberList, - state: { space: this.props.space }, + state: { spaceId: this.props.space.roomId }, }); } }; diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 30892b97662..5f5d739363a 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -31,7 +31,7 @@ export interface IRightPanelCardState { groupId?: string; groupRoomId?: string; widgetId?: string; - space?: Room; + spaceId?: string; // Room3pidMemberInfo, Space3pidMemberInfo, memberInfoEvent?: MatrixEvent; // threads @@ -48,7 +48,7 @@ export interface IRightPanelCardStateStored { groupId?: string; groupRoomId?: string; widgetId?: string; - space?: Room; + spaceId?: string; // 3pidMemberInfo memberInfoEventId?: string; // threads From a124133beb928b2ef56cc4ef3711d4ce548ce476 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 16 Dec 2021 15:43:16 +0100 Subject: [PATCH 65/76] fix toggling panel with setCard function --- src/stores/right-panel/RightPanelStore.ts | 10 +++++++++- src/stores/right-panel/RightPanelStoreIPanelState.ts | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 6e7c9b6c6a4..9da7f52096e 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -31,6 +31,7 @@ import { convertToStatePanel, convertToStorePanel, IRightPanelForRoom, + convertCardToStore, } from './RightPanelStoreIPanelState'; // import RoomViewStore from '../RoomViewStore'; @@ -147,7 +148,10 @@ export default class RightPanelStore extends ReadyWatchingStore { // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; - if (targetPhase === this.currentCard?.phase && allowClose && !cardState) { + if (targetPhase === this.currentCard?.phase && + allowClose && + (this.compareCards({ phase: targetPhase, state: cardState }, this.currentCard) || !cardState) + ) { // Toggle panel: a toggle command needs to fullfil the following: // - the same phase // - the panel can be closed @@ -225,6 +229,10 @@ export default class RightPanelStore extends ReadyWatchingStore { } } + private compareCards(a: IRightPanelCard, b: IRightPanelCard): boolean { + return JSON.stringify(convertCardToStore(a)) == JSON.stringify(convertCardToStore(b)); + } + private emitAndUpdateSettings() { const storePanelGlobal = convertToStorePanel(this.global); SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, storePanelGlobal); diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 5f5d739363a..0d71f3940f0 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -89,7 +89,7 @@ export function convertToStatePanel(storeRoom: IRightPanelForRoomStored, room: R return { history: stateHistory, isOpen: storeRoom.isOpen }; } -function convertCardToStore(panelState: IRightPanelCard): IRightPanelCardStored { +export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCardStored { const panelStateThisRoomStored = { ...panelState.state } as any; if (!!panelState?.state?.threadHeadEvent?.getId()) { panelStateThisRoomStored.threadHeadEventId = panelState.state.threadHeadEvent.getId(); From d709735a76b04450884a7909d22ffd5834c5a099 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 16 Dec 2021 19:48:48 +0100 Subject: [PATCH 66/76] fix spaceId --- src/components/views/right_panel/UserInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index e4655727127..ced4bf422d5 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1658,7 +1658,7 @@ const UserInfo: React.FC = ({ cardState = { member }; } else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) { previousPhase = previousPhase = RightPanelPhases.SpaceMemberList; - cardState = { space: room }; + cardState = { spaceId: room.roomId }; } else if (room) { previousPhase = RightPanelPhases.RoomMemberList; } From 57ee4d49114ff2a51641593d2941adc08e6e2602 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 17:20:43 +0100 Subject: [PATCH 67/76] fix member stored as object (now using just id's) --- src/components/views/right_panel/UserInfo.tsx | 2 +- src/stores/right-panel/RightPanelStore.ts | 4 +++- .../right-panel/RightPanelStoreIPanelState.ts | 15 ++++++++++++--- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index ced4bf422d5..09b015e97a8 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1657,7 +1657,7 @@ const UserInfo: React.FC = ({ previousPhase = RightPanelPhases.RoomMemberInfo; cardState = { member }; } else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) { - previousPhase = previousPhase = RightPanelPhases.SpaceMemberList; + previousPhase = RightPanelPhases.SpaceMemberList; cardState = { spaceId: room.roomId }; } else if (room) { previousPhase = RightPanelPhases.RoomMemberList; diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 9da7f52096e..fb9509f19f3 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -223,9 +223,11 @@ export default class RightPanelStore extends ReadyWatchingStore { if (!!room) { this.global = this.global ?? convertToStatePanel(SettingsStore.getValue("RightPanel.phasesGlobal"), room); - this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ?? convertToStatePanel(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); + } else { + console.warn("Could not restore the right panel after load, because there was no associated room object." + + "The right panel can only be restored, for rooms and spaces but not for groups"); } } diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 0d71f3940f0..93df4bbd948 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -41,9 +41,8 @@ export interface IRightPanelCardState { } export interface IRightPanelCardStateStored { - member?: RoomMember | User | GroupMember; - verificationRequest?: VerificationRequest; - verificationRequestPromise?: Promise; + memberId?: string; + // we do not store the things associated with verification // group groupId?: string; groupRoomId?: string; @@ -100,9 +99,15 @@ export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCard if (!!panelState?.state?.initialEvent?.getId()) { panelStateThisRoomStored.initialEventId = panelState.state.initialEvent.getId(); } + if (!!panelState?.state?.member?.userId) { + panelStateThisRoomStored.memberId = panelState.state.member.userId; + } delete panelStateThisRoomStored.threadHeadEvent; delete panelStateThisRoomStored.initialEvent; delete panelStateThisRoomStored.memberInfoEvent; + delete panelStateThisRoomStored.verificationRequest; + delete panelStateThisRoomStored.verificationRequestPromise; + delete panelStateThisRoomStored.member; const storedCard = { state: panelStateThisRoomStored as IRightPanelCardStored, phase: panelState.phase }; return storedCard as IRightPanelCardStored; @@ -119,9 +124,13 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): if (!!panelStateThisRoom.initialEventId) { panelStateThisRoom.initialEvent = room.findEventById(panelStateThisRoom.initialEventId); } + if (!!panelStateThisRoom.memberId) { + panelStateThisRoom.member = room.getMember(panelStateThisRoom.memberId); + } delete panelStateThisRoom.threadHeadEventId; delete panelStateThisRoom.initialEventId; delete panelStateThisRoom.memberInfoEventId; + delete panelStateThisRoom.memberId; return { state: panelStateThisRoom as IRightPanelCardState, phase: panelStateStore.phase } as IRightPanelCard; } From c46615f9c1551360931fb6f64ed6653b03a0f3d4 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 17:42:35 +0100 Subject: [PATCH 68/76] fix: loading veridication request from store --- src/stores/right-panel/RightPanelStoreIPanelState.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 93df4bbd948..4c73d8425c6 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -22,6 +22,7 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque import { GroupMember } from "../../components/views/right_panel/UserInfo"; import { RightPanelPhases } from "./RightPanelStorePhases"; +import { pendingVerificationRequestForUser } from "../../verification"; export interface IRightPanelCardState { member?: RoomMember | User | GroupMember; @@ -126,6 +127,7 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): } if (!!panelStateThisRoom.memberId) { panelStateThisRoom.member = room.getMember(panelStateThisRoom.memberId); + panelStateThisRoom.verificationRequest = pendingVerificationRequestForUser(panelStateThisRoom.member); } delete panelStateThisRoom.threadHeadEventId; delete panelStateThisRoom.initialEventId; From 071983dbd0d7f65ed774c7b9883fc6af91c91d3d Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 18:41:34 +0100 Subject: [PATCH 69/76] fix continuing verification request on site reload --- src/stores/right-panel/RightPanelStore.ts | 14 +++++++++++++- .../right-panel/RightPanelStoreIPanelState.ts | 1 - 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index fb9509f19f3..ba974ef31b2 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -33,6 +33,7 @@ import { IRightPanelForRoom, convertCardToStore, } from './RightPanelStoreIPanelState'; +import { MatrixClientPeg } from "../../MatrixClientPeg"; // import RoomViewStore from '../RoomViewStore'; const GROUP_PHASES = [ @@ -77,6 +78,7 @@ export default class RightPanelStore extends ReadyWatchingStore { protected async onReady(): Promise { // TODO RightPanelStore (will be addressed when dropping groups): This should be used instead of the onDispatch callback when groups are removed. // RoomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate); + MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequestUpdate.bind(this)); this.loadCacheFromSettings(); this.emitAndUpdateSettings(); } @@ -91,6 +93,7 @@ export default class RightPanelStore extends ReadyWatchingStore { if (this.roomStoreToken) { this.roomStoreToken.remove(); } + MatrixClientPeg.get().off("crypto.verification.request", this.onVerificationRequestUpdate.bind(this)); // TODO RightPanelStore (will be addressed when dropping groups): User this instead of the dispatcher. // RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate); } @@ -227,7 +230,7 @@ export default class RightPanelStore extends ReadyWatchingStore { convertToStatePanel(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); } else { console.warn("Could not restore the right panel after load, because there was no associated room object." + - "The right panel can only be restored, for rooms and spaces but not for groups"); + "The right panel can only be restored, for rooms and spaces but not for groups"); } } @@ -298,6 +301,15 @@ export default class RightPanelStore extends ReadyWatchingStore { return true; } + onVerificationRequestUpdate() { + const { member } = this.currentCard.state; + const pendingRequest = pendingVerificationRequestForUser(member); + if (pendingRequest) { + this.currentCard.state.verificationRequest = pendingRequest; + this.emitAndUpdateSettings(); + } + } + onRoomViewStoreUpdate() { // TODO: use this function instead of the onDispatch (the whole onDispatch can get removed!) as soon groups are removed // this.viewedRoomId = RoomViewStore.getRoomId(); diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 4c73d8425c6..37da38364fc 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -127,7 +127,6 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): } if (!!panelStateThisRoom.memberId) { panelStateThisRoom.member = room.getMember(panelStateThisRoom.memberId); - panelStateThisRoom.verificationRequest = pendingVerificationRequestForUser(panelStateThisRoom.member); } delete panelStateThisRoom.threadHeadEventId; delete panelStateThisRoom.initialEventId; From dcfe2f6b31fbfbf32e74c4bedbe2283264b6440c Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 20:42:09 +0100 Subject: [PATCH 70/76] linter --- src/stores/right-panel/RightPanelStoreIPanelState.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 37da38364fc..93df4bbd948 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -22,7 +22,6 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque import { GroupMember } from "../../components/views/right_panel/UserInfo"; import { RightPanelPhases } from "./RightPanelStorePhases"; -import { pendingVerificationRequestForUser } from "../../verification"; export interface IRightPanelCardState { member?: RoomMember | User | GroupMember; From cfdbfbb908f89d2c60b7219cd130e7008d0d65de Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 11:58:45 +0100 Subject: [PATCH 71/76] forward roomId in all cases --- src/stores/right-panel/RightPanelStore.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index ba974ef31b2..0752b553a70 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -138,7 +138,7 @@ export default class RightPanelStore extends ReadyWatchingStore { public get previousGroup(): IRightPanelCard { return this.previousCard; } // Setters - public setCard(card: IRightPanelCard, allowClose = true, roomId: string = null) { + public setCard(card: IRightPanelCard, allowClose = true, roomId?: string) { const rId = roomId ?? this.viewedRoomId; // this was previously a very multifunctional command: // Toggle panel: if the same phase is send but without a state @@ -169,7 +169,7 @@ export default class RightPanelStore extends ReadyWatchingStore { return; } else if (targetPhase !== this.currentCard?.phase) { // Set right panel and erase history. - this.setRightPanelCache({ phase: targetPhase, state: cardState ?? {} }); + this.setRightPanelCache({ phase: targetPhase, state: cardState ?? {} }, rId); } } @@ -254,8 +254,8 @@ export default class RightPanelStore extends ReadyWatchingStore { this.emit(UPDATE_EVENT, null); } - private setRightPanelCache(card: IRightPanelCard) { - this.byRoom[this.viewedRoomId] = { + private setRightPanelCache(card: IRightPanelCard, roomId?: string) { + this.byRoom[roomId ?? this.viewedRoomId] = { history: [{ phase: card.phase, state: card.state ?? {} }], isOpen: true, }; From 056c0d0c93a45f5563b7523b542174de82a1ac06 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 12:25:31 +0100 Subject: [PATCH 72/76] prevent toggle hack for e2e test --- src/stores/right-panel/RightPanelStore.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 0752b553a70..3afa504b284 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -159,7 +159,9 @@ export default class RightPanelStore extends ReadyWatchingStore { // - the same phase // - the panel can be closed // - does not contain any state information (state) - this.togglePanel(rId); + if(targetPhase != RightPanelPhases.EncryptionPanel){ + this.togglePanel(rId); + } return; } else if ((targetPhase === this.currentCardForRoom(rId)?.phase && !!cardState)) { // Update state: set right panel with a new state but keep the phase (dont know it this is ever needed...) From 7b8c88f29ea95a5d5e6970fbf4fe8ee8257a001d Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 12:32:07 +0100 Subject: [PATCH 73/76] linter --- src/stores/right-panel/RightPanelStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 3afa504b284..e0dbeac5939 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -159,7 +159,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // - the same phase // - the panel can be closed // - does not contain any state information (state) - if(targetPhase != RightPanelPhases.EncryptionPanel){ + if (targetPhase != RightPanelPhases.EncryptionPanel) { this.togglePanel(rId); } return; From 6f092c4749971eb29b8bd5a79a06f13b0d318d2a Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 13:14:12 +0100 Subject: [PATCH 74/76] fix bind memory leak --- src/components/views/right_panel/HeaderButtons.tsx | 6 +++--- src/stores/right-panel/RightPanelStore.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index cc3af0f7c08..93f94fb3c26 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -58,13 +58,13 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component { if (this.unmounted) return; let phase = RightPanelStore.instance.currentCard.phase; if (!RightPanelStore.instance.isOpenForGroup) {phase = null;} diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index e0dbeac5939..d02b3873403 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -78,7 +78,7 @@ export default class RightPanelStore extends ReadyWatchingStore { protected async onReady(): Promise { // TODO RightPanelStore (will be addressed when dropping groups): This should be used instead of the onDispatch callback when groups are removed. // RoomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate); - MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequestUpdate.bind(this)); + MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequestUpdate); this.loadCacheFromSettings(); this.emitAndUpdateSettings(); } @@ -93,7 +93,7 @@ export default class RightPanelStore extends ReadyWatchingStore { if (this.roomStoreToken) { this.roomStoreToken.remove(); } - MatrixClientPeg.get().off("crypto.verification.request", this.onVerificationRequestUpdate.bind(this)); + MatrixClientPeg.get().off("crypto.verification.request", this.onVerificationRequestUpdate); // TODO RightPanelStore (will be addressed when dropping groups): User this instead of the dispatcher. // RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate); } @@ -303,7 +303,7 @@ export default class RightPanelStore extends ReadyWatchingStore { return true; } - onVerificationRequestUpdate() { + private onVerificationRequestUpdate = () => { const { member } = this.currentCard.state; const pendingRequest = pendingVerificationRequestForUser(member); if (pendingRequest) { From 606fb07f223399ff8b88d5d25b47e7e2b5b3f9f0 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 5 Jan 2022 13:16:18 +0100 Subject: [PATCH 75/76] Update src/stores/right-panel/RightPanelStore.ts Co-authored-by: J. Ryan Stinnett --- src/stores/right-panel/RightPanelStore.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index d02b3873403..ea952e2b4d3 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -231,8 +231,8 @@ export default class RightPanelStore extends ReadyWatchingStore { this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ?? convertToStatePanel(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room); } else { - console.warn("Could not restore the right panel after load, because there was no associated room object." + - "The right panel can only be restored, for rooms and spaces but not for groups"); + console.warn("Could not restore the right panel after load because there was no associated room object." + + "The right panel can only be restored for rooms and spaces but not for groups"); } } From 146a8ef7032ffdbf807bb8e55fa44a1e8523e587 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 13:23:58 +0100 Subject: [PATCH 76/76] semicolons --- src/components/views/right_panel/HeaderButtons.tsx | 2 +- src/stores/right-panel/RightPanelStore.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 93f94fb3c26..ef2b03af39d 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -87,7 +87,7 @@ export default abstract class HeaderButtons

extends React.Component