OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Lazy load thread list timeline set (#8120)

pull/21833/head
Germain 2022-03-22 21:34:16 +00:00 committed by GitHub
parent ebbda285ca
commit f416a970ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/structures/RightPanel.tsx
View File

@ -279,8 +279,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
resizeNotifier={this.props.resizeNotifier}
onClose={this.onClose}
permalinkCreator={this.props.permalinkCreator}
allThreadsTimelineSet={this.props.room.threadsTimelineSets[0]}
myThreadsTimelineSet={this.props.room.threadsTimelineSets[1]}
/>;
break;

37
src/components/structures/ThreadPanel.tsx
View File

@ -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<IProps> = ({
roomId,
onClose,
permalinkCreator,
myThreadsTimelineSet,
allThreadsTimelineSet,
}) => {
const mxClient = useContext(MatrixClientContext);
const roomContext = useContext(RoomContext);
@ -165,13 +162,17 @@ const ThreadPanel: React.FC<IProps> = ({
const card = useRef<HTMLDivElement>();
const [filterOption, setFilterOption] = useState<ThreadFilterType>(ThreadFilterType.All);
const [room, setRoom] = useState(mxClient.getRoom(roomId));
const [room, setRoom] = useState<Room | null>(null);
const [threadCount, setThreadCount] = useState<number>(0);
const [timelineSet, setTimelineSet] = useState<EventTimelineSet | null>(null);
const [narrow, setNarrow] = useState<boolean>(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<IProps> = ({
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) {