Merge pull request #5547 from matrix-org/jryans/listener-overload

Use room-specific listeners for message preview and community prototype

src/components/views/rooms/RoomTile.tsx

@@ -29,7 +29,7 @@ import ActiveRoomObserver from "../../../ActiveRoomObserver";
 import { _t } from "../../../languageHandler";
 import { ChevronFace, ContextMenuTooltipButton } from "../../structures/ContextMenu";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
-import { MessagePreviewStore, ROOM_PREVIEW_CHANGED } from "../../../stores/room-list/MessagePreviewStore";
+import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import { ALL_MESSAGES, ALL_MESSAGES_LOUD, MENTIONS_ONLY, MUTE } from "../../../RoomNotifs";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -51,7 +51,6 @@ import IconizedContextMenu, {
     IconizedContextMenuRadio,
 } from "../context_menus/IconizedContextMenu";
 import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/CommunityPrototypeStore";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 
 interface IProps {
     room: Room;
@@ -99,12 +98,18 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
         ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        MessagePreviewStore.instance.on(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
+        MessagePreviewStore.instance.on(
+            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
+            this.onRoomPreviewChanged,
+        );
         this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
         this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
         this.roomProps = EchoChamber.forRoom(this.props.room);
         this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
-        CommunityPrototypeStore.instance.on(UPDATE_EVENT, this.onCommunityUpdate);
+        CommunityPrototypeStore.instance.on(
+            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+            this.onCommunityUpdate,
+        );
     }
 
     private onNotificationUpdate = () => {
@@ -128,6 +133,24 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         if (prevProps.showMessagePreview !== this.props.showMessagePreview && this.showMessagePreview) {
             this.setState({messagePreview: this.generatePreview()});
         }
+        if (prevProps.room?.roomId !== this.props.room?.roomId) {
+            MessagePreviewStore.instance.off(
+                MessagePreviewStore.getPreviewChangedEventName(prevProps.room),
+                this.onRoomPreviewChanged,
+            );
+            MessagePreviewStore.instance.on(
+                MessagePreviewStore.getPreviewChangedEventName(this.props.room),
+                this.onRoomPreviewChanged,
+            );
+            CommunityPrototypeStore.instance.off(
+                CommunityPrototypeStore.getUpdateEventName(prevProps.room?.roomId),
+                this.onCommunityUpdate,
+            );
+            CommunityPrototypeStore.instance.on(
+                CommunityPrototypeStore.getUpdateEventName(this.props.room?.roomId),
+                this.onCommunityUpdate,
+            );
+        }
     }
 
     public componentDidMount() {
@@ -140,11 +163,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     public componentWillUnmount() {
         if (this.props.room) {
             ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
+            MessagePreviewStore.instance.off(
+                MessagePreviewStore.getPreviewChangedEventName(this.props.room),
+                this.onRoomPreviewChanged,
+            );
+            CommunityPrototypeStore.instance.off(
+                CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+                this.onCommunityUpdate,
+            );
         }
         defaultDispatcher.unregister(this.dispatcherRef);
-        MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
         this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
-        CommunityPrototypeStore.instance.off(UPDATE_EVENT, this.onCommunityUpdate);
     }
 
     private onAction = (payload: ActionPayload) => {

src/stores/CommunityPrototypeStore.ts

@@ -48,6 +48,10 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient<IState> {
         return CommunityPrototypeStore.internalInstance;
     }
 
+    public static getUpdateEventName(roomId: string): string {
+        return `${UPDATE_EVENT}:${roomId}`;
+    }
+
     public getSelectedCommunityId(): string {
         if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
             return GroupFilterOrderStore.getSelectedTags()[0];
@@ -134,7 +138,8 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient<IState> {
             }
         } else if (payload.action === "MatrixActions.accountData") {
             if (payload.event_type.startsWith("im.vector.group_info.")) {
-                this.emit(UPDATE_EVENT, payload.event_type.substring("im.vector.group_info.".length));
+                const roomId = payload.event_type.substring("im.vector.group_info.".length);
+                this.emit(CommunityPrototypeStore.getUpdateEventName(roomId), roomId);
             }
         } else if (payload.action === "select_tag") {
             // Automatically select the general chat when switching communities
@@ -167,7 +172,7 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient<IState> {
             if (getEffectiveMembership(myMember.membership) === EffectiveMembership.Invite) {
                 // Fake an update for anything that might have started listening before the invite
                 // data was available (eg: RoomPreviewBar after a refresh)
-                this.emit(UPDATE_EVENT, room.roomId);
+                this.emit(CommunityPrototypeStore.getUpdateEventName(room.roomId), room.roomId);
             }
         }
     }

src/stores/room-list/MessagePreviewStore.ts

@@ -30,7 +30,7 @@ import { UPDATE_EVENT } from "../AsyncStore";
 
 // Emitted event for when a room's preview has changed. First argument will the room for which
 // the change happened.
-export const ROOM_PREVIEW_CHANGED = "room_preview_changed";
+const ROOM_PREVIEW_CHANGED = "room_preview_changed";
 
 const PREVIEWS = {
     'm.room.message': {
@@ -84,6 +84,10 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
         return MessagePreviewStore.internalInstance;
     }
 
+    public static getPreviewChangedEventName(room: Room): string {
+        return `${ROOM_PREVIEW_CHANGED}:${room?.roomId}`;
+    }
+
     /**
      * Gets the pre-translated preview for a given room
      * @param room The room to get the preview for.
@@ -150,7 +154,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
                 // We've muted the underlying Map, so just emit that we've changed.
                 this.previews.set(room.roomId, map);
                 this.emit(UPDATE_EVENT, this);
-                this.emit(ROOM_PREVIEW_CHANGED, room);
+                this.emit(MessagePreviewStore.getPreviewChangedEventName(room), room);
             }
             return; // we're done
         }
@@ -158,7 +162,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
         // At this point, we didn't generate a preview so clear it
         this.previews.set(room.roomId, new Map<TagID|TAG_ANY, string|null>());
         this.emit(UPDATE_EVENT, this);
-        this.emit(ROOM_PREVIEW_CHANGED, room);
+        this.emit(MessagePreviewStore.getPreviewChangedEventName(room), room);
     }
 
     protected async onAction(payload: ActionPayload) {