From 837d5ebeb396d628d43207a066379d4344ab0ba1 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 14 Jun 2023 11:55:56 +0200
Subject: [PATCH] feat(ui): fix events reactivity and update order

---
 frontend/app/components/Session/WebPlayer.tsx      |  7 ++++---
 .../Session_/EventsBlock/EventsBlock.tsx           |  4 +---
 .../Session_/Player/Controls/Timeline.tsx          | 12 ++++--------
 frontend/app/player/web/MessageManager.ts          |  2 ++
 frontend/app/player/web/TabManager.ts              | 14 +++++++++++++-
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index b9a4763d3..584b05a5e 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -66,13 +66,14 @@ function WebPlayer(props: any) {
     }
   }, [session.sessionId]);
 
+  const { firstVisualEvent: visualOffset, messagesProcessed } = contextValue.store?.get() || {};
+
   React.useEffect(() => {
-    if (session.events.length > 0 || session.errors.length > 0) {
+    if (messagesProcessed && session.events.length > 0 || session.errors.length > 0) {
       contextValue.player?.updateLists?.(session)
     }
-  }, [session.events, session.errors, contextValue.player])
+  }, [session.events, session.errors, contextValue.player, messagesProcessed])
 
-  const { firstVisualEvent: visualOffset, messagesProcessed } = contextValue.store?.get() || {}
 
   React.useEffect(() => {
     if (noteItem !== undefined) {
diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
index aacebb56d..c43f6c971 100644
--- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
+++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
@@ -53,9 +53,7 @@ function EventsBlock(props: IProps) {
   const filteredLength = filteredEvents?.length || 0;
   const notesWithEvtsLength = notesWithEvents?.length || 0;
   const notesLength = notes.length;
-  const eventListNow = Object.values(tabStates).reduce((acc: any[], tab) => {
-    return acc.concat(tab.eventListNow)
-  }, [])
+  const eventListNow = Object.values(tabStates)[0]?.eventListNow || [];
 
   const currentTimeEventIndex = eventListNow.length > 0 ? eventListNow.length - 1 : 0;
   const usedEvents = React.useMemo(() => {
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx
index 5d8b764e0..6e396ec8a 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx
@@ -22,7 +22,6 @@ function getTimelinePosition(value: number, scale: number) {
 
 interface IProps {
   issues: Issue[]
-  eventsLength: number
   setTimelineHoverTime: (t: number) => void
   startedAt: number
   tooltipVisible: boolean
@@ -43,18 +42,16 @@ function Timeline(props: IProps) {
     devtoolsLoading,
     domLoading,
     tabStates,
+    eventCount,
   } = store.get()
-  const { issues, eventsLength } = props;
+  const { issues } = props;
   const notes = notesStore.sessionNotes;
 
   const progressRef = useRef<HTMLDivElement>(null)
   const timelineRef = useRef<HTMLDivElement>(null)
   const events = React.useMemo(() => {
-    // console.log(eventsLength, tabStates)
-    return Object.keys(tabStates).length > 0 ? Object.keys(tabStates).reduce((acc, tabId) => {
-      return acc.concat(tabStates[tabId].eventList)
-    }, []) : []
-  }, [eventsLength])
+    return Object.values(tabStates)[0]?.eventList || []
+  }, [eventCount])
 
   const scale = 100 / endTime;
 
@@ -222,7 +219,6 @@ function Timeline(props: IProps) {
 
 export default connect(
   (state: any) => ({
-    eventsLength: state.getIn(['sessions', 'current'])?.notesWithEvents?.length || 0,
     issues: state.getIn(['sessions', 'current']).issues || [],
     startedAt: state.getIn(['sessions', 'current']).startedAt || 0,
     tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index f058dfa64..3522148c2 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -32,6 +32,7 @@ interface RawList {
 export interface State extends ScreenState {
   skipIntervals: SkipInterval[];
   connType?: string;
+  eventCount: number;
   connBandwidth?: number;
   location?: string;
   tabStates: {
@@ -67,6 +68,7 @@ export default class MessageManager {
   static INITIAL_STATE: State = {
     ...SCREEN_INITIAL_STATE,
     tabStates: {},
+    eventCount: 0,
     skipIntervals: [],
     error: false,
     ready: false,
diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts
index 73e39f9a1..fb4f374f9 100644
--- a/frontend/app/player/web/TabManager.ts
+++ b/frontend/app/player/web/TabManager.ts
@@ -84,7 +84,19 @@ export default class TabSessionManager {
         this.locationEventManager.append(e);
       }
     })
-    this.updateLocalState({ ...this.lists.getFullListsState() });
+    const eventCount = lists?.event?.length || 0
+
+    const currentState = this.state.get()
+    this.state.update({
+      eventCount: currentState.eventCount + eventCount,
+      tabStates: {
+        ...currentState.tabStates,
+        [this.id]: {
+          ...currentState.tabStates[this.id],
+          ...this.lists.getFullListsState(),
+        }
+      }
+    })
   }
 
   updateLocalState(state: Partial<TabState>) {