Use updated createThread method (#7670)

Author: Germain

src/components/structures/ThreadPanel.tsx

@@ -88,7 +88,7 @@ async function getThreadTimelineSet(
         const timelineSet = new EventTimelineSet(room, {});
 
         Array.from(room.threads)
-            .sort(([, threadA], [, threadB]) => threadA.lastReply().getTs() - threadB.lastReply().getTs())
+            .sort(([, threadA], [, threadB]) => threadA.replyToEvent.getTs() - threadB.replyToEvent.getTs())
             .forEach(([, thread]) => {
                 const isOwnEvent = thread.rootEvent.getSender() === client.getUserId();
                 if (filterType !== ThreadFilterType.My || isOwnEvent) {

src/components/structures/ThreadView.tsx

@@ -15,9 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import { IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src';
 import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 import { RelationType } from 'matrix-js-sdk/src/@types/event';
+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 classNames from "classnames";
 
 import BaseCard from "../views/right_panel/BaseCard";
@@ -141,7 +145,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
     private setupThread = (mxEv: MatrixEvent) => {
         let thread = this.props.room.threads?.get(mxEv.getId());
         if (!thread) {
-            thread = this.props.room.createThread([mxEv]);
+            thread = this.props.room.createThread(mxEv);
         }
         thread.on(ThreadEvent.Update, this.updateLastThreadReply);
         thread.once(ThreadEvent.Ready, this.updateThread);
@@ -167,10 +171,13 @@ export default class ThreadView extends React.Component<IProps, IState> {
             this.setState({
                 thread,
                 lastThreadReply: thread.lastReply((ev: MatrixEvent) => {
-                    return !ev.status;
+                    return ev.isThreadRelation && !ev.status;
                 }),
-            }, () => {
+            }, async () => {
                 thread.emit(ThreadEvent.ViewThread);
+                if (!thread.initialEventsFetched) {
+                    await thread.fetchInitialEvents();
+                }
                 this.timelinePanelRef.current?.refreshTimeline();
             });
         }
@@ -180,7 +187,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         if (this.state.thread) {
             this.setState({
                 lastThreadReply: this.state.thread.lastReply((ev: MatrixEvent) => {
-                    return !ev.status;
+                    return ev.isThreadRelation && !ev.status;
                 }),
             });
         }
@@ -207,6 +214,31 @@ export default class ThreadView extends React.Component<IProps, IState> {
         </div>;
     };
 
+    private onPaginationRequest = async (
+        timelineWindow: TimelineWindow | null,
+        direction = Direction.Backward,
+        limit = 20,
+    ): Promise<boolean> => {
+        if (!this.state.thread.hasServerSideSupport) {
+            return false;
+        }
+
+        const timelineIndex = timelineWindow.getTimelineIndex(direction);
+
+        const paginationKey = direction === Direction.Backward ? "from" : "to";
+        const paginationToken = timelineIndex.timeline.getPaginationToken(direction);
+
+        const opts: IRelationsRequestOpts = {
+            limit,
+            [paginationKey]: paginationToken,
+            direction,
+        };
+
+        await this.state.thread.fetchEvents(opts);
+
+        return timelineWindow.paginate(direction, limit);
+    };
+
     public render(): JSX.Element {
         const highlightedEventId = this.props.isInitialEventHighlighted
             ? this.props.initialEvent?.getId()
@@ -262,6 +294,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                             eventId={this.props.initialEvent?.getId()}
                             highlightedEventId={highlightedEventId}
                             onUserScroll={this.onScroll}
+                            onPaginationRequest={this.onPaginationRequest}
                         />
                     ) }
 

src/components/views/rooms/EventTile.tsx

@@ -407,7 +407,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
             thread,
             threadReplyCount: thread?.length,
-            threadLastReply: thread?.lastReply(),
+            threadLastReply: thread?.replyToEvent,
         };
 
         // don't do RR animations until we are mounted
@@ -561,7 +561,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
 
         this.setState({
-            threadLastReply: thread?.lastReply(),
+            threadLastReply: thread?.replyToEvent,
             threadReplyCount: thread?.length,
             thread,
         });
@@ -1290,7 +1290,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         // Thread panel shows the timestamp of the last reply in that thread
         const ts = this.props.tileShape !== TileShape.ThreadPanel
             ? this.props.mxEvent.getTs()
-            : thread?.lastReply().getTs();
+            : thread?.replyToEvent.getTs();
 
         const messageTimestamp = <MessageTimestamp
             showRelative={this.props.tileShape === TileShape.ThreadPanel}

src/utils/EventUtils.ts

@@ -290,7 +290,7 @@ export async function fetchInitialEvent(
             const rootEventData = await client.fetchRoomEvent(roomId, initialEvent.threadRootId);
             const rootEvent = new MatrixEvent(rootEventData);
             const room = client.getRoom(roomId);
-            room.createThread([rootEvent]);
+            room.createThread(rootEvent);
         } catch (e) {
             logger.warn("Could not find root event: " + initialEvent.threadRootId);
         }