diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index c663832a15..24b49f2b13 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -63,6 +63,12 @@ export default class ReplyThread extends React.Component { err: false, }; + this.unmounted = false; + this.context.on("Event.replaced", this.onEventReplaced); + this.room = this.context.getRoom(this.props.parentEv.getRoomId()); + this.room.on("Room.redaction", this.onRoomRedaction); + this.room.on("Room.redactionCancelled", this.onRoomRedaction); + this.onQuoteClick = this.onQuoteClick.bind(this); this.canCollapse = this.canCollapse.bind(this); this.collapse = this.collapse.bind(this); @@ -217,11 +223,6 @@ export default class ReplyThread extends React.Component { } componentDidMount() { - this.unmounted = false; - this.room = this.context.getRoom(this.props.parentEv.getRoomId()); - this.room.on("Room.redaction", this.onRoomRedaction); - // same event handler as Room.redaction as for both we just do forceUpdate - this.room.on("Room.redactionCancelled", this.onRoomRedaction); this.initialize(); } @@ -231,21 +232,36 @@ export default class ReplyThread extends React.Component { componentWillUnmount() { this.unmounted = true; + this.context.removeListener("Event.replaced", this.onEventReplaced); if (this.room) { this.room.removeListener("Room.redaction", this.onRoomRedaction); this.room.removeListener("Room.redactionCancelled", this.onRoomRedaction); } } - onRoomRedaction = (ev, room) => { - if (this.unmounted) return; - - // If one of the events we are rendering gets redacted, force a re-render - if (this.state.events.some(event => event.getId() === ev.getId())) { + updateForEventId = (eventId) => { + if (this.state.events.some(event => event.getId() === eventId)) { this.forceUpdate(); } }; + onEventReplaced = (ev) => { + if (this.unmounted) return; + + // If one of the events we are rendering gets replaced, force a re-render + this.updateForEventId(ev.getId()); + }; + + onRoomRedaction = (ev) => { + if (this.unmounted) return; + + const eventId = ev.getAssociatedId(); + if (!eventId) return; + + // If one of the events we are rendering gets redacted, force a re-render + this.updateForEventId(eventId); + }; + async initialize() { const {parentEv} = this.props; // at time of making this component we checked that props.parentEv has a parentEventId @@ -372,6 +388,7 @@ export default class ReplyThread extends React.Component { isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} useIRCLayout={this.props.useIRCLayout} enableFlair={SettingsStore.getValue(UIFeature.Flair)} + replacingEventId={ev.replacingEventId()} /> ; }); diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 81034cf07b..c2b1af2ddc 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -918,6 +918,7 @@ export default class EventTile extends React.Component { highlights={this.props.highlights} highlightLink={this.props.highlightLink} onHeightChanged={this.props.onHeightChanged} + replacingEventId={this.props.replacingEventId} showUrlPreview={false} />