From 6a0ecb83d9476adc51886a55dd012af6ff51b9a2 Mon Sep 17 00:00:00 2001
From: Yu Yi Yang <yu-yi.yang@saucelabs.com>
Date: Thu, 19 Sep 2024 11:59:59 +0200
Subject: [PATCH] fix fetching files

---
 src/Components/Import/URLInput.jsx            |  9 ++---
 .../NetworkTable/NetworkTableBody.jsx         |  2 +-
 src/Containers/NetworkTableContainer.jsx      | 10 +++---
 src/hooks/useResizeObserver.js                | 34 ++++++++++++-------
 src/state/network/NetworkProvider.jsx         |  2 +-
 src/state/network/actions.js                  |  3 +-
 6 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/Components/Import/URLInput.jsx b/src/Components/Import/URLInput.jsx
index e64a5f9..2c1bcd6 100644
--- a/src/Components/Import/URLInput.jsx
+++ b/src/Components/Import/URLInput.jsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
+import { stringify } from 'qs';
 
 import Styles from './URLInput.styles.scss';
 import Button from './../../../src/Components/Common/Button';
 import CORSCheckbox from './CORSCheckbox';
-import { useNetwork } from '../../state/network/Context';
 
 const URLInput = () => {
-  const { actions } = useNetwork();
   const [url, setURL] = useState('');
   const [isCORSEnabled, setCORS] = useState(false);
   const handleInputChange = ({ target }) => {
@@ -14,10 +13,12 @@ const URLInput = () => {
   };
 
   const handleSubmit = () => {
-    actions.fetchFile({
+    const { origin, pathname } = document.location;
+    const newURL = `${origin}${pathname}?${stringify({
       file: url,
       isCORSEnabled,
-    });
+    })}`;
+    document.location.href = newURL;
   };
 
   return (
diff --git a/src/Components/NetworkTable/NetworkTableBody.jsx b/src/Components/NetworkTable/NetworkTableBody.jsx
index 3bf6e13..30687b5 100644
--- a/src/Components/NetworkTable/NetworkTableBody.jsx
+++ b/src/Components/NetworkTable/NetworkTableBody.jsx
@@ -51,7 +51,7 @@ const NetworkTableBody = ({ height }) => {
   const selectedReqIndex = state.get('selectedReqIndex');
 
   const listRef = useRef(null);
-  const { elementDims } = useResizeObserver(listRef);
+  const { elementDims } = useResizeObserver(listRef?.current?._outerRef || listRef?.current);
 
   useEffect(() => {
     actions.setTableHeaderWidth(elementDims.width);
diff --git a/src/Containers/NetworkTableContainer.jsx b/src/Containers/NetworkTableContainer.jsx
index 493caf3..51a251a 100644
--- a/src/Containers/NetworkTableContainer.jsx
+++ b/src/Containers/NetworkTableContainer.jsx
@@ -10,7 +10,6 @@ import { useTheme } from '../state/theme/Context';
 import InputHAR from '../Components/Import/InputHAR';
 import NetworkTableBody from '../Components/NetworkTable/NetworkTableBody';
 import { TABLE_HEADER_HEIGHT } from '../constants';
-import { useIsVisible } from '../hooks/useIsVisible';
 import { useResizeObserver } from '../hooks/useResizeObserver';
 
 const context = classNames.bind(Styles);
@@ -23,15 +22,14 @@ const NetworkTableContainer = () => {
   const showReqDetail = state.get('showReqDetail');
 
   const [tableBodyHeight, setTableBodyHeight] = useState(0);
-  const ref = useRef(null);
-  const isVisible = useIsVisible(ref);
-  const { elementDims } = useResizeObserver(ref);
+  const ref = useRef();
+  const { elementDims } = useResizeObserver(ref?.current);
 
   useEffect(() => {
-    if (ref?.current && isVisible) {
+    if (ref?.current && elementDims.height) {
       setTableBodyHeight(ref.current.clientHeight - TABLE_HEADER_HEIGHT);
     }
-  }, [ref, actualData, isVisible, elementDims]);
+  }, [ref?.current, actualData, elementDims]);
 
   if (error) {
     return (
diff --git a/src/hooks/useResizeObserver.js b/src/hooks/useResizeObserver.js
index d2247a1..4bbd132 100644
--- a/src/hooks/useResizeObserver.js
+++ b/src/hooks/useResizeObserver.js
@@ -2,36 +2,44 @@ import { useEffect, useState } from 'react';
 
 /* eslint no-underscore-dangle: 0 */
 
+const debounce = (func, delay) => {
+  let timeoutId;
+  return (...args) => {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};
+
 export const useResizeObserver = (elementRef) => {
-  let ref = null;
   const [elementDims, setElementDims] = useState({
     width: 0,
     height: 0,
   });
 
   useEffect(() => {
-    ref = elementRef?.current?._outerRef || elementRef?.current;
-    const onResize = () => {
-      if (ref) {
+    const onResize = debounce(() => {
+      if (elementRef) {
         setElementDims({
-          width: ref.clientWidth,
-          height: ref.clientHeight,
+          width: elementRef.clientWidth,
+          height: elementRef.clientHeight,
         });
       }
-    };
+    }, 50);
 
-    const resizeObserver = new ResizeObserver(onResize);
+    const resizeObserver = new ResizeObserver(() => onResize());
 
-    if (ref) {
-      resizeObserver.observe(ref);
+    if (elementRef) {
+      resizeObserver.observe(elementRef);
     }
 
     return () => {
-      if (ref) {
-        resizeObserver.unobserve(ref);
+      if (elementRef) {
+        resizeObserver.unobserve(elementRef);
       }
     };
-  }, [ref]);
+  }, [elementRef]);
 
   return { elementDims };
 };
diff --git a/src/state/network/NetworkProvider.jsx b/src/state/network/NetworkProvider.jsx
index 2c79a23..bb0528f 100644
--- a/src/state/network/NetworkProvider.jsx
+++ b/src/state/network/NetworkProvider.jsx
@@ -46,7 +46,7 @@ const NetworkProvider = (props) => {
   // Fetch HAR file onChange of file prop
   useEffect(() => {
     if (file) {
-      fetchFile(dispatch)({ file, fetchOptions });
+      fetchFile(dispatch)(file, fetchOptions);
     }
   }, [file]);
 
diff --git a/src/state/network/actions.js b/src/state/network/actions.js
index 8d8e5bf..89fdacc 100644
--- a/src/state/network/actions.js
+++ b/src/state/network/actions.js
@@ -67,8 +67,7 @@ export const resetState = (dispatch) => (payload) => dispatch({
   payload,
 });
 
-export const fetchFile = (dispatch) => (payload = { options: { withCredentials: true } }) => {
-  const { file, options } = payload;
+export const fetchFile = (dispatch) => (file, options = { withCredentials: true }) => {
   fetchFileRequest(dispatch)();
   axios.get(file, options)
     .then(({ data }) => {