diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 65cddbd225..bb772faa80 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -279,8 +279,6 @@ export default class RightPanel extends React.Component { resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} permalinkCreator={this.props.permalinkCreator} - allThreadsTimelineSet={this.props.room.threadsTimelineSets[0]} - myThreadsTimelineSet={this.props.room.threadsTimelineSets[1]} />; break; diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index f32fb52a2b..eae620192b 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -17,6 +17,7 @@ limitations under the License. import React, { useContext, useEffect, useRef, useState } from 'react'; import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set'; import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread'; +import { Room } from 'matrix-js-sdk/src/models/room'; import BaseCard from "../views/right_panel/BaseCard"; import ResizeNotifier from '../../utils/ResizeNotifier'; @@ -37,8 +38,6 @@ interface IProps { onClose: () => void; resizeNotifier: ResizeNotifier; permalinkCreator: RoomPermalinkCreator; - allThreadsTimelineSet: EventTimelineSet; - myThreadsTimelineSet: EventTimelineSet; } export enum ThreadFilterType { @@ -156,8 +155,6 @@ const ThreadPanel: React.FC = ({ roomId, onClose, permalinkCreator, - myThreadsTimelineSet, - allThreadsTimelineSet, }) => { const mxClient = useContext(MatrixClientContext); const roomContext = useContext(RoomContext); @@ -165,13 +162,17 @@ const ThreadPanel: React.FC = ({ const card = useRef(); const [filterOption, setFilterOption] = useState(ThreadFilterType.All); - const [room, setRoom] = useState(mxClient.getRoom(roomId)); + const [room, setRoom] = useState(null); const [threadCount, setThreadCount] = useState(0); const [timelineSet, setTimelineSet] = useState(null); const [narrow, setNarrow] = useState(false); useEffect(() => { - setRoom(mxClient.getRoom(roomId)); + const room = mxClient.getRoom(roomId); + room.createThreadsTimelineSets().then(() => { + setRoom(room); + setFilterOption(ThreadFilterType.All); + }); }, [mxClient, roomId]); useEffect(() => { @@ -183,24 +184,28 @@ const ThreadPanel: React.FC = ({ if (timelineSet) timelinePanel.current.refreshTimeline(); } - setThreadCount(room.threads.size); + if (room) { + setThreadCount(room.threads.size); - room.on(ThreadEvent.New, onNewThread); - room.on(ThreadEvent.Update, refreshTimeline); + room.on(ThreadEvent.New, onNewThread); + room.on(ThreadEvent.Update, refreshTimeline); + } return () => { - room.removeListener(ThreadEvent.New, onNewThread); - room.removeListener(ThreadEvent.Update, refreshTimeline); + room?.removeListener(ThreadEvent.New, onNewThread); + room?.removeListener(ThreadEvent.Update, refreshTimeline); }; }, [room, mxClient, timelineSet]); useEffect(() => { - if (filterOption === ThreadFilterType.My) { - setTimelineSet(myThreadsTimelineSet); - } else { - setTimelineSet(allThreadsTimelineSet); + if (room) { + if (filterOption === ThreadFilterType.My) { + setTimelineSet(room.threadsTimelineSets[1]); + } else { + setTimelineSet(room.threadsTimelineSets[0]); + } } - }, [filterOption, allThreadsTimelineSet, myThreadsTimelineSet]); + }, [room, filterOption]); useEffect(() => { if (timelineSet && !Thread.hasServerSideSupport) {