From c3ad8b4eeda9309354744b0b94dcda93e94c21e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 25 Oct 2021 13:43:54 +0200 Subject: [PATCH] Cleanup re-dispatching around timelines and composers (#7023) Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/MessagePanel.tsx | 2 ++ src/components/structures/RoomView.tsx | 4 +++- src/components/views/messages/TextualBody.tsx | 5 +++++ src/components/views/right_panel/UserInfo.tsx | 2 ++ src/components/views/rooms/EditMessageComposer.tsx | 10 ++++++++-- src/components/views/rooms/EventTile.tsx | 10 +++++++--- src/components/views/rooms/MessageComposer.tsx | 8 +++++--- src/components/views/rooms/SendMessageComposer.tsx | 6 +++++- src/dispatcher/payloads/ComposerInsertPayload.ts | 8 ++++++++ 9 files changed, 45 insertions(+), 10 deletions(-) diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index 4660423678..6a204775dc 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -196,6 +196,7 @@ interface IReadReceiptForUser { @replaceableComponent("structures.MessagePanel") export default class MessagePanel extends React.Component { static contextType = RoomContext; + public context!: React.ContextType; // opaque readreceipt info for each userId; used by ReadReceiptMarker // to manage its animations @@ -787,6 +788,7 @@ export default class MessagePanel extends React.Component { showReadReceipts={this.props.showReadReceipts} callEventGrouper={callEventGrouper} hideSender={this.membersCount <= 2 && this.props.layout === Layout.Bubble} + timelineRenderingType={this.context.timelineRenderingType} /> , ); diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 6338ce0c60..33fde6e509 100644 --- a/src/components/structures/RoomView.tsx +++ b/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 { } 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; } diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index b8e068ed75..66a5cc8b54 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/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 { private unmounted = false; private pills: Element[] = []; + static contextType = RoomContext; + public context!: React.ContextType; + constructor(props) { super(props); @@ -406,6 +410,7 @@ export default class TextualBody extends React.Component { dis.dispatch({ action: Action.ComposerInsert, userId: mxEvent.getSender(), + timelineRenderingType: this.context.timelineRenderingType, }); }; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 195cf03af4..7b16fe3878 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/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,7 @@ const UserOptionsSection: React.FC<{ dis.dispatch({ action: Action.ComposerInsert, userId: member.userId, + timelineRenderingType: TimelineRenderingType.Room, }); }; diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx index 1e0a367772..8fd54a6a7f 100644 --- a/src/components/views/rooms/EditMessageComposer.tsx +++ b/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,12 @@ class EditMessageComposer extends React.Component { - if (payload.action === "edit_composer_insert" && this.editorRef.current) { + if (!this.editorRef.current) return; + + if (payload.action === Action.ComposerInsert) { + 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) { @@ -507,7 +513,7 @@ class EditMessageComposer extends React.Component { } onSenderProfileClick = () => { - const mxEvent = this.props.mxEvent; + if (!this.props.timelineRenderingType) return; dis.dispatch({ action: Action.ComposerInsert, - userId: mxEvent.getSender(), + userId: this.props.mxEvent.getSender(), + timelineRenderingType: this.props.timelineRenderingType, }); }; @@ -1091,7 +1095,7 @@ export default class EventTile extends React.Component { } if (needsSenderProfile && this.props.hideSender !== true) { - if (!this.props.tileShape) { + if (!this.props.tileShape || this.props.tileShape === TileShape.Thread) { sender = { private ref: React.RefObject = createRef(); private instanceId: number; - public static contextType = RoomContext; + static contextType = RoomContext; + public context!: React.ContextType; static defaultProps = { compact: false, @@ -398,13 +399,14 @@ export default class MessageComposer extends React.Component { } }; - private addEmoji(emoji: string): boolean { + private addEmoji = (emoji: string): boolean => { dis.dispatch({ action: Action.ComposerInsert, text: emoji, + timelineRenderingType: this.context.timelineRenderingType, }); return true; - } + }; private sendMessage = async () => { if (this.state.haveRecording && this.voiceRecordingButton.current) { diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx index c32a31f249..35bc85ba23 100644 --- a/src/components/views/rooms/SendMessageComposer.tsx +++ b/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