From 0b964ca7949d775431036337ecd2a4b3955e4f18 Mon Sep 17 00:00:00 2001 From: Ra Date: Wed, 20 Sep 2023 21:32:59 +0200 Subject: [PATCH] display supporting athlete in favathlete + logic for display star and hide when no supporting and following --- .../FavAthlete/Carroussel/Carroussel.js | 16 +- .../src/Components/FavAthlete/FavAthlete.js | 30 +++- client/src/Pages/Home/Home.js | 144 +++++++++++++++++- 3 files changed, 177 insertions(+), 13 deletions(-) diff --git a/client/src/Components/FavAthlete/Carroussel/Carroussel.js b/client/src/Components/FavAthlete/Carroussel/Carroussel.js index 3cb5b333..ca68535b 100644 --- a/client/src/Components/FavAthlete/Carroussel/Carroussel.js +++ b/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 (
@@ -92,6 +92,18 @@ const Carroussel = ({ athletesFollowing }) => { counter !== (filteredArray.length - 2) * 120 * -1 ? style2 : style } > + {athletesSupportingData.map((athleteSupporting) => { + return ( +
+ +
+ ); + })} {athletesFollowing.map((athlete) => { return (
diff --git a/client/src/Components/FavAthlete/FavAthlete.js b/client/src/Components/FavAthlete/FavAthlete.js index 1eee0eb5..8d9154a9 100644 --- a/client/src/Components/FavAthlete/FavAthlete.js +++ b/client/src/Components/FavAthlete/FavAthlete.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import AthleteTemplate from "./AthleteTemplate/AthleteTemplate"; import Carroussel from "./Carroussel/Carroussel"; import "./FavAthlete.css"; @@ -6,7 +6,12 @@ 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 (
@@ -80,7 +99,10 @@ const FavAthlete = ({ athletesFollowing }) => { Vos sportifs préférés {/* Voir plus */}
- +
{/* {filteredArray.map((athlete) => ( 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 ( <>
@@ -269,15 +391,23 @@ function Home({ ) }
- - {athletesFollowing.length === 0 && ( + {/* {isSupportingOrFollowingAthlete && ( <>
- )} + )} */} +