avancement changement d'image

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

@@ -35,7 +35,7 @@ export const uploadPicture = (data, id) => {
             return axios 
             .get(`${process.env.REACT_APP_API_URL}api/user/${id}`)
             .then((res) => {        
-                /*dispatch(setUserDataImg(res.data.picture));*/
+                dispatch(setUserDataImg(res.data.picture));
             })
         })
         .catch((err) => console.log(err));

Site Web/client/src/components/AjoutLien.js

@@ -70,7 +70,7 @@ const AjoutLien = () => {
                 }
             </div>
             {displayAdd && (
-                <div className="popup-profil-container">
+                <div className="popup-ajout-container">
                     <div className="modal">
                         <h3>Ajout d'un lien</h3>
                         <span className="cross" onClick={() => setDisplayAdd(false)}>

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

@@ -4,6 +4,7 @@ import PP  from "../../assets/img/unknown.png";
 import PLUS from "../../assets/img/plus.png";
 import { NavLink } from "react-router-dom";
 import axios from "axios";
+import { uploadPicture } from '../../actions/user.actions';
 
 
 
@@ -12,11 +13,12 @@ const ConfigurationDuProfil = ()=>{
    
     const userData = useSelector((state) => state.user.user);
     const [pseudo, setPseudo] = useState(userData.pseudo);
-    const [nomUtilisateur, setNomUtilisateur] = useState(userData.pseudo);
     const[userPicture, setUserPicture] = useState(userData.picture)
     const [tmpImage, setTmpImage] =useState('')
     const [displayAdd, setDisplayAdd] = useState(false);
-    const handlevalidationPopup =(e)=>{
+    const dispatch = useDispatch();
+
+    const handleValidationPopup =(e)=>{
         setUserPicture(tmpImage);
         setDisplayAdd(false);
     }
@@ -27,26 +29,34 @@ const ConfigurationDuProfil = ()=>{
     };
 
     const handleUpdate = async (e) => {
+        console.log(userPicture)
         e.preventDefault();
-        //const pseudoError = document.querySelector(".pseudo.error");
+        const data = new FormData();
-        const pictureError =document.querySelector(".picture.error");
+        data.append("pseudo", pseudo);
+        data.append("userId", userData._id);
+        data.append("file",userPicture);
 
+        dispatch(uploadPicture(data,userData._id));
+        //const pseudoError = document.querySelector(".pseudo.error");
+      /*  const pictureError =document.querySelector(".picture.error");
           await axios({
             method: "post",
             url: `${process.env.REACT_APP_API_URL}api/user/upload`,
             data: {
-              //pseudo,
+             // pseudo,
               userPicture,
-            },
+              
+            }
+            , 
           })
              .then((res) => {
                console.log(res);
                if (res.data.errors) {
-                // pseudoError.innerHTML = res.data.errors.pseudo;
+                //pseudoError.innerHTML = res.data.errors.pseudo;
                 pictureError.innerHTML = res.data.errors.picture;
                } 
             })
-            .catch((err) => console.log(err));
+            .catch((err) => console.log(err));*/
     };
 
 
@@ -69,22 +79,14 @@ const ConfigurationDuProfil = ()=>{
                 <img src={PLUS} className="plusButton "/>
                 <img src={userPicture} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
             </button>
-            {/*<div className='picture error'></div>*/}
+            <div className='picture error'></div>
             </>
             <div className='modificationDuProfilText alignementText'>
                 <span>Pseudo: </span>
-                <span>Nom d'utilisateur:</span>
             </div>
             <div>
             <div className='modificationDuProfilText'>
                 
-                <input className='inputConfiguration' 
-                    type="nomUtilisateur" 
-                    name="nomUtilisateur" 
-                    id="nomUtilisateur" 
-                    onChange={(e) => setNomUtilisateur (e.target.value)} 
-                    value={nomUtilisateur}
-                />
                 <input className='inputConfiguration'
                     type="pseudo" 
                     name="pseudo" 
@@ -122,13 +124,13 @@ const ConfigurationDuProfil = ()=>{
                         <span class="camera"></span>
                             <span>Changer</span>
                         </label>
-                        <input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/>
+                        <input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/> {/* onChange={(e)=> setTmpImage(e.target.files[0].name)} */}
                         <img src={PLUS} className="imageDeProfil"id="output" />
                     </div>
                 </div >
                 <div className='buttonPopup'>
                 <button  onClick={()=>setDisplayAdd(false)}>Retour</button>
-                <button onClick={handlevalidationPopup} >Valider</button>
+                <button onClick={handleValidationPopup} >Valider</button>
                 
                 </div>
                 </div>

Site Web/client/src/components/Log/Inscription.js

@@ -84,7 +84,7 @@ const Inscription = () => {
                                     id="email"
                                     onChange={(e) => setEmail(e.target.value)}
                                     value={email}/>
-                           <div className='password error'></div>
+                           <div className='email error'></div>
                         </div>
                         <br />
                         <div className="inputbox">

Site Web/client/src/components/Post/DisplayPost/DiplayPostDossier.js

@@ -0,0 +1,32 @@
+import { current } from '@reduxjs/toolkit';
+import React, { useEffect, useState, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getPosts } from '../../../actions/post.actions';
+import { isEmpty } from "../../Utils";
+import Post from '../PostNouvelleAffichage';
+import { UidContext } from '../../AppContext';
+
+const DiplayPostDossier = () => {
+    const postsData = useSelector((state) => state.post.post);
+    const uid = useContext(UidContext);
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(getPosts());
+    },[dispatch])
+
+
+    return (
+        <div>
+            <ul>
+                {!isEmpty(postsData[0]) &&
+                    postsData.map((post) => {
+                        if(post.postedId === uid){
+                        return <Post post={post} key={post._id}/>
+                        }
+                   })}
+            </ul>
+        </div>
+    );
+};
+
+export default DiplayPostDossier;

Site Web/client/src/components/Post/DisplayPost/DisplayPostLikeProfil.js

@@ -0,0 +1,33 @@
+import { current } from '@reduxjs/toolkit';
+import React, { useEffect, useState, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getPosts } from '../../../actions/post.actions';
+import { isEmpty } from "../../Utils";
+import Post from '../PostNouvelleAffichage';
+import { UidContext } from '../../AppContext';
+
+const DisplayPostLikeProfil = () => {
+    const postsData = useSelector((state) => state.post.post);
+    const uid = useContext(UidContext);
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(getPosts());
+    },[dispatch])
+
+
+    return (
+        <div>
+            <ul>
+            {!isEmpty(postsData[0]) &&
+            postsData.filter(post => post.likers.includes(uid))
+            .map((post) => {
+                return <Post post={post} key={post._id}/>
+             })
+}
+                
+            </ul>
+        </div>
+    );
+};
+
+export default DisplayPostLikeProfil;

Site Web/client/src/components/Post/DisplayPost/NouveauDisplayPosts.js

@@ -0,0 +1,31 @@
+import { current } from '@reduxjs/toolkit';
+import React, { useEffect, useState, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getPosts } from '../../../actions/post.actions';
+import { isEmpty } from "../../Utils";
+import Post from '../PostNouvelleAffichage';
+import { UidContext } from '../../AppContext';
+
+const NouveauDisplayPosts = () => {
+    const postsData = useSelector((state) => state.post.post);
+    const uid = useContext(UidContext);
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(getPosts());
+    },[dispatch])
+
+    return (
+        <div>
+            <ul>
+                {!isEmpty(postsData[0]) &&
+                    postsData.map((post) => {
+                        if(post.postedId === uid){
+                        return <Post post={post} key={post._id}/>
+                        }
+                   })}
+            </ul>
+        </div>
+    );
+};
+
+export default NouveauDisplayPosts;

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

@@ -1,47 +0,0 @@
-import { current } from '@reduxjs/toolkit';
-import React, { useEffect, useState, useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { getPosts } from '../../actions/post.actions';
-import { isEmpty } from "../Utils";
-import Post from './PostNouvelleAffichage';
-import { UidContext } from './../AppContext';
-
-const NouveauDisplayPosts = () => {
-    const [loadPost, setLoadPost] = useState(true);
-    const [count , setCount] = useState(5);
-    const dispatch = useDispatch();
-    const postsData = useSelector((state) => state.post.post);
-    const uid = useContext(UidContext);
-    const loadMore = () => {
-        if (window.innerHeight + document.documentElement.scrollTop + 1 > document.scrollingElement.scrollHeight){
-            setLoadPost(true);
-        }
-    }
-
-    useEffect(() => {
-        if (loadPost) {
-            dispatch(getPosts(count));
-            setLoadPost(false);
-            setCount(count + 5);
-        }
-        window.addEventListener('scroll', loadMore);
-        return () => window.removeEventListener('scroll',loadMore);
-    }, [loadPost,dispatch,count])
-
-    return (
-        <div>
-            <ul>
-                {!isEmpty(postsData[0]) &&
-                    postsData.map((post) => {
-                        if(post.postedId === uid){
-                        return <Post post={post} key={post._id}/>
-                        }
-                        else return null;
-
-                   })}
-            </ul>
-        </div>
-    );
-};
-
-export default NouveauDisplayPosts;

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

@@ -40,7 +40,6 @@ const LinkPreview = ({ link }) => {
 const PostNouvelleAffichage = ( { post } ) => {
     const [isLoading, setIsLoading] = useState(true);
     const usersData = useSelector((state) => state.users.users);
-    const userData = useSelector((state) => state.user.user);
     const [updated,setUpdate] = useState(false);
     const [message, setMessage] = useState(null);
     const [comments, setComments] = useState(false);

Site Web/client/src/components/UserProfil/NavigationProfil/DossiersPersonnels.js

@@ -1,4 +1,4 @@
-import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
+import DiplayPostDossier from "../../Post/DisplayPost/DiplayPostDossier";
 
 
 
@@ -8,7 +8,7 @@ const DossiersPersonnels=()=>{
 
     return(
     <div className='dossierPersonnel'>
-     <NouveauDisplayPosts/>
+     <DiplayPostDossier/>
 
     </div>
     )

Site Web/client/src/components/UserProfil/NavigationProfil/PostsLikes.js

@@ -1,4 +1,4 @@
-import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
+import DisplayPostLikeProfil from "../../Post/DisplayPost/DisplayPostLikeProfil";
 
 
 
@@ -10,7 +10,7 @@ const PostLikes=()=>{
 return(
 
     <div className='postPersonnel'>
-    <NouveauDisplayPosts/>
+    <DisplayPostLikeProfil/>
     </div>
 )
 

Site Web/client/src/components/UserProfil/NavigationProfil/PostsPersonnels.js

@@ -1,4 +1,4 @@
-import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
+import NouveauDisplayPosts from "../../Post/DisplayPost/NouveauDisplayPosts";
 
 
 
@@ -8,7 +8,7 @@ const PostPersonnels=()=>{
 
     return(
     <div className='postPersonnel'>
-   
+        <NouveauDisplayPosts/>
     </div>
     )
 }

Site Web/client/src/reducers/user.reducer.js

@@ -22,6 +22,7 @@ export const userSlice = createSlice({
               (id) => id !== action.payload.idToUnfollow
             ),}; 
         },
+        
     },
 });
 

Site Web/client/src/styles/component/_ajoutLien.scss

@@ -8,16 +8,18 @@
     cursor: pointer;
 }
 
-.popup-profil-container {
+
-    z-index: 100;
+
-    width: 100%;
+.popup-ajout-container {
-    top: 0;
-    left: 0;
-    height: 100%;
   position: fixed;
   animation: popup 1s forwards;
+  z-index: 100;
+  left: 50%;
   
     @keyframes popup {
+      from{
+        backdrop-filter: none;
+      }
       to {
         backdrop-filter: blur(2px);
       }
@@ -49,6 +51,7 @@
         top: 25px;
         right: 25px;
         transition: 0.1s;
+        
         cursor: pointer;
 
         &:hover {
@@ -57,8 +60,12 @@
       }
 
       ul {
+        min-width: 250px;
+        max-width: 300px;
         margin: 20px 0 0;
         max-height: 500px;
+        min-height: 200px;
+
 
         li {
           display: grid;

Site Web/controllers/upload.controller.js

@@ -6,23 +6,30 @@ const { uploadErrors } = require('../utils/errors.utils');
 
 
 module.exports.uploadProfil = async (req, res) => {
+  console.log(req.body.file);
   try {
+
+    console.log(req.body.file);
       if (
-        req.file.detectedMimeType != "image/jpg" &&
+          req.body.file.detectedMimeType != "image/jpg" &&
-        req.file.detectedMimeType != "image/png" &&
+          req.body.file.detectedMimeType != "image/png" &&
-        req.file.detectedMimeType != "image/jpeg"
+          req.body.file.detectedMimeType != "image/jpeg"
       )
-        throw Error("invalid file");
+          throw Error("Invalid file format. Only jpg, jpeg, png formats are allowed.");
 
-      if (req.file.size > 500000) throw Error("max size");
+      if (req.body.file.size > 500000) throw Error("File size exceeded the maximum limit of 500KB.");
+      if(req.body.file.size === 0) throw Error("Empty file");
   } catch (err) {
-      const errors = uploadErrors(err);
+
-      return res.status(201).json({ errors });
+      console.log("File upload failed.")
+      console.log(err)
+      return res.status(400).json({ message: err.message });
+
   }
-    const fileName = req.body.name + ".jpg";
+  const fileName = req.body.file.name + ".jpg";
     
     await pipeline(
-      req.file.stream,
+      req.body.file.stream,
       fs.createWriteStream(
         `${__dirname}/../client/public/uploads/profil/${fileName}`
       )
@@ -30,7 +37,7 @@ module.exports.uploadProfil = async (req, res) => {
   
     try {
       await UserModel.findByIdAndUpdate(
-        req.body.userId,
+        req.body.file.userId,
           { $set: { picture: "./uploads/profil/" + fileName } },
           { new: true, upsert: true, setDefaultsOnInsert: true })
           .then((data) => res.send(data))

Site Web/controllers/user.controller.js

@@ -45,6 +45,24 @@ module.exports.updateUser = async (req, res) => {
   }
 };
 
+// module.exports.compteUpdate = async (req,res)=>{
+
+//    const{email, password}=req.body
+
+//   try{
+//     await UserModel.findOneAndUpdate{
+//       {_id: req.params.id}
+//       {set:{
+//         email: req.body.email
+//       }}
+//     }
+//   }
+
+// }
+
+
+
+
 module.exports.deleteUser = async (req, res) => {
   if (!ObjectID.isValid(req.params.id))
     return res.status(400).send("ID unknown : " + req.params.id);

Site Web/models/user.model.js

@@ -51,7 +51,7 @@ const userSchema = new mongoose.Schema(
     },
     picture: {
       type: String,
-      default: "/random-user.png"
+      default: "./random-user.png"
     },
     bio :{
       type: String,

Site Web/utils/errors.utils.js

@@ -32,7 +32,7 @@ module.exports.signInErrors = (err) => {
 }
 
 module.exports.uploadErrors = (err) => {
-  let errors = { format: '', maxSize: ""};
+  let errors = { format: '', maxSize: "",empty:""};
 
   if (err.message.includes('invalid file'))
     errors.format = "Format incompatabile";
@@ -40,6 +40,9 @@ module.exports.uploadErrors = (err) => {
   if (err.message.includes('max size'))
     errors.maxSize = "Le fichier dépasse 500ko";
   
+  if(err.message.includes('empty file'))
+    errors.empty ="Le fichier est vide";
+
   return errors
 }