Ask to refresh timeline when historical messages are imported (MSC2716)

src/components/structures/MessagePanel.tsx

@@ -1021,6 +1021,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             "mx_MessagePanel_narrow": this.context.narrow,
         });
 
+        //console.log('MessagePanel: render', this.props.events.length)
+
         return (
             <ErrorBoundary>
                 <ScrollPanel

src/components/structures/RoomStatusBar.tsx

@@ -94,7 +94,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
             syncStateData: this.context.getSyncStateData(),
             unsentMessages: getUnsentMessages(this.props.room),
             isResending: false,
-            timelineNeedsRefresh: this.props.room.getTimelineNeedsRefresh(),
+            timelineNeedsRefresh: true // TODO: Put this back to this.props.room.getTimelineNeedsRefresh(),
         };
     }
 
@@ -153,10 +153,13 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         // clear the timeline. I also tried to split out
         // `scrollbackFromPaginationToken` from the `scrollback` method in to
         // paginate from the beginning of the room but it's just not right.
+        this.props.room.refreshLiveTimeline();
+        //timelinePanel.refreshTimeline();
 
-        this.setState({
-            timelineNeedsRefresh: false,
-        });
+        // TODO: Uncomment
+        // this.setState({
+        //     timelineNeedsRefresh: false,
+        // });
     };
 
     private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {

src/components/structures/RoomView.tsx

@@ -2065,11 +2065,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             highlightedEventId = this.state.initialEventId;
         }
 
+        const timelineSet = this.state.room.getUnfilteredTimelineSet();
+        console.log('RoomView: timelineSet', timelineSet);
+
         // console.info("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
         const messagePanel = (
             <TimelinePanel
                 ref={this.gatherTimelinePanelRef}
-                timelineSet={this.state.room.getUnfilteredTimelineSet()}
+                timelineSet={timelineSet}
                 showReadReceipts={this.state.showReadReceipts}
                 manageReadReceipts={!this.state.isPeeking}
                 sendReadReceiptOnLoad={!this.state.wasContextSwitch}

src/components/structures/TimelinePanel.tsx

@@ -280,6 +280,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         const cli = MatrixClientPeg.get();
         cli.on(RoomEvent.Timeline, this.onRoomTimeline);
         cli.on(RoomEvent.TimelineReset, this.onRoomTimelineReset);
+        this.props.timelineSet.room.on(RoomEvent.TimelineRefresh, this.onRoomTimelineRefresh);
         cli.on(RoomEvent.Redaction, this.onRoomRedaction);
         if (SettingsStore.getValue("feature_msc3531_hide_messages_pending_moderation")) {
             // Make sure that events are re-rendered when their visibility-pending-moderation changes.
@@ -370,6 +371,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
             client.removeListener(MatrixEventEvent.VisibilityChange, this.onEventVisibilityChange);
             client.removeListener(ClientEvent.Sync, this.onSync);
         }
+
+        this.props.timelineSet.room.removeListener(RoomEvent.TimelineRefresh, this.onRoomTimelineRefresh);
     }
 
     private onMessageListUnfillRequest = (backwards: boolean, scrollToken: string): void => {
@@ -627,10 +630,18 @@ class TimelinePanel extends React.Component<IProps, IState> {
         });
     };
 
+    private onRoomTimelineRefresh = (room: Room, timelineSet: EventTimelineSet): void => {
+        console.log(`onRoomTimelineRefresh skipping=${timelineSet !== this.props.timelineSet}`);
+        if (timelineSet !== this.props.timelineSet) return;
+
+        this.refreshTimeline();
+    };
+
     private onRoomTimelineReset = (room: Room, timelineSet: EventTimelineSet): void => {
+        console.log(`onRoomTimelineReset skipping=${timelineSet !== this.props.timelineSet} skippingBecauseAtBottom=${this.canResetTimeline()}`);
         if (timelineSet !== this.props.timelineSet) return;
 
-        if (this.messagePanel.current && this.messagePanel.current.isAtBottom()) {
+        if (this.canResetTimeline()) {
             this.loadTimeline();
         }
     };
@@ -1181,6 +1192,9 @@ class TimelinePanel extends React.Component<IProps, IState> {
      * @param {boolean?} scrollIntoView whether to scroll the event into view.
      */
     private loadTimeline(eventId?: string, pixelOffset?: number, offsetBase?: number, scrollIntoView = true): void {
+        console.log('TimelinePanel: loadTimeline', this.props.timelineSet.getTimelines(), this.props.timelineSet.getTimelines().map((timeline) => {
+            return timeline.getEvents().length;
+        }))
         this.timelineWindow = new TimelineWindow(
             MatrixClientPeg.get(), this.props.timelineSet,
             { windowLimit: this.props.timelineCap });
@@ -1319,6 +1333,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
     // get the list of events from the timeline window and the pending event list
     private getEvents(): Pick<IState, "events" | "liveEvents" | "firstVisibleEventIndex"> {
         const events: MatrixEvent[] = this.timelineWindow.getEvents();
+        console.log('TimelinePanel: getEvents', events.length);
 
         // `arrayFastClone` performs a shallow copy of the array
         // we want the last event to be decrypted first but displayed last