ajout post

Site Web/client/src/actions/post.actions.js

@@ -7,7 +7,22 @@ export const getPosts = (num) => {
         return axios
         .get(`${process.env.REACT_APP_API_URL}api/post/`)
         .then((res) => {
-            const array = res.data.slice(0, num);
+            let array = res.data.slice(0, num);
+            dispatch(setPostData(array));
+        })
+        .catch((err) => console.log(err))
+    }
+}
+
+export const getPostsDisc = (num) => {
+    return (dispatch) => {
+        return axios
+        .get(`${process.env.REACT_APP_API_URL}api/post/`)
+        .then((res) => {
+            console.log("test");
+            let array = res.data.sort((a, b) => b.likers.length - a.likers.length);
+            array = array.slice(0, num);
+            console.log(array);
             dispatch(setPostData(array));
         })
         .catch((err) => console.log(err))

Site Web/client/src/components/Configurations/ConfigurationDuProfil.js

@@ -105,7 +105,7 @@ const ConfigurationDuProfil = ()=>{
         <div className='accesDossiersPerso'>
             <div className='accesDossiersPersoValidation'>
             <input type="checkbox" name='cocher' />
-            <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
+            <label for="cocher" className='textAccesDossiersPerso'>Cocher si oui</label>
             </div>
            
         </div> 
@@ -119,7 +119,7 @@ const ConfigurationDuProfil = ()=>{
                     </div>
                     <div className='profile-pic '>
                         <label className="-label" for="file">
-                        <span class="camera"></span>
+                        <span className="camera"></span>
                             <span>Changer</span>
                         </label>
                         <input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/>

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

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { deleteComment } from '../../actions/post.actions';
+import { deleteComment, editComment } from '../../actions/post.actions';
 import { UidContext } from '../AppContext';
 
 
@@ -14,46 +14,48 @@ const ActionComment = ( { commentaire , postId}) => {
     const handleEdit = (e) => {
         e.preventDefault();
         if(message){
-            //dispatch();
+            dispatch(editComment(postId, commentaire._id, message));
             setMessage('');
             setEdit(false);
         }
     };
 
     const handleDelete = () => {
-        //dispatch(deleteComment(postId, commentaire._id))
+        dispatch(deleteComment(postId, commentaire._id));
     };
 
     useEffect(() => {
         const verifCreateur = () => {
-            if(uid === commentaire.commenterId){
+            if(uid === commentaire.commentId){
                 setCreateur(true);
             }
         }
+        console.log(commentaire);
         verifCreateur();
+        console.log(createur);
     }, [uid, commentaire.commenterId]);
 
     return (
-        <div>
+        <div className="edit-comment">
             {createur && edit === false && (
                 <span onClick={() => setEdit(!edit)}>
-                    <img src="" alt="editer"/>
+                    <i className='fas fa-edit'></i> 
                 </span>
             )}
             {createur && edit && (
                 <form action="" onSubmit={handleEdit}
-                className="edit-form">
+                className="edit-comment-form">
                     <label htmlFor='text' onClick={() => setEdit(!edit)}>Modifier le commentaire</label>
                 
                     <input type="text" name="text" onChange={(e) => setMessage(e.target.value)} defaultValue={commentaire.text}/>
-                    
+                    <br/>
-                    <div>
+                    <div className="btn">
                         <span onClick={() => {
                             if(window.confirm("Etes-vous sur de supprimer ce commentaire ?")){
                                 handleDelete();
                             }
                         }}>
-                            <img src="" alt="Icon supprimer"/>
+                            <i className="fas fa-trash-alt"></i>
                         </span>
                     </div>
                     <input type="submit" value="Modifier"/>

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

@@ -22,96 +22,67 @@ const Comment = ({ post }) => {
       };
 
       return (
-        <div>
+        <div className="comments-container">
           {post.comments.map((comment) => {
             return (
-                    <div className={comment.commenterId === userData._id ? "comment-friend" : "comment-user"} key={comment._id}>
+              <div
-                        <img id="PhotoProfile" alt="ppCommentaire" src={
+                className={
+                  comment.commenterId === userData._id
+                    ? "comment-container client"
+                    : "comment-container"
+                }
+                key={comment._id}
+              >
+                <div className="left-part">
+                  <img
+                    src={
                       !isEmpty(usersData[0]) &&
-                                usersData.map((user) => {
+                      usersData
+                        .map((user) => {
                           if (user._id === comment.commenterId) return user.picture;
                           else return null;
-                                }).join('')
+                        })
-                            }/>
+                        .join("")
-                        <p>{comment.commenterPseudo}</p>
+                    }
-                        {comment.commenterPseudo !== userData._id && (
+                    alt="commenter-pic"
-                        <FollowHandler idToFollow={comment.commenterId} type={'suggest'}/>)}
+                  />
-                        <span></span>
+                </div>
-                        {timestampParser(comment.timestamp)}
+                <div className="right-part">
+                  <div className="comment-header">
+                    <div className="pseudo">
+                      <h3>{comment.commenterPseudo}</h3>
+                      {comment.commenterId !== userData._id && (
+                        <FollowHandler
+                          idToFollow={comment.commenterId}
+                          type={"suggest"}
+                        />
+                      )}
+                    </div>
+                    <span>{timestampParser(comment.timestamp)}</span>
+                  </div>
                   <p>{comment.text}</p>
-                        <ActionComment commentaire={comment} postId={post._Id} />
+                  <ActionComment commentaire={comment} postId={post._id} />
+                </div>
               </div>
             );
           })}
           {userData._id && (
-                <form action="" onSubmit={handleComment} className="form-comment">
+            <form action="" onSubmit={handleComment} className="comment-form">
-                    <input type="text" name="text" onChange={(e) => setMessage(e.target.value)} value={message} placeholder="Ajoutez un commentaire" />
+              <input
-                    <input type="submit" value="Partager"/>
+                type="text"
+                name="text"
+                onChange={(e) => setMessage(e.target.value)}
+                value={message}
+                placeholder="Laisser un commentaire"
+              />
+              <br />
+              <input type="submit" value="Envoyer" />
             </form>
           )}
         </div>
         );
 };
 
-// return (
+
-//     <div className="comments-container">
-//       {post.comments.map((comment) => {
-//         return (
-//           <div
-//             className={
-//               comment.commenterId === userData._id
-//                 ? "comment-container client"
-//                 : "comment-container"
-//             }
-//             key={comment._id}
-//           >
-//             <div className="left-part">
-//               <img
-//                 src={
-//                   !isEmpty(usersData[0]) &&
-//                   usersData
-//                     .map((user) => {
-//                       if (user._id === comment.commenterId) return user.picture;
-//                       else return null;
-//                     })
-//                     .join("")
-//                 }
-//                 alt="commenter-pic"
-//               />
-//             </div>
-//             <div className="right-part">
-//               <div className="comment-header">
-//                 <div className="pseudo">
-//                   <h3>{comment.commenterPseudo}</h3>
-//                   {comment.commenterId !== userData._id && (
-//                     <FollowHandler
-//                       idToFollow={comment.commenterId}
-//                       type={"card"}
-//                     />
-//                   )}
-//                 </div>
-//                 <span>{timestampParser(comment.timestamp)}</span>
-//               </div>
-//               <p>{comment.text}</p>
-//               <ActionComment comment={comment} postId={post._id} />
-//             </div>
-//           </div>
-//         );
-//       })}
-//       {userData._id && (
-//         <form action="" onSubmit={handleComment} className="comment-form">
-//           <input
-//             type="text"
-//             name="text"
-//             onChange={(e) => setMessage(e.target.value)}
-//             value={message}
-//             placeholder="Laisser un commentaire"
-//           />
-//           <br />
-//           <input type="submit" value="Envoyer" />
-//         </form>
-//       )}
-//     </div>
-//     );
 
 export default Comment;

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

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { getPosts } from '../../actions/post.actions';
+import { getPosts, getPostsDisc } from '../../actions/post.actions';
 import { isEmpty } from "../Utils";
 import Post from './Post';
 
-const DisplayPosts = () => {
+const DisplayPosts = ( {type} ) => {
     const [loadPost, setLoadPost] = useState(true);
     const [count , setCount] = useState(5);
     const dispatch = useDispatch();
@@ -21,7 +21,12 @@ const DisplayPosts = () => {
 
         }
         if (loadPost) {
+            if(type === "discover"){
+                dispatch(getPostsDisc(count));
+            }
+            else{
                 dispatch(getPosts(count));
+            }
             setLoadPost(false);
             setCount(count + 5);
         }

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

@@ -43,12 +43,9 @@ const SuggestFriends = () => {
         const stateTopFollowers = () => {
             let array = [];
             let obj = JSON.parse(JSON.stringify(usersData));
-            console.log("obj");
-            console.log(obj);
             obj.sort((a, b) => b.followers.length - a.followers.length);
-            console.log(obj);
             obj.map((user) => {
-                if(user._id !== userData._id){
+                if(user._id !== userData._id && !user.followers.includes(userData._id)){
                     return array.push(user._id);
                 }
             })
@@ -69,19 +66,19 @@ const SuggestFriends = () => {
     }, [userData, usersData, change])
 
     return (
-            <div class="recoDiv">
+            <div className="recoDiv">
-                <div class="reco">
+                <div className="reco">
                     <span>Vous pourriez suivre</span>
                     <hr/>
                     {chargement ? (
                         <i className='fas fa-spinner fa-pulse'></i> 
                     ) : (
-                        <div class="ListReco" >
+                        <div className="ListReco" >
                             {friends && friends.map((user) => {
                                 for(let i = 0; i < usersData.length; i++){
                                     if(user === usersData[i]._id){
                                         return (
-                                            <div class="UtiReco" key={user}>
+                                            <div className="UtiReco" key={user}>
                                                 <img src={usersData[i].picture} alt="img"/>
                                                 <p>{usersData[i].pseudo}</p>
                                                 <FollowHandler idToFollow={usersData[i]._id} type={"card"}/>

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

@@ -9,7 +9,7 @@ const Discover = () => {
             <Navbar />
             <main >
                 <div className='postInMain'>
-                    <DisplayPosts/>
+                    <DisplayPosts type={"discover"}/>
                 </div>
                 <div className="RightBar">
                     <AjoutLien/>

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

@@ -12,7 +12,7 @@ const Home = () => {
             <Navbar />
             <main >
                 <div className='postInMain'>
-                    <DisplayPosts/>
+                    <DisplayPosts type={"home"}/>
                 </div>
                 <div className="RightBar">
                     <AjoutLien/>

Site Web/controllers/post.controller.js

@@ -175,8 +175,8 @@ module.exports.commentPost = (req, res) => {
       {
         $push: {
           comments: {
-            commenterId: req.body.commenterId,
+            commentId: req.body.commenterId,
-            commenterPseudo: req.body.commenterPseudo,
+            commentPseudo: req.body.commenterPseudo,
             text: req.body.text,
             timestamp: new Date().getTime(),
           },