From b37a8089851bd4f38fb207eef2006e78a097ca81 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 31 Aug 2023 07:46:09 +0100 Subject: [PATCH 1/7] Move ViewUser action callback to RoomView --- src/components/structures/RoomView.tsx | 27 ++++++++++++ .../views/right_panel/HeaderButtons.tsx | 15 ------- .../right_panel/LegacyRoomHeaderButtons.tsx | 41 ++++--------------- src/utils/room/setPhase.ts | 34 +++++++++++++++ 4 files changed, 69 insertions(+), 48 deletions(-) create mode 100644 src/utils/room/setPhase.ts diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index e8521aee24a..0eeb5e17da3 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 d13eb5d2d77..0fe075332aa 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 25887649574..5364e30b6c6 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 00000000000..eb42209857a --- /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); + } +} From 9cfccda97e526cd2ca84fad7317fcdf9ff3a201b Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 31 Aug 2023 07:50:33 +0100 Subject: [PATCH 2/7] Use new setPhase helper in RoomHeader component --- src/components/views/rooms/RoomHeader.tsx | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 00272785492..28682eeab20 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -27,7 +27,6 @@ import type { Room } from "matrix-js-sdk/src/matrix"; import { useRoomName } from "../../../hooks/useRoomName"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; 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 { useGlobalNotificationState } from "../../../hooks/useGlobalNotification import SdkConfig from "../../../SdkConfig"; import { useFeatureEnabled } from "../../../hooks/useSettings"; import FacePile from "../elements/FacePile"; +import { setPhase } from "../../../utils/room/setPhase"; /** * A helper to transform a notification color to the what the Compound Icon Button @@ -61,16 +61,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(); @@ -139,7 +129,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); }} > @@ -185,7 +175,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { { - showOrHidePanel(RightPanelPhases.ThreadPanel); + setPhase(RightPanelPhases.ThreadPanel); }} title={_t("common|threads")} > @@ -194,7 +184,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { { - showOrHidePanel(RightPanelPhases.NotificationPanel); + setPhase(RightPanelPhases.NotificationPanel); }} title={_t("Notifications")} > @@ -208,7 +198,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(); }} > From 7836de77d0c2c3f1c77f779015528d2e13c24c10 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 31 Aug 2023 13:46:22 +0100 Subject: [PATCH 3/7] Fix SpaceRoomView member list back button not working --- src/components/structures/SpaceRoomView.tsx | 25 +++++---------------- 1 file changed, 5 insertions(+), 20 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 54cc7403432..e502430ea2a 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/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 { 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 `` + * 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 }, From 649e5202d4576185b763babb6806f0329b540084 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 31 Aug 2023 14:01:23 +0100 Subject: [PATCH 4/7] Clarifying documentation for setPhase --- src/utils/room/setPhase.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/utils/room/setPhase.ts b/src/utils/room/setPhase.ts index eb42209857a..2d2941286cd 100644 --- a/src/utils/room/setPhase.ts +++ b/src/utils/room/setPhase.ts @@ -19,7 +19,11 @@ import { IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIP import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; /** - * Helper to toggle a right panel view. + * 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. */ From 89fa7b4b396e83cb8204ac661a72fe02faac6851 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 12 Sep 2023 15:36:22 +0100 Subject: [PATCH 5/7] Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/RoomView.tsx | 9 +++-- src/components/structures/SpaceRoomView.tsx | 7 ++-- .../right_panel/LegacyRoomHeaderButtons.tsx | 13 +++---- src/components/views/rooms/RoomHeader.tsx | 10 ++--- src/stores/right-panel/RightPanelStore.ts | 19 ++++++++++ src/utils/room/setPhase.ts | 38 ------------------- 6 files changed, 39 insertions(+), 57 deletions(-) delete mode 100644 src/utils/room/setPhase.ts diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 7c6fdf906c0..bb2e9e502c3 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -130,7 +130,6 @@ 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; @@ -1268,14 +1267,16 @@ export class RoomView extends React.Component { ]); } } else { - setPhase(RightPanelPhases.RoomMemberList); + RightPanelStore.instance.setPhase(RightPanelPhases.RoomMemberList); } break; case "view_3pid_invite": if (payload.event) { - setPhase(RightPanelPhases.Room3pidMemberInfo, { memberInfoEvent: payload.event }); + RightPanelStore.instance.setPhase(RightPanelPhases.Room3pidMemberInfo, { + memberInfoEvent: payload.event, + }); } else { - setPhase(RightPanelPhases.RoomMemberList); + RightPanelStore.instance.setPhase(RightPanelPhases.RoomMemberList); } break; } diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index e502430ea2a..5ae9bec82b5 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -669,13 +669,14 @@ export default class SpaceRoomView extends React.PureComponent { return; } - if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return; - /** * The rest of the `ViewUser` and `view_3pid_invite` exists in the `` * component. This deals specifically with showing the space members list */ - if (!payload.member && !payload.event) { + if ( + (payload.action === Action.ViewUser && !payload.member) || + (payload.action === "view_3pid_invite" && payload.event === null) + ) { RightPanelStore.instance.setCard({ phase: RightPanelPhases.SpaceMemberList, state: { spaceId: this.props.space.roomId }, diff --git a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx index 5364e30b6c6..61594eb66dd 100644 --- a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx +++ b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx @@ -40,7 +40,6 @@ 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, @@ -210,27 +209,27 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { const currentPhase = RightPanelStore.instance.currentCard.phase; if (currentPhase && ROOM_INFO_PHASES.includes(currentPhase)) { if (this.state.phase === currentPhase) { - setPhase(currentPhase); + RightPanelStore.instance.setPhase(currentPhase); } else { - setPhase(currentPhase, RightPanelStore.instance.currentCard.state); + RightPanelStore.instance.setPhase(currentPhase, RightPanelStore.instance.currentCard.state); } } else { // This toggles for us, if needed - setPhase(RightPanelPhases.RoomSummary); + RightPanelStore.instance.setPhase(RightPanelPhases.RoomSummary); } }; private onNotificationsClicked = (): void => { // This toggles for us, if needed - setPhase(RightPanelPhases.NotificationPanel); + RightPanelStore.instance.setPhase(RightPanelPhases.NotificationPanel); }; private onPinnedMessagesClicked = (): void => { // This toggles for us, if needed - setPhase(RightPanelPhases.PinnedMessages); + RightPanelStore.instance.setPhase(RightPanelPhases.PinnedMessages); }; private onTimelineCardClicked = (): void => { - setPhase(RightPanelPhases.Timeline); + RightPanelStore.instance.setPhase(RightPanelPhases.Timeline); }; private onThreadsPanelClicked = (ev: ButtonEvent): void => { diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index eadbca94aed..7b690d8e287 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -45,10 +45,10 @@ 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"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; /** * A helper to transform a notification color to the what the Compound Icon Button @@ -107,7 +107,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel" onClick={() => { - setPhase(RightPanelPhases.RoomSummary); + RightPanelStore.instance.setPhase(RightPanelPhases.RoomSummary); }} > @@ -195,7 +195,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { indicator={notificationColorToIndicator(threadNotifications)} onClick={(evt) => { evt.stopPropagation(); - setPhase(RightPanelPhases.ThreadPanel); + RightPanelStore.instance.setPhase(RightPanelPhases.ThreadPanel); }} title={_t("common|threads")} > @@ -207,7 +207,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { indicator={notificationColorToIndicator(globalNotificationState.color)} onClick={(evt) => { evt.stopPropagation(); - setPhase(RightPanelPhases.NotificationPanel); + RightPanelStore.instance.setPhase(RightPanelPhases.NotificationPanel); }} title={_t("Notifications")} > @@ -222,7 +222,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { weight="medium" aria-label={_t("%(count)s members", { count: memberCount })} onClick={(e: React.MouseEvent) => { - setPhase(RightPanelPhases.RoomMemberList); + RightPanelStore.instance.setPhase(RightPanelPhases.RoomMemberList); e.stopPropagation(); }} > diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 60e16d3bbdf..d975bd9a3b4 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -29,6 +29,7 @@ import { convertToStatePanel, convertToStorePanel, IRightPanelCard, + IRightPanelCardState, IRightPanelForRoom, } from "./RightPanelStoreIPanelState"; import { ActionPayload } from "../../dispatcher/payloads"; @@ -226,6 +227,24 @@ export default class RightPanelStore extends ReadyWatchingStore { } } + /** + * 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. + */ + public setPhase(phase: RightPanelPhases, cardState?: Partial): void { + if (this.currentCard.phase == phase && !cardState && this.isOpen) { + this.togglePanel(null); + } else { + this.setCard({ phase, state: cardState }); + if (!this.isOpen) this.togglePanel(null); + } + } + private loadCacheFromSettings(): void { if (this.viewedRoomId) { const room = this.mxClient?.getRoom(this.viewedRoomId); diff --git a/src/utils/room/setPhase.ts b/src/utils/room/setPhase.ts deleted file mode 100644 index 2d2941286cd..00000000000 --- a/src/utils/room/setPhase.ts +++ /dev/null @@ -1,38 +0,0 @@ -/* -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): 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); - } -} From 919580fd10d9b88b3adeeb10ab5a61e11554ff0f Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Sep 2023 20:48:29 +0530 Subject: [PATCH 6/7] Rename setPhase to showOrHidePanel --- src/components/structures/RoomView.tsx | 6 +++--- .../views/right_panel/LegacyRoomHeaderButtons.tsx | 12 ++++++------ src/components/views/rooms/RoomHeader.tsx | 8 ++++---- src/stores/right-panel/RightPanelStore.ts | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index bb2e9e502c3..b2f2e89500d 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1267,16 +1267,16 @@ export class RoomView extends React.Component { ]); } } else { - RightPanelStore.instance.setPhase(RightPanelPhases.RoomMemberList); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList); } break; case "view_3pid_invite": if (payload.event) { - RightPanelStore.instance.setPhase(RightPanelPhases.Room3pidMemberInfo, { + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.Room3pidMemberInfo, { memberInfoEvent: payload.event, }); } else { - RightPanelStore.instance.setPhase(RightPanelPhases.RoomMemberList); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList); } break; } diff --git a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx index 61594eb66dd..43c3fcb762c 100644 --- a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx +++ b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx @@ -209,27 +209,27 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { const currentPhase = RightPanelStore.instance.currentCard.phase; if (currentPhase && ROOM_INFO_PHASES.includes(currentPhase)) { if (this.state.phase === currentPhase) { - RightPanelStore.instance.setPhase(currentPhase); + RightPanelStore.instance.showOrHidePanel(currentPhase); } else { - RightPanelStore.instance.setPhase(currentPhase, RightPanelStore.instance.currentCard.state); + RightPanelStore.instance.showOrHidePanel(currentPhase, RightPanelStore.instance.currentCard.state); } } else { // This toggles for us, if needed - RightPanelStore.instance.setPhase(RightPanelPhases.RoomSummary); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary); } }; private onNotificationsClicked = (): void => { // This toggles for us, if needed - RightPanelStore.instance.setPhase(RightPanelPhases.NotificationPanel); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel); }; private onPinnedMessagesClicked = (): void => { // This toggles for us, if needed - RightPanelStore.instance.setPhase(RightPanelPhases.PinnedMessages); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.PinnedMessages); }; private onTimelineCardClicked = (): void => { - RightPanelStore.instance.setPhase(RightPanelPhases.Timeline); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.Timeline); }; private onThreadsPanelClicked = (ev: ButtonEvent): void => { diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 7b690d8e287..56f2af3a229 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -107,7 +107,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel" onClick={() => { - RightPanelStore.instance.setPhase(RightPanelPhases.RoomSummary); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary); }} > @@ -195,7 +195,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { indicator={notificationColorToIndicator(threadNotifications)} onClick={(evt) => { evt.stopPropagation(); - RightPanelStore.instance.setPhase(RightPanelPhases.ThreadPanel); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.ThreadPanel); }} title={_t("common|threads")} > @@ -207,7 +207,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { indicator={notificationColorToIndicator(globalNotificationState.color)} onClick={(evt) => { evt.stopPropagation(); - RightPanelStore.instance.setPhase(RightPanelPhases.NotificationPanel); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel); }} title={_t("Notifications")} > @@ -222,7 +222,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { weight="medium" aria-label={_t("%(count)s members", { count: memberCount })} onClick={(e: React.MouseEvent) => { - RightPanelStore.instance.setPhase(RightPanelPhases.RoomMemberList); + RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList); e.stopPropagation(); }} > diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index d975bd9a3b4..3c0084ece74 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -236,7 +236,7 @@ export default class RightPanelStore extends ReadyWatchingStore { * @param phase The right panel phase. * @param cardState The state within the phase. */ - public setPhase(phase: RightPanelPhases, cardState?: Partial): void { + public showOrHidePanel(phase: RightPanelPhases, cardState?: Partial): void { if (this.currentCard.phase == phase && !cardState && this.isOpen) { this.togglePanel(null); } else { From f7fa9facd78760b21a5021df7219eab39d5e9208 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 13 Sep 2023 14:58:01 +0530 Subject: [PATCH 7/7] Let code in RoomView handle all cases --- src/components/structures/SpaceRoomView.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 5ae9bec82b5..439782cb7ea 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -668,20 +668,6 @@ export default class SpaceRoomView extends React.PureComponent { this.setState({ phase: Phase.Landing }); return; } - - /** - * The rest of the `ViewUser` and `view_3pid_invite` exists in the `` - * component. This deals specifically with showing the space members list - */ - if ( - (payload.action === Action.ViewUser && !payload.member) || - (payload.action === "view_3pid_invite" && payload.event === null) - ) { - RightPanelStore.instance.setCard({ - phase: RightPanelPhases.SpaceMemberList, - state: { spaceId: this.props.space.roomId }, - }); - } }; private goToFirstRoom = async (): Promise => {