fixed: when searching the seame address twice, now the error message …

…not display and inventory items display.
blockful-io · Feb 26, 2024 · d38de0d · d38de0d
1 parent 8ee9364
commit d38de0d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/components/02-molecules/OfferSummary.tsx b/components/02-molecules/OfferSummary.tsx
@@ -2,19 +2,15 @@ import { EthereumAddress } from "@/lib/shared/types";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
 import { NftCard } from "@/components/02-molecules";
 import { EmptyNftsCards, PersonIcon, SwapContext } from "@/components/01-atoms";
-import { useEnsName } from "wagmi";
 import { useContext } from "react";
 
 interface IOfferSummary {
   forAuthedUser: boolean;
 }
 
 export const OfferSummary = ({ forAuthedUser }: IOfferSummary) => {
-  const { validatedAddressToSwap, nftAuthUser, nftInputUser } =
+  const { validatedAddressToSwap, nftAuthUser, nftInputUser, inputAddress, userJustValidatedInput } =
     useContext(SwapContext);
-  const { data } = useEnsName({
-    address: validatedAddressToSwap as `0x${string}`,
-  });
 
   const { authenticatedUserAddress } = useAuthenticatedUser();
   const emptySquaresAuthUser = EmptyNftsCards(nftAuthUser.length, 4, 8, 12, 12);
@@ -25,9 +21,11 @@ export const OfferSummary = ({ forAuthedUser }: IOfferSummary) => {
     12,
     12,
   );
-
+  
   const nftUser = forAuthedUser ? nftAuthUser : nftInputUser;
 
+
+
   return (
     <div className="w-full flex flex-col gap-4 px-3 pt-2 pb-4 dark:bg-[#212322] dark:border-[#434443] rounded-lg border">
       <div className="flex justify-between items-center h-9 gap-2">
@@ -37,17 +35,16 @@ export const OfferSummary = ({ forAuthedUser }: IOfferSummary) => {
           </div>
           <div className="items-center">
             <p className="font-medium">
-              {forAuthedUser
-                ? "You give"
-                : !forAuthedUser && !validatedAddressToSwap
-                ? "Use the search bar!"
-                : `${
-                    data
-                      ? data
-                      : new EthereumAddress(
-                          validatedAddressToSwap,
-                        ).getEllipsedAddress()
-                  } gives`}
+              {
+                forAuthedUser
+                  ? "You give"
+                  : !forAuthedUser && validatedAddressToSwap && inputAddress
+                    ? `${userJustValidatedInput ?
+                      new EthereumAddress(validatedAddressToSwap).getEllipsedAddress() + " gives"
+                      : "Use the search bar!"
+                    }`
+                    : "Use the search bar!"  
+              }
             </p>
           </div>
         </div>
@@ -62,7 +59,7 @@ export const OfferSummary = ({ forAuthedUser }: IOfferSummary) => {
       <div className="w-full h-full min-h-[144px] rounded p-4 overflow-auto max-h-52">
         <div className="w-full grid grid-cols-2 md:grid-cols-6  xl:grid-cols-4 gap-3 ">
           {(forAuthedUser && !authenticatedUserAddress?.address) ||
-          (!forAuthedUser && !validatedAddressToSwap) ? null : (
+            (!forAuthedUser && !validatedAddressToSwap) ? null : (
             <>
               {nftUser.map((nft, index) => (
                 <NftCard

diff --git a/components/03-organisms/NftsShelf.tsx b/components/03-organisms/NftsShelf.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { NFT, ChainInfo, NFTsQueryStatus } from "@/lib/client/constants";
+import { NFT, ChainInfo, NFTsQueryStatus, } from "@/lib/client/constants";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
 import { EthereumAddress } from "@/lib/shared/types";
 import { SelectUserIcon, SwapContext } from "@/components/01-atoms";
@@ -29,25 +29,38 @@ export const NftsShelf = ({ address }: INftsShelfProps) => {
   const { theme } = useTheme();
 
   const { authenticatedUserAddress } = useAuthenticatedUser();
-  const { validatedAddressToSwap, inputAddress, destinyChain } =
+  const { validatedAddressToSwap, inputAddress, destinyChain, userJustValidatedInput } =
     useContext(SwapContext);
 
-  useEffect(() => {
+  const [addressSearchCount, setAddressSearchCount] = useState<number>(0)
+
+  const showUserItems = async () => {
     const chainId =
       address === authenticatedUserAddress?.address
         ? chain?.id
         : ChainInfo[destinyChain].id;
+    if(addressSearchCount > 1) return //When a new address is added, all useEffect parameters are updated
+                                    // addressSearchCount prevents multiple API calls from occurring, causing undesired behavior to occur.
+    if (address && chainId && inputAddress) {
+      try {
+        const nftsList = await getNftsFrom(address, chainId, setNftsQueryStatus)
+
+        setNftsList(nftsList);
+
+      } catch (_) {
 
-    if (address && chainId) {
-      getNftsFrom(address, chainId, setNftsQueryStatus)
-        .then((nftsList) => {
-          setNftsList(nftsList);
-        })
-        .catch(() => {
-          setNftsList([]);
-        });
+        setNftsList([]);
+      }
+
+      setAddressSearchCount((prev)=> prev + 1)
     }
-  }, [address, chain, destinyChain]);
+
+  }
+
+  useEffect(() => {
+    showUserItems()
+    console.log(userJustValidatedInput)
+  }, [address, chain, destinyChain, userJustValidatedInput]);
 
   useEffect(() => {
     if (
@@ -70,16 +83,18 @@ export const NftsShelf = ({ address }: INftsShelfProps) => {
   useEffect(() => {
     if (
       address !== authenticatedUserAddress?.address &&
-      validatedAddressToSwap !== authenticatedUserAddress?.address
+      validatedAddressToSwap !== authenticatedUserAddress?.address || !inputAddress
     ) {
       setNftsList([]);
       setNftsQueryStatus(NFTsQueryStatus.EMPTY_QUERY);
     }
+    setAddressSearchCount(0)
   }, [inputAddress]);
 
   useEffect(() => {
     if (!validatedAddressToSwap) {
       setNftsQueryStatus(NFTsQueryStatus.EMPTY_QUERY);
+      console.log("entrou aqui")
     }
   }, [validatedAddressToSwap]);