fix: [GSW-2033] useElementWidthList

gnoswap-labs · Jan 7, 2025 · 5c57c75 · 5c57c75
1 parent 7c80ca7
commit 5c57c75
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 61 deletions.
diff --git a/packages/web/src/components/common/header/search-menu-modal/SearchMenuModal.tsx b/packages/web/src/components/common/header/search-menu-modal/SearchMenuModal.tsx
@@ -1,5 +1,5 @@
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 import Badge, { BADGE_TYPE } from "@components/common/badge/Badge";
@@ -81,22 +81,34 @@ const SearchMenuModal: React.FC<SearchMenuModalProps> = ({
   const { getGnoscanUrl, getTokenUrl } = useGnoscanUrl();
   const [, setRecentsData] = useAtom(TokenState.recents);
 
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  const popularTokenKey = useMemo(() => popularTokens.map(token => token.path).join(","), [popularTokens]);
+
+  const recentKey = useMemo(() => recents.map(token => token.path).join(","), [recents]);
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const tokenNamePopularRef = useRef(popularTokens.map(() => React.createRef<HTMLSpanElement>()));
   const tokenNameRecentsRef = useRef(recents.map(() => React.createRef<HTMLSpanElement>()));
   const recentPriceRef = useRef(recents.map(() => React.createRef<HTMLDivElement>()));
   const popularPriceRef = useRef(popularTokens.map(() => React.createRef<HTMLDivElement>()));
 
-  const [widthListPopular, setWidthListPopular] = useElementWidthList(popularTokens);
-  const [widthListRecent, setWidthListRecent] = useElementWidthList(recents);
-  const [tokenNameRecentWidthList, setTokenNameRecentWidthList] = useElementWidthList(recents);
-  const [tokenNamePopularWidthList, setTokenNamePopularWidthList] = useElementWidthList(popularTokens);
-
-  const menuRef = useRef<HTMLDivElement | null>(null);
-
-  const popularTokenKey = useMemo(() => popularTokens.map(token => token.path).join(","), [popularTokens]);
-
-  const recentKey = useMemo(() => recents.map(token => token.path).join(","), [recents]);
+  const widthListPopular = useElementWidthList(popularTokens, popularPriceRef.current, [popularPriceRef]);
+  const widthListRecent = useElementWidthList(recents, recentPriceRef.current, [
+    recentPriceRef,
+    popularTokenKey,
+    keyword,
+  ]);
+  const tokenNameRecentWidthList = useElementWidthList(recents, tokenNameRecentsRef.current, [
+    tokenNameRecentsRef,
+    recentKey,
+    keyword,
+  ]);
+  const tokenNamePopularWidthList = useElementWidthList(popularTokens, tokenNamePopularRef.current, [
+    tokenNamePopularRef,
+    keyword,
+    popularTokenKey,
+  ]);
 
   const containerWidth = useElementWidth(containerRef, [
     tokens,
@@ -154,50 +166,6 @@ const SearchMenuModal: React.FC<SearchMenuModalProps> = ({
     [getGnoscanUrl, getTokenUrl],
   );
 
-  useEffect(() => {
-    const widthValues: number[] = [];
-    popularPriceRef.current.forEach(ref => {
-      if (ref.current) {
-        const width = ref.current.getBoundingClientRect().width;
-        widthValues.push(width);
-      }
-    });
-    setWidthListPopular(widthValues);
-  }, [popularPriceRef]);
-
-  useEffect(() => {
-    const widthValues: number[] = [];
-    recentPriceRef.current.forEach(ref => {
-      if (ref.current) {
-        const width = ref.current.getBoundingClientRect().width;
-        widthValues.push(width);
-      }
-    });
-    setWidthListRecent(widthValues);
-  }, [recentPriceRef, popularTokenKey, keyword]);
-
-  useEffect(() => {
-    const widthValues: number[] = [];
-    tokenNameRecentsRef.current.forEach(ref => {
-      if (ref.current) {
-        const width = ref.current.getBoundingClientRect().width;
-        widthValues.push(width);
-      }
-    });
-    setTokenNameRecentWidthList(widthValues);
-  }, [tokenNameRecentsRef, recentKey, keyword]);
-
-  useEffect(() => {
-    const temp: number[] = [];
-    tokenNamePopularRef.current.forEach(ref => {
-      if (ref.current) {
-        const width = ref.current.getBoundingClientRect().width;
-        temp.push(width);
-      }
-    });
-    setTokenNamePopularWidthList(temp);
-  }, [tokenNamePopularRef, keyword, popularTokenKey]);
-
   const length = useMemo(() => {
     return breakpoint === DEVICE_TYPE.MOBILE ? 15 : 25;
   }, [breakpoint]);

diff --git a/packages/web/src/hooks/common/use-element-width-list.tsx b/packages/web/src/hooks/common/use-element-width-list.tsx
@@ -6,19 +6,32 @@ import React from "react";
  *
  * @template T - Generic parameters that define the item's type
  * @param {T[]} items - Array of items to track width
- * @returns {[number[], React.Dispatch<React.SetStateAction<number[]>>]}
- *          - Returns a tuple of the form [widthList, setWidthList].
+ * @param {React.RefObject<HTMLElement>[]} refs - A ref array of elements to measure
+ * @param {React.DependencyList} deps - Array of dependencies to trigger width measurements
+ * @returns {number[]}
+ *          - Return an array of width values for each item
  *          - widthList: array containing the width value of each item (initialized to 0)
- *          - setWidthList: setState function to update widthList
  *
  * @example
  * const items = [target1Ref, target2Ref, target3Ref];
- * const [widthList, setWidthList] = useElementWidthList(items);
+ * const widthList = useElementWidtahList(items, refs, []);
  * widthList  Initial values: [0, 0, 0]
  *
  */
-function useElementWidthList<T>(items: T[]): [number[], React.Dispatch<React.SetStateAction<number[]>>] {
-  return React.useState<number[]>(items.map(() => 0));
+function useElementWidthList<T>(
+  items: T[],
+  refs: React.RefObject<HTMLElement>[],
+  dependencies: React.DependencyList = [],
+): number[] {
+  const [widthList, setWidthList] = React.useState<number[]>(items.map(() => 0));
+
+  React.useEffect(() => {
+    const widthValues = refs.map(ref => (ref.current ? ref.current.getBoundingClientRect().width : 0));
+
+    setWidthList(widthValues);
+  }, dependencies);
+
+  return widthList;
 }
 
 export default useElementWidthList;