feat(refactor): Use useOnResize, remove lodash.throttle. (#2313)

polkadot-cloud · Nov 2, 2024 · 5d012c0 · 5d012c0
1 parent 51ec08a
commit 5d012c0
Show file tree

Hide file tree

Showing 10 changed files with 777 additions and 982 deletions.
diff --git a/package.json b/package.json
@@ -28,11 +28,11 @@
     "@polkawatch/ddp-client": "^2.0.20",
     "@substrate/connect": "^1.1.0",
     "@w3ux/extension-assets": "^0.4.0",
-    "@w3ux/hooks": "^1.1.1",
+    "@w3ux/hooks": "1.2.1-beta.0",
     "@w3ux/react-connect-kit": "^1.8.0",
     "@w3ux/react-odometer": "^1.1.0",
     "@w3ux/react-polkicon": "^1.3.0",
-    "@w3ux/utils": "1.0.1",
+    "@w3ux/utils": "^1.1.0",
     "@w3ux/validator-assets": "^0.2.0",
     "@zondax/ledger-substrate": "^1.0.0",
     "bignumber.js": "^9.1.2",
@@ -47,7 +47,6 @@
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1",
     "qrcode-generator": "1.4.4",
     "rc-slider": "^11.1.6",
     "react": "^18.3.1",
@@ -67,7 +66,6 @@
     "@ledgerhq/logs": "^6.12.0",
     "@types/chroma-js": "^2.4.4",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.25",
     "@types/react-helmet": "^6.1.11",

diff --git a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx
@@ -24,7 +24,7 @@ import { useHelp } from 'contexts/Help';
 import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
 import { useRef } from 'react';
 import { formatSize } from 'library/Graphs/Utils';
-import { useSize } from 'hooks/useSize';
+import { useSize } from '@w3ux/hooks';
 import type { OverviewSectionProps } from '../types';
 import { useTranslation } from 'react-i18next';
 import { useUi } from 'contexts/UI';
@@ -59,7 +59,9 @@ export const PerformanceGraph = ({
   const graphInnerRef = useRef<HTMLDivElement>(null);
 
   // Get the size of the graph container.
-  const size = useSize(graphInnerRef, containerRefs?.mainInterface);
+  const size = useSize(graphInnerRef, {
+    outerElement: containerRefs?.mainInterface,
+  });
   const { width, height } = formatSize(size, 150);
 
   // Format reward points as an array of strings, or an empty array if syncing.

diff --git a/src/hooks/useSize/index.tsx b/src/hooks/useSize/index.tsx
diff --git a/src/library/SideMenu/index.tsx b/src/library/SideMenu/index.tsx
@@ -4,8 +4,7 @@
 import { faCompressAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { capitalizeFirstLetter } from '@w3ux/utils';
-import throttle from 'lodash.throttle';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SideMenuMaximisedWidth, PageWidthMediumThreshold } from 'consts';
 import { useApi } from 'contexts/Api';
@@ -26,7 +25,7 @@ import { Heading } from './Heading/Heading';
 import { Main } from './Main';
 import { Secondary } from './Secondary';
 import { ConnectionSymbol, Separator, Wrapper } from './Wrapper';
-import { useOutsideAlerter } from '@w3ux/hooks';
+import { useOutsideAlerter, useOnResize } from '@w3ux/hooks';
 import { Side } from 'kits/Structure/Side';
 
 export const SideMenu = () => {
@@ -44,24 +43,14 @@ export const SideMenu = () => {
   const { openModal } = useOverlay().modal;
   const { networkData, network } = useNetwork();
 
-  // listen to window resize to automatically hide the side menu on window resize.
-  useEffect(() => {
-    window.addEventListener('resize', windowThrottle);
-    return () => {
-      window.removeEventListener('resize', windowThrottle);
-    };
-  }, []);
-
-  const throttleCallback = () => {
+  // Listen to window resize to automatically hide the side menu on window resize.
+  useOnResize(() => {
     if (window.innerWidth >= PageWidthMediumThreshold) {
       setSideMenu(false);
     }
-  };
-  const windowThrottle = throttle(throttleCallback, 200, {
-    trailing: true,
-    leading: false,
   });
 
+  // Define side menu ref and close the side menu when clicking outside of it.
   const ref = useRef(null);
   useOutsideAlerter(ref, () => {
     setSideMenu(false);

diff --git a/src/modals/ValidatorGeo/index.tsx b/src/modals/ValidatorGeo/index.tsx
@@ -10,7 +10,7 @@ import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers';
 import { GeoDonut } from 'library/Graphs/GeoDonut';
 import { formatSize } from 'library/Graphs/Utils';
 import { GraphWrapper } from 'library/Graphs/Wrapper';
-import { useSize } from 'hooks/useSize';
+import { useSize } from '@w3ux/hooks';
 import { Title } from 'library/Modal/Title';
 import { StatusLabel } from 'library/StatusLabel';
 import { PolkawatchApi, type ValidatorDetail } from '@polkawatch/ddp-client';
@@ -31,7 +31,9 @@ export const ValidatorGeo = () => {
   const { address, identity } = options;
 
   const ref = useRef<HTMLDivElement>(null);
-  const size = useSize(ref, containerRefs?.mainInterface);
+  const size = useSize(ref, {
+    outerElement: containerRefs?.mainInterface,
+  });
   const { height, minHeight } = formatSize(size, 300);
 
   const [pwData, setPwData] = useState<ValidatorDetail>({} as ValidatorDetail);

diff --git a/src/modals/ValidatorMetrics/index.tsx b/src/modals/ValidatorMetrics/index.tsx
@@ -12,7 +12,7 @@ import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers';
 import { EraPoints as EraPointsGraph } from 'library/Graphs/EraPoints';
 import { formatSize } from 'library/Graphs/Utils';
 import { GraphWrapper } from 'library/Graphs/Wrapper';
-import { useSize } from 'hooks/useSize';
+import { useSize } from '@w3ux/hooks';
 import { Title } from 'library/Modal/Title';
 import { StatWrapper, StatsWrapper } from 'library/Modal/Wrappers';
 import { StatusLabel } from 'library/StatusLabel';
@@ -61,7 +61,9 @@ export const ValidatorMetrics = () => {
   const [list, setList] = useState<AnyJson[]>([]);
 
   const ref = useRef<HTMLDivElement>(null);
-  const size = useSize(ref, containerRefs?.mainInterface);
+  const size = useSize(ref, {
+    outerElement: containerRefs?.mainInterface,
+  });
   const { width, height, minHeight } = formatSize(size, 300);
 
   const handleEraPoints = async () => {

diff --git a/src/pages/Overview/Payouts.tsx b/src/pages/Overview/Payouts.tsx
@@ -9,7 +9,7 @@ import { PayoutBar } from 'library/Graphs/PayoutBar';
 import { PayoutLine } from 'library/Graphs/PayoutLine';
 import { formatRewardsForGraphs, formatSize } from 'library/Graphs/Utils';
 import { GraphWrapper } from 'library/Graphs/Wrapper';
-import { useSize } from 'hooks/useSize';
+import { useSize } from '@w3ux/hooks';
 import { StatusLabel } from 'library/StatusLabel';
 import { useSubscanData } from 'hooks/useSubscanData';
 import { CardHeaderWrapper } from 'library/Card/Wrappers';
@@ -52,7 +52,9 @@ export const Payouts = () => {
   const graphInnerRef = useRef<HTMLDivElement>(null);
 
   // Get the size of the graph container.
-  const size = useSize(graphInnerRef, containerRefs?.mainInterface);
+  const size = useSize(graphInnerRef, {
+    outerElement: containerRefs?.mainInterface,
+  });
   const { width, height, minHeight } = formatSize(size, 260);
 
   // Get the last reward with its timestmap.

diff --git a/src/pages/Overview/StakeStatus/Tips/index.tsx b/src/pages/Overview/StakeStatus/Tips/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { setStateWithRef } from '@w3ux/utils';
-import throttle from 'lodash.throttle';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TipsConfig } from 'config/tips';
@@ -23,6 +22,7 @@ import { useApi } from 'contexts/Api';
 import { useBalances } from 'contexts/Balances';
 import { useSyncing } from 'hooks/useSyncing';
 import { DefaultLocale } from 'locale';
+import { useOnResize } from '@w3ux/hooks';
 
 export const Tips = () => {
   const { i18n, t } = useTranslation();
@@ -77,31 +77,17 @@ export const Tips = () => {
     return Math.ceil(start / itemsPerPage);
   };
 
-  // resize callback
-  const resizeCallback = () => {
+  // Re-sync page and items per page on resize.
+  useOnResize(() => {
     setStateWithRef(getPage(), setPage, pageRef);
     setStateWithRef(getItemsPerPage(), setItemsPerPageState, itemsPerPageRef);
-  };
-
-  // throttle resize callback
-  const throttledResizeCallback = throttle(resizeCallback, 200, {
-    trailing: true,
-    leading: false,
   });
 
   // re-sync page when active account changes
   useEffect(() => {
     setStateWithRef(getPage(), setPage, pageRef);
   }, [activeAccount, network]);
 
-  // resize event listener
-  useEffect(() => {
-    window.addEventListener('resize', throttledResizeCallback);
-    return () => {
-      window.removeEventListener('resize', throttledResizeCallback);
-    };
-  }, []);
-
   // store the current amount of allowed items on display
   const [itemsPerPage, setItemsPerPageState] =
     useState<number>(getItemsPerPage());

diff --git a/src/pages/Payouts/index.tsx b/src/pages/Payouts/index.tsx
@@ -13,7 +13,7 @@ import { PayoutBar } from 'library/Graphs/PayoutBar';
 import { PayoutLine } from 'library/Graphs/PayoutLine';
 import { formatSize } from 'library/Graphs/Utils';
 import { GraphWrapper } from 'library/Graphs/Wrapper';
-import { useSize } from 'hooks/useSize';
+import { useSize } from '@w3ux/hooks';
 import { StatBoxList } from 'library/StatBoxList';
 import { StatusLabel } from 'library/StatusLabel';
 import type { AnySubscan, PageProps } from 'types';
@@ -45,7 +45,9 @@ export const Payouts = ({ page: { key } }: PageProps) => {
   const [payoutsList, setPayoutLists] = useState<AnySubscan>([]);
 
   const ref = useRef<HTMLDivElement>(null);
-  const size = useSize(ref, containerRefs?.mainInterface);
+  const size = useSize(ref, {
+    outerElement: containerRefs?.mainInterface,
+  });
   const { width, height, minHeight } = formatSize(size, 280);
 
   // Get data safely from subscan hook.