From 729356394e30672832f176a338eade2b1f3de51c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 15 Jan 2021 13:54:38 +0000 Subject: [PATCH 1/3] Use room-specific listeners for message previews This should be a bit faster (since we now only notify one tile instead of all for each update). It also resolves the max listener warning. Fixes https://github.com/vector-im/element-web/issues/15121 --- src/components/views/rooms/RoomTile.tsx | 22 ++++++++++++++++++--- src/stores/room-list/MessagePreviewStore.ts | 10 +++++++--- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index a241a13991..2ad10c79c8 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/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"; @@ -99,7 +99,10 @@ export default class RoomTile extends React.PureComponent { 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); @@ -128,6 +131,16 @@ export default class RoomTile extends React.PureComponent { 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, + ); + } } public componentDidMount() { @@ -140,9 +153,12 @@ export default class RoomTile extends React.PureComponent { public componentWillUnmount() { if (this.props.room) { ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate); + MessagePreviewStore.instance.off( + MessagePreviewStore.getPreviewChangedEventName(this.props.room), + this.onRoomPreviewChanged, + ); } 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); } diff --git a/src/stores/room-list/MessagePreviewStore.ts b/src/stores/room-list/MessagePreviewStore.ts index 2803f0a23e..38e56881cc 100644 --- a/src/stores/room-list/MessagePreviewStore.ts +++ b/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 { 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 { // 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 { // At this point, we didn't generate a preview so clear it this.previews.set(room.roomId, new Map()); this.emit(UPDATE_EVENT, this); - this.emit(ROOM_PREVIEW_CHANGED, room); + this.emit(MessagePreviewStore.getPreviewChangedEventName(room), room); } protected async onAction(payload: ActionPayload) { From 8a341446aaecb00ccf357209ce5521e358365f71 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 15 Jan 2021 14:34:56 +0000 Subject: [PATCH 2/3] Use room-specific listeners for community prototype Similar to message previews, this changes another area to use room-specific listeners for better performance and avoiding warnings. --- src/components/views/rooms/RoomTile.tsx | 18 ++++++++++++++++-- src/stores/CommunityPrototypeStore.ts | 9 +++++++-- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 2ad10c79c8..959b2f162a 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -107,7 +107,10 @@ export default class RoomTile extends React.PureComponent { 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 = () => { @@ -140,6 +143,14 @@ export default class RoomTile extends React.PureComponent { 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, + ); } } @@ -157,10 +168,13 @@ export default class RoomTile extends React.PureComponent { MessagePreviewStore.getPreviewChangedEventName(this.props.room), this.onRoomPreviewChanged, ); + CommunityPrototypeStore.instance.off( + CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId), + this.onCommunityUpdate, + ); } defaultDispatcher.unregister(this.dispatcherRef); this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate); - CommunityPrototypeStore.instance.off(UPDATE_EVENT, this.onCommunityUpdate); } private onAction = (payload: ActionPayload) => { diff --git a/src/stores/CommunityPrototypeStore.ts b/src/stores/CommunityPrototypeStore.ts index 95d56bd40e..92e094c83b 100644 --- a/src/stores/CommunityPrototypeStore.ts +++ b/src/stores/CommunityPrototypeStore.ts @@ -48,6 +48,10 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient { 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 { } } 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 { 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); } } } From 462e0889f05172e06de3927cf81d594af848d748 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 15 Jan 2021 14:46:38 +0000 Subject: [PATCH 3/3] Fix lint --- src/components/views/rooms/RoomTile.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 959b2f162a..c985e80010 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -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;