Refactor EventTile using the MVVM pattern - #7a (#33640)

* Make EventTileViewModel an owned root VM * Move timestamp sub-VMs under EventTileViewModel * Move thread-list action bar VM under EventTileViewModel * Clean up for improved readability * Clean up to avoid duplicate EventTile render derivations * Avoid mutating EventTileViewModel during render * Move EventTile child VM syncing into adapters * Replace timestamp VM field setters with batched setProps * Component wrappers at the end of the file * Lazy-create EventTile child view models
2026-05-29 07:56:31 +02:00
parent 0ed98941bd
commit 3aa3678c2d
6 changed files with 392 additions and 273 deletions
@@ -5,7 +5,7 @@
 * Please see LICENSE files in the repository root for full details.
 */

-import { EventStatus, EventType, type MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+import { EventStatus, EventType, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";

 import { mkEvent } from "../../test-utils";
 import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
@@ -450,4 +450,74 @@ describe("EventTileViewModel", () => {
            showInDefaultLayout: false,
        });
    });
+
+    it("updates an instance snapshot when inputs change", () => {
+        const vm = new EventTileViewModel(makeProps());
+        const listener = jest.fn();
+        const unsubscribe = vm.subscribe(listener);
+
+        expect(vm.getSnapshot().snapshot.timestamp.show).toBe(false);
+
+        vm.setProps(makeProps({ interaction: { hover: true } }));
+
+        expect(vm.getSnapshot().snapshot.timestamp.show).toBe(true);
+        expect(listener).toHaveBeenCalled();
+
+        unsubscribe();
+        vm.dispose();
+    });
+
+    it("lazily owns timestamp child view models", () => {
+        const vm = new EventTileViewModel(makeProps());
+        const messageTimestampViewModel = vm.getMessageTimestampViewModel({ ts: 123 });
+        const linkedMessageTimestampViewModel = vm.getLinkedMessageTimestampViewModel({ ts: 456 });
+
+        expect(messageTimestampViewModel.getSnapshot().href).toBeUndefined();
+        expect(linkedMessageTimestampViewModel.getSnapshot().href).toBeUndefined();
+
+        vm.dispose();
+    });
+
+    it("does not initialize timestamp child view models for events without an origin timestamp", () => {
+        const mxEvent = new MatrixEvent({
+            type: EventType.RoomMessage,
+            room_id: roomId,
+            sender: userId,
+            content: { msgtype: MsgType.Text, body: "Hello" },
+            event_id: "$event",
+        });
+        const vm = new EventTileViewModel(
+            makeProps({
+                event: {
+                    mxEvent,
+                },
+                timestamp: {
+                    hideTimestamp: true,
+                },
+            }),
+        );
+
+        expect(vm.getSnapshot().timestamp.displayState.showRealTimestamp).toBe(false);
+
+        vm.dispose();
+    });
+
+    it("owns and updates the thread-list action bar child view model", () => {
+        const vm = new EventTileViewModel(makeProps());
+        const onViewInRoomClick = jest.fn();
+        const onCopyLinkClick = jest.fn();
+
+        const threadListActionBarViewModel = vm.getThreadListActionBarViewModel({
+            onViewInRoomClick,
+            onCopyLinkClick,
+        });
+
+        threadListActionBarViewModel.onViewInRoomClick(null);
+        threadListActionBarViewModel.onCopyLinkClick(null);
+
+        expect(onViewInRoomClick).toHaveBeenCalledWith(null);
+        expect(onCopyLinkClick).toHaveBeenCalledWith(null);
+
+        vm.dispose();
+    });
 });
@@ -120,49 +120,30 @@ describe("MessageTimestampViewModel", () => {
        });
    });

-    it("updates the timestamp and received timestamp", () => {
-        const vm = new MessageTimestampViewModel({
-            ts: nowDate.getTime(),
-        });
-
-        vm.setTimestamp(nowDate.getTime() + HOUR_MS);
-        vm.setReceivedTimestamp(nowDate.getTime() + DAY_MS);
-
-        expect(vm.getSnapshot()).toMatchObject({
-            ts: "09:09",
-            tsSentAt: "Fri, Dec 17, 2021, 09:09:00",
-            tsReceivedAt: "Sat, Dec 18, 2021, 08:09:00",
-        });
-    });
-
-    it("updates display options", () => {
-        const vm = new MessageTimestampViewModel({
-            ts: nowDate.getTime(),
-        });
-
-        vm.setDisplayOptions({
-            showTwelveHour: true,
-            showSeconds: true,
-        });
-
-        expect(vm.getSnapshot()).toMatchObject({
-            ts: "8:09:00 AM",
-            tsSentAt: "Fri, Dec 17, 2021, 8:09:00 AM",
-        });
-    });
-
-    it("updates tooltip, href, and handlers", () => {
+    it("updates all props in one batch", () => {
        const onClick = jest.fn();
        const onContextMenu = jest.fn();
        const vm = new MessageTimestampViewModel({
            ts: nowDate.getTime(),
        });
+        const listener = jest.fn();
+        vm.subscribe(listener);

-        vm.setTooltipInhibited(true);
-        vm.setHref("https://example.test/event");
-        vm.setHandlers({ onClick, onContextMenu });
+        vm.setProps({
+            ts: nowDate.getTime() + HOUR_MS,
+            receivedTs: nowDate.getTime() + DAY_MS,
+            showTwelveHour: true,
+            inhibitTooltip: true,
+            href: "https://example.test/event",
+            onClick,
+            onContextMenu,
+        });

+        expect(listener).toHaveBeenCalledTimes(1);
        expect(vm.getSnapshot()).toMatchObject({
+            ts: "9:09 AM",
+            tsSentAt: "Fri, Dec 17, 2021, 9:09:00 AM",
+            tsReceivedAt: "Sat, Dec 18, 2021, 8:09:00 AM",
            inhibitTooltip: true,
            href: "https://example.test/event",
        });
@@ -170,16 +151,43 @@ describe("MessageTimestampViewModel", () => {
        expect(vm.onContextMenu).toBe(onContextMenu);
    });

-    it("does not emit an update when props are unchanged", () => {
+    it("replaces props and clears omitted optional values", () => {
+        const onClick = jest.fn();
+        const onContextMenu = jest.fn();
        const vm = new MessageTimestampViewModel({
            ts: nowDate.getTime(),
+            receivedTs: nowDate.getTime() + DAY_MS,
+            inhibitTooltip: true,
            href: "https://example.test/event",
+            onClick,
+            onContextMenu,
        });
+
+        vm.setProps({
+            ts: nowDate.getTime() + HOUR_MS,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            ts: "09:09",
+            tsSentAt: "Fri, Dec 17, 2021, 09:09:00",
+        });
+        expect(vm.getSnapshot().tsReceivedAt).toBeUndefined();
+        expect(vm.getSnapshot().inhibitTooltip).toBeUndefined();
+        expect(vm.getSnapshot().href).toBeUndefined();
+        expect(vm.onClick).toBeUndefined();
+        expect(vm.onContextMenu).toBeUndefined();
+    });
+
+    it("does not emit an update when batched props are unchanged", () => {
+        const props = {
+            ts: nowDate.getTime(),
+            href: "https://example.test/event",
+        };
+        const vm = new MessageTimestampViewModel(props);
        const listener = jest.fn();
        vm.subscribe(listener);

-        vm.setTimestamp(nowDate.getTime());
-        vm.setHref("https://example.test/event");
+        vm.setProps(props);

        expect(listener).not.toHaveBeenCalled();
    });