From 07a63ac48af514dde615a671780a8f8318f26f1d Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 7 Dec 2022 19:34:47 +0530
Subject: [PATCH] change(ui) - network list filter xhr based on fetch

---
 .../DevTools/NetworkPanel/NetworkPanel.tsx    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 4a7e71ea2..5d9268d51 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -148,8 +148,6 @@ function NetworkPanel(props: Props) {
   const {
     sessionStore: { devTools },
   } = useStore();
-  // const [filter, setFilter] = useState(devTools[INDEX_KEY].filter);
-  // const [activeTab, setActiveTab] = useState(ALL);
   const filter = useObserver(() => devTools[INDEX_KEY].filter);
   const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
   const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
@@ -224,10 +222,14 @@ function NetworkPanel(props: Props) {
   useEffect(() => {
     const filterRE = getRE(filter, 'i');
     let list = resources;
+
     fetchList.forEach(
       (fetchCall: any) =>
         (list = list.filter((networkCall: any) => networkCall.url !== fetchCall.url))
     );
+    if (fetchPresented) {
+      list = list.filter((i: any) => i.type !== TYPES.XHR)
+    }
     list = list.concat(fetchList);
 
     list = list.filter(
@@ -237,7 +239,7 @@ function NetworkPanel(props: Props) {
         (showOnlyErrors ? parseInt(status) >= 400 || !success : true)
     );
     setFilteredList(list);
-  }, [resources, filter, showOnlyErrors, activeTab]);
+  }, [resources, filter, showOnlyErrors, activeTab, fetchPresented]);
 
   const referenceLines = useMemo(() => {
     const arr = [];
@@ -416,14 +418,15 @@ function NetworkPanel(props: Props) {
 }
 
 export default connectPlayer((state: any) => ({
-  location: state.location,
-  resources: state.resourceList,
-  fetchList: state.fetchList.map((i: any) =>
-    Resource({ ...i.toJS(), type: TYPES.XHR, time: i.time < 0 ? 0 : i.time })
-  ),
-  domContentLoadedTime: state.domContentLoadedTime,
-  loadTime: state.loadTime,
-  time: state.time,
-  playing: state.playing,
-  domBuildingTime: state.domBuildingTime,
-}))(NetworkPanel);
+    location: state.location,
+    resources: state.resourceList,
+    domContentLoadedTime: state.domContentLoadedTime,
+    fetchList: state.fetchList.map((i: any) =>
+      Resource({ ...i.toJS(), type: TYPES.XHR, time: i.time < 0 ? 0 : i.time })
+    ),
+    loadTime: state.loadTime,
+    time: state.time,
+    playing: state.playing,
+    domBuildingTime: state.domBuildingTime,
+  }
+))(NetworkPanel);