From 672dab199866fd81f67cb7e77da39480647b7948 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Thu, 9 Sep 2021 17:31:05 +0100
Subject: [PATCH] Force refresh threads timeline

Fixes vector-im/element-web#18947

In the absence of a proper pending events / remote echo setup it seems fairly difficult to get the timeline to update

Adding a temporary helper to force refresh the timeline and not swallow local events when sending a message from the thread sidebar
---
 src/components/structures/ThreadView.tsx    | 11 ++++++++---
 src/components/structures/TimelinePanel.tsx |  6 ++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index 134f018aed..48e08f075f 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -50,6 +50,7 @@ interface IState {
 @replaceableComponent("structures.ThreadView")
 export default class ThreadView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
+    private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
 
     constructor(props: IProps) {
         super(props);
@@ -110,10 +111,13 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
     private updateThread = (thread?: Thread) => {
         if (thread) {
-            this.setState({ thread });
-        } else {
-            this.forceUpdate();
+            this.setState({
+                thread,
+                replyToEvent: thread.replyToEvent,
+            });
         }
+
+        this.timelinePanelRef.current?.refreshTimeline();
     };
 
     public render(): JSX.Element {
@@ -126,6 +130,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
             >
                 { this.state.thread && (
                     <TimelinePanel
+                        ref={this.timelinePanelRef}
                         manageReadReceipts={false}
                         manageReadMarkers={false}
                         timelineSet={this.state?.thread?.timelineSet}
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index e5fa6967dc..fdf9c487c8 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -1179,6 +1179,12 @@ class TimelinePanel extends React.Component<IProps, IState> {
         this.setState(this.getEvents());
     }
 
+    // Force refresh the timeline before threads support pending events
+    public refreshTimeline(): void {
+        this.loadTimeline();
+        this.reloadEvents();
+    }
+
     // get the list of events from the timeline window and the pending event list
     private getEvents(): Pick<IState, "events" | "liveEvents" | "firstVisibleEventIndex"> {
         const events: MatrixEvent[] = this.timelineWindow.getEvents();