Refactor EventTile using the MVVM pattern

apps/web/src/components/structures/MessagePanel.tsx

@@ -32,10 +32,9 @@ import SettingsStore from "../../settings/SettingsStore";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import { Layout } from "../../settings/enums/Layout";
 import EventTile, {
+    type EventTileHandle,
     type GetRelationsForEvent,
-    type IReadReceiptProps,
-    isEligibleForSpecialReceipt,
-    type UnwrappedEventTile,
+    type ReadReceiptProps,
 } from "../views/rooms/EventTile";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -49,7 +48,7 @@ import type EditorStateTransfer from "../../utils/EditorStateTransfer";
 import { Action } from "../../dispatcher/actions";
 import { getEventDisplayInfo } from "../../utils/EventRenderingUtils";
 import { type IReadReceiptPosition } from "../views/rooms/ReadReceiptMarker";
-import { haveRendererForEvent } from "../../events/EventTileFactory";
+import { haveRendererForEvent, isMessageEvent } from "../../events/EventTileFactory";
 import { editorRoomKey } from "../../Editing";
 import { hasThreadSummary } from "../../utils/EventUtils";
 import { type BaseGrouper } from "./grouper/BaseGrouper";
@@ -219,7 +218,7 @@ interface IState {
 
 interface IReadReceiptForUser {
     lastShownEventId: string;
-    receipt: IReadReceiptProps;
+    receipt: ReadReceiptProps;
 }
 
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
@@ -248,7 +247,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     // This is recomputed on each render. It's only stored on the component
     // for ease of passing the data around since it's computed in one pass
     // over all events.
-    private readReceiptsByEvent: Map<string, IReadReceiptProps[]> = new Map();
+    private readReceiptsByEvent: Map<string, ReadReceiptProps[]> = new Map();
 
     // Track read receipts by user ID. For each user ID we've ever shown a
     // a read receipt for, we store an object:
@@ -277,7 +276,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     public scrollPanel = createRef<ScrollPanel>();
 
     private showTypingNotificationsWatcherRef?: string;
-    private eventTiles: Record<string, UnwrappedEventTile> = {};
+    private eventTiles: Record<string, EventTileHandle> = {};
 
     // A map to allow groupers to maintain consistent keys even if their first event is uprooted due to back-pagination.
     public grouperKeyMap = new WeakMap<MatrixEvent, string>();
@@ -368,14 +367,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
     /* get the DOM node representing the given event */
     public getNodeForEventId(eventId: string): HTMLElement | undefined {
-        if (!this.eventTiles) {
-            return undefined;
-        }
-
-        return this.eventTiles[eventId]?.ref?.current ?? undefined;
+        return this.getTileForEventId(eventId)?.ref?.current ?? undefined;
     }
 
-    public getTileForEventId(eventId?: string): UnwrappedEventTile | undefined {
+    public getTileForEventId(eventId?: string): EventTileHandle | undefined {
         if (!this.eventTiles || !eventId) {
             return undefined;
         }
@@ -619,6 +614,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         return !status || status === EventStatus.SENT;
     }
 
+    private isEligibleForSpecialReceipt(event: MatrixEvent): boolean {
+        return isMessageEvent(event) || event.getType() === EventType.RoomMessageEncrypted;
+    }
+
     private getEventTiles(): ReactNode[] {
         // first figure out which is the last event in the list which we're
         // actually going to show; this allows us to behave slightly
@@ -646,7 +645,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                 lastShownEvent = event;
             }
 
-            if (!foundLastSuccessfulEvent && this.isSentState(event) && isEligibleForSpecialReceipt(event)) {
+            if (!foundLastSuccessfulEvent && this.isSentState(event) && this.isEligibleForSpecialReceipt(event)) {
                 foundLastSuccessfulEvent = true;
                 // If we are not sender of this last successful event eligible for special receipt then we stop here
                 // As we do not want to render our sent receipt if there are more receipts below it and events sent
@@ -869,7 +868,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
     // Get a list of read receipts that should be shown next to this event
     // Receipts are objects which have a 'userId', 'roomMember' and 'ts'.
-    private getReadReceiptsForEvent(event: MatrixEvent): IReadReceiptProps[] | null {
+    private getReadReceiptsForEvent(event: MatrixEvent): ReadReceiptProps[] | null {
         const myUserId = MatrixClientPeg.safeGet().credentials.userId;
 
         // get list of read receipts, sorted most recent first
@@ -880,7 +879,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         const receiptDestination = this.context.threadId ? room.getThread(this.context.threadId) : room;
 
-        const receipts: IReadReceiptProps[] = [];
+        const receipts: ReadReceiptProps[] = [];
 
         if (!receiptDestination) {
             logger.debug(
@@ -909,8 +908,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     // Get an object that maps from event ID to a list of read receipts that
     // should be shown next to that event. If a hidden event has read receipts,
     // they are folded into the receipts of the last shown event.
-    private getReadReceiptsByShownEvent(events: WrappedEvent[]): Map<string, IReadReceiptProps[]> {
-        const receiptsByEvent: Map<string, IReadReceiptProps[]> = new Map();
+    private getReadReceiptsByShownEvent(events: WrappedEvent[]): Map<string, ReadReceiptProps[]> {
+        const receiptsByEvent: Map<string, ReadReceiptProps[]> = new Map();
         const receiptsByUserId: Map<string, IReadReceiptForUser> = new Map();
 
         let lastShownEventId: string | undefined;
@@ -965,7 +964,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         return receiptsByEvent;
     }
 
-    private collectEventTile = (eventId: string, node: UnwrappedEventTile): void => {
+    private readonly collectEventTile = (eventId: string, node: EventTileHandle): void => {
         this.eventTiles[eventId] = node;
     };
 

apps/web/src/components/structures/WaitingForThirdPartyRoomView.tsx

@@ -16,7 +16,7 @@ import ErrorBoundary from "../views/elements/ErrorBoundary";
 import RoomHeader from "../views/rooms/RoomHeader/RoomHeader.tsx";
 import ScrollPanel from "./ScrollPanel";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
-import { UnwrappedEventTile } from "../views/rooms/EventTile";
+import EventTile from "../views/rooms/EventTile";
 import { _t } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
 import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
@@ -50,7 +50,7 @@ export const WaitingForThirdPartyRoomView: React.FC<Props> = ({ roomView, resize
                                 subtitle={_t("room|waiting_for_join_subtitle", { brand })}
                             />
                             <NewRoomIntro />
-                            <UnwrappedEventTile mxEvent={inviteEvent} />
+                            <EventTile mxEvent={inviteEvent} withErrorBoundary={false} />
                         </ScrollPanel>
                     </div>
                 </main>

apps/web/src/components/views/context_menus/MessageContextMenu.tsx

@@ -65,7 +65,7 @@ import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContex
 import EndPollDialog from "../dialogs/EndPollDialog";
 import { isPollEnded } from "../messages/MPollBody";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { type GetRelationsForEvent, type IEventTileOps } from "../rooms/EventTile";
+import { type EventTileOps, type GetRelationsForEvent } from "../rooms/EventTile";
 import { type OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwardDialogPayload";
 import { type OpenReportEventDialogPayload } from "../../../dispatcher/payloads/OpenReportEventDialogPayload";
 import { createMapSiteLinkFromEvent } from "../../../utils/location";
@@ -115,7 +115,7 @@ interface IProps extends MenuProps {
     /* the MatrixEvent associated with the context menu */
     mxEvent: MatrixEvent;
     // An optional EventTileOps implementation that can be used to unhide preview widgets
-    eventTileOps?: IEventTileOps;
+    eventTileOps?: EventTileOps;
     // Callback called when the menu is dismissed
     permalinkCreator?: RoomPermalinkCreator;
     /* an optional function to be called when the user clicks collapse thread, if not provided hide button */
@@ -289,7 +289,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
     };
 
     private onUnhidePreviewClick = (): void => {
-        this.props.eventTileOps?.unhideWidget();
+        this.props.eventTileOps?.unhideWidget?.();
         this.closeMenu();
     };
 
@@ -488,7 +488,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         );
 
         let unhidePreviewButton: JSX.Element | undefined;
-        if (eventTileOps?.isWidgetHidden()) {
+        if (eventTileOps?.isWidgetHidden?.()) {
             unhidePreviewButton = (
                 <IconizedContextMenuOption
                     icon={<VisibilityOnIcon />}

apps/web/src/components/views/messages/MessageEvent.tsx

@@ -33,7 +33,7 @@ import MPollBody from "./MPollBody";
 import MLocationBody from "./MLocationBody";
 import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
-import { type GetRelationsForEvent, type IEventTileOps } from "../rooms/EventTile";
+import { type EventTileOps, type GetRelationsForEvent } from "../rooms/EventTile";
 import {
     DecryptionFailureBodyFactory,
     FileBodyFactory,
@@ -60,7 +60,7 @@ interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper
 }
 
 export interface IOperableEventTile {
-    getEventTileOps(): IEventTileOps | null;
+    getEventTileOps(): EventTileOps | null;
 }
 
 const baseBodyTypes = new Map<string, React.ComponentType<IBodyProps>>([
@@ -126,7 +126,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         }
     }
 
-    public getEventTileOps = (): IEventTileOps | null => {
+    public getEventTileOps = (): EventTileOps | null => {
         return (this.body.current as IOperableEventTile)?.getEventTileOps?.() || null;
     };
 

apps/web/src/components/views/messages/TextualBody.tsx

@@ -35,7 +35,7 @@ import RoomContext from "../../../contexts/RoomContext";
 import AccessibleButton from "../elements/AccessibleButton";
 import { getParentEventId } from "../../../utils/Reply";
 import { EditWysiwygComposer } from "../rooms/wysiwyg_composer";
-import { type IEventTileOps } from "../rooms/EventTile";
+import { type EventTileOps } from "../rooms/EventTile";
 import { UrlPreviewGroupViewModel } from "../../../viewmodels/message-body/UrlPreviewGroupViewModel.ts";
 import { useMediaVisible } from "../../../hooks/useMediaVisible.ts";
 import ImageView from "../elements/ImageView.tsx";
@@ -175,7 +175,7 @@ class InnerTextualBody extends React.Component<Props> {
         }
     };
 
-    public getEventTileOps = (): IEventTileOps => ({
+    public getEventTileOps = (): EventTileOps => ({
         isWidgetHidden: () => {
             // This controls whether the Show preview button is visibile.
             return this.props.urlPreviewViewModel.isPreviewHiddenByUser;