Fix issue where thread dropdown would not correctly

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,9 +216,12 @@ 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 = room?.threadsTimelineSets[0]?.getLiveTimeline()?.getEvents()?.length > 0;
+
     useEffect(() => {
         const room = mxClient.getRoom(roomId);
         room.createThreadsTimelineSets()
@@ -230,16 +234,6 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
             });
     }, [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 +262,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                     <ThreadPanelHeader
                         filterOption={filterOption}
                         setFilterOption={setFilterOption}
-                        empty={!timelineSet?.getLiveTimeline()?.getEvents().length}
+                        empty={!hasThreads}
                     />
                 }
                 footer={
@@ -315,7 +309,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)}
                             />