From 6baa6c8f65035633b86d4e7aec2e571b201c68ef Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Fri, 15 Oct 2021 11:08:33 +0100
Subject: [PATCH] Listen to new thread to render info on timeline

---
 src/components/structures/ThreadView.tsx | 15 ++++++++++++---
 src/components/views/rooms/EventTile.tsx | 14 ++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index 3462212834..7bd6415cd3 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -48,10 +48,8 @@ interface IProps {
 }
 
 interface IState {
-    replyToEvent?: MatrixEvent;
     thread?: Thread;
     editState?: EditorStateTransfer;
-
 }
 
 @replaceableComponent("structures.ThreadView")
@@ -69,11 +67,16 @@ export default class ThreadView extends React.Component<IProps, IState> {
     public componentDidMount(): void {
         this.setupThread(this.props.mxEvent);
         this.dispatcherRef = dis.register(this.onAction);
+
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        room.on(ThreadEvent.New, this.onNewThread);
     }
 
     public componentWillUnmount(): void {
         this.teardownThread();
         dis.unregister(this.dispatcherRef);
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        room.on(ThreadEvent.New, this.onNewThread);
     }
 
     public componentDidUpdate(prevProps) {
@@ -135,11 +138,17 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
+    private onNewThread = (thread: Thread) => {
+        if (thread.id === this.props.mxEvent.getId()) {
+            this.teardownThread();
+            this.setupThread(this.props.mxEvent);
+        }
+    };
+
     private updateThread = (thread?: Thread) => {
         if (thread) {
             this.setState({
                 thread,
-                replyToEvent: thread.replyToEvent,
             });
         }
 
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index c6798f1f15..9fd9a56730 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -475,6 +475,9 @@ export default class EventTile extends React.Component<IProps, IState> {
             this.props.mxEvent.once(ThreadEvent.Ready, this.updateThread);
             this.props.mxEvent.on(ThreadEvent.Update, this.updateThread);
         }
+
+        const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+        room.on(ThreadEvent.New, this.onNewThread);
     }
 
     private updateThread = (thread) => {
@@ -516,6 +519,9 @@ export default class EventTile extends React.Component<IProps, IState> {
             this.props.mxEvent.off(ThreadEvent.Ready, this.updateThread);
             this.props.mxEvent.off(ThreadEvent.Update, this.updateThread);
         }
+
+        const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+        room.off(ThreadEvent.New, this.onNewThread);
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
@@ -526,6 +532,14 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
     }
 
+    private onNewThread = (thread: Thread) => {
+        if (thread.id === this.props.mxEvent.getId()) {
+            this.updateThread(thread);
+            const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+            room.off(ThreadEvent.New, this.onNewThread);
+        }
+    };
+
     private renderThreadInfo(): React.ReactNode {
         if (!SettingsStore.getValue("feature_thread")) {
             return null;