diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 2d17c858a2..b7a19661b5 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -62,6 +62,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); @@ -213,11 +219,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(); } @@ -227,13 +228,14 @@ 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) => { + onEventReplaced = (ev) => { if (this.unmounted) return; // If one of the events we are rendering gets redacted, force a re-render @@ -242,6 +244,18 @@ export default class ReplyThread extends React.Component { } }; + 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 + if (this.state.events.some(event => event.getId() === eventId)) { + this.forceUpdate(); + } + }; + async initialize() { const {parentEv} = this.props; // at time of making this component we checked that props.parentEv has a parentEventId @@ -368,6 +382,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} />