From 2575cb1e689eec250cc1a9dd1baa31a6aaadae82 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 6 Dec 2021 18:43:21 +0100 Subject: [PATCH 001/103] 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 002/103] 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 003/103] 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 004/103] 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 005/103] 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 006/103] 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 007/103] 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 008/103] 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 009/103] 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 010/103] 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 011/103] 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 012/103] 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 013/103] 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 014/103] 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 015/103] 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 016/103] 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 017/103] 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 018/103] 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 019/103] 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 020/103] 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 021/103] 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 022/103] 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 023/103] 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 024/103] 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 025/103] 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 026/103] 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 027/103] 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 028/103] 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 029/103] 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 030/103] 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 031/103] 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 032/103] 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 033/103] 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 034/103] 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 035/103] 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 036/103] 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 037/103] 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 038/103] 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 039/103] 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 040/103] 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 041/103] 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 042/103] 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 043/103] "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 044/103] 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 045/103] 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 046/103] 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 047/103] 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 048/103] 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 049/103] 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 050/103] 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 051/103] 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 052/103] 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 053/103] 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 054/103] 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 055/103] 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 056/103] 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 057/103] 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 058/103] 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 059/103] 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 060/103] 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 061/103] 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 062/103] 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 063/103] 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 064/103] 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 065/103] 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 066/103] 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 6f20bf4357cc46d9e7262915008b1735b5897d07 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 16 Dec 2021 19:39:02 +0100 Subject: [PATCH 067/103] history based navigation with ne right panel store --- src/components/structures/FilePanel.tsx | 4 -- src/components/structures/RightPanel.tsx | 15 -------- src/components/structures/RoomView.tsx | 20 +++++----- src/components/structures/ThreadView.tsx | 22 ----------- src/components/views/avatars/MemberAvatar.tsx | 20 +++++++++- src/components/views/right_panel/BaseCard.tsx | 37 +++++++++---------- .../views/right_panel/GroupHeaderButtons.tsx | 7 +++- .../views/right_panel/RoomHeaderButtons.tsx | 6 ++- .../views/right_panel/RoomSummaryCard.tsx | 9 ++--- src/components/views/right_panel/UserInfo.tsx | 12 ++---- .../views/right_panel/WidgetCard.tsx | 6 +-- src/components/views/rooms/MemberList.tsx | 5 --- src/dispatcher/dispatch-actions/threads.ts | 3 +- src/stores/right-panel/RightPanelStore.ts | 7 ++++ .../right-panel/RightPanelStorePhases.ts | 11 ++++++ 15 files changed, 82 insertions(+), 102 deletions(-) diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index 63b044b6e53..67f849b7d2a 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -221,7 +221,6 @@ class FilePanel extends React.Component { return
{ _t("You must register to use this functionality", @@ -234,7 +233,6 @@ class FilePanel extends React.Component { return
{ _t("You must join the room to see its files") }
; @@ -258,7 +256,6 @@ class FilePanel extends React.Component { @@ -285,7 +282,6 @@ class FilePanel extends React.Component { diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index b01f7b90108..6effdc7dd41 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -27,12 +27,10 @@ import GroupStore from '../../stores/GroupStore'; 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"; import WidgetCard from "../views/right_panel/WidgetCard"; import { replaceableComponent } from "../../utils/replaceableComponent"; import SettingsStore from "../../settings/SettingsStore"; -import { ActionPayload } from "../../dispatcher/payloads"; import MemberList from "../views/rooms/MemberList"; import GroupMemberList from "../views/groups/GroupMemberList"; import GroupRoomList from "../views/groups/GroupRoomList"; @@ -47,7 +45,6 @@ import ResizeNotifier from "../../utils/ResizeNotifier"; import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard"; 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'; import { IRightPanelCard, IRightPanelCardState } from '../../stores/right-panel/RightPanelStoreIPanelState'; @@ -72,8 +69,6 @@ interface IState { export default class RightPanel extends React.Component { static contextType = MatrixClientContext; - private dispatcherRef: string; - constructor(props, context) { super(props, context); @@ -90,7 +85,6 @@ export default class RightPanel extends React.Component { }, 500, { leading: true, trailing: true }); 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); @@ -98,7 +92,6 @@ export default class RightPanel extends React.Component { } public componentWillUnmount(): void { - dis.unregister(this.dispatcherRef); if (this.context) { this.context.removeListener("RoomState.members", this.onRoomStateMember); } @@ -153,14 +146,6 @@ 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; - if (isChangingRoom && isViewingThread) { - dispatchShowThreadsPanelEvent(); - } - }; - private onClose = () => { // 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 diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 6943503f012..ac33c3a1040 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -423,21 +423,21 @@ export class RoomView extends React.Component { const thread = initialEvent?.getThread(); if (thread && !initialEvent?.isThreadRoot) { - dispatchShowThreadEvent( - thread.rootEvent, - initialEvent, - RoomViewStore.isInitialEventHighlighted(), - ); + // dispatchShowThreadEvent( + // thread.rootEvent, + // initialEvent, + // RoomViewStore.isInitialEventHighlighted(), + // ); } else { newState.initialEventId = initialEventId; newState.isInitialEventHighlighted = RoomViewStore.isInitialEventHighlighted(); if (thread && initialEvent?.isThreadRoot) { - dispatchShowThreadEvent( - thread.rootEvent, - initialEvent, - RoomViewStore.isInitialEventHighlighted(), - ); + // dispatchShowThreadEvent( + // thread.rootEvent, + // initialEvent, + // RoomViewStore.isInitialEventHighlighted(), + // ); } } } diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index d19ac76acd4..a4b4942d783 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -40,8 +40,6 @@ import UploadBar from './UploadBar'; import { _t } from '../../languageHandler'; import ThreadListContextMenu from '../views/context_menus/ThreadListContextMenu'; import RightPanelStore from '../../stores/right-panel/RightPanelStore'; -import SettingsStore from '../../settings/SettingsStore'; -import { WidgetLayoutStore } from '../../stores/widgets/WidgetLayoutStore'; interface IProps { room: Room; @@ -203,24 +201,6 @@ export default class ThreadView extends React.Component { event_id: this.state.thread?.id, }; - let previousPhase = RightPanelStore.instance.previousCard.phase; - if (!SettingsStore.getValue("feature_maximised_widgets")) { - previousPhase = RightPanelPhases.ThreadPanel; - } - - // change the previous phase to the threadPanel in case there is no maximised widget anymore - if (!WidgetLayoutStore.instance.hasMaximisedWidget(this.props.room)) { - previousPhase = RightPanelPhases.ThreadPanel; - } - - // Make sure the previous Phase is always one of the two: Timeline or ThreadPanel - if (![RightPanelPhases.ThreadPanel, RightPanelPhases.Timeline].includes(previousPhase)) { - previousPhase = RightPanelPhases.ThreadPanel; - } - const previousPhaseLabels = {}; - previousPhaseLabels[RightPanelPhases.ThreadPanel] = _t("All threads"); - previousPhaseLabels[RightPanelPhases.Timeline] = _t("Chat"); - return ( { diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 9ecaf8030b7..0b4c2c72f33 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -25,6 +25,9 @@ import { Action } from "../../../dispatcher/actions"; import BaseAvatar from "./BaseAvatar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { mediaFromMxc } from "../../../customisations/Media"; +import { CardContext } from '../right_panel/BaseCard'; +import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; +import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; interface IProps extends Omit, "name" | "idName" | "url"> { member: RoomMember; @@ -36,6 +39,7 @@ interface IProps extends Omit, "name" | onClick?: React.MouseEventHandler; // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser` viewUserOnClick?: boolean; + pushUserOnClick?: boolean; title?: string; style?: any; } @@ -95,12 +99,21 @@ export default class MemberAvatar extends React.Component { const userId = member ? member.userId : fallbackUserId; if (viewUserOnClick) { - onClick = () => { + const onClickPush = () => { + RightPanelStore.instance.pushCard({ + phase: RightPanelPhases.RoomMemberInfo, + state: { member: this.props.member }, + }); + }; + + const onClickSet = () => { dis.dispatch({ action: Action.ViewUser, member: this.props.member, }); }; + + onClick = (this.context == "Card") ? onClickPush : onClickSet; } return ( @@ -109,7 +122,10 @@ export default class MemberAvatar extends React.Component { title={this.state.title} idName={userId} url={this.state.imageUrl} - onClick={onClick} /> + onClick={onClick} + /> ); } } + +MemberAvatar.contextType = CardContext; diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 94cfed71ed2..923c1b471b0 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -20,16 +20,15 @@ import classNames from 'classnames'; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; -import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; +import { labelForPhase } from '../../../stores/right-panel/RightPanelStorePhases'; +export const CardContext = React.createContext(""); interface IProps { header?: ReactNode; footer?: ReactNode; className?: string; withoutScrollContainer?: boolean; - previousPhase?: RightPanelPhases; - previousPhaseLabel?: string; closeLabel?: string; onClose?(): void; cardState?; @@ -54,20 +53,16 @@ const BaseCard: React.FC = ({ header, footer, withoutScrollContainer, - previousPhase, - previousPhaseLabel, children, - cardState, }) => { let backButton; - if (previousPhase) { + const cardHistory = RightPanelStore.instance.roomPhaseHistory; + if (cardHistory.length > 1) { + const prevCard = cardHistory[cardHistory.length - 1]; const onBackClick = () => { - // 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.popCard(); }; - const label = previousPhaseLabel ?? _t("Back"); + const label = labelForPhase(prevCard.phase) ?? _t("Back"); backButton = ; } @@ -87,15 +82,17 @@ const BaseCard: React.FC = ({ } return ( -
-
- { backButton } - { closeButton } - { header } + +
+
+ { backButton } + { closeButton } + { header } +
+ { children } + { footer &&
{ footer }
}
- { children } - { footer &&
{ footer }
} -
+ ); }; diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx index 723e5440b03..5191828bc07 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.tsx +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -28,6 +28,7 @@ import { Action } from "../../../dispatcher/actions"; import { ActionPayload } from "../../../dispatcher/payloads"; import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; const GROUP_PHASES = [ RightPanelPhases.GroupMemberInfo, @@ -49,7 +50,11 @@ export default class GroupHeaderButtons extends HeaderButtons { protected onAction(payload: ActionPayload) { if (payload.action === Action.ViewUser) { if ((payload as ViewUserPayload).member) { - this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member }); + RightPanelStore.instance.setCards([ + { phase: RightPanelPhases.GroupMemberList }, + { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } }, + ]); + // this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member }); } else { this.setPhase(RightPanelPhases.GroupMemberList); } diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 0cf4c9a5eeb..b7ee7d033fe 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -154,7 +154,11 @@ export default class RoomHeaderButtons extends HeaderButtons { protected onAction(payload: ActionPayload) { if (payload.action === Action.ViewUser) { if (payload.member) { - this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member }); + RightPanelStore.instance.setCards([ + { phase: RightPanelPhases.RoomMemberList }, + { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } }, + ]); + // this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member }); } else { this.setPhase(RightPanelPhases.RoomMemberList); } diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index c3aeb6fe486..5f0eca05517 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -102,8 +102,7 @@ const AppRow: React.FC = ({ app, room }) => { }, [room.roomId]); const onOpenWidgetClick = () => { - // TODO RightPanelStore (will be addressed in a follow up PR): should push the widget - RightPanelStore.instance.setCard({ + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Widget, state: { widgetId: app.id }, }); @@ -234,13 +233,11 @@ 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.setCard({ phase: RightPanelPhases.RoomMemberList }, allowClose); + RightPanelStore.instance.pushCard({ 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.setCard({ phase: RightPanelPhases.FilePanel }, allowClose); + RightPanelStore.instance.pushCard({ 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 ced4bf422d5..5a25f68e63d 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1651,21 +1651,15 @@ const UserInfo: React.FC = ({ const classes = ["mx_UserInfo"]; 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; cardState = { member }; } else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) { - previousPhase = previousPhase = RightPanelPhases.SpaceMemberList; cardState = { spaceId: room.roomId }; - } 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.setCard({ phase: previousPhase, state: cardState }); + RightPanelStore.instance.togglePanel(); }; let content; @@ -1679,7 +1673,8 @@ const UserInfo: React.FC = ({ member={member as User} groupId={groupId as string} devices={devices} - isRoomEncrypted={isRoomEncrypted} /> + isRoomEncrypted={isRoomEncrypted} + /> ); break; case RightPanelPhases.EncryptionPanel: @@ -1720,7 +1715,6 @@ const UserInfo: React.FC = ({ header={header} onClose={onClose} closeLabel={closeLabel} - previousPhase={previousPhase} cardState={cardState} > { content } diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 4f864945457..0bdbf8aa66c 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -23,7 +23,6 @@ import WidgetUtils from "../../../utils/WidgetUtils"; import AppTile from "../elements/AppTile"; import { _t } from "../../../languageHandler"; import { useWidgets } from "./RoomSummaryCard"; -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"; @@ -48,9 +47,7 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { useEffect(() => { if (!app || isPinned) { // 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.setCard({ phase: RightPanelPhases.RoomSummary }); + RightPanelStore.instance.popCard(); } }, [app, isPinned]); @@ -88,7 +85,6 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { header={header} className="mx_WidgetCard" onClose={onClose} - previousPhase={RightPanelPhases.RoomSummary} withoutScrollContainer > { return ; @@ -567,11 +566,8 @@ export default class MemberList extends React.Component { /> ); - let previousPhase = RightPanelPhases.RoomSummary; - // We have no previousPhase for when viewing a MemberList from a Space let scopeHeader; if (SpaceStore.spacesEnabled && room?.isSpaceRoom()) { - previousPhase = undefined; scopeHeader =
@@ -586,7 +582,6 @@ export default class MemberList extends React.Component { } footer={footer} onClose={this.props.onClose} - previousPhase={previousPhase} >
{ - // TODO RightPanelStore (will be addressed in a follow up PR): this should really be a push! - RightPanelStore.instance.setCard({ + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadView, state: { threadHeadEvent: rootEvent, diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 9da7f52096e..c302abf4a74 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -170,6 +170,13 @@ export default class RightPanelStore extends ReadyWatchingStore { } } + public setCards(cards: IRightPanelCard[], allowClose = true, roomId: string = null) { + const rId = roomId ?? this.viewedRoomId; + const history = cards.map(c => {return { phase: c.phase, state: c.state ?? {} };}); + this.byRoom[rId] = { history, isOpen: true }; + this.emitAndUpdateSettings(); + } + public pushCard( card: IRightPanelCard, allowClose = true, diff --git a/src/stores/right-panel/RightPanelStorePhases.ts b/src/stores/right-panel/RightPanelStorePhases.ts index 0b8d9c69edb..71d5da4d9d2 100644 --- a/src/stores/right-panel/RightPanelStorePhases.ts +++ b/src/stores/right-panel/RightPanelStorePhases.ts @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { _t } from "../../languageHandler"; + // These are in their own file because of circular imports being a problem. export enum RightPanelPhases { // Room stuff @@ -44,6 +46,15 @@ export enum RightPanelPhases { ThreadPanel = "ThreadPanel", } +export function labelForPhase(phase: RightPanelPhases) { + switch (phase) { + case RightPanelPhases.ThreadPanel: return _t("All threads"); + case RightPanelPhases.Timeline: return _t("Chat"); + case RightPanelPhases.RoomSummary: return _t("Info"); + } + return null; +} + // These are the phases that are safe to persist (the ones that don't require additional // arguments). export const RIGHT_PANEL_PHASES_NO_ARGS = [ From 60f8cac61f4fd6e7efd6f05f1069c806ebdaa08b Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 16 Dec 2021 19:45:13 +0100 Subject: [PATCH 068/103] fix history --- 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 923c1b471b0..005f7daeb19 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -58,7 +58,7 @@ const BaseCard: React.FC = ({ let backButton; const cardHistory = RightPanelStore.instance.roomPhaseHistory; if (cardHistory.length > 1) { - const prevCard = cardHistory[cardHistory.length - 1]; + const prevCard = cardHistory[cardHistory.length - 2]; const onBackClick = () => { RightPanelStore.instance.popCard(); }; From cd42fa46f68baf1021bc7c0280bc09a295b9d889 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 20 Dec 2021 11:12:33 +0100 Subject: [PATCH 069/103] fix history of right panel when clicking on threads: - in room timeline - threads timeline - right panel timeline --- src/components/structures/RoomView.tsx | 22 +++++------ src/components/views/avatars/MemberAvatar.tsx | 2 +- .../views/messages/MessageActionBar.tsx | 32 ++++++++------- src/components/views/right_panel/BaseCard.tsx | 4 +- .../views/right_panel/RoomHeaderButtons.tsx | 4 +- src/components/views/rooms/EventTile.tsx | 39 ++++++++++--------- src/dispatcher/dispatch-actions/threads.ts | 17 ++++++-- 7 files changed, 67 insertions(+), 53 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index ac33c3a1040..81c01b64826 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -94,7 +94,7 @@ import MessageComposer from '../views/rooms/MessageComposer'; import JumpToBottomButton from "../views/rooms/JumpToBottomButton"; import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar"; import SpaceStore from "../../stores/spaces/SpaceStore"; -import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threads'; +import { showThread } from '../../dispatcher/dispatch-actions/threads'; import { fetchInitialEvent } from "../../utils/EventUtils"; import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload"; import AppsDrawer from '../views/rooms/AppsDrawer'; @@ -423,21 +423,21 @@ export class RoomView extends React.Component { const thread = initialEvent?.getThread(); if (thread && !initialEvent?.isThreadRoot) { - // dispatchShowThreadEvent( - // thread.rootEvent, - // initialEvent, - // RoomViewStore.isInitialEventHighlighted(), - // ); + showThread( + thread.rootEvent, + initialEvent, + RoomViewStore.isInitialEventHighlighted(), + ); } else { newState.initialEventId = initialEventId; newState.isInitialEventHighlighted = RoomViewStore.isInitialEventHighlighted(); if (thread && initialEvent?.isThreadRoot) { - // dispatchShowThreadEvent( - // thread.rootEvent, - // initialEvent, - // RoomViewStore.isInitialEventHighlighted(), - // ); + showThread( + thread.rootEvent, + initialEvent, + RoomViewStore.isInitialEventHighlighted(), + ); } } } diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 0b4c2c72f33..3b90201267d 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -113,7 +113,7 @@ export default class MemberAvatar extends React.Component { }); }; - onClick = (this.context == "Card") ? onClickPush : onClickSet; + onClick = (this.context.isCard) ? onClickPush : onClickSet; } return ( diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 87433fb4deb..d92ef4fc1cb 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -39,8 +39,9 @@ import DownloadActionButton from "./DownloadActionButton"; import SettingsStore from '../../../settings/SettingsStore'; import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; import ReplyChain from '../elements/ReplyChain'; -import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads'; +import { showThread } from '../../../dispatcher/dispatch-actions/threads'; import ReactionPicker from "../emojipicker/ReactionPicker"; +import { CardContext } from '../right_panel/BaseCard'; interface IOptionsButtonProps { mxEvent: MatrixEvent; @@ -219,8 +220,8 @@ export default class MessageActionBar extends React.PureComponent { - dispatchShowThreadEvent(this.props.mxEvent); + private onThreadClick = (isCard: boolean): void => { + showThread(this.props.mxEvent, undefined, undefined, isCard); dis.dispatch({ action: Action.FocusSendMessageComposer, context: TimelineRenderingType.Thread, @@ -303,6 +304,17 @@ export default class MessageActionBar extends React.PureComponent; + const threadTooltipButton = + { context => + + } + ; + // We show a different toolbar for failed events, so detect that first. const mxEvent = this.props.mxEvent; const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status; @@ -335,12 +347,7 @@ export default class MessageActionBar extends React.PureComponent { (this.showReplyInThreadAction) && ( - + threadTooltipButton ) } ); } @@ -368,12 +375,7 @@ export default class MessageActionBar extends React.PureComponent); + toolbarOpts.unshift(threadTooltipButton); } if (allowCancel) { diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 005f7daeb19..21410667538 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -23,7 +23,7 @@ import AccessibleButton from "../elements/AccessibleButton"; import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; import { labelForPhase } from '../../../stores/right-panel/RightPanelStorePhases'; -export const CardContext = React.createContext(""); +export const CardContext = React.createContext({ isCard: false }); interface IProps { header?: ReactNode; footer?: ReactNode; @@ -82,7 +82,7 @@ const BaseCard: React.FC = ({ } return ( - +
{ backButton } diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index b7ee7d033fe..f50bb4d5414 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -32,7 +32,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { useSettingValue } from "../../../hooks/useSettings"; import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard'; -import { dispatchShowThreadsPanelEvent } from "../../../dispatcher/dispatch-actions/threads"; +import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads"; import SettingsStore from "../../../settings/SettingsStore"; import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; @@ -203,7 +203,7 @@ export default class RoomHeaderButtons extends HeaderButtons { if (RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) { RightPanelStore.instance.togglePanel(); } else { - dispatchShowThreadsPanelEvent(); + showThreadPanel(); } }; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index e35c7286f6b..c73876754c9 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -61,7 +61,7 @@ import ReactionsRow from '../messages/ReactionsRow'; import { getEventDisplayInfo } from '../../../utils/EventUtils'; import SettingsStore from "../../../settings/SettingsStore"; import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion"; -import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads'; +import { showThread } from '../../../dispatcher/dispatch-actions/threads'; import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewStore'; import { TimelineRenderingType } from "../../../contexts/RoomContext"; import { MediaEventHelper } from "../../../utils/MediaEventHelper"; @@ -72,6 +72,7 @@ import { ThreadNotificationState } from '../../../stores/notifications/ThreadNot import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNotificationStateStore'; import { NotificationStateEvents } from '../../../stores/notifications/NotificationState'; import { NotificationColor } from '../../../stores/notifications/NotificationColor'; +import { CardContext } from '../right_panel/BaseCard'; const eventTileTypes = { [EventType.RoomMessage]: 'messages.MessageEvent', @@ -670,21 +671,23 @@ export default class EventTile extends React.Component { } return ( -
{ - dispatchShowThreadEvent( - this.props.mxEvent, - ); - }} - > - - { _t("%(count)s reply", { - count: this.thread.length, - }) } - - { this.renderThreadLastMessagePreview() } -
+ + { context => +
{ + showThread(this.props.mxEvent, undefined, undefined, context.isCard); + }} + > + + { _t("%(count)s reply", { + count: this.thread.length, + }) } + + { this.renderThreadLastMessagePreview() } +
+ } + ); } @@ -1417,7 +1420,7 @@ export default class EventTile extends React.Component { { avatar }
dispatchShowThreadEvent(this.props.mxEvent)} + onClick={() => showThread(this.props.mxEvent, undefined, undefined, true)} key="mx_EventTile_line" > { linkedTimestamp } @@ -1431,7 +1434,7 @@ export default class EventTile extends React.Component { dispatchShowThreadEvent(this.props.mxEvent)} + onClick={() => showThread(this.props.mxEvent, undefined, undefined, true)} key="thread" /> { - RightPanelStore.instance.pushCard({ + const threadViewCard = { phase: RightPanelPhases.ThreadView, state: { threadHeadEvent: rootEvent, initialEvent, isInitialEventHighlighted: highlighted, }, - }); + }; + if (push) { + RightPanelStore.instance.pushCard(threadViewCard); + } else { + RightPanelStore.instance.setCards([ + { phase: RightPanelPhases.ThreadPanel }, + threadViewCard, + ]); + } }; -export const dispatchShowThreadsPanelEvent = () => { +export const showThreadPanel = () => { RightPanelStore.instance.setCard({ phase: RightPanelPhases.ThreadPanel }); }; From 47ecf3127c1f623ac7c1cec170a6b880ea191460 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 20 Dec 2021 12:13:04 +0100 Subject: [PATCH 070/103] linter --- src/components/structures/FilePanel.tsx | 1 - src/components/views/rooms/MemberList.tsx | 1 - src/i18n/strings/en_EN.json | 5 +++-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index 67f849b7d2a..c77734db396 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -27,7 +27,6 @@ import { logger } from "matrix-js-sdk/src/logger"; import { MatrixClientPeg } from '../../MatrixClientPeg'; import EventIndexPeg from "../../indexing/EventIndexPeg"; import { _t } from '../../languageHandler'; -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/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 66042f30b84..3d88b366d43 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -33,7 +33,6 @@ import { isValid3pidInvite } from "../../../RoomInvite"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore"; import BaseCard from "../right_panel/BaseCard"; -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/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2851a8ce5f2..c522871c17a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -843,6 +843,9 @@ "%(senderName)s: %(message)s": "%(senderName)s: %(message)s", "%(senderName)s: %(reaction)s": "%(senderName)s: %(reaction)s", "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s", + "All threads": "All threads", + "Chat": "Chat", + "Info": "Info", "Change notification settings": "Change notification settings", "Messaging": "Messaging", "Profile": "Profile", @@ -1919,7 +1922,6 @@ "Nothing pinned, yet": "Nothing pinned, yet", "If you have permissions, open the menu on any message and select Pin to stick them here.": "If you have permissions, open the menu on any message and select Pin to stick them here.", "Pinned messages": "Pinned messages", - "Chat": "Chat", "Threads": "Threads", "Room Info": "Room Info", "You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets", @@ -3121,7 +3123,6 @@ "We'll create rooms for each of them. You can add more later too, including already existing ones.": "We'll create rooms for each of them. You can add more later too, including already existing ones.", "My threads": "My threads", "Shows all threads you've participated in": "Shows all threads you've participated in", - "All threads": "All threads", "Shows all threads from current room": "Shows all threads from current room", "Show:": "Show:", "Keep discussions organised with threads": "Keep discussions organised with threads", From e1068aac3191bdad48a9d57baac72c10e04ceeaa Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 20 Dec 2021 13:16:55 +0100 Subject: [PATCH 071/103] review fixes (ryan and jano) --- src/components/views/avatars/MemberAvatar.tsx | 13 +++---------- src/components/views/right_panel/BaseCard.tsx | 2 +- .../views/right_panel/GroupHeaderButtons.tsx | 1 - .../views/right_panel/RoomHeaderButtons.tsx | 16 +++++++++++----- src/components/views/rooms/MemberTile.tsx | 1 + src/i18n/strings/en_EN.json | 11 ++++++++--- src/stores/right-panel/RightPanelStore.ts | 2 +- src/stores/right-panel/RightPanelStorePhases.ts | 8 +++++--- 8 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 3b90201267d..798b1faa41d 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -99,21 +99,14 @@ export default class MemberAvatar extends React.Component { const userId = member ? member.userId : fallbackUserId; if (viewUserOnClick) { - const onClickPush = () => { - RightPanelStore.instance.pushCard({ - phase: RightPanelPhases.RoomMemberInfo, - state: { member: this.props.member }, - }); - }; - - const onClickSet = () => { + const onClickFunc = () => { dis.dispatch({ action: Action.ViewUser, member: this.props.member, + push: this.context.isCard, }); }; - - onClick = (this.context.isCard) ? onClickPush : onClickSet; + onClick = onClickFunc; } return ( diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 21410667538..13c4f9d1a66 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -62,7 +62,7 @@ const BaseCard: React.FC = ({ const onBackClick = () => { RightPanelStore.instance.popCard(); }; - const label = labelForPhase(prevCard.phase) ?? _t("Back"); + const label = labelForPhase(prevCard.phase) ? (_t("Back to ") + labelForPhase(prevCard.phase)) : _t("Back"); backButton = ; } diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx index 5191828bc07..525f584c2a4 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.tsx +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -54,7 +54,6 @@ export default class GroupHeaderButtons extends HeaderButtons { { phase: RightPanelPhases.GroupMemberList }, { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } }, ]); - // this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member }); } else { this.setPhase(RightPanelPhases.GroupMemberList); } diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index f50bb4d5414..4fa6c5585f1 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -154,11 +154,17 @@ export default class RoomHeaderButtons extends HeaderButtons { protected onAction(payload: ActionPayload) { if (payload.action === Action.ViewUser) { if (payload.member) { - RightPanelStore.instance.setCards([ - { phase: RightPanelPhases.RoomMemberList }, - { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } }, - ]); - // this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member }); + if (payload.push) { + RightPanelStore.instance.pushCard( + { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } }, + ); + } else { + RightPanelStore.instance.setCards([ + { phase: RightPanelPhases.RoomSummary }, + { phase: RightPanelPhases.RoomMemberList }, + { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } }, + ]); + } } else { this.setPhase(RightPanelPhases.RoomMemberList); } diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx index 792e4b75ad6..a29db091a8f 100644 --- a/src/components/views/rooms/MemberTile.tsx +++ b/src/components/views/rooms/MemberTile.tsx @@ -199,6 +199,7 @@ export default class MemberTile extends React.Component { dis.dispatch({ action: Action.ViewUser, member: this.props.member, + push: true, }); }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c522871c17a..c32b81cbd02 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -843,9 +843,11 @@ "%(senderName)s: %(message)s": "%(senderName)s: %(message)s", "%(senderName)s: %(reaction)s": "%(senderName)s: %(reaction)s", "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s", - "All threads": "All threads", - "Chat": "Chat", - "Info": "Info", + "all threads": "all threads", + "chat": "chat", + "info": "info", + "member list": "member list", + "thread": "thread", "Change notification settings": "Change notification settings", "Messaging": "Messaging", "Profile": "Profile", @@ -1902,6 +1904,7 @@ "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.", "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.", "URL Previews": "URL Previews", + "Back to ": "Back to ", "Back": "Back", "To proceed, please accept the verification request on your other login.": "To proceed, please accept the verification request on your other login.", "Waiting for %(displayName)s to accept…": "Waiting for %(displayName)s to accept…", @@ -1922,6 +1925,7 @@ "Nothing pinned, yet": "Nothing pinned, yet", "If you have permissions, open the menu on any message and select Pin to stick them here.": "If you have permissions, open the menu on any message and select Pin to stick them here.", "Pinned messages": "Pinned messages", + "Chat": "Chat", "Threads": "Threads", "Room Info": "Room Info", "You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets", @@ -3123,6 +3127,7 @@ "We'll create rooms for each of them. You can add more later too, including already existing ones.": "We'll create rooms for each of them. You can add more later too, including already existing ones.", "My threads": "My threads", "Shows all threads you've participated in": "Shows all threads you've participated in", + "All threads": "All threads", "Shows all threads from current room": "Shows all threads from current room", "Show:": "Show:", "Keep discussions organised with threads": "Keep discussions organised with threads", diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index c302abf4a74..707f26c8535 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -172,7 +172,7 @@ export default class RightPanelStore extends ReadyWatchingStore { public setCards(cards: IRightPanelCard[], allowClose = true, roomId: string = null) { const rId = roomId ?? this.viewedRoomId; - const history = cards.map(c => {return { phase: c.phase, state: c.state ?? {} };}); + const history = cards.map(c => ({ phase: c.phase, state: c.state ?? {} })); this.byRoom[rId] = { history, isOpen: true }; this.emitAndUpdateSettings(); } diff --git a/src/stores/right-panel/RightPanelStorePhases.ts b/src/stores/right-panel/RightPanelStorePhases.ts index 71d5da4d9d2..d07fbcf9f68 100644 --- a/src/stores/right-panel/RightPanelStorePhases.ts +++ b/src/stores/right-panel/RightPanelStorePhases.ts @@ -48,9 +48,11 @@ export enum RightPanelPhases { export function labelForPhase(phase: RightPanelPhases) { switch (phase) { - case RightPanelPhases.ThreadPanel: return _t("All threads"); - case RightPanelPhases.Timeline: return _t("Chat"); - case RightPanelPhases.RoomSummary: return _t("Info"); + case RightPanelPhases.ThreadPanel: return _t("all threads"); + case RightPanelPhases.Timeline: return _t("chat"); + case RightPanelPhases.RoomSummary: return _t("info"); + case RightPanelPhases.RoomMemberList: return _t("member list"); + case RightPanelPhases.ThreadView: return _t("thread"); } return null; } From 0e60e32a32beb6f0b68df20882b7b3a28fc7f197 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 20 Dec 2021 13:24:35 +0100 Subject: [PATCH 072/103] linter and code cleanup --- src/components/views/avatars/MemberAvatar.tsx | 5 +---- src/components/views/right_panel/GroupHeaderButtons.tsx | 1 + 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 798b1faa41d..dfd526b1a29 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -26,8 +26,6 @@ import BaseAvatar from "./BaseAvatar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { mediaFromMxc } from "../../../customisations/Media"; import { CardContext } from '../right_panel/BaseCard'; -import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; -import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases'; interface IProps extends Omit, "name" | "idName" | "url"> { member: RoomMember; @@ -99,14 +97,13 @@ export default class MemberAvatar extends React.Component { const userId = member ? member.userId : fallbackUserId; if (viewUserOnClick) { - const onClickFunc = () => { + onClick = () => { dis.dispatch({ action: Action.ViewUser, member: this.props.member, push: this.context.isCard, }); }; - onClick = onClickFunc; } return ( diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx index 525f584c2a4..e2f3779c4c3 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.tsx +++ b/src/components/views/right_panel/GroupHeaderButtons.tsx @@ -51,6 +51,7 @@ export default class GroupHeaderButtons extends HeaderButtons { if (payload.action === Action.ViewUser) { if ((payload as ViewUserPayload).member) { RightPanelStore.instance.setCards([ + { phase: RightPanelPhases.GroupRoomInfo }, { phase: RightPanelPhases.GroupMemberList }, { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } }, ]); From 5c826905a8a6555e394434634ae5241765e46e55 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 20 Dec 2021 13:42:35 +0100 Subject: [PATCH 073/103] fix loading of settings for all rooms --- src/stores/right-panel/RightPanelStore.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 707f26c8535..1ead2c98f74 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -15,7 +15,6 @@ 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'; @@ -62,7 +61,7 @@ export default class RightPanelStore extends ReadyWatchingStore { private viewedRoomId: string; private isViewingRoom?: boolean; private dispatcherRefRightPanelStore: string; - private roomStoreToken: EventSubscription; + private isReady = false; private global?: IRightPanelForRoom = null; private byRoom: { @@ -75,6 +74,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onReady(): Promise { + this.isReady = true; // 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(); @@ -88,9 +88,7 @@ export default class RightPanelStore extends ReadyWatchingStore { } protected async onNotReady(): Promise { - if (this.roomStoreToken) { - this.roomStoreToken.remove(); - } + this.isReady = false; // TODO RightPanelStore (will be addressed when dropping groups): User this instead of the dispatcher. // RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate); } @@ -338,9 +336,9 @@ 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) { - // 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 + if (_this.isReady) { + // we need the client to be ready to get the events form the ids of the settings + // the loading will be done in the onReady function (to catch up with the changes done here before it was ready) // all the logic in this case is not necessary anymore as soon as groups are dropped and we use: onRoomViewStoreUpdate _this.loadCacheFromSettings(); _this.emitAndUpdateSettings(); From 697b8b34a81c69da9657281212d01c677e7bdf7b Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 27 Dec 2021 11:29:16 +0100 Subject: [PATCH 074/103] fix back label --- src/components/views/right_panel/BaseCard.tsx | 4 ++-- src/stores/right-panel/RightPanelStorePhases.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 13c4f9d1a66..8226b420726 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -21,7 +21,7 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; import RightPanelStore from '../../../stores/right-panel/RightPanelStore'; -import { labelForPhase } from '../../../stores/right-panel/RightPanelStorePhases'; +import { backLabelForPhase } from '../../../stores/right-panel/RightPanelStorePhases'; export const CardContext = React.createContext({ isCard: false }); interface IProps { @@ -62,7 +62,7 @@ const BaseCard: React.FC = ({ const onBackClick = () => { RightPanelStore.instance.popCard(); }; - const label = labelForPhase(prevCard.phase) ? (_t("Back to ") + labelForPhase(prevCard.phase)) : _t("Back"); + const label = backLabelForPhase(prevCard.phase) ?? _t("Back"); backButton = ; } diff --git a/src/stores/right-panel/RightPanelStorePhases.ts b/src/stores/right-panel/RightPanelStorePhases.ts index d07fbcf9f68..330a10abe79 100644 --- a/src/stores/right-panel/RightPanelStorePhases.ts +++ b/src/stores/right-panel/RightPanelStorePhases.ts @@ -46,13 +46,13 @@ export enum RightPanelPhases { ThreadPanel = "ThreadPanel", } -export function labelForPhase(phase: RightPanelPhases) { +export function backLabelForPhase(phase: RightPanelPhases) { switch (phase) { - case RightPanelPhases.ThreadPanel: return _t("all threads"); - case RightPanelPhases.Timeline: return _t("chat"); - case RightPanelPhases.RoomSummary: return _t("info"); - case RightPanelPhases.RoomMemberList: return _t("member list"); - case RightPanelPhases.ThreadView: return _t("thread"); + case RightPanelPhases.ThreadPanel: return _t("Back to all threads"); + case RightPanelPhases.Timeline: return _t("Back to chat"); + case RightPanelPhases.RoomSummary: return _t("Room information"); + case RightPanelPhases.RoomMemberList: return _t("Room members"); + case RightPanelPhases.ThreadView: return _t("Back to thread"); } return null; } From 0d7bbbe83b1eb29e10f746c7bd578643d2fa75ad Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 27 Dec 2021 11:47:20 +0100 Subject: [PATCH 075/103] i18n --- src/i18n/strings/en_EN.json | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c32b81cbd02..d2943b4144b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -843,11 +843,11 @@ "%(senderName)s: %(message)s": "%(senderName)s: %(message)s", "%(senderName)s: %(reaction)s": "%(senderName)s: %(reaction)s", "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s", - "all threads": "all threads", - "chat": "chat", - "info": "info", - "member list": "member list", - "thread": "thread", + "Back to all threads": "Back to all threads", + "Back to chat": "Back to chat", + "Room information": "Room information", + "Room members": "Room members", + "Back to thread": "Back to thread", "Change notification settings": "Change notification settings", "Messaging": "Messaging", "Profile": "Profile", @@ -1511,7 +1511,6 @@ "this room": "this room", "View older messages in %(roomName)s.": "View older messages in %(roomName)s.", "Space information": "Space information", - "Room information": "Room information", "Internal room ID:": "Internal room ID:", "Room version": "Room version", "Room version:": "Room version:", @@ -1904,7 +1903,6 @@ "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.", "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.", "URL Previews": "URL Previews", - "Back to ": "Back to ", "Back": "Back", "To proceed, please accept the verification request on your other login.": "To proceed, please accept the verification request on your other login.", "Waiting for %(displayName)s to accept…": "Waiting for %(displayName)s to accept…", From 57ee4d49114ff2a51641593d2941adc08e6e2602 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 17:20:43 +0100 Subject: [PATCH 076/103] 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 077/103] 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 078/103] 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 15f11cd8246626c66ddc83abc99e40f1d157a754 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 20:20:51 +0100 Subject: [PATCH 079/103] remove toggle from setCard - this simplifies the setCard and makes it behave like the name implies - the toggle is now handled in the header button class manually --- .../views/right_panel/HeaderButtons.tsx | 8 +++++++- src/stores/right-panel/RightPanelStore.ts | 16 ++-------------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index cc3af0f7c08..4bcd9c519ff 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -71,7 +71,13 @@ export default abstract class HeaderButtons

extends React.Component) { - RightPanelStore.instance.setCard({ phase, state: cardState }); + const rps = RightPanelStore.instance; + if (rps.currentCard.phase == phase && !cardState && rps.isOpenForRoom) { + rps.togglePanel(); + } else { + RightPanelStore.instance.setCard({ phase, state: cardState }); + if (!rps.isOpenForRoom) rps.togglePanel(); + } } public isPhase(phases: string | string[]) { diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 73592d4e429..e79adf88ee2 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -138,8 +138,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // Setters 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 + // This function behaves as following: // 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(card); @@ -148,18 +147,7 @@ export default class RightPanelStore extends ReadyWatchingStore { // Checks for wrong SetRightPanelPhase requests if (!this.isPhaseActionIsValid(targetPhase)) return; - - 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 - // - does not contain any state information (state) - this.togglePanel(rId); - return; - } else if ((targetPhase === this.currentCardForRoom(rId)?.phase && !!cardState)) { + 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 = cardState; From ea0fca3c1259815f240d06639bc34d4e67a6de45 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 20:23:19 +0100 Subject: [PATCH 080/103] update and fix the verification flows. Allow to reload the page during verification. This changes the history, so that the back button behaves the same as it does right now. --- .../messages/MKeyVerificationRequest.tsx | 9 +++--- .../views/right_panel/EncryptionPanel.tsx | 11 ++++--- src/components/views/right_panel/UserInfo.tsx | 2 +- .../views/toasts/VerificationRequestToast.tsx | 16 +++++----- src/stores/right-panel/RightPanelStore.ts | 1 + src/verification.ts | 30 +++++++++++-------- 6 files changed, 40 insertions(+), 29 deletions(-) diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index 0361258833c..0243ea02000 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -51,10 +51,11 @@ export default class MKeyVerificationRequest extends React.Component { private openRequest = () => { const { verificationRequest } = this.props.mxEvent; const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId); - RightPanelStore.instance.setCard({ - phase: RightPanelPhases.EncryptionPanel, - state: { verificationRequest, member }, - }); + RightPanelStore.instance.setCards([ + { phase: RightPanelPhases.RoomSummary }, + { phase: RightPanelPhases.RoomMemberInfo, state: { member } }, + { phase: RightPanelPhases.EncryptionPanel, state: { verificationRequest, member } }, + ]); }; private onRequestChanged = () => { diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index a87c3c925d0..bf8a6a0ac7e 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -116,10 +116,13 @@ const EncryptionPanel: React.FC = (props: IProps) => { setRequest(verificationRequest_); setPhase(verificationRequest_.phase); // Notify the RightPanelStore about this - RightPanelStore.instance.setCard({ - phase: RightPanelPhases.EncryptionPanel, - state: { member, verificationRequest: verificationRequest_ }, - }); + if (RightPanelStore.instance.currentCard.phase != RightPanelPhases.EncryptionPanel) { + RightPanelStore.instance.pushCard({ + phase: RightPanelPhases.EncryptionPanel, + state: { member, verificationRequest: verificationRequest_ }, + }); + } + if (!RightPanelStore.instance.isOpenForRoom) {RightPanelStore.instance.togglePanel();} }, [member]); const requested = diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 5a25f68e63d..d7911fc9d63 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1659,7 +1659,7 @@ const UserInfo: React.FC = ({ } const onEncryptionPanelClose = () => { - RightPanelStore.instance.togglePanel(); + RightPanelStore.instance.popCard(); }; let content; diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index 3239c8d1e89..5f2c019beb0 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -115,14 +115,14 @@ export default class VerificationRequestToast extends React.PureComponent (card.phase == RightPanelPhases.RoomSummary))) { + RightPanelStore.instance.pushCard( + { phase: RightPanelPhases.EncryptionPanel, state }, + ); + } else { + RightPanelStore.instance.setCards([ + { phase: RightPanelPhases.RoomSummary }, + { phase: RightPanelPhases.RoomMemberInfo, state: { member: state.member } }, + { phase: RightPanelPhases.EncryptionPanel, state }, + ]); + } } export function pendingVerificationRequestForUser(user: User | RoomMember | GroupMember ) { From 3c7068ca3112c04ebf561500f3078d06950b35ad Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 20:28:51 +0100 Subject: [PATCH 081/103] remove unecassary `as` operators --- src/stores/right-panel/RightPanelStoreIPanelState.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 37da38364fc..4ba3a445fd4 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -110,8 +110,8 @@ export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCard delete panelStateThisRoomStored.verificationRequestPromise; delete panelStateThisRoomStored.member; - const storedCard = { state: panelStateThisRoomStored as IRightPanelCardStored, phase: panelState.phase }; - return storedCard as IRightPanelCardStored; + const storedCard = { state: panelStateThisRoomStored, phase: panelState.phase }; + return storedCard; } function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): IRightPanelCard { @@ -133,5 +133,5 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): delete panelStateThisRoom.memberInfoEventId; delete panelStateThisRoom.memberId; - return { state: panelStateThisRoom as IRightPanelCardState, phase: panelStateStore.phase } as IRightPanelCard; + return { state: panelStateThisRoom, phase: panelStateStore.phase }; } From ba0e359267a2905296d7677db291c16efb7fabaa Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 20:37:15 +0100 Subject: [PATCH 082/103] review: showThread function signature --- src/components/structures/RoomView.tsx | 20 +++++++++---------- .../views/messages/MessageActionBar.tsx | 2 +- src/components/views/rooms/EventTile.tsx | 6 +++--- src/dispatcher/dispatch-actions/threads.ts | 19 +++++++++--------- 4 files changed, 24 insertions(+), 23 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 81c01b64826..4d6dbea41d6 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -423,21 +423,21 @@ export class RoomView extends React.Component { const thread = initialEvent?.getThread(); if (thread && !initialEvent?.isThreadRoot) { - showThread( - thread.rootEvent, - initialEvent, - RoomViewStore.isInitialEventHighlighted(), - ); + showThread({ + rootEvent: thread.rootEvent, + initialEvent: initialEvent, + highlighted: RoomViewStore.isInitialEventHighlighted(), + }); } else { newState.initialEventId = initialEventId; newState.isInitialEventHighlighted = RoomViewStore.isInitialEventHighlighted(); if (thread && initialEvent?.isThreadRoot) { - showThread( - thread.rootEvent, - initialEvent, - RoomViewStore.isInitialEventHighlighted(), - ); + showThread({ + rootEvent: thread.rootEvent, + initialEvent: initialEvent, + highlighted: RoomViewStore.isInitialEventHighlighted(), + }); } } } diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index d92ef4fc1cb..6213e3b050b 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -221,7 +221,7 @@ export default class MessageActionBar extends React.PureComponent { - showThread(this.props.mxEvent, undefined, undefined, isCard); + showThread({ rootEvent: this.props.mxEvent, push: isCard }); dis.dispatch({ action: Action.FocusSendMessageComposer, context: TimelineRenderingType.Thread, diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index c73876754c9..1922689a1fb 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -676,7 +676,7 @@ export default class EventTile extends React.Component {

{ - showThread(this.props.mxEvent, undefined, undefined, context.isCard); + showThread({ rootEvent: this.props.mxEvent, push: context.isCard }); }} > @@ -1420,7 +1420,7 @@ export default class EventTile extends React.Component { { avatar }
showThread(this.props.mxEvent, undefined, undefined, true)} + onClick={() => showThread({ rootEvent: this.props.mxEvent, push: true })} key="mx_EventTile_line" > { linkedTimestamp } @@ -1434,7 +1434,7 @@ export default class EventTile extends React.Component { showThread(this.props.mxEvent, undefined, undefined, true)} + onClick={() => showThread({ rootEvent: this.props.mxEvent, push: true })} key="thread" /> { +export const showThread = (props: { + rootEvent: MatrixEvent; + initialEvent?: MatrixEvent; + highlighted?: boolean; + push?: boolean; +}) => { + const push = props.push ?? false; const threadViewCard = { phase: RightPanelPhases.ThreadView, state: { - threadHeadEvent: rootEvent, - initialEvent, - isInitialEventHighlighted: highlighted, + threadHeadEvent: props.rootEvent, + initialEvent: props.initialEvent, + isInitialEventHighlighted: props.highlighted, }, }; if (push) { From 9880667edb3dbf87d324f7afa8fa5b17e9f1a77f Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 20:39:52 +0100 Subject: [PATCH 083/103] der linter der linter man denkt oft jetzt spinnt er das ist nie der fall und ich committe nochmal --- 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 4ba3a445fd4..d8bc08a999d 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 dcfe2f6b31fbfbf32e74c4bedbe2283264b6440c Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 4 Jan 2022 20:42:09 +0100 Subject: [PATCH 084/103] 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 8bdca7ae258c5238150f072a8b848c43d03986d7 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 5 Jan 2022 10:33:44 +0100 Subject: [PATCH 085/103] Update src/components/structures/RoomView.tsx Co-authored-by: J. Ryan Stinnett --- src/components/structures/RoomView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 4d6dbea41d6..c1214ed2d4a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -425,7 +425,7 @@ export class RoomView extends React.Component { if (thread && !initialEvent?.isThreadRoot) { showThread({ rootEvent: thread.rootEvent, - initialEvent: initialEvent, + initialEvent, highlighted: RoomViewStore.isInitialEventHighlighted(), }); } else { From 1824701be2143e16481f7b3b6c3cc4876a255187 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 5 Jan 2022 10:33:58 +0100 Subject: [PATCH 086/103] Update src/components/structures/RoomView.tsx Co-authored-by: J. Ryan Stinnett --- src/components/structures/RoomView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index c1214ed2d4a..9baeec642a4 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -435,7 +435,7 @@ export class RoomView extends React.Component { if (thread && initialEvent?.isThreadRoot) { showThread({ rootEvent: thread.rootEvent, - initialEvent: initialEvent, + initialEvent, highlighted: RoomViewStore.isInitialEventHighlighted(), }); } From 6572947f8ce7b68c00ce95818057837f569f577a Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 5 Jan 2022 10:34:06 +0100 Subject: [PATCH 087/103] Update src/components/views/right_panel/EncryptionPanel.tsx Co-authored-by: J. Ryan Stinnett --- src/components/views/right_panel/EncryptionPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index bf8a6a0ac7e..a5e34ad94e9 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -122,7 +122,7 @@ const EncryptionPanel: React.FC = (props: IProps) => { state: { member, verificationRequest: verificationRequest_ }, }); } - if (!RightPanelStore.instance.isOpenForRoom) {RightPanelStore.instance.togglePanel();} + if (!RightPanelStore.instance.isOpenForRoom) RightPanelStore.instance.togglePanel(); }, [member]); const requested = From 6f267c38157e6966cc1e51d3fef4ca76b87787ae Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 5 Jan 2022 10:34:33 +0100 Subject: [PATCH 088/103] Update src/components/views/toasts/VerificationRequestToast.tsx Co-authored-by: J. Ryan Stinnett --- .../views/toasts/VerificationRequestToast.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index 5f2c019beb0..a90727f038d 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -116,13 +116,15 @@ export default class VerificationRequestToast extends React.PureComponent Date: Wed, 5 Jan 2022 10:34:57 +0100 Subject: [PATCH 089/103] Update src/verification.ts Co-authored-by: J. Ryan Stinnett --- src/verification.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/verification.ts b/src/verification.ts index bc023b6d976..80747e3b005 100644 --- a/src/verification.ts +++ b/src/verification.ts @@ -111,7 +111,7 @@ export async function verifyUser(user: User) { } function setRightPanel(state: IRightPanelCardState) { - if (RightPanelStore.instance.roomPhaseHistory.some((card)=> (card.phase == RightPanelPhases.RoomSummary))) { + if (RightPanelStore.instance.roomPhaseHistory.some((card) => (card.phase == RightPanelPhases.RoomSummary))) { RightPanelStore.instance.pushCard( { phase: RightPanelPhases.EncryptionPanel, state }, ); From cfdbfbb908f89d2c60b7219cd130e7008d0d65de Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 11:58:45 +0100 Subject: [PATCH 090/103] 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 32795b9e98577153508d5b9ba8aebe7abcd5a7e9 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 12:16:26 +0100 Subject: [PATCH 091/103] some more cleanup --- src/stores/right-panel/RightPanelStore.ts | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 27ab9bb124e..54417d7a2e8 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -146,7 +146,7 @@ export default class RightPanelStore extends ReadyWatchingStore { const cardState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state); // Checks for wrong SetRightPanelPhase requests - if (!this.isPhaseActionIsValid(targetPhase)) return; + if (!this.isPhaseActionValid(targetPhase)) return; 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 ?? []; @@ -177,7 +177,7 @@ export default class RightPanelStore extends ReadyWatchingStore { const pState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state); // Checks for wrong SetRightPanelPhase requests - if (!this.isPhaseActionIsValid(targetPhase)) return; + if (!this.isPhaseActionValid(targetPhase)) return; let roomCache = this.byRoom[rId]; if (!!roomCache) { @@ -227,10 +227,6 @@ 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); @@ -248,10 +244,8 @@ export default class RightPanelStore extends ReadyWatchingStore { } private setRightPanelCache(card: IRightPanelCard, roomId?: string) { - this.byRoom[roomId ?? this.viewedRoomId] = { - history: [{ phase: card.phase, state: card.state ?? {} }], - isOpen: true, - }; + const history = [{ phase: card.phase, state: card.state ?? {} }]; + this.byRoom[roomId ?? this.viewedRoomId] = { history, isOpen: true }; this.emitAndUpdateSettings(); } @@ -273,7 +267,7 @@ export default class RightPanelStore extends ReadyWatchingStore { return null; } - private isPhaseActionIsValid(targetPhase) { + private isPhaseActionValid(targetPhase) { if (!RightPanelPhases[targetPhase]) { logger.warn(`Tried to switch right panel to unknown phase: ${targetPhase}`); return false; From 056c0d0c93a45f5563b7523b542174de82a1ac06 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 12:25:31 +0100 Subject: [PATCH 092/103] 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 89e0dc12537ce569038b7b3ebc544b24481ae632 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 12:30:03 +0100 Subject: [PATCH 093/103] remove more code because toggle on setCard is disabled --- 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 54417d7a2e8..b0e9160c1de 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -30,7 +30,6 @@ import { convertToStatePanel, convertToStorePanel, IRightPanelForRoom, - convertCardToStore, } from './RightPanelStoreIPanelState'; import { MatrixClientPeg } from "../../MatrixClientPeg"; // import RoomViewStore from '../RoomViewStore'; From 7b8c88f29ea95a5d5e6970fbf4fe8ee8257a001d Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 12:32:07 +0100 Subject: [PATCH 094/103] 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 6aebe0eec9b84e475ecab59015a8114fe8d3fda2 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 12:56:19 +0100 Subject: [PATCH 095/103] _t(Back to threads) -> _t(Threads) --- src/i18n/strings/en_EN.json | 3 +-- src/stores/right-panel/RightPanelStorePhases.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index bbb4876ac6a..b3235413ca8 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -843,7 +843,7 @@ "%(senderName)s: %(message)s": "%(senderName)s: %(message)s", "%(senderName)s: %(reaction)s": "%(senderName)s: %(reaction)s", "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s", - "Back to all threads": "Back to all threads", + "Threads": "Threads", "Back to chat": "Back to chat", "Room information": "Room information", "Room members": "Room members", @@ -1924,7 +1924,6 @@ "If you have permissions, open the menu on any message and select Pin to stick them here.": "If you have permissions, open the menu on any message and select Pin to stick them here.", "Pinned messages": "Pinned messages", "Chat": "Chat", - "Threads": "Threads", "Room Info": "Room Info", "You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets", "Maximise widget": "Maximise widget", diff --git a/src/stores/right-panel/RightPanelStorePhases.ts b/src/stores/right-panel/RightPanelStorePhases.ts index 330a10abe79..10e7b64918a 100644 --- a/src/stores/right-panel/RightPanelStorePhases.ts +++ b/src/stores/right-panel/RightPanelStorePhases.ts @@ -48,7 +48,7 @@ export enum RightPanelPhases { export function backLabelForPhase(phase: RightPanelPhases) { switch (phase) { - case RightPanelPhases.ThreadPanel: return _t("Back to all threads"); + case RightPanelPhases.ThreadPanel: return _t("Threads"); case RightPanelPhases.Timeline: return _t("Back to chat"); case RightPanelPhases.RoomSummary: return _t("Room information"); case RightPanelPhases.RoomMemberList: return _t("Room members"); From 6f092c4749971eb29b8bd5a79a06f13b0d318d2a Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 13:14:12 +0100 Subject: [PATCH 096/103] 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 097/103] 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 098/103] 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 Date: Wed, 5 Jan 2022 14:27:36 +0100 Subject: [PATCH 099/103] refactor store card conversions (no more `as` casts) --- .../right-panel/RightPanelStoreIPanelState.ts | 71 ++++++++----------- 1 file changed, 29 insertions(+), 42 deletions(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index d8bc08a999d..791806c8083 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -89,48 +89,35 @@ export function convertToStatePanel(storeRoom: IRightPanelForRoomStored, room: R } export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCardStored { - const panelStateThisRoomStored = { ...panelState.state } as any; - 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(); - } - 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, phase: panelState.phase }; - return storedCard; + const state = panelState.state ?? {}; + const stateStored: IRightPanelCardStateStored = { + groupId: state.groupId, + groupRoomId: state.groupRoomId, + widgetId: state.widgetId, + spaceId: state.spaceId, + isInitialEventHighlighted: state.isInitialEventHighlighted, + threadHeadEventId: !!state?.threadHeadEvent?.getId() ? panelState.state.threadHeadEvent.getId() : undefined, + memberInfoEventId: !!state?.memberInfoEvent?.getId() ? panelState.state.memberInfoEvent.getId() : undefined, + initialEventId: !!state?.initialEvent?.getId() ? panelState.state.initialEvent.getId() : undefined, + memberId: !!state?.member?.userId ? panelState.state.member.userId : undefined, + }; + + return { state: stateStored, phase: panelState.phase }; } function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): IRightPanelCard { - const panelStateThisRoom = { ...panelStateStore?.state } as any; - 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); - } - if (!!panelStateThisRoom.memberId) { - panelStateThisRoom.member = room.getMember(panelStateThisRoom.memberId); - } - delete panelStateThisRoom.threadHeadEventId; - delete panelStateThisRoom.initialEventId; - delete panelStateThisRoom.memberInfoEventId; - delete panelStateThisRoom.memberId; - - return { state: panelStateThisRoom, phase: panelStateStore.phase }; -} + const stateStored = panelStateStore.state ?? {}; + const state: IRightPanelCardState = { + groupId: stateStored.groupId, + groupRoomId: stateStored.groupRoomId, + widgetId: stateStored.widgetId, + spaceId: stateStored.spaceId, + isInitialEventHighlighted: stateStored.isInitialEventHighlighted, + threadHeadEvent: !!stateStored?.threadHeadEventId ? room.findEventById(stateStored.threadHeadEventId) : undefined, + memberInfoEvent: !!stateStored?.memberInfoEventId ? room.findEventById(stateStored.memberInfoEventId) : undefined, + initialEvent: !!stateStored?.initialEventId ? room.findEventById(stateStored.initialEventId) : undefined, + member: !!stateStored?.memberId ? room.getMember(stateStored.memberId) : undefined, + }; + + return { state: state, phase: panelStateStore.phase }; +} \ No newline at end of file From 7154e00861c976fbe1169894e9b5e7220f2e86eb Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 14:36:42 +0100 Subject: [PATCH 100/103] lines too long --- .../right-panel/RightPanelStoreIPanelState.ts | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts index 791806c8083..203d6071cff 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -96,10 +96,14 @@ export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCard widgetId: state.widgetId, spaceId: state.spaceId, isInitialEventHighlighted: state.isInitialEventHighlighted, - threadHeadEventId: !!state?.threadHeadEvent?.getId() ? panelState.state.threadHeadEvent.getId() : undefined, - memberInfoEventId: !!state?.memberInfoEvent?.getId() ? panelState.state.memberInfoEvent.getId() : undefined, - initialEventId: !!state?.initialEvent?.getId() ? panelState.state.initialEvent.getId() : undefined, - memberId: !!state?.member?.userId ? panelState.state.member.userId : undefined, + threadHeadEventId: !!state?.threadHeadEvent?.getId() ? + panelState.state.threadHeadEvent.getId() : undefined, + memberInfoEventId: !!state?.memberInfoEvent?.getId() ? + panelState.state.memberInfoEvent.getId() : undefined, + initialEventId: !!state?.initialEvent?.getId() ? + panelState.state.initialEvent.getId() : undefined, + memberId: !!state?.member?.userId ? + panelState.state.member.userId : undefined, }; return { state: stateStored, phase: panelState.phase }; @@ -113,10 +117,14 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): widgetId: stateStored.widgetId, spaceId: stateStored.spaceId, isInitialEventHighlighted: stateStored.isInitialEventHighlighted, - threadHeadEvent: !!stateStored?.threadHeadEventId ? room.findEventById(stateStored.threadHeadEventId) : undefined, - memberInfoEvent: !!stateStored?.memberInfoEventId ? room.findEventById(stateStored.memberInfoEventId) : undefined, - initialEvent: !!stateStored?.initialEventId ? room.findEventById(stateStored.initialEventId) : undefined, - member: !!stateStored?.memberId ? room.getMember(stateStored.memberId) : undefined, + threadHeadEvent: !!stateStored?.threadHeadEventId ? + room.findEventById(stateStored.threadHeadEventId) : undefined, + memberInfoEvent: !!stateStored?.memberInfoEventId ? + room.findEventById(stateStored.memberInfoEventId) : undefined, + initialEvent: !!stateStored?.initialEventId ? + room.findEventById(stateStored.initialEventId) : undefined, + member: !!stateStored?.memberId ? + room.getMember(stateStored.memberId) : undefined, }; return { state: state, phase: panelStateStore.phase }; From 56b98277c640e60eef4f45e0db1abd0945fb5a42 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 15:30:52 +0100 Subject: [PATCH 101/103] l --- 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 203d6071cff..34fecf018d3 100644 --- a/src/stores/right-panel/RightPanelStoreIPanelState.ts +++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts @@ -128,4 +128,4 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): }; return { state: state, phase: panelStateStore.phase }; -} \ No newline at end of file +} From 33cfbefbd764be47812b4fe8314229bd6ef2885b Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 17:08:49 +0100 Subject: [PATCH 102/103] hotfix hiding right panel --- src/components/structures/RoomView.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 9baeec642a4..e2dc612a78d 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -337,6 +337,13 @@ 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.setCard({ phase: RightPanelPhases.Timeline }); + } else if ( + RightPanelStore.instance.isOpenForRoom && + RightPanelStore.instance.roomPhaseHistory.some(card => (card.phase === RightPanelPhases.Timeline)) + ) { + // hide chat in right panel when the widget is minimized + RightPanelStore.instance.setCard({phase: RightPanelPhases.RoomSummary}); + RightPanelStore.instance.togglePanel(); } this.checkWidgets(this.state.room); }; From 0e7c10f0e8e8d00bfc61f04c285e7c5f0ee4fb67 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 5 Jan 2022 17:16:08 +0100 Subject: [PATCH 103/103] linter --- src/components/structures/RoomView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index e2dc612a78d..acc5854c96f 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -338,11 +338,11 @@ export class RoomView extends React.Component { // Show chat in right panel when a widget is maximised RightPanelStore.instance.setCard({ phase: RightPanelPhases.Timeline }); } else if ( - RightPanelStore.instance.isOpenForRoom && + RightPanelStore.instance.isOpenForRoom && RightPanelStore.instance.roomPhaseHistory.some(card => (card.phase === RightPanelPhases.Timeline)) ) { // hide chat in right panel when the widget is minimized - RightPanelStore.instance.setCard({phase: RightPanelPhases.RoomSummary}); + RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }); RightPanelStore.instance.togglePanel(); } this.checkWidgets(this.state.room);