Fix fetching files

src/Components/Import/URLInput.jsx

@@ -1,23 +1,24 @@
 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 }) => {
     setURL(target.value);
   };
 
   const handleSubmit = () => {
-    actions.fetchFile({
+    const { origin, pathname } = document.location;
+    const newURL = `${origin}${pathname}?${stringify({
       file: url,
       isCORSEnabled,
-    });
+    })}`;
+    document.location.href = newURL;
   };
 
   return (

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);

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 (

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 };
 };

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]);
 

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 }) => {