initial working poc solution

Author: justjanne

src/components/structures/ThreadPanel.tsx

@@ -230,6 +230,7 @@ const ThreadPanel: React.FC<IProps> = ({
 
     useEffect(() => {
         if (timelineSet && !Thread.hasServerSideSupport) {
+            timelineSet.resetLiveTimeline();
             timelinePanel.current.refreshTimeline();
         }
     }, [timelineSet, timelinePanel]);

src/components/structures/ThreadView.tsx

@@ -20,7 +20,6 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
 import { Direction } from 'matrix-js-sdk/src/models/event-timeline';
-import { IRelationsRequestOpts } from 'matrix-js-sdk/src/@types/requests';
 import { logger } from 'matrix-js-sdk/src/logger';
 import classNames from 'classnames';
 
@@ -195,9 +194,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 thread,
             }, async () => {
                 thread.emit(ThreadEvent.ViewThread);
-                await thread.fetchInitialEvents();
-                this.nextBatch = thread.liveTimeline.getPaginationToken(Direction.Backward);
-                this.timelinePanel.current?.refreshTimeline();
+                this.timelinePanel.current?.refreshTimeline(this.props.initialEvent?.getId());
             });
         }
     };
@@ -242,35 +239,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private nextBatch: string;
-
     private onPaginationRequest = async (
         timelineWindow: TimelineWindow | null,
         direction = Direction.Backward,
         limit = 20,
     ): Promise<boolean> => {
-        if (!Thread.hasServerSideSupport) {
-            timelineWindow.extend(direction, limit);
-            return true;
-        }
-
-        const opts: IRelationsRequestOpts = {
-            limit,
-        };
-
-        if (this.nextBatch) {
-            opts.from = this.nextBatch;
-        }
-
-        const { nextBatch } = await this.state.thread.fetchEvents(opts);
-
-        this.nextBatch = nextBatch;
-
-        // Advances the marker on the TimelineWindow to define the correct
-        // window of events to display on screen
-        timelineWindow.extend(direction, limit);
-
-        return !!nextBatch;
+        return timelineWindow.paginate(direction, limit);
     };
 
     private onFileDrop = (dataTransfer: DataTransfer) => {

src/utils/EventUtils.ts

@@ -238,8 +238,12 @@ export async function fetchInitialEvent(
     ) {
         const threadId = initialEvent.threadRootId;
         const room = client.getRoom(roomId);
+        const mapper = client.getEventMapper();
+        const rootEvent = room.findEventById(threadId)
+            ?? mapper(await client.fetchRoomEvent(roomId, threadId));
         try {
-            room.createThread(threadId, room.findEventById(threadId), [initialEvent], true);
+            const thread = room.createThread(threadId, rootEvent, [initialEvent], true);
+            initialEvent.setThread(thread);
         } catch (e) {
             logger.warn("Could not find root event: " + threadId);
         }