Move ViewUser action callback to RoomView

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<IRoomProps, IRoomState> {
                     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;
         }
     };
 

src/components/structures/SpaceRoomView.tsx

@@ -36,7 +36,6 @@ import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
 import { UIComponent } from "../../settings/UIFeature";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import RightPanelStore from "../../stores/right-panel/RightPanelStore";
-import { IRightPanelCard } from "../../stores/right-panel/RightPanelStoreIPanelState";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import {
@@ -672,25 +671,11 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
 
         if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return;
 
-        if (payload.action === Action.ViewUser && payload.member) {
-            const spaceMemberInfoCard: IRightPanelCard = {
-                phase: RightPanelPhases.SpaceMemberInfo,
-                state: { spaceId: this.props.space.roomId, member: payload.member },
-            };
-            if (payload.push) {
-                RightPanelStore.instance.pushCard(spaceMemberInfoCard);
-            } else {
-                RightPanelStore.instance.setCards([
-                    { phase: RightPanelPhases.SpaceMemberList, state: { spaceId: this.props.space.roomId } },
-                    spaceMemberInfoCard,
-                ]);
-            }
-        } else if (payload.action === "view_3pid_invite" && payload.event) {
-            RightPanelStore.instance.setCard({
-                phase: RightPanelPhases.Space3pidMemberInfo,
-                state: { spaceId: this.props.space.roomId, memberInfoEvent: payload.event },
-            });
-        } else {
+        /**
+         * The rest of the `ViewUser` and `view_3pid_invite` exists in the `<RoomView />`
+         * component. This deals specifically with showing the space members list
+         */
+        if (!payload.member && !payload.event) {
             RightPanelStore.instance.setCard({
                 phase: RightPanelPhases.SpaceMemberList,
                 state: { spaceId: this.props.space.roomId },

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<P = {}> extends React.Component<IPro
 
     public componentDidMount(): void {
         RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
-        this.dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses
     }
 
     public componentWillUnmount(): void {
@@ -68,18 +65,6 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
     }
 
-    protected abstract onAction(payload: ActionPayload): void;
-
-    public setPhase(phase: RightPanelPhases, cardState?: Partial<IRightPanelCardState>): 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)) {

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<IProps> {
         });
     };
 
-    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 => {

src/components/views/rooms/RoomHeader.tsx

@@ -28,7 +28,6 @@ import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 
 import { useRoomName } from "../../../hooks/useRoomName";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { useTopic } from "../../../hooks/room/useTopic";
 import { useAccountData } from "../../../hooks/useAccountData";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
@@ -46,6 +45,7 @@ import { placeCall } from "../../../utils/room/placeCall";
 import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import FacePile from "../elements/FacePile";
+import { setPhase } from "../../../utils/room/setPhase";
 import { useRoomState } from "../../../hooks/useRoomState";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { formatCount } from "../../../utils/FormattingUtils";
@@ -64,16 +64,6 @@ function notificationColorToIndicator(color: NotificationColor): React.Component
     }
 }
 
-/**
- * A helper to show or hide the right panel
- */
-function showOrHidePanel(phase: RightPanelPhases): void {
-    const rightPanel = RightPanelStore.instance;
-    rightPanel.isOpen && rightPanel.currentCard.phase === phase
-        ? rightPanel.togglePanel(null)
-        : rightPanel.setCard({ phase });
-}
-
 export default function RoomHeader({ room }: { room: Room }): JSX.Element {
     const client = useMatrixClientContext();
 
@@ -117,7 +107,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
             gap="var(--cpd-space-3x)"
             className="mx_RoomHeader light-panel"
             onClick={() => {
-                showOrHidePanel(RightPanelPhases.RoomSummary);
+                setPhase(RightPanelPhases.RoomSummary);
             }}
         >
             <RoomAvatar room={room} size="40px" />
@@ -197,7 +187,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                 <IconButton
                     indicator={notificationColorToIndicator(threadNotifications)}
                     onClick={() => {
-                        showOrHidePanel(RightPanelPhases.ThreadPanel);
+                        setPhase(RightPanelPhases.ThreadPanel);
                     }}
                     title={_t("common|threads")}
                 >
@@ -206,7 +196,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                 <IconButton
                     indicator={notificationColorToIndicator(globalNotificationState.color)}
                     onClick={() => {
-                        showOrHidePanel(RightPanelPhases.NotificationPanel);
+                        setPhase(RightPanelPhases.NotificationPanel);
                     }}
                     title={_t("Notifications")}
                 >
@@ -220,7 +210,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                     weight="medium"
                     aria-label={_t("%(count)s members", { count: memberCount })}
                     onClick={(e: React.MouseEvent) => {
-                        showOrHidePanel(RightPanelPhases.RoomMemberList);
+                        setPhase(RightPanelPhases.RoomMemberList);
                         e.stopPropagation();
                     }}
                 >

src/utils/room/setPhase.ts

@@ -0,0 +1,38 @@
+/*
+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 show a right panel phase.
+ * If the UI is already showing that phase, the right panel will be hidden.
+ *
+ * Calling the same phase twice with a different state will update the current
+ * phase and push the old state in the right panel history.
+ * @param phase The right panel phase.
+ * @param cardState The state within the phase.
+ */
+export function setPhase(phase: RightPanelPhases, cardState?: Partial<IRightPanelCardState>): 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);
+    }
+}