Cleanup re-dispatching around timelines and composers

src/components/structures/RoomView.tsx

@@ -94,6 +94,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threads';
 import { fetchInitialEvent } from "../../utils/EventUtils";
+import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -864,10 +865,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             }
 
             case Action.ComposerInsert: {
+                if (payload.composerType) break;
                 // re-dispatch to the correct composer
                 dis.dispatch({
                     ...payload,
-                    action: this.state.editState ? "edit_composer_insert" : "send_composer_insert",
+                    composerType: this.state.editState ? ComposerType.Edit : ComposerType.Send,
                 });
                 break;
             }

src/components/views/messages/TextualBody.tsx

@@ -44,6 +44,7 @@ import MessageEditHistoryDialog from "../dialogs/MessageEditHistoryDialog";
 import EditMessageComposer from '../rooms/EditMessageComposer';
 import LinkPreviewGroup from '../rooms/LinkPreviewGroup';
 import { IBodyProps } from "./IBodyProps";
+import RoomContext from "../../../contexts/RoomContext";
 
 const MAX_HIGHLIGHT_LENGTH = 4096;
 
@@ -62,6 +63,9 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
     private unmounted = false;
     private pills: Element[] = [];
 
+    static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
+
     constructor(props) {
         super(props);
 
@@ -406,6 +410,8 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
             userId: mxEvent.getSender(),
+            timelineRenderingType: this.context.timelineRenderingType,
+            composerType: null,
         });
     };
 

src/components/views/right_panel/UserInfo.tsx

@@ -76,6 +76,7 @@ import { bulkSpaceBehaviour } from "../../../utils/space";
 import { logger } from "matrix-js-sdk/src/logger";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
+import { TimelineRenderingType } from "../../../contexts/RoomContext";
 
 export interface IDevice {
     deviceId: string;
@@ -378,6 +379,8 @@ const UserOptionsSection: React.FC<{
                 dis.dispatch<ComposerInsertPayload>({
                     action: Action.ComposerInsert,
                     userId: member.userId,
+                    timelineRenderingType: TimelineRenderingType.Room,
+                    composerType: null,
                 });
             };
 

src/components/views/rooms/EditMessageComposer.tsx

@@ -47,6 +47,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { logger } from "matrix-js-sdk/src/logger";
 import { withMatrixClientHOC, MatrixClientProps } from '../../../contexts/MatrixClientContext';
 import RoomContext from '../../../contexts/RoomContext';
+import { ComposerType } from "../../../dispatcher/payloads/ComposerInsertPayload";
 
 function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
@@ -499,7 +500,11 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
     };
 
     private onAction = (payload: ActionPayload) => {
-        if (payload.action === "edit_composer_insert" && this.editorRef.current) {
+        if (payload.action === Action.ComposerInsert) {
+            if (!this.editorRef.current) return;
+            if (payload.timelineRenderingType !== this.context.timelineRenderingType) return;
+            if (payload.composerType !== ComposerType.Edit) return;
+
             if (payload.userId) {
                 this.editorRef.current?.insertMention(payload.userId);
             } else if (payload.event) {

src/components/views/rooms/EventTile.tsx

@@ -32,7 +32,6 @@ import { Layout } from "../../../settings/Layout";
 import { formatTime } from "../../../DateUtils";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { ALL_RULE_TYPES } from "../../../mjolnir/BanList";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { E2EState } from "./E2EIcon";
 import { toRem } from "../../../utils/units";
 import { WidgetType } from "../../../widgets/WidgetType";
@@ -62,6 +61,7 @@ import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/th
 import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewStore';
 
 import { logger } from "matrix-js-sdk/src/logger";
+import RoomContext from "../../../contexts/RoomContext";
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -350,7 +350,8 @@ export default class EventTile extends React.Component<IProps, IState> {
         layout: Layout.Group,
     };
 
-    static contextType = MatrixClientContext;
+    static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     constructor(props, context) {
         super(props, context);
@@ -395,7 +396,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         if (!this.props.mxEvent) return false;
 
         // Sanity check (should never happen, but we shouldn't explode if it does)
-        const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         if (!room) return false;
 
         // Quickly check to see if the event was sent by us. If it wasn't, it won't qualify for
@@ -459,7 +460,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
     componentDidMount() {
         this.suppressReadReceiptAnimation = false;
-        const client = this.context;
+        const client = MatrixClientPeg.get();
         if (!this.props.forExport) {
             client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
             client.on("userTrustStatusChanged", this.onUserVerificationChanged);
@@ -479,7 +480,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             this.props.mxEvent.on(ThreadEvent.Update, this.updateThread);
         }
 
-        const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         room?.on(ThreadEvent.New, this.onNewThread);
     }
 
@@ -509,7 +510,7 @@ export default class EventTile extends React.Component<IProps, IState> {
     }
 
     componentWillUnmount() {
-        const client = this.context;
+        const client = MatrixClientPeg.get();
         client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         client.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
         client.removeListener("Room.receipt", this.onRoomReceipt);
@@ -523,22 +524,22 @@ export default class EventTile extends React.Component<IProps, IState> {
             this.props.mxEvent.off(ThreadEvent.Update, this.updateThread);
         }
 
-        const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         room?.off(ThreadEvent.New, this.onNewThread);
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
         // If we're not listening for receipts and expect to be, register a listener.
         if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
-            this.context.on("Room.receipt", this.onRoomReceipt);
+            MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
             this.isListeningForReceipts = true;
         }
     }
 
     private onNewThread = (thread: Thread) => {
         if (thread.id === this.props.mxEvent.getId()) {
             this.updateThread(thread);
-            const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+            const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
             room.off(ThreadEvent.New, this.onNewThread);
         }
     };
@@ -611,7 +612,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         this.forceUpdate(() => {
             // Per elsewhere in this file, we can remove the listener once we will have no further purpose for it.
             if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt) {
-                this.context.removeListener("Room.receipt", this.onRoomReceipt);
+                MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
                 this.isListeningForReceipts = false;
             }
         });
@@ -644,9 +645,9 @@ export default class EventTile extends React.Component<IProps, IState> {
             return;
         }
 
-        const encryptionInfo = this.context.getEventEncryptionInfo(mxEvent);
+        const encryptionInfo = MatrixClientPeg.get().getEventEncryptionInfo(mxEvent);
         const senderId = mxEvent.getSender();
-        const userTrust = this.context.checkUserTrust(senderId);
+        const userTrust = MatrixClientPeg.get().checkUserTrust(senderId);
 
         if (encryptionInfo.mismatchedSender) {
             // something definitely wrong is going on here
@@ -664,7 +665,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             return;
         }
 
-        const eventSenderTrust = encryptionInfo.sender && this.context.checkDeviceTrust(
+        const eventSenderTrust = encryptionInfo.sender && MatrixClientPeg.get().checkDeviceTrust(
             senderId, encryptionInfo.sender.deviceId,
         );
         if (!eventSenderTrust) {
@@ -743,11 +744,13 @@ export default class EventTile extends React.Component<IProps, IState> {
 
     shouldHighlight() {
         if (this.props.forExport) return false;
-        const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
+        const actions = MatrixClientPeg.get().getPushActionsForEvent(
+            this.props.mxEvent.replacingEvent() || this.props.mxEvent,
+        );
         if (!actions || !actions.tweaks) { return false; }
 
         // don't show self-highlights from another of our clients
-        if (this.props.mxEvent.getSender() === this.context.credentials.userId) {
+        if (this.props.mxEvent.getSender() === MatrixClientPeg.get().credentials.userId) {
             return false;
         }
 
@@ -859,6 +862,8 @@ export default class EventTile extends React.Component<IProps, IState> {
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
             userId: mxEvent.getSender(),
+            timelineRenderingType: this.context.timelineRenderingType,
+            composerType: null,
         });
     };
 
@@ -872,7 +877,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         // Cancel any outgoing key request for this event and resend it. If a response
         // is received for the request with the required keys, the event could be
         // decrypted successfully.
-        this.context.cancelAndResendEventRoomKeyRequest(this.props.mxEvent);
+        MatrixClientPeg.get().cancelAndResendEventRoomKeyRequest(this.props.mxEvent);
     };
 
     onPermalinkClicked = e => {
@@ -910,7 +915,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             }
         }
 
-        if (this.context.isRoomEncrypted(ev.getRoomId())) {
+        if (MatrixClientPeg.get().isRoomEncrypted(ev.getRoomId())) {
             // else if room is encrypted
             // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
             if (ev.status === EventStatus.ENCRYPTING) {
@@ -1091,7 +1096,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
 
         if (needsSenderProfile && this.props.hideSender !== true) {
-            if (!this.props.tileShape) {
+            if (!this.props.tileShape || this.props.tileShape === TileShape.Thread) {
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
                     mxEvent={this.props.mxEvent}
                     enableFlair={this.props.enableFlair}
@@ -1185,7 +1190,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         switch (this.props.tileShape) {
             case TileShape.Notif: {
-                const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+                const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
                 return React.createElement(this.props.as || "li", {
                     "className": classes,
                     "aria-live": ariaLive,
@@ -1232,7 +1237,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             isQuoteExpanded={isQuoteExpanded}
                             setQuoteExpanded={this.setQuoteExpanded}
                         />) : null;
-                const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+                const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
                 return React.createElement(this.props.as || "li", {
                     "className": classes,
                     "aria-live": ariaLive,

src/components/views/rooms/MessageComposer.tsx

@@ -252,7 +252,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     private ref: React.RefObject<HTMLDivElement> = createRef();
     private instanceId: number;
 
-    public static contextType = RoomContext;
+    static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     static defaultProps = {
         compact: false,
@@ -398,13 +399,15 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
     };
 
-    private addEmoji(emoji: string): boolean {
+    private addEmoji = (emoji: string): boolean => {
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
             text: emoji,
+            timelineRenderingType: this.context.timelineRenderingType,
+            composerType: null,
         });
         return true;
-    }
+    };
 
     private sendMessage = async () => {
         if (this.state.haveRecording && this.voiceRecordingButton.current) {

src/components/views/rooms/SendMessageComposer.tsx

@@ -58,6 +58,7 @@ import { ActionPayload } from "../../../dispatcher/payloads";
 import { decorateStartSendingTime, sendRoundTripMetric } from "../../../sendTimePerformanceMetrics";
 import RoomContext from '../../../contexts/RoomContext';
 import DocumentPosition from "../../../editor/position";
+import { ComposerType } from "../../../dispatcher/payloads/ComposerInsertPayload";
 
 function addReplyToMessageContent(
     content: IContent,
@@ -591,7 +592,10 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                     this.editorRef.current?.focus();
                 }
                 break;
-            case "send_composer_insert":
+            case Action.ComposerInsert:
+                if (payload.timelineRenderingType !== this.context.timelineRenderingType) break;
+                if (payload.composerType !== ComposerType.Send) break;
+
                 if (payload.userId) {
                     this.editorRef.current?.insertMention(payload.userId);
                 } else if (payload.event) {

src/dispatcher/payloads/ComposerInsertPayload.ts

@@ -18,9 +18,17 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
+import { TimelineRenderingType } from "../../contexts/RoomContext";
+
+export enum ComposerType {
+    Send = "send",
+    Edit = "edit",
+}
 
 interface IBaseComposerInsertPayload extends ActionPayload {
     action: Action.ComposerInsert;
+    timelineRenderingType: TimelineRenderingType;
+    composerType: ComposerType | null; // null if should be re-dispatched to the correct composer
 }
 
 interface IComposerInsertMentionPayload extends IBaseComposerInsertPayload {