Use roomContext.isRoomEncrypted

Author: florianduros

src/components/views/rooms/EventTile.tsx

@@ -11,7 +11,6 @@ import React, { createRef, forwardRef, JSX, MouseEvent, ReactNode } from "react"
 import classNames from "classnames";
 import {
     EventStatus,
-    EventTimeline,
     EventType,
     MatrixEvent,
     MatrixEventEvent,
@@ -22,7 +21,6 @@ import {
     Room,
     RoomEvent,
     RoomMember,
-    RoomStateEvent,
     Thread,
     ThreadEvent,
 } from "matrix-js-sdk/src/matrix";
@@ -264,10 +262,6 @@ interface IState {
 
     thread: Thread | null;
     threadNotification?: NotificationCountType;
-    /**
-     * Whether the event is encrypted.
-     */
-    isRoomEncrypted: boolean;
 }
 
 /**
@@ -324,7 +318,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             hover: false,
 
             thread,
-            isRoomEncrypted: false,
         };
 
         // don't do RR animations until we are mounted
@@ -420,12 +413,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         room?.on(ThreadEvent.New, this.onNewThread);
 
         this.verifyEvent();
-
-        room?.getLiveTimeline().getState(EventTimeline.FORWARDS)?.on(RoomStateEvent.Events, this.onRoomStateEvents);
-
-        const crypto = client.getCrypto();
-        if (!room || !crypto) return;
-        this.setState({ isRoomEncrypted: await crypto.isEncryptionEnabledInRoom(room.roomId) });
     }
 
     private updateThread = (thread: Thread): void => {
@@ -447,10 +434,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             client.removeListener(RoomEvent.Receipt, this.onRoomReceipt);
             const room = client.getRoom(this.props.mxEvent.getRoomId());
             room?.off(ThreadEvent.New, this.onNewThread);
-            room
-                ?.getLiveTimeline()
-                .getState(EventTimeline.FORWARDS)
-                ?.off(RoomStateEvent.Events, this.onRoomStateEvents);
         }
         this.isListeningForReceipts = false;
         this.props.mxEvent.removeListener(MatrixEventEvent.Decrypted, this.onDecrypted);
@@ -487,17 +470,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         }
     };
 
-    private onRoomStateEvents = async (evt: MatrixEvent): Promise<void> => {
-        const client = MatrixClientPeg.safeGet();
-        const crypto = client.getCrypto();
-        if (!crypto) return;
-
-        const room = client.getRoom(evt.getRoomId());
-        if (room && evt.getType() === EventType.RoomEncryption) {
-            this.setState({ isRoomEncrypted: await crypto.isEncryptionEnabledInRoom(room.roomId) });
-        }
-    };
-
     private get thread(): Thread | null {
         let thread: Thread | undefined = this.props.mxEvent.getThread();
         /**
@@ -803,7 +775,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             }
         }
 
-        if (this.state.isRoomEncrypted) {
+        if (this.context.isRoomEncrypted) {
             // else if room is encrypted
             // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
             if (ev.status === EventStatus.ENCRYPTING) {

test/unit-tests/components/views/rooms/EventTile-test.tsx

@@ -10,15 +10,13 @@ import * as React from "react";
 import { act, fireEvent, render, screen, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import {
-    EventTimeline,
     EventType,
     IEventDecryptionResult,
     MatrixClient,
     MatrixEvent,
     NotificationCountType,
     PendingEventOrdering,
     Room,
-    RoomStateEvent,
     TweakName,
 } from "matrix-js-sdk/src/matrix";
 import {
@@ -72,9 +70,11 @@ describe("EventTile", () => {
     function getComponent(
         overrides: Partial<EventTileProps> = {},
         renderingType: TimelineRenderingType = TimelineRenderingType.Room,
+        roomContext: Partial<IRoomState> = {},
     ) {
         const context = getRoomContext(room, {
             timelineRenderingType: renderingType,
+            ...roomContext,
         });
         return render(<WrappedEventTile roomContext={context} eventTilePropertyOverrides={overrides} />);
     }
@@ -439,8 +439,6 @@ describe("EventTile", () => {
         });
 
         it("should update the warning when the event is replaced with an unencrypted one", async () => {
-            jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
-
             // we start out with an event from the trusted device
             mxEvent = await mkEncryptedMatrixEvent({
                 plainContent: { msgtype: "m.text", body: "msg1" },
@@ -454,7 +452,7 @@ describe("EventTile", () => {
                 shieldReason: null,
             } as EventEncryptionInfo);
 
-            const roomContext = getRoomContext(room, {});
+            const roomContext = getRoomContext(room, { isRoomEncrypted: true });
             const { container, rerender } = render(<WrappedEventTile roomContext={roomContext} />);
             await flushPromises();
 
@@ -590,18 +588,19 @@ describe("EventTile", () => {
             shieldReason: null,
         });
 
-        getComponent();
+        const { rerender } = getComponent();
         await flushPromises();
         // The room and the event are unencrypted, the tile should not show the not encrypted status
         expect(screen.queryByText("Not encrypted")).toBeNull();
 
         // The room is now encrypted
-        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
-        // Emit a state event to trigger a re-render
-        const roomState = room!.getLiveTimeline().getState(EventTimeline.FORWARDS)!;
-        act(() => {
-            roomState.emit(RoomStateEvent.Events, new MatrixEvent({ type: EventType.RoomEncryption }), roomState, null);
-        });
+        rerender(
+            <WrappedEventTile
+                roomContext={getRoomContext(room, {
+                    isRoomEncrypted: true,
+                })}
+            />,
+        );
 
         // The event tile should now show the not encrypted status
         await waitFor(() => expect(screen.getByText("Not encrypted")).toBeInTheDocument());