imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Lazy load thread list timeline set (#8120)

Browse source
This commit is contained in:
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
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} resizeNotifier={this.props.resizeNotifier}
onClose={this.onClose} onClose={this.onClose}
permalinkCreator={this.props.permalinkCreator} permalinkCreator={this.props.permalinkCreator}
allThreadsTimelineSet={this.props.room.threadsTimelineSets[0]}
myThreadsTimelineSet={this.props.room.threadsTimelineSets[1]}
/>; />;
break; 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 React, { useContext, useEffect, useRef, useState } from 'react';
import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set'; import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread'; 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 BaseCard from "../views/right_panel/BaseCard";
import ResizeNotifier from '../../utils/ResizeNotifier'; import ResizeNotifier from '../../utils/ResizeNotifier';
@ -37,8 +38,6 @@ interface IProps {
onClose: () => void; onClose: () => void;
resizeNotifier: ResizeNotifier; resizeNotifier: ResizeNotifier;
permalinkCreator: RoomPermalinkCreator; permalinkCreator: RoomPermalinkCreator;
allThreadsTimelineSet: EventTimelineSet;
myThreadsTimelineSet: EventTimelineSet;
} }
export enum ThreadFilterType { export enum ThreadFilterType {
@ -156,8 +155,6 @@ const ThreadPanel: React.FC<IProps> = ({
roomId, roomId,
onClose, onClose,
permalinkCreator, permalinkCreator,
myThreadsTimelineSet,
allThreadsTimelineSet,
}) => { }) => {
const mxClient = useContext(MatrixClientContext); const mxClient = useContext(MatrixClientContext);
const roomContext = useContext(RoomContext); const roomContext = useContext(RoomContext);
@ -165,13 +162,17 @@ const ThreadPanel: React.FC<IProps> = ({
const card = useRef<HTMLDivElement>(); const card = useRef<HTMLDivElement>();
const [filterOption, setFilterOption] = useState<ThreadFilterType>(ThreadFilterType.All); 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 [threadCount, setThreadCount] = useState<number>(0);
const [timelineSet, setTimelineSet] = useState<EventTimelineSet | null>(null); const [timelineSet, setTimelineSet] = useState<EventTimelineSet | null>(null);
const [narrow, setNarrow] = useState<boolean>(false); const [narrow, setNarrow] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
setRoom(mxClient.getRoom(roomId)); const room = mxClient.getRoom(roomId);
room.createThreadsTimelineSets().then(() => {
setRoom(room);
setFilterOption(ThreadFilterType.All);
});
}, [mxClient, roomId]); }, [mxClient, roomId]);
useEffect(() => { useEffect(() => {
@ -183,24 +184,28 @@ const ThreadPanel: React.FC<IProps> = ({
if (timelineSet) timelinePanel.current.refreshTimeline(); if (timelineSet) timelinePanel.current.refreshTimeline();
} }
setThreadCount(room.threads.size); if (room) {
setThreadCount(room.threads.size);
room.on(ThreadEvent.New, onNewThread); room.on(ThreadEvent.New, onNewThread);
room.on(ThreadEvent.Update, refreshTimeline); room.on(ThreadEvent.Update, refreshTimeline);
}
return () => { return () => {
room.removeListener(ThreadEvent.New, onNewThread); room?.removeListener(ThreadEvent.New, onNewThread);
room.removeListener(ThreadEvent.Update, refreshTimeline); room?.removeListener(ThreadEvent.Update, refreshTimeline);
}; };
}, [room, mxClient, timelineSet]); }, [room, mxClient, timelineSet]);
useEffect(() => { useEffect(() => {
if (filterOption === ThreadFilterType.My) { if (room) {
setTimelineSet(myThreadsTimelineSet); if (filterOption === ThreadFilterType.My) {
} else { setTimelineSet(room.threadsTimelineSets[1]);
setTimelineSet(allThreadsTimelineSet); } else {
setTimelineSet(room.threadsTimelineSets[0]);
}
} }
}, [filterOption, allThreadsTimelineSet, myThreadsTimelineSet]); }, [room, filterOption]);
useEffect(() => { useEffect(() => {
if (timelineSet && !Thread.hasServerSideSupport) { if (timelineSet && !Thread.hasServerSideSupport) {