Step 8.5: Move report event dialog construction

src/components/views/context_menus/MessageContextMenu.tsx

@@ -34,7 +34,6 @@ import { isContentActionable } from '../../../utils/EventUtils';
 import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from './IconizedContextMenu';
 import { ReadPinsEventId } from "../right_panel/types";
 import { Action } from "../../../dispatcher/actions";
-import ReportEventDialog from '../dialogs/ReportEventDialog';
 import ViewSource from '../../structures/ViewSource';
 import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
 import ShareDialog from '../dialogs/ShareDialog';
@@ -47,6 +46,7 @@ import EndPollDialog from '../dialogs/EndPollDialog';
 import { isPollEnded } from '../messages/MPollBody';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwardDialogPayload";
+import { OpenReportEventDialogPayload } from "../../../dispatcher/payloads/OpenReportEventDialogPayload";
 import { createMapSiteLink } from '../../../utils/location';
 
 export function canCancel(status: EventStatus): boolean {
@@ -154,9 +154,10 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
     };
 
     private onReportEventClick = (): void => {
-        Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
-            mxEvent: this.props.mxEvent,
-        }, 'mx_Dialog_reportEvent');
+        dis.dispatch({
+            action: Action.OpenReportEventDialog,
+            event: this.props.mxEvent,
+        } as OpenReportEventDialogPayload);
         this.closeMenu();
     };
 

src/dispatcher/actions.ts

@@ -271,4 +271,10 @@ export enum Action {
      * Payload: OpenForwardDialogPayload
      */
     OpenForwardDialog = "open_forward_dialog",
+
+    /**
+     * Fired when the "report event" dialog needs to be opened.
+     * Payload: OpenReportEventDialogPayload.
+     */
+    OpenReportEventDialog = "open_report_event_dialog",
 }

src/dispatcher/payloads/OpenReportEventDialogPayload.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2022 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 { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import { Action } from "../actions";
+import { ActionPayload } from "../payloads";
+
+export interface OpenReportEventDialogPayload extends ActionPayload {
+    action: Action.OpenReportEventDialog;
+
+    event: MatrixEvent;
+}

src/utils/DialogOpener.ts

@@ -22,6 +22,7 @@ import { RoomViewStore } from "../stores/RoomViewStore";
 import ForwardDialog from "../components/views/dialogs/ForwardDialog";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { Action } from "../dispatcher/actions";
+import ReportEventDialog from "../components/views/dialogs/ReportEventDialog";
 
 /**
  * Auxiliary class to listen for dialog opening over the dispatcher and
@@ -59,6 +60,11 @@ export class DialogOpener {
                     permalinkCreator: payload.permalinkCreator,
                 });
                 break;
+            case Action.OpenReportEventDialog:
+                Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
+                    event: payload.event,
+                }, 'mx_Dialog_reportEvent');
+                break;
         }
     };
 }