Fix CallEventGrouper map building to not occur during a Render phase (#7638)

src/components/structures/TimelinePanel.tsx

@@ -51,6 +51,7 @@ import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import Spinner from "../views/elements/Spinner";
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
 import ErrorDialog from '../views/dialogs/ErrorDialog';
+import CallEventGrouper from "./CallEventGrouper";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -237,6 +238,9 @@ class TimelinePanel extends React.Component<IProps, IState> {
     private readReceiptActivityTimer: Timer;
     private readMarkerActivityTimer: Timer;
 
+    // A map of <callId, CallEventGrouper>
+    private callEventGroupers = new Map<string, CallEventGrouper>();
+
     constructor(props, context) {
         super(props, context);
 
@@ -388,6 +392,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
             this.timelineWindow.unpaginate(count, backwards);
 
             const { events, liveEvents, firstVisibleEventIndex } = this.getEvents();
+            this.buildCallEventGroupers(events);
             const newState: Partial<IState> = {
                 events,
                 liveEvents,
@@ -449,6 +454,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
             debuglog("paginate complete backwards:"+backwards+"; success:"+r);
 
             const { events, liveEvents, firstVisibleEventIndex } = this.getEvents();
+            this.buildCallEventGroupers(events);
             const newState: Partial<IState> = {
                 [paginatingKey]: false,
                 [canPaginateKey]: r,
@@ -561,6 +567,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
             if (this.unmounted) { return; }
 
             const { events, liveEvents, firstVisibleEventIndex } = this.getEvents();
+            this.buildCallEventGroupers(events);
             const lastLiveEvent = liveEvents[liveEvents.length - 1];
 
             const updatedState: Partial<IState> = {
@@ -1231,6 +1238,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 canForwardPaginate: false,
                 timelineLoading: true,
             });
+            this.buildCallEventGroupers();
             prom.then(onLoaded, onError);
         }
     }
@@ -1243,7 +1251,9 @@ class TimelinePanel extends React.Component<IProps, IState> {
         // the results if so.
         if (this.unmounted) return;
 
-        this.setState(this.getEvents());
+        const state = this.getEvents();
+        this.buildCallEventGroupers(state.events);
+        this.setState(state);
     }
 
     // Force refresh the timeline before threads support pending events
@@ -1512,6 +1522,27 @@ class TimelinePanel extends React.Component<IProps, IState> {
         eventType: EventType | string,
     ) => this.props.timelineSet.getRelationsForEvent(eventId, relationType, eventType);
 
+    private buildCallEventGroupers(events?: MatrixEvent[]): void {
+        const oldCallEventGroupers = this.callEventGroupers;
+        this.callEventGroupers = new Map();
+        events?.forEach(ev => {
+            if (!ev.getType().startsWith("m.call.") && !ev.getType().startsWith("org.matrix.call.")) {
+                return;
+            }
+
+            const callId = ev.getContent().call_id;
+            if (!this.callEventGroupers.has(callId)) {
+                if (oldCallEventGroupers.has(callId)) {
+                    // reuse the CallEventGrouper object where possible
+                    this.callEventGroupers.set(callId, oldCallEventGroupers.get(callId));
+                } else {
+                    this.callEventGroupers.set(callId, new CallEventGrouper());
+                }
+            }
+            this.callEventGroupers.get(callId).add(ev);
+        });
+    }
+
     render() {
         // just show a spinner while the timeline loads.
         //
@@ -1596,6 +1627,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                 hideThreadedMessages={this.props.hideThreadedMessages}
                 disableGrouping={this.props.disableGrouping}
+                callEventGroupers={this.callEventGroupers}
             />
         );
     }