From 67031fcd4f48d6629fe61fc28b8bfd88d057f535 Mon Sep 17 00:00:00 2001
From: Ra <rami@jwcorp.fr>
Date: Thu, 14 Sep 2023 01:00:55 +0200
Subject: [PATCH] followers display in favathelte

---
 client/src/App.js                             |  2 +-
 .../AthleteTemplate/AthleteTemplate.js        |  1 +
 .../FavAthlete/Carroussel/Carroussel.css      |  2 +
 .../FavAthlete/Carroussel/Carroussel.js       | 13 ++---
 .../src/Components/FavAthlete/FavAthlete.js   |  4 +-
 .../src/Components/LoginSignupPopUp/Signup.js |  4 +-
 client/src/Components/Navbar/Navbar.js        |  2 +-
 client/src/Pages/Home/Home.js                 | 58 +++++++++++++++++--
 8 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 7477f6ac..fac4243b 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -178,7 +178,7 @@ function App() {
     setIsSignInButtonClicked(false);
     setIsSignUpButtonClicked(true);
   };
-  console.log(loggedInUser);
+  // console.log(loggedInUser);
   const ref = useRef([]);
   const [items, set] = useState([]);
   const transitions = useTransition(items, {
diff --git a/client/src/Components/FavAthlete/AthleteTemplate/AthleteTemplate.js b/client/src/Components/FavAthlete/AthleteTemplate/AthleteTemplate.js
index 1faa40cd..88eb6252 100644
--- a/client/src/Components/FavAthlete/AthleteTemplate/AthleteTemplate.js
+++ b/client/src/Components/FavAthlete/AthleteTemplate/AthleteTemplate.js
@@ -13,6 +13,7 @@ const AthleteTemplate = ({ href, src, athleteName, isFan }) => {
       style={{
         backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%), url(${src})`,
         backgroundPosition: "center",
+        backgroundRepeat: "no-repeat"
       }}
     >
       {isFan && <img src={Star} alt="star" className="athleteTemplate-star" />}
diff --git a/client/src/Components/FavAthlete/Carroussel/Carroussel.css b/client/src/Components/FavAthlete/Carroussel/Carroussel.css
index b3fd905c..a49ebd80 100644
--- a/client/src/Components/FavAthlete/Carroussel/Carroussel.css
+++ b/client/src/Components/FavAthlete/Carroussel/Carroussel.css
@@ -54,6 +54,8 @@
 }
 .carroussel-left-arrow-wrap > img {
   transform: rotate(180deg);
+  background-repeat: no-repeat;
+  
 }
 @media (max-width: 950px) {
   .carroussel-section{
diff --git a/client/src/Components/FavAthlete/Carroussel/Carroussel.js b/client/src/Components/FavAthlete/Carroussel/Carroussel.js
index 3344c43a..3cb5b333 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 = () => {
+const Carroussel = ({ athletesFollowing }) => {
   const [rightArrowClicked, setRightArrowClicked] = useState(false);
   const [leftArrowClicked, setLeftArrowClicked] = useState(false);
   const [counter, setCounter] = useState(0);
@@ -92,15 +92,14 @@ const Carroussel = () => {
             counter !== (filteredArray.length - 2) * 120 * -1 ? style2 : style
           }
         >
-          {filteredArray.map((athlete) => {
+          {athletesFollowing.map((athlete) => {
             return (
               <div key={uuidv4()} className="athlete-template-container">
                 <AthleteTemplate
-                  
-                  href={`/profile/${athlete.id}`}
-                  src={athlete.img}
-                  athleteName={athlete.surName + " " + athlete.firstName}
-                  isFan={athlete.isFan}
+                  href={`/athleteprofile/${athlete.athleteId}`}
+                  src={athlete.profile_avatar}
+                  athleteName={athlete.username}
+                  // isFan={athlete.isFan}
                 />
               </div>
             );
diff --git a/client/src/Components/FavAthlete/FavAthlete.js b/client/src/Components/FavAthlete/FavAthlete.js
index 653aeaf9..3a7d03ed 100644
--- a/client/src/Components/FavAthlete/FavAthlete.js
+++ b/client/src/Components/FavAthlete/FavAthlete.js
@@ -6,7 +6,7 @@ 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 = () => {
+const FavAthlete = ({athletesFollowing}) => {
   const fakeArray = [
     {
       firstName: "James",
@@ -77,7 +77,7 @@ const FavAthlete = () => {
           <span>Vos sportifs préférés</span>
           {/* <a href="/favathlete-details"> Voir plus</a> */}
         </div>
-        <Carroussel />
+        <Carroussel athletesFollowing={athletesFollowing}/>
         <div className="favAthlete-responsive-container">
           {filteredArray.map((athlete)  => (
             <FeedSuggestionTemplate 
diff --git a/client/src/Components/LoginSignupPopUp/Signup.js b/client/src/Components/LoginSignupPopUp/Signup.js
index 124a7be4..c2cbcff4 100644
--- a/client/src/Components/LoginSignupPopUp/Signup.js
+++ b/client/src/Components/LoginSignupPopUp/Signup.js
@@ -1015,11 +1015,11 @@ function Signup({
       isPasswordMatch;
 
     if (allFieldsValid) {
-      console.log("Tout est bon!");
+      // console.log("Tout est bon!");
       setIsAllFieldsComplete(true);
     } else {
       setIsAllFieldsComplete(false);
-      console.log("tout n'est pas bon");
+      // console.log("tout n'est pas bon");
     }
     // }, [email, username, password, showError, isPasswordMatch]);
   }, [
diff --git a/client/src/Components/Navbar/Navbar.js b/client/src/Components/Navbar/Navbar.js
index 19383c91..6d5ac603 100644
--- a/client/src/Components/Navbar/Navbar.js
+++ b/client/src/Components/Navbar/Navbar.js
@@ -76,7 +76,7 @@ const Navbar = ({
       setIsPageHomeDisplay(true);
       setIsPageLaunchpadDisplay(false);
 
-      console.log("ceci est home");
+      // console.log("ceci est home");
     } else {
       setIsPageHomeDisplay(false);
     }
diff --git a/client/src/Pages/Home/Home.js b/client/src/Pages/Home/Home.js
index c75077f7..aa06407f 100644
--- a/client/src/Pages/Home/Home.js
+++ b/client/src/Pages/Home/Home.js
@@ -57,6 +57,8 @@ function Home({
   const [commentCounts, setCommentCounts] = useState({});
   const [commentCounterIncrementLocal, setCommentCounterIncrementLocal] =
     useState(0);
+  const [athletesFollowing, setAthletesFollowing] = useState([]);
+
   function handleDisplayPremiumContent(i) {
     if (isUserFan === false && dataPost[i]?.visibility === false) {
       return true;
@@ -101,6 +103,53 @@ function Home({
     return () => unsubscribe();
   }, []);
 
+  useEffect(() => {
+    const userIdToFind = loggedInUser?.id;
+
+    const usersRef = collection(db, "users");
+    const q = query(usersRef, where("account_type", "==", "athlete"));
+
+    const unsubscribe = onSnapshot(q, async (querySnapshot) => {
+      const foundAthletes = [];
+      for (let doc of querySnapshot.docs) {
+        const athleteId = doc.id;
+        const userData = doc.data();
+
+        // Accéder à la collection athlete_data pour l'athlète spécifique
+        const athleteDataRef = collection(
+          db,
+          "users",
+          athleteId,
+          "athlete_data"
+        );
+
+        // Récupérer le document
+        const athleteDataSnapshot = await getDocs(athleteDataRef);
+        athleteDataSnapshot.forEach((doc) => {
+          if (doc.exists) {
+            const athleteData = doc.data();
+            if (
+              athleteData &&
+              athleteData.followers &&
+              athleteData.followers.includes(userIdToFind)
+            ) {
+              foundAthletes.push({
+                athleteId,
+                profile_avatar: userData.profile_avatar,
+                username: userData.username,
+              });
+            }
+          }
+        });
+      }
+      setAthletesFollowing(foundAthletes);
+    });
+
+    return () => unsubscribe();
+  }, [loggedInUser]);
+
+  console.log(athletesFollowing);
+
   const handleDropdownPostFeedClick = (e) => {
     for (let i = 0; i < dataPost.length; i++) {
       if (
@@ -162,10 +211,7 @@ function Home({
     }, 5700);
     // clearTimeout(timeOutHideCopyClicked);
   }
-  useEffect(() => {
-    console.log(dataPost);
-  }, [dataPost]);
-  // console.log(loggedInUser?.account_type)
+
   return (
     <>
       <section className="home-component">
@@ -219,7 +265,9 @@ function Home({
               )
             }
           </div>
-          <FavAthlete />
+          <FavAthlete
+          athletesFollowing={athletesFollowing}
+          />
           <FeedSuggestions
             handleAthleteSuggestionClick={handleAthleteSuggestionClick}
             suggestionsAthletes={suggestionsAthletes}