Merge pull request #216 from So-Fan/SD-532-Add-Fan-mapping-in-favathl…

…ete-component

SD-532

client/src/Components/FavAthlete/Carroussel/Carroussel.js

@@ -5,7 +5,7 @@ import Mbappe from "../fakeData/mbappe.svg";
 import RightArrow from "../../../Assets/Image/right_arrow.svg";
 import "./Carroussel.css";
 import { v4 as uuidv4 } from "uuid";
-const Carroussel = ({ athletesFollowing }) => {
+const Carroussel = ({ athletesFollowing, athletesSupportingData }) => {
   const [rightArrowClicked, setRightArrowClicked] = useState(false);
   const [leftArrowClicked, setLeftArrowClicked] = useState(false);
   const [counter, setCounter] = useState(0);
@@ -82,7 +82,7 @@ const Carroussel = ({ athletesFollowing }) => {
       setLeftArrowClicked(false);
     }
   }, [rightArrowClicked, leftArrowClicked, counter]);
-
+// console.log("athletesSupportingData --> ",athletesSupportingData)
   return (
     <div className="carroussel-section">
       <div className="carroussel-athlete-wrap">
@@ -92,6 +92,18 @@ const Carroussel = ({ athletesFollowing }) => {
             counter !== (filteredArray.length - 2) * 120 * -1 ? style2 : style
           }
         >
+          {athletesSupportingData.map((athleteSupporting) => {
+            return (
+              <div key={uuidv4()} className="athlete-template-container">
+                <AthleteTemplate
+                  href={`/athleteprofile/${athleteSupporting.athlete_id}`}
+                  src={athleteSupporting.profile_avatar}
+                  athleteName={athleteSupporting.display_name}
+                  isFan={true}
+                />
+              </div>
+            );
+          })}
           {athletesFollowing.map((athlete) => {
             return (
               <div key={uuidv4()} className="athlete-template-container">

client/src/Components/FavAthlete/FavAthlete.js

@@ -1,12 +1,17 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import AthleteTemplate from "./AthleteTemplate/AthleteTemplate";
 import Carroussel from "./Carroussel/Carroussel";
 import "./FavAthlete.css";
 import LeBron from "./fakeData/lebron.svg";
 import Mbappe from "./fakeData/mbappe.svg";
 import FeedSuggestionTemplate from "../FeedSuggestions/FeedSuggestionTemplate/FeedSuggestionTemplate";
 import { v4 as uuidv4 } from "uuid";
-const FavAthlete = ({ athletesFollowing }) => {
+const FavAthlete = ({
+  athletesFollowing,
+  athletesSupportingData,
+  isSupportingOrFollowingAthlete,
+  setIsSupportingOrFollowingAthlete,
+}) => {
   const fakeArray = [
     {
       firstName: "James",
@@ -69,9 +74,23 @@ const FavAthlete = ({ athletesFollowing }) => {
   });
 
   const filteredArray = [...userFanAthlete, ...userRecommandationAthlete];
+  // console.log("athletesSupportingData --> ", athletesSupportingData.length);
+  function handleDisplayFavAthlete() {
+    if (athletesFollowing.length > 0 || athletesSupportingData.length > 0) {
+      setIsSupportingOrFollowingAthlete(true);
+    } else {
+      setIsSupportingOrFollowingAthlete(false);
+    }
+  }
+
+  useEffect(() => {
+    handleDisplayFavAthlete();
+    console.log(isSupportingOrFollowingAthlete);
+  }, [athletesFollowing.length, athletesSupportingData.length]);
+
   return (
     <div
-      style={athletesFollowing.length == 0 ? { display: "none" } : {}}
+      style={isSupportingOrFollowingAthlete ? {} : { display: "none" }}
       className="favAthlete-container"
     >
       <div className="favAthlete-horizontal"></div>
@@ -80,7 +99,10 @@ const FavAthlete = ({ athletesFollowing }) => {
           <span>Vos sportifs préférés</span>
           {/* <a href="/favathlete-details"> Voir plus</a> */}
         </div>
-        <Carroussel athletesFollowing={athletesFollowing} />
+        <Carroussel
+          athletesSupportingData={athletesSupportingData}
+          athletesFollowing={athletesFollowing}
+        />
         <div className="favAthlete-responsive-container">
           {/* {filteredArray.map((athlete)  => (
             <FeedSuggestionTemplate 

client/src/Pages/Home/Home.js

@@ -23,10 +23,12 @@ import {
   orderBy,
   onSnapshot,
   getDocs,
+  getDoc,
+  doc,
   where,
   limit,
 } from "firebase/firestore";
-
+import { Network, Alchemy, NftFilters } from "alchemy-sdk";
 function Home({
   loggedInUser,
   setPostData,
@@ -58,7 +60,12 @@ function Home({
   const [commentCounterIncrementLocal, setCommentCounterIncrementLocal] =
     useState(0);
   const [athletesFollowing, setAthletesFollowing] = useState([]);
-
+  const [athleteNftInfo, setAthleteNftInfo] = useState([]);
+  const [nftsFromOwner, setNftsFromOwner] = useState([]);
+  const [currentProfileUserWallet, setCurrentProfileUserWallet] = useState("");
+  const [athletesSupportingData, setAthletesSupportingData] = useState([]);
+  const [isSupportingOrFollowingAthlete, setIsSupportingOrFollowingAthlete] =
+    useState();
   function handleDisplayPremiumContent(i) {
     if (isUserFan === false && dataPost[i]?.visibility === false) {
       return true;
@@ -149,7 +156,7 @@ function Home({
     return () => unsubscribe();
   }, [loggedInUser]);
 
-  // console.log(athletesFollowing);
+  // retrouver les athlete supportés
 
   const handleDropdownPostFeedClick = (e) => {
     for (let i = 0; i < dataPost.length; i++) {
@@ -212,7 +219,122 @@ function Home({
     }, 5700);
     // clearTimeout(timeOutHideCopyClicked);
   }
-  console.log(isLogged)
+  // Api Alchemy setup
+  const settings = {
+    apiKey: "34lcNFh-vbBqL9ignec_nN40qLHVOfSo",
+    network: Network.ETH_GOERLI,
+    maxRetries: 10,
+  };
+  const alchemy = new Alchemy(settings);
+  useEffect(() => {
+    // get Nfts from Owner and Contracts
+    async function getNftsForOwner() {
+      let arraySofanCollection = [];
+      let nftCollectionInfo = [];
+      const q = query(collection(db, "nft_collections"));
+      const querySnapshot = await getDocs(q);
+
+      if (!querySnapshot.empty) {
+        querySnapshot.forEach((doc) => {
+          const nftcollectionInfo = doc.data();
+          arraySofanCollection.push(nftcollectionInfo.collection_address);
+          nftCollectionInfo.push(nftcollectionInfo);
+        });
+      } else {
+        console.log("No collection found");
+      }
+      // Collecting all unique user IDs
+      const uniqueUserIds = [
+        ...new Set(nftCollectionInfo.map((item) => item.athlete_id)),
+      ];
+
+      // Fetching all users in one go
+      const qUsers = query(
+        collection(db, "users"),
+        where("id", "in", uniqueUserIds)
+      );
+      const usersQuerySnapshot = await getDocs(qUsers);
+      const usersData = usersQuerySnapshot.docs.map((doc) => doc.data());
+      // console.log(usersData);
+
+      // Now you can use usersData to get display_name or any other info
+
+      let currentProfileWalletAddresses;
+      if (isLogged?.metamask) {
+        currentProfileWalletAddresses = isLogged.metamask;
+        setCurrentProfileUserWallet(isLogged.metamask);
+      } else if (isLogged?.web3auth) {
+        currentProfileWalletAddresses = isLogged.web3auth;
+        setCurrentProfileUserWallet(isLogged.web3auth);
+      }
+      console.log(currentProfileWalletAddresses);
+
+      try {
+        const nftsFromOwner = await alchemy.nft.getNftsForOwner(
+          currentProfileWalletAddresses,
+          {
+            contractAddresses: arraySofanCollection,
+          }
+        );
+        let athletesSupportingArray = [];
+        for (let i = 0; i < nftsFromOwner.ownedNfts.length; i++) {
+          const elementFromAlchemy = nftsFromOwner.ownedNfts[i];
+          for (let a = 0; a < nftCollectionInfo.length; a++) {
+            const elementFromNftCollectionInfo = nftCollectionInfo[a];
+            for (let b = 0; b < usersData.length; b++) {
+              const elementFromUserData = usersData[b];
+              if (
+                elementFromAlchemy.contract.address ===
+                  elementFromNftCollectionInfo.collection_address.toLowerCase() &&
+                elementFromUserData.id ===
+                  elementFromNftCollectionInfo.athlete_id
+              ) {
+                nftsFromOwner.ownedNfts[i] = {
+                  ...nftsFromOwner.ownedNfts[i],
+                  athleteName: elementFromUserData.display_name,
+                  profileAvatar: elementFromUserData.profile_avatar,
+                  athlete_id: elementFromUserData.id,
+                };
+                if (
+                  !athletesSupportingArray.includes(
+                    elementFromUserData.display_name
+                  )
+                ) {
+                  athletesSupportingArray.push({
+                    display_name: elementFromUserData.display_name,
+                    profile_avatar: elementFromUserData.profile_avatar,
+                    athlete_id: elementFromUserData.id,
+                  });
+                }
+              }
+            }
+          }
+        }
+        function removeDuplicatesBy(keyFn, array) {
+          const mySet = new Set();
+          return array.filter((x) => {
+            const key = keyFn(x);
+            const isNew = !mySet.has(key);
+            if (isNew) mySet.add(key);
+            return isNew;
+          });
+        }
+        const uniqueAthleteSupportingArray = removeDuplicatesBy(
+          (x) => x.athlete_id,
+          athletesSupportingArray
+        );
+        setAthletesSupportingData(uniqueAthleteSupportingArray);
+        // setAthletesSupportingData(athletesSupportingArray);
+        setNftsFromOwner(nftsFromOwner?.ownedNfts);
+        // console.log("yess", nftsFromOwner);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    getNftsForOwner();
+  }, [isLogged]);
+  // console.log("nftsFromOwner --> ",nftsFromOwner, "athletesSupportingData --> ",athletesSupportingData)
+  console.log(athletesSupportingData);
   return (
     <>
       <section className="home-component">
@@ -269,15 +391,23 @@ function Home({
               )
             }
           </div>
-          <FavAthlete athletesFollowing={athletesFollowing} />
-          {athletesFollowing.length === 0 && (
+          {/* {isSupportingOrFollowingAthlete && (
             <>
               <div className="home-left-separation-line"></div>
             </>
-          )}
+          )} */}
+          <FavAthlete
+            athletesSupportingData={athletesSupportingData}
+            athletesFollowing={athletesFollowing}
+            setIsSupportingOrFollowingAthlete={
+              setIsSupportingOrFollowingAthlete
+            }
+            isSupportingOrFollowingAthlete={isSupportingOrFollowingAthlete}
+          />
           <FeedSuggestions
             handleAthleteSuggestionClick={handleAthleteSuggestionClick}
             suggestionsAthletes={suggestionsAthletes}
+            athletesSupportingData={athletesSupportingData}
           />
         </div>
         <div className="home-center-container">