From 81671ca4ed8a9ebe80a83a90aeee3e6efa0af091 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 16 May 2023 15:05:28 +0200
Subject: [PATCH] feat(player): merge all tabs data for overview

---
 .../Session_/OverviewPanel/OverviewPanel.tsx  | 24 +++++++++++--------
 .../components/Session_/Storage/Storage.tsx   |  3 ++-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
index 8ff9af3f3..35de9e807 100644
--- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
@@ -25,15 +25,19 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
 
   const {
     endTime,
-    performanceChartData,
-    stackList: stackEventList,
-    eventList: eventsList,
-    frustrationsList,
-    exceptionsList,
-    resourceList: resourceListUnmap,
-    fetchList,
-    graphqlList,
+    currentTab,
+    tabStates,
   } = store.get();
+  const states = Object.values(tabStates)
+
+  const stackEventList = states.reduce((acc: any, { stackList }) => acc.concat(stackList), [])
+  const eventsList = states.reduce((acc: any, { eventList }) => acc.concat(eventList), [])
+  const frustrationsList = states.reduce((acc: any, { frustrationsList }) => acc.concat(frustrationsList), [])
+  const exceptionsList = states.reduce((acc: any, { exceptionsList }) => acc.concat(exceptionsList), [])
+  const resourceListUnmap = states.reduce((acc: any, { resourceList }) => acc.concat(resourceList), [])
+  const fetchList = states.reduce((acc: any, { fetchList }) => acc.concat(fetchList), [])
+  const graphqlList = states.reduce((acc: any, { graphqlList }) => acc.concat(graphqlList), [])
+  const performanceChartData = states.reduce((acc: any, { performanceChartData }) => acc.concat(performanceChartData), [])
 
   const fetchPresented = fetchList.length > 0;
 
@@ -50,7 +54,7 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
       PERFORMANCE: performanceChartData,
       FRUSTRATIONS: frustrationsList,
     };
-  }, [dataLoaded]);
+  }, [dataLoaded, currentTab]);
 
   useEffect(() => {
     if (dataLoaded) {
@@ -67,7 +71,7 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
     ) {
       setDataLoaded(true);
     }
-  }, [resourceList, issuesList, exceptionsList, eventsList, stackEventList, performanceChartData]);
+  }, [resourceList, issuesList, exceptionsList, eventsList, stackEventList, performanceChartData, currentTab]);
 
   return (
     <React.Fragment>
diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx
index 8f7f3e92e..3c010e4d1 100644
--- a/frontend/app/components/Session_/Storage/Storage.tsx
+++ b/frontend/app/components/Session_/Storage/Storage.tsx
@@ -41,7 +41,8 @@ function Storage(props: Props) {
   const lastBtnRef = React.useRef<HTMLButtonElement>();
   const [showDiffs, setShowDiffs] = React.useState(false);
   const { player, store } = React.useContext(PlayerContext);
-  const state = store.get();
+  const { tabStates, currentTab } = store.get()
+  const state = tabStates[currentTab]
 
   const listNow = selectStorageListNow(state);
   const list = selectStorageList(state);