diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index e8521aee24..0eeb5e17da 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -129,6 +129,8 @@ import { WaitingForThirdPartyRoomView } from "./WaitingForThirdPartyRoomView"; import { isNotUndefined } from "../../Typeguards"; import { CancelAskToJoinPayload } from "../../dispatcher/payloads/CancelAskToJoinPayload"; import { SubmitAskToJoinPayload } from "../../dispatcher/payloads/SubmitAskToJoinPayload"; +import RightPanelStore from "../../stores/right-panel/RightPanelStore"; +import { setPhase } from "../../utils/room/setPhase"; const DEBUG = false; const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000; @@ -1251,6 +1253,31 @@ export class RoomView extends React.Component { this.messagePanel?.jumpToLiveTimeline(); } break; + case Action.ViewUser: + if (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 { + setPhase(RightPanelPhases.RoomMemberList); + } + break; + case "view_3pid_invite": + if (payload.event) { + setPhase(RightPanelPhases.Room3pidMemberInfo, { memberInfoEvent: payload.event }); + } else { + setPhase(RightPanelPhases.RoomMemberList); + } + break; } }; diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index d13eb5d2d7..0fe075332a 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -23,10 +23,8 @@ import React from "react"; import dis from "../../../dispatcher/dispatcher"; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; -import { IRightPanelCardState } from "../../../stores/right-panel/RightPanelStoreIPanelState"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; -import { ActionPayload } from "../../../dispatcher/payloads"; export enum HeaderKind { Room = "room", @@ -59,7 +57,6 @@ export default abstract class HeaderButtons

extends React.Component extends React.Component): void { - const rps = RightPanelStore.instance; - if (rps.currentCard.phase == phase && !cardState && rps.isOpen) { - rps.togglePanel(null); - } else { - RightPanelStore.instance.setCard({ phase, state: cardState }); - if (!rps.isOpen) rps.togglePanel(null); - } - } - public isPhase(phases: string | string[]): boolean { if (!RightPanelStore.instance.isOpen) return false; if (Array.isArray(phases)) { diff --git a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx index 2588764957..5364e30b6c 100644 --- a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx +++ b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx @@ -26,7 +26,6 @@ import { _t } from "../../../languageHandler"; import HeaderButton from "./HeaderButton"; import HeaderButtons, { HeaderKind } from "./HeaderButtons"; import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; -import { Action } from "../../../dispatcher/actions"; import { ActionPayload } from "../../../dispatcher/payloads"; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { useReadPinnedEvents, usePinnedEvents } from "./PinnedMessagesCard"; @@ -41,6 +40,7 @@ import { SummarizedNotificationState } from "../../../stores/notifications/Summa import PosthogTrackers from "../../../PosthogTrackers"; import { ButtonEvent } from "../elements/AccessibleButton"; import { doesRoomOrThreadHaveUnreadMessages } from "../../../Unread"; +import { setPhase } from "../../../utils/room/setPhase"; const ROOM_INFO_PHASES = [ RightPanelPhases.RoomSummary, @@ -203,59 +203,34 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { }); }; - protected onAction(payload: ActionPayload): void { - if (payload.action === Action.ViewUser) { - if (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); - } - } else if (payload.action === "view_3pid_invite") { - if (payload.event) { - this.setPhase(RightPanelPhases.Room3pidMemberInfo, { memberInfoEvent: payload.event }); - } else { - this.setPhase(RightPanelPhases.RoomMemberList); - } - } - } + protected onAction(payload: ActionPayload): void {} private onRoomSummaryClicked = (): void => { // use roomPanelPhase rather than this.state.phase as it remembers the latest one if we close const currentPhase = RightPanelStore.instance.currentCard.phase; if (currentPhase && ROOM_INFO_PHASES.includes(currentPhase)) { if (this.state.phase === currentPhase) { - this.setPhase(currentPhase); + setPhase(currentPhase); } else { - this.setPhase(currentPhase, RightPanelStore.instance.currentCard.state); + setPhase(currentPhase, RightPanelStore.instance.currentCard.state); } } else { // This toggles for us, if needed - this.setPhase(RightPanelPhases.RoomSummary); + setPhase(RightPanelPhases.RoomSummary); } }; private onNotificationsClicked = (): void => { // This toggles for us, if needed - this.setPhase(RightPanelPhases.NotificationPanel); + setPhase(RightPanelPhases.NotificationPanel); }; private onPinnedMessagesClicked = (): void => { // This toggles for us, if needed - this.setPhase(RightPanelPhases.PinnedMessages); + setPhase(RightPanelPhases.PinnedMessages); }; private onTimelineCardClicked = (): void => { - this.setPhase(RightPanelPhases.Timeline); + setPhase(RightPanelPhases.Timeline); }; private onThreadsPanelClicked = (ev: ButtonEvent): void => { diff --git a/src/utils/room/setPhase.ts b/src/utils/room/setPhase.ts new file mode 100644 index 0000000000..eb42209857 --- /dev/null +++ b/src/utils/room/setPhase.ts @@ -0,0 +1,34 @@ +/* +Copyright 2023 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 RightPanelStore from "../../stores/right-panel/RightPanelStore"; +import { IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState"; +import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; + +/** + * Helper to toggle a right panel view. + * @param phase The right panel phase. + * @param cardState The state within the phase. + */ +export function setPhase(phase: RightPanelPhases, cardState?: Partial): void { + const rps = RightPanelStore.instance; + if (rps.currentCard.phase == phase && !cardState && rps.isOpen) { + rps.togglePanel(null); + } else { + RightPanelStore.instance.setCard({ phase, state: cardState }); + if (!rps.isOpen) rps.togglePanel(null); + } +}