diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 695858270f..17513dde76 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -350,7 +350,10 @@ interface IState { hover: boolean; isQuoteExpanded?: boolean; - thread?: Thread; + + thread: Thread; + threadReplyCount: number; + threadLastReply: MatrixEvent; threadNotification?: NotificationCountType; } @@ -378,6 +381,8 @@ export default class EventTile extends React.Component { constructor(props: IProps, context: React.ContextType) { super(props, context); + const thread = this.props.mxEvent?.getThread(); + this.state = { // Whether the action bar is focused. actionBarFocused: false, @@ -393,7 +398,9 @@ export default class EventTile extends React.Component { hover: false, - thread: this.props.mxEvent?.getThread(), + thread, + threadReplyCount: thread?.length, + threadLastReply: thread?.lastReply, }; // don't do RR animations until we are mounted @@ -543,12 +550,13 @@ export default class EventTile extends React.Component { } this.setupNotificationListener(thread); - this.setState({ - thread, - }); - - this.forceUpdate(); } + + this.setState({ + threadLastReply: thread.lastReply, + threadReplyCount: thread.length, + thread, + }); }; // TODO: [REACT-WARNING] Replace with appropriate lifecycle event @@ -642,21 +650,19 @@ export default class EventTile extends React.Component { } private renderThreadLastMessagePreview(): JSX.Element | null { - if (!this.thread) { + const { threadLastReply } = this.state; + if (!threadLastReply) { return null; } - const [lastEvent] = this.thread.events - .filter(event => event.isThreadRelation) - .slice(-1); - const threadMessagePreview = MessagePreviewStore.instance.generatePreviewForEvent(lastEvent); + const threadMessagePreview = MessagePreviewStore.instance.generatePreviewForEvent(threadLastReply); - if (!threadMessagePreview || !lastEvent.sender) { + if (!threadMessagePreview || !threadLastReply.sender) { return null; } return <> - +
{ threadMessagePreview } @@ -670,7 +676,7 @@ export default class EventTile extends React.Component { return (

{ _t("From a thread") }

); - } else if (this.thread) { + } else if (this.state.threadReplyCount) { return ( { context => @@ -682,7 +688,7 @@ export default class EventTile extends React.Component { > { _t("%(count)s reply", { - count: this.thread.length, + count: this.state.threadReplyCount, }) } { this.renderThreadLastMessagePreview() }