Fix RoomViewStore forgetting some details of a view room call (#7512)

src/components/structures/RoomView.tsx

@@ -56,7 +56,7 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 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";
+import MatrixClientContext, { MatrixClientProps, withMatrixClientHOC } from "../../contexts/MatrixClientContext";
 import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
 import { Action } from "../../dispatcher/actions";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
@@ -1777,7 +1777,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     onHiddenHighlightsClick = () => {
         const oldRoom = this.getOldRoom();
         if (!oldRoom) return;
-        dis.dispatch({ action: "view_room", room_id: oldRoom.roomId });
+        dis.dispatch({
+            action: Action.ViewRoom,
+            room_id: oldRoom.roomId,
+        });
     };
 
     render() {

src/components/structures/SpaceHierarchy.tsx

@@ -327,7 +327,7 @@ export const showRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: st
 
     const roomAlias = getDisplayAliasForRoom(room) || undefined;
     dis.dispatch({
-        action: "view_room",
+        action: Action.ViewRoom,
         should_peek: true,
         _type: "room_directory", // instrumentation
         room_alias: roomAlias,

src/components/structures/SpaceRoomView.tsx

@@ -834,7 +834,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
     };
 
     private onAction = (payload: ActionPayload) => {
-        if (payload.action === "view_room" && payload.room_id === this.props.space.roomId) {
+        if (payload.action === Action.ViewRoom && payload.room_id === this.props.space.roomId) {
             this.setState({ phase: Phase.Landing });
             return;
         }
@@ -862,7 +862,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
     private goToFirstRoom = async () => {
         if (this.state.firstRoomId) {
             defaultDispatcher.dispatch({
-                action: "view_room",
+                action: Action.ViewRoom,
                 room_id: this.state.firstRoomId,
             });
             return;

src/components/views/context_menus/RoomContextMenu.tsx

@@ -43,6 +43,7 @@ import { ROOM_NOTIFICATIONS_TAB } from "../dialogs/RoomSettingsDialog";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import DMRoomMap from "../../../utils/DMRoomMap";
+import { Action } from "../../../dispatcher/actions";
 
 interface IProps extends IContextMenuProps {
     room: Room;
@@ -239,7 +240,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
     const ensureViewingRoom = () => {
         if (RoomViewStore.getRoomId() === room.roomId) return;
         dis.dispatch({
-            action: "view_room",
+            action: Action.ViewRoom,
             room_id: room.roomId,
         }, true);
     };

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -18,9 +18,7 @@ import React, { useContext } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 
-import {
+import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
-    IProps as IContextMenuProps,
-} from "../../structures/ContextMenu";
 import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
 import { _t } from "../../../languageHandler";
 import {
@@ -180,7 +178,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
         ev.stopPropagation();
 
         defaultDispatcher.dispatch({
-            action: "view_room",
+            action: Action.ViewRoom,
             room_id: space.roomId,
         });
         onFinished();

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -227,7 +227,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
 
             const onSpaceClick = () => {
                 dis.dispatch({
-                    action: "view_room",
+                    action: Action.ViewRoom,
                     room_id: roomId,
                 });
             };

src/components/views/dialogs/ForwardDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useMemo, useState, useEffect } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import classnames from "classnames";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -23,7 +23,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
-import { useSettingValue, useFeatureEnabled } from "../../../hooks/useSettings";
+import { useFeatureEnabled, useSettingValue } from "../../../hooks/useSettings";
 import { UIFeature } from "../../../settings/UIFeature";
 import { Layout } from "../../../settings/enums/Layout";
 import { IDialogProps } from "./IDialogProps";
@@ -45,6 +45,7 @@ import EntityTile from "../rooms/EntityTile";
 import BaseAvatar from "../avatars/BaseAvatar";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
 import { roomContextDetailsText } from "../../../Rooms";
+import { Action } from "../../../dispatcher/actions";
 
 const AVATAR_SIZE = 30;
 
@@ -76,7 +77,7 @@ const Entry: React.FC<IEntryProps> = ({ room, event, matrixClient: cli, onFinish
 
     const jumpToRoom = () => {
         dis.dispatch({
-            action: "view_room",
+            action: Action.ViewRoom,
             room_id: room.roomId,
         });
         onFinished(true);

src/components/views/dialogs/SpotlightDialog.tsx

@@ -221,7 +221,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
         }
 
         defaultDispatcher.dispatch({
-            action: 'view_room',
+            action: Action.ViewRoom,
             room_id: roomId,
         });
         onFinished();

src/components/views/rooms/RecentlyViewedButton.tsx

@@ -25,6 +25,7 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import dis from "../../../dispatcher/dispatcher";
 import InteractiveTooltip, { Direction } from "../elements/InteractiveTooltip";
 import { roomContextDetailsText } from "../../../Rooms";
+import { Action } from "../../../dispatcher/actions";
 
 const RecentlyViewedButton = () => {
     const tooltipRef = useRef<InteractiveTooltip>();
@@ -40,7 +41,7 @@ const RecentlyViewedButton = () => {
                     key={crumb.roomId}
                     onClick={() => {
                         dis.dispatch({
-                            action: "view_room",
+                            action: Action.ViewRoom,
                             room_id: crumb.roomId,
                         });
                         tooltipRef.current?.hideTooltip();

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -27,6 +27,7 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../accessibility/Toolbar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Action } from "../../../dispatcher/actions";
 
 interface IProps {
 }
@@ -78,7 +79,10 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
 
     private viewRoom = (room: Room, index: number) => {
         Analytics.trackEvent("Breadcrumbs", "click_node", String(index));
-        defaultDispatcher.dispatch({ action: "view_room", room_id: room.roomId });
+        defaultDispatcher.dispatch({
+            action: Action.ViewRoom,
+            room_id: room.roomId,
+        });
     };
 
     public render(): React.ReactElement {

src/components/views/rooms/RoomList.tsx

@@ -47,12 +47,12 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
 import {
+    isMetaSpace,
     ISuggestedRoom,
     MetaSpace,
     SpaceKey,
-    UPDATE_SUGGESTED_ROOMS,
     UPDATE_SELECTED_SPACE,
-    isMetaSpace,
+    UPDATE_SUGGESTED_ROOMS,
 } from "../../../stores/spaces";
 import { shouldShowSpaceInvite, showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../../utils/space";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -215,7 +215,7 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
                     e.stopPropagation();
                     closeMenu();
                     defaultDispatcher.dispatch({
-                        action: "view_room",
+                        action: Action.ViewRoom,
                         room_id: activeSpace.roomId,
                     });
                 }}
@@ -497,7 +497,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     private onExplore = () => {
         if (!isMetaSpace(this.props.activeSpace)) {
             defaultDispatcher.dispatch({
-                action: "view_room",
+                action: Action.ViewRoom,
                 room_id: this.props.activeSpace,
             });
         } else {
@@ -522,7 +522,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             );
             const viewRoom = () => {
                 defaultDispatcher.dispatch({
-                    action: "view_room",
+                    action: Action.ViewRoom,
                     room_alias: room.canonical_alias || room.aliases?.[0],
                     room_id: room.room_id,
                     via_servers: room.viaServers,

src/components/views/rooms/RoomListHeader.tsx

@@ -97,7 +97,7 @@ const PrototypeCommunityContextMenu = (props: ComponentProps<typeof SpaceContext
         const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
         if (chat) {
             dis.dispatch({
-                action: 'view_room',
+                action: Action.ViewRoom,
                 room_id: chat.roomId,
             }, true);
             RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList }, undefined, chat.roomId);

src/components/views/rooms/RoomSublist.tsx

@@ -294,7 +294,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     };
 
     private onAction = (payload: ActionPayload) => {
-        if (payload.action === "view_room" && payload.show_room_tile && this.state.rooms) {
+        if (payload.action === Action.ViewRoom && payload.show_room_tile && this.state.rooms) {
             // XXX: we have to do this a tick later because we have incorrect intermediate props during a room change
             // where we lose the room we are changing from temporarily and then it comes back in an update right after.
             setImmediate(() => {

src/components/views/rooms/RoomTile.tsx

@@ -197,7 +197,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     }
 
     private onAction = (payload: ActionPayload) => {
-        if (payload.action === "view_room" && payload.room_id === this.props.room.roomId && payload.show_room_tile) {
+        if (payload.action === Action.ViewRoom &&
+            payload.room_id === this.props.room.roomId &&
+            payload.show_room_tile
+        ) {
             setImmediate(() => {
                 this.scrollIntoView();
             });

src/components/views/settings/JoinRuleSettings.tsx

@@ -33,6 +33,7 @@ import { arrayHasDiff } from "../../../utils/arrays";
 import { useLocalEcho } from "../../../hooks/useLocalEcho";
 import dis from "../../../dispatcher/dispatcher";
 import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog";
+import { Action } from "../../../dispatcher/actions";
 
 interface IProps {
     room: Room;
@@ -267,7 +268,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, aliasWarning, onError, beforeCh
 
                         // switch to the new room in the background
                         dis.dispatch({
-                            action: "view_room",
+                            action: Action.ViewRoom,
                             room_id: roomId,
                         });
 

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -36,6 +36,7 @@ import { useDispatcher } from "../../../../../hooks/useDispatcher";
 import { CreateEventField, IGroupSummary } from "../../../dialogs/CreateSpaceFromCommunityDialog";
 import { createSpaceFromCommunity } from "../../../../../utils/space";
 import Spinner from "../../../elements/Spinner";
+import { Action } from "../../../../../dispatcher/actions";
 
 interface IProps {
     closeSettingsFn(success: boolean): void;
@@ -112,7 +113,7 @@ const CommunityMigrator = ({ onFinished }) => {
                     onClick={() => {
                         if (community.spaceId) {
                             dis.dispatch({
-                                action: "view_room",
+                                action: Action.ViewRoom,
                                 room_id: community.spaceId,
                             });
                             onFinished();

src/linkify-matrix.ts

@@ -116,7 +116,10 @@ function onUserClick(event: MouseEvent, userId: string) {
 }
 function onAliasClick(event: MouseEvent, roomAlias: string) {
     event.preventDefault();
-    dis.dispatch({ action: 'view_room', room_alias: roomAlias });
+    dis.dispatch({
+        action: Action.ViewRoom,
+        room_alias: roomAlias,
+    });
 }
 function onGroupClick(event: MouseEvent, groupId: string) {
     event.preventDefault();

src/stores/RoomViewStore.tsx

@@ -251,16 +251,10 @@ class RoomViewStore extends Store<ActionPayload> {
                 }
             }
 
+            // Re-fire the payload with the newly found room_id
             dis.dispatch({
-                action: Action.ViewRoom,
+                ...payload,
                 room_id: roomId,
-                event_id: payload.event_id,
-                highlighted: payload.highlighted,
-                room_alias: payload.room_alias,
-                auto_join: payload.auto_join,
-                oob_data: payload.oob_data,
-                viaServers: payload.via_servers,
-                wasContextSwitch: payload.context_switch,
             });
         }
     }

src/stores/right-panel/RightPanelStore.ts

@@ -362,44 +362,43 @@ export default class RightPanelStore extends ReadyWatchingStore {
         // this.loadCacheFromSettings();
     };
 
-    onDispatch(payload: ActionPayload) {
+    onDispatch = (payload: ActionPayload) => {
         switch (payload.action) {
             case 'view_group':
             case Action.ViewRoom: {
-                const _this = RightPanelStore.instance;
+                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 behavior for groups.
-                if ((_this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) {
+                if ((this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) {
-                    if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(_this.currentCard?.phase)) {
+                    if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(this.currentCard?.phase)) {
                         // switch from group to room
-                        _this.setRightPanelCache({ phase: RightPanelPhases.RoomMemberList, state: {} });
+                        this.setRightPanelCache({ phase: RightPanelPhases.RoomMemberList, state: {} });
                     } else if (
                         payload.action == "view_group" &&
-                        _this.currentCard?.phase === RightPanelPhases.GroupMemberInfo
+                        this.currentCard?.phase === RightPanelPhases.GroupMemberInfo
                     ) {
                         // switch from room to group
-                        _this.setRightPanelCache({ phase: RightPanelPhases.GroupMemberList, state: {} });
+                        this.setRightPanelCache({ phase: RightPanelPhases.GroupMemberList, state: {} });
                     }
                 }
 
                 // 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.viewedRoomId = payload.room_id;
-                _this.isViewingRoom = payload.action == Action.ViewRoom;
+                this.isViewingRoom = payload.action == Action.ViewRoom;
                 // load values from byRoomCache with the viewedRoomId.
-                if (_this.isReady) {
+                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.loadCacheFromSettings();
-                    _this.emitAndUpdateSettings();
+                    this.emitAndUpdateSettings();
                 }
                 break;
             }
         }
-    }
+    };
 
     public static get instance(): RightPanelStore {
         if (!RightPanelStore.internalInstance) {

src/stores/spaces/SpaceStore.ts

@@ -157,7 +157,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         if (space) {
             const roomId = this.getNotificationState(space).getFirstRoomWithNotifications();
             defaultDispatcher.dispatch({
-                action: "view_room",
+                action: Action.ViewRoom,
                 room_id: roomId,
                 context_switch: true,
             });
@@ -174,7 +174,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                 });
                 if (unreadRoom) {
                     defaultDispatcher.dispatch({
-                        action: "view_room",
+                        action: Action.ViewRoom,
                         room_id: unreadRoom.roomId,
                         context_switch: true,
                     });
@@ -222,13 +222,13 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                 this.isRoomInSpace(space, roomId)
             ) {
                 defaultDispatcher.dispatch({
-                    action: "view_room",
+                    action: Action.ViewRoom,
                     room_id: roomId,
                     context_switch: true,
                 });
             } else if (cliSpace) {
                 defaultDispatcher.dispatch({
-                    action: "view_room",
+                    action: Action.ViewRoom,
                     room_id: space,
                     context_switch: true,
                 });
@@ -1061,7 +1061,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         if (!spacesEnabled || !this.matrixClient) return;
 
         switch (payload.action) {
-            case "view_room": {
+            case Action.ViewRoom: {
                 // Don't auto-switch rooms when reacting to a context-switch or for new rooms being created
                 // as this is not helpful and can create loops of rooms/space switching
                 if (payload.context_switch || payload.justCreatedOpts) break;

test/stores/SpaceStore-test.ts

@@ -34,6 +34,7 @@ import { MatrixClientPeg } from "../../src/MatrixClientPeg";
 import defaultDispatcher from "../../src/dispatcher/dispatcher";
 import SettingsStore from "../../src/settings/SettingsStore";
 import { SettingLevel } from "../../src/settings/SettingLevel";
+import { Action } from "../../src/dispatcher/actions";
 
 jest.useFakeTimers();
 
@@ -92,7 +93,7 @@ describe("SpaceStore", () => {
     let rooms = [];
     const mkRoom = (roomId: string) => testUtils.mkRoom(client, roomId, rooms);
     const mkSpace = (spaceId: string, children: string[] = []) => testUtils.mkSpace(client, spaceId, rooms, children);
-    const viewRoom = roomId => defaultDispatcher.dispatch({ action: "view_room", room_id: roomId }, true);
+    const viewRoom = roomId => defaultDispatcher.dispatch({ action: Action.ViewRoom, room_id: roomId }, true);
 
     const run = async () => {
         client.getRoom.mockImplementation(roomId => rooms.find(room => room.roomId === roomId));
@@ -680,7 +681,7 @@ describe("SpaceStore", () => {
             await run();
 
             dispatcherRef = defaultDispatcher.register(payload => {
-                if (payload.action === "view_room" || payload.action === "view_home_page") {
+                if (payload.action === Action.ViewRoom || payload.action === "view_home_page") {
                     currentRoom = payload.room_id || null;
                 }
             });