button FollowHandler.js en false de base

Site Web/client/src/components/Post/ActionComment.js

@@ -22,7 +22,7 @@ const ActionComment = ( { commentaire , postId}) => {
 
     const handleDelete = () => {
         dispatch(deleteComment(postId, commentaire._id));
-        setMessage('commantaire suprimer');
+        setMessage('commentaire supprimé');
         setEdit(false);
     };
 

Site Web/client/src/components/UserProfil/FollowHandler.js

@@ -1,13 +1,58 @@
 import axios from 'axios';
-import React, { useEffect, useState } from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { followUser, unFollowUser } from '../../actions/user.actions';
+import { followUser, unFollowUser,getUser } from '../../actions/user.actions';
 import { setUserToFollowData, setUserToUnFollowData } from '../../reducers/user.reducer';
 import { isEmpty } from '../Utils';
+import {UidContext} from "../AppContext";
+import Coeur from "../../assets/img/coeurs.png";
+import CoeurPlein from "../../assets/img/coeursPlein.png";
+import MiniProfil from "../MiniProfil";
 
 const FollowHandler = ( { idToFollow , type } ) => {
+    const uid = useContext(UidContext);
+    const dispatch = useDispatch();
     const userData = useSelector((state) => state.user.user);
+
+    console.log("userData: ",userData)
+    //const [isFollowed, setIsFollowed] = useState(userData.following.includes(idToFollow));
     const [isFollowed, setIsFollowed] = useState(false);
+
+    const follow = (e) => {
+        e.preventDefault();
+        setIsFollowed(true);
+        dispatch(followUser(userData._id, idToFollow));
+    };
+
+    const unfollow = (e) => {
+        e.preventDefault();
+        setIsFollowed(false);
+        dispatch(unFollowUser(userData._id, idToFollow));
+    };
+
+        return (
+            <>
+                { uid !== idToFollow && isFollowed && !isEmpty(userData) && (
+                    <span onClick={unfollow}>
+                    {type === "card" && <button className="follow-btn">Abonné</button>}
+                        {type === "suggest" && <i className="fas fa-check-circle navbar-icon"></i>}
+                </span>
+                )}
+                {uid !== idToFollow && isFollowed === false && !isEmpty(userData) && (
+                    <span onClick={follow}>
+                    {type === "card" && <button className="follow-btn">Suivre</button>}
+                        {type === "suggest" && <i className="far fa-check-circle navbar-icon"></i>}
+                </span>
+                )}
+            </>
+        );
+
+
+
+    /*
+    const userData = useSelector((state) => state.user.user);
+    const [isFollowed, setIsFollowed] = useState(userData.following.includes(idToFollow));
+    console.log("isFollowed",isFollowed)
     const dispatch = useDispatch();
 
     const handleFollow = (e) => {
@@ -66,7 +111,7 @@ const FollowHandler = ( { idToFollow , type } ) => {
                 </span>
             )}
         </>
-    );
+    );*/
 };
 
 export default FollowHandler;

Site Web/client/src/components/UserProfil/SuggestFriends.js

@@ -41,7 +41,7 @@ const SuggestFriends = () => {
             setFriends(array);
         }
 
-        const stateTopFollowers = () => {
+        const stateTopFollowers = async () => {
             let array = [];
             let obj = JSON.parse(JSON.stringify(usersData));
             obj.sort((a, b) => b.followers.length - a.followers.length);

Site Web/client/src/pages/Profil.js

@@ -71,7 +71,9 @@ const Profil = () => {
                     {/* <h3>suuu</h3> */}
                 </div>
                 <div className="divSuivreFollowing">
-                    { uidS && <a href="#" className="button" id="button">Suivre +</a>}
+                    { /*uidS && <a href="#" className="button" id="button">Suivre +</a>*/
+                        <FollowHandler idToFollow={uid} type={'card'}/>
+                    }
                 </div>
                 <div className="divSuivreFollowing">
                  <div className="nbFollow" onClick={() => setFollowingPopup(true)}>

Site Web/client/src/styles/_settings.scss

@@ -40,3 +40,9 @@ body{
     clip-path:circle(50%);
 }
 
+.follow-btn{
+    //background-color: #4CAF50;
+    width:70px;
+    border: none;
+}
+