From 5973d725e05a930c630be29d66693c2be40ae9ef Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Tue, 1 Feb 2022 15:01:00 +0000
Subject: [PATCH] Add new threads to the panel as they are discovered (#7688)

---
 src/components/structures/ThreadPanel.tsx     | 31 ++++++++++++++++++-
 .../PollCreateDialog-test.tsx.snap            |  4 +++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
index 5e0d556c3ff..20f4872403c 100644
--- a/src/components/structures/ThreadPanel.tsx
+++ b/src/components/structures/ThreadPanel.tsx
@@ -25,7 +25,7 @@ import {
     UNSTABLE_FILTER_RELATION_SENDERS,
     UNSTABLE_FILTER_RELATION_TYPES,
 } from 'matrix-js-sdk/src/filter';
-import { ThreadEvent } from 'matrix-js-sdk/src/models/thread';
+import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 
 import BaseCard from "../views/right_panel/BaseCard";
 import ResizeNotifier from '../../utils/ResizeNotifier';
@@ -231,6 +231,35 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
         if (timelineSet) ref.current.refreshTimeline();
     });
 
+    useEventEmitter(room, ThreadEvent.New, async (thread: Thread) => {
+        if (timelineSet) {
+            const capabilities = await mxClient.getCapabilities();
+            const serverSupportsThreads = capabilities['io.element.thread']?.enabled;
+
+            const discoveredScrollingBack = room.lastThread.rootEvent.localTimestamp < thread.rootEvent.localTimestamp;
+
+            // When the server support threads we're only interested in adding
+            // the newly created threads to the list.
+            // The ones discovered when scrolling back should be discarded as
+            // they will be discovered by the `/messages` filter
+            if (serverSupportsThreads) {
+                if (!discoveredScrollingBack) {
+                    timelineSet.addEventToTimeline(
+                        thread.rootEvent,
+                        timelineSet.getLiveTimeline(),
+                        false,
+                    );
+                }
+            } else {
+                timelineSet.addEventToTimeline(
+                    thread.rootEvent,
+                    timelineSet.getLiveTimeline(),
+                    !discoveredScrollingBack,
+                );
+            }
+        }
+    });
+
     return (
         <RoomContext.Provider value={{
             ...roomContext,
diff --git a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap
index b089c685d66..141a0ae258d 100644
--- a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap
@@ -36,6 +36,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
       "filteredTimelineSets": Object {},
       "getTypeWarning": false,
       "getVersionWarning": false,
+      "lastThread": undefined,
       "membersPromise": Promise {},
       "myUserId": "@name:example.com",
       "name": "roomid",
@@ -256,6 +257,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
         "filteredTimelineSets": Object {},
         "getTypeWarning": false,
         "getVersionWarning": false,
+        "lastThread": undefined,
         "membersPromise": Promise {},
         "myUserId": "@name:example.com",
         "name": "roomid",
@@ -1157,6 +1159,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
       "filteredTimelineSets": Object {},
       "getTypeWarning": false,
       "getVersionWarning": false,
+      "lastThread": undefined,
       "membersPromise": Promise {},
       "myUserId": "@name:example.com",
       "name": "roomid",
@@ -1377,6 +1380,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
         "filteredTimelineSets": Object {},
         "getTypeWarning": false,
         "getVersionWarning": false,
+        "lastThread": undefined,
         "membersPromise": Promise {},
         "myUserId": "@name:example.com",
         "name": "roomid",