Fix editing and redactions not updating the Reply Thread

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

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()}
                 />
             </blockquote>;
         });

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} />
                         </div>
                     </div>