feat : modified url name for nft and collection

MyriadFlow · Oct 30, 2024 · 0a7ed01 · 0a7ed01
1 parent b4431bc
commit 0a7ed01
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 37 deletions.
diff --git a/src/app/collection/[id]/page.js b/src/app/collection/[id]/page.js
@@ -6,7 +6,7 @@ import Header1 from '../../../components/header1';
 import Footer from '../../../components/footer';
 
 const Collection = ({ params }) => {
-  const id = params?.id;
+  const id = params?.id.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
 
   const [phygitals, setPhygitals] = useState([]);
   const [collections, setCollections] = useState([]);
@@ -53,28 +53,28 @@ const Collection = ({ params }) => {
         const brandData = await brands.json();
 
         // Find the corresponding brand in result
-        const matchedBrand = result.find(coll => coll.id === id);
+        const matchedBrand = result.find(coll => coll.name === id);
         if (matchedBrand) {
           setCollections(matchedBrand);
-        }
-
-        // Filter collections by the brand id
-        const matchedCollections = phygitals.filter(phygital => phygital.collection_id === id);
+          const CollectionId = matchedBrand.id;
 
-        setPhygitals(matchedCollections);
+          // Filter collections by the brand id
+          const matchedCollections = phygitals.filter(phygital => phygital.collection_id === CollectionId);
 
-        const matchedBrandLogo = brandData.find(brand => brand.id === matchedBrand.brand_id);
-        if (matchedBrandLogo) {
-          setLogos(matchedBrandLogo.logo_image);
-          setDesc(matchedBrandLogo.description);
-          setBrandId(matchedBrandLogo.id);
-          setName(matchedBrandLogo.name);
-        }
+          setPhygitals(matchedCollections);
 
-        setLoading(false);
+          const matchedBrandLogo = brandData.find(brand => brand.id === matchedBrand.brand_id);
+          if (matchedBrandLogo) {
+            setLogos(matchedBrandLogo.logo_image);
+            setDesc(matchedBrandLogo.description);
+            setBrandId(matchedBrandLogo.id);
+            setName(matchedBrandLogo.name);
+          }
 
-        console.log("brand", matchedBrand, matchedCollections, matchedBrandLogo);
+          setLoading(false);
 
+          console.log("brand", matchedBrand, matchedCollections, matchedBrandLogo);
+        }
       } catch (error) {
         console.error('Error fetching data:', error);
         setLoading(false);
@@ -161,7 +161,7 @@ const Collection = ({ params }) => {
                   zIndex: 20,
                   width: '300px',
                   color: 'white'
-              }}
+                }}
               >
                 <div className="text-sm">{desc}</div>
                 <Link href={`/brand/${brandid}`} className="block mt-4 text-sm border border-white rounded-full py-1 px-4">

diff --git a/src/app/nfts/[id]/page.js b/src/app/nfts/[id]/page.js
@@ -13,7 +13,7 @@ import Header1 from "@/components/header1";
 import axios from 'axios';
 import Footer from "@/components/footer";
 const NFTPage = ({ params }) => {
-  const id = params?.id;
+  const id = params?.id.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
 
   const [isHovered, setIsHovered] = useState(false);
   const [showPopover, setShowPopover] = useState(false);
@@ -55,34 +55,48 @@ const NFTPage = ({ params }) => {
 
     const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com';
 
-    const phyres = await fetch(`${baseUri}/phygitals/${id}`, {
+    const nfts = await fetch(`${baseUri}/phygitals/all/554b4903-9a06-4031-98f4-48276c427f78`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json'
       }
     });
 
-    const phyresult = await phyres.json()
-    setonePhygital(phyresult);
+    const phynfts = await nfts.json();
 
-    const avatar = await fetch(`${baseUri}/avatars/all/554b4903-9a06-4031-98f4-48276c427f78`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
+    const matchedNft = phynfts.find(nft => nft.name === id);
+    if (matchedNft) {
+      const NftId = matchedNft.id;
 
-    const avatardata = await avatar.json();
+      const phyres = await fetch(`${baseUri}/phygitals/${NftId}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
 
-    console.log("avatar", avatardata, phyresult);
+      const phyresult = await phyres.json()
+      setonePhygital(phyresult);
 
-    const selectedAvatar = avatardata.find(avatar => avatar.phygital_id === id);
+      const avatar = await fetch(`${baseUri}/avatars/all/554b4903-9a06-4031-98f4-48276c427f78`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+
+      const avatardata = await avatar.json();
+
+      console.log("avatar", avatardata, phyresult);
 
-    // If found, update the state with the avatar URL
-    if (selectedAvatar) {
-      setAvatarUrl(selectedAvatar.url);
+      const selectedAvatar = avatardata.find(avatar => avatar.phygital_id === NftId);
+
+      // If found, update the state with the avatar URL
+      if (selectedAvatar) {
+        setAvatarUrl(selectedAvatar.url);
+      }
+      setLoading(false);
     }
-    setLoading(false);
   }
 
   useEffect(() => {
@@ -279,7 +293,7 @@ const NFTPage = ({ params }) => {
         toast.error('Failed to add to cart. Please try again.');
         console.error('Error adding to cart:', error);
       }
-    }else{
+    } else {
       toast.warning('Connect your wallet');
     }
   };

diff --git a/src/components/hotNftCard.js b/src/components/hotNftCard.js
@@ -214,7 +214,7 @@ const HotNftCard = ({ nft }) => {
 
   return (
     <div style={{ position: "relative", display: "inline-block" }}>
-      <Link href={`/nfts/${nft.id}`}>
+      <Link href={`/nfts/${nft.name.toLowerCase().replace(/\s+/g, '-')}`}>
         <div
           style={{
             width: "330px",

diff --git a/src/components/mostLovedCard.js b/src/components/mostLovedCard.js
@@ -146,7 +146,7 @@ try {
 
   return (
     <div style={{ position: "relative", display: "inline-block" }}>
-    <Link href={`/collection/${nft.id}`}>
+    <Link href={`/collection/${nft.name.toLowerCase().replace(/\s+/g, '-')}`}>
         <div
         style={{
           width: "330px",