Fix issue where thread dropdown would not show up correctly (#9872)

* Fix issue where thread dropdown would not correctly
* Write additional test for both issues

- Thread dropdown should be shown if there is any thread, even if not participated
- Thread list correctly updates after every change of the dropdown immediately

src/components/structures/ThreadPanel.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { Optional } from "matrix-events-sdk";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
 import { Thread } from "matrix-js-sdk/src/models/thread";
@@ -215,31 +216,22 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
 
     const [filterOption, setFilterOption] = useState<ThreadFilterType>(ThreadFilterType.All);
     const [room, setRoom] = useState<Room | null>(null);
-    const [timelineSet, setTimelineSet] = useState<EventTimelineSet | null>(null);
     const [narrow, setNarrow] = useState<boolean>(false);
 
+    const timelineSet: Optional<EventTimelineSet> =
+        filterOption === ThreadFilterType.My ? room?.threadsTimelineSets[1] : room?.threadsTimelineSets[0];
+    const hasThreads = Boolean(room?.threadsTimelineSets?.[0]?.getLiveTimeline()?.getEvents()?.length);
+
     useEffect(() => {
         const room = mxClient.getRoom(roomId);
-        room.createThreadsTimelineSets()
-            .then(() => {
-                return room.fetchRoomThreads();
-            })
+        room?.createThreadsTimelineSets()
+            .then(() => room.fetchRoomThreads())
             .then(() => {
                 setFilterOption(ThreadFilterType.All);
                 setRoom(room);
             });
     }, [mxClient, roomId]);
 
-    useEffect(() => {
-        if (room) {
-            if (filterOption === ThreadFilterType.My) {
-                setTimelineSet(room.threadsTimelineSets[1]);
-            } else {
-                setTimelineSet(room.threadsTimelineSets[0]);
-            }
-        }
-    }, [room, filterOption]);
-
     useEffect(() => {
         if (timelineSet && !Thread.hasServerSideSupport) {
             timelinePanel.current.refreshTimeline();
@@ -268,7 +260,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                     <ThreadPanelHeader
                         filterOption={filterOption}
                         setFilterOption={setFilterOption}
-                        empty={!timelineSet?.getLiveTimeline()?.getEvents().length}
+                        empty={!hasThreads}
                     />
                 }
                 footer={
@@ -315,7 +307,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                         showUrlPreview={false} // No URL previews at the threads list level
                         empty={
                             <EmptyThread
-                                hasThreads={room.threadsTimelineSets?.[0]?.getLiveTimeline().getEvents().length > 0}
+                                hasThreads={hasThreads}
                                 filterOption={filterOption}
                                 showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
                             />