From e64eaba23c47bd18e45cc6cec077fcd851182398 Mon Sep 17 00:00:00 2001
From: yu23ki14 <yuki_021423@yahoo.co.jp>
Date: Wed, 31 May 2023 20:04:20 +0900
Subject: [PATCH] metadata parallel fetch

---
 frontend/src/hooks/useMintNFT.ts | 50 +++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/hooks/useMintNFT.ts b/frontend/src/hooks/useMintNFT.ts
index d5ef08f6..6b450531 100644
--- a/frontend/src/hooks/useMintNFT.ts
+++ b/frontend/src/hooks/useMintNFT.ts
@@ -55,16 +55,15 @@ export const useGetOwnedNftIdsByAddress = (address?: string) => {
   useEffect(() => {
     const fetch = async () => {
       if (!address || isLoading) return;
-      const _ids: number[] = [];
       const balance = await mintNFTContract?.call("balanceOf", [address]);
-      for (let index = 0; index < balance.toNumber(); index++) {
-        const tokenId = await mintNFTContract?.call("tokenOfOwnerByIndex", [
-          address,
-          index,
-        ]);
-        _ids.push(tokenId.toNumber());
-      }
-      setIds(_ids);
+      const tokenIdsPromise = Array(balance.toNumber())
+        .fill("")
+        .map((_, index) => {
+          return mintNFTContract?.call("tokenOfOwnerByIndex", [address, index]);
+        });
+      const tokenIds = await Promise.all(tokenIdsPromise);
+
+      setIds(tokenIds.map((id) => id.toNumber()));
     };
     fetch();
   }, [address, isLoading]);
@@ -146,18 +145,29 @@ export const useGetOwnedNFTByAddress = (address?: string) => {
 
     const fetch = async () => {
       setIsLoading(true);
-      const _nfts: any[] = [];
-      for (const id of ids) {
-        try {
+
+      const tokenURIPromises = ids.map((id) => {
+        const getTokenURI = async (id: number) => {
           const tokenURI = await mintNFTContract?.call("tokenURI", [id]);
-          const { data: metaData } = await axios.get(ipfs2http(tokenURI));
-          _nfts.push({ ...metaData, tokenId: id });
-        } catch (error) {
-          console.log(error);
-          continue;
-        }
-      }
-      setNfts(_nfts);
+          return { tokenURI, tokenId: id };
+        };
+        return getTokenURI(id);
+      });
+      const tokenURIs = await Promise.all(tokenURIPromises);
+
+      const metaDataPromises = tokenURIs.map(({ tokenURI, tokenId }) => {
+        const getMetaData = async (tokenURI: string, tokenId: number) => {
+          try {
+            const { data: metaData } = await axios.get(ipfs2http(tokenURI));
+            return { ...metaData, tokenId };
+          } catch (error) {
+            console.log(error);
+          }
+        };
+        return getMetaData(tokenURI, tokenId);
+      });
+      const _nfts = await Promise.all(metaDataPromises);
+      setNfts(_nfts.filter((nft) => nft));
       setIsLoading(false);
     };