Affichage postes

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

@@ -59,3 +59,5 @@ export const unFollowUser = (followerId, idToUnFollow) => {
         .catch((err) => console.log(err));
     };
 };
+
+

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

@@ -1,6 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { NavLink } from "react-router-dom";
 
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+/*import PolitiqueDeConfidentialite from '../components/';
+*/
 
 
 const ConfigurationDuCompte =()=>{
@@ -13,14 +17,14 @@ const ConfigurationDuCompte =()=>{
         <div>
         <h2 className='ligneHorizontal'>Modifucation information du compte</h2>
        
-            <div className="ModifucationInformationDuCompte">
+            <form className="ModifucationInformationDuCompte">
                         
-                        <div className='ModificationInformationDuCompteText'>
+                        <div className='ModificationInformationDuCompteText alignementText'>
                         <span>email</span>
                         <span>mot de passe</span>
                         <span>comfirmation mot de passe</span>
                         </div>
-                        
+                        <div>
                         <div className='ModificationInformationDuCompteText'>
                         
                         <input  type="text" 
@@ -44,7 +48,9 @@ const ConfigurationDuCompte =()=>{
                                 value={controlPassword}/>
                                 <div className='password error'></div>
                         </div>
+                        <button className='buttonValidationChangements'>Valider</button>
             </div>
+            </form>
         <div />
         <h2 className='ligneHorizontal'>Suppression du compte</h2>
         <div className='buttonSuppressionCompte'>
@@ -52,7 +58,7 @@ const ConfigurationDuCompte =()=>{
         <button>
             supprimer votre compte    
         </button>
-        <span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>
+            <p className='buttonSuppressionText'>Note : action irreversible qui vous fera perdre toutes les données du compte en conséquence</p>
         </div> 
     </div>
     )
@@ -60,7 +66,6 @@ const ConfigurationDuCompte =()=>{
 
 
 
-
 export default ConfigurationDuCompte;
 
 

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

@@ -1,49 +1,104 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import PP  from "../../assets/img/unknown.png";
+import PLUS from "../../assets/img/plus.png";
 import { NavLink } from "react-router-dom";
 
 
 const ConfigurationDuProfil = ()=>{
+   
+   
     const userData = useSelector((state) => state.user.user);
     const [pseudo, setPseudo] = useState('');
     const [nomUtilisateur, setNomUtilisateur] = useState('');
+    const [displayAdd, setDisplayAdd] = useState(false);
+    /*const [updateImage, setUpdateImage]= useState(false);
+    const setimageDeProfile=()=>{
+        if(updateImage=true){
+        useState("");
+        setDisplayAdd(false);
+        }
+        else{
+            setDisplayAdd(false);
+        }
+    }*/
+    var handleLoadFile=(e)=>{
+        var image = document.getElementById("output");
+        image.src = URL.createObjectURL(e.target.files[0]);
         
+    };
+    var a=PP;
     return(
-
     <div className='modificationDuProfilBackgroud'>
         <h2 className='ligneHorizontal' >Modifucation du Profil</h2>
         <div className='modificationDuProfil' >
-            <img src={PP} className="imageDeProfilConfiguration imageDeProfil"/>
-
-                <div className='modificationDuProfilText'>
+            <button className='imageDeProfilConfigurationPlus imageDeProfil' >
+                <img src={PLUS} className="plusButton "/>
+                <img src={a} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
+            </button>
+            <div className='modificationDuProfilText alignementText'>
                 <span>Pseudo: </span>
                 <span>Nom d'utilisateur:</span>
             </div>
+            <div>
             <div className='modificationDuProfilText'>
                 
-                    <input 
+                <input className='inputConfiguration' 
                     type="nomUtilisateur" 
                     name="nomUtilisateur" 
                     id="nomUtilisateur" 
                     onChange={(e) => setNomUtilisateur (e.target.value)} 
-                        value={pseudo}
+                    value={nomUtilisateur}
                 />
-                    <input 
+                <input className='inputConfiguration'
                     type="pseudo" 
                     name="pseudo" 
                     id="pseudo" 
                     value={pseudo}
                     onChange={(e) => setPseudo (e.target.value)} 
                 />
-                </div>
 
+            
+            </div>
+            <button className='buttonValidationChangements'>Valider</button>
             </div>
+        </div>
+        
         <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
         <div className='accesDossiersPerso'>
+            <div className='accesDossiersPersoValidation'>
             <input type="checkbox" name='cocher' />
             <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
             </div>
+            
+            
+            <div className='dossierPersonnel'>
+                <span>dossiers</span>
+
+            </div>
+        </div> 
+        
+        {displayAdd && (
+            <div className='popup-modificationProfil'>
+                <div className="modal">
+                <div className='imagesPopup'>
+                    <img src={PP} className="imageDeProfilConfigurationPlus imageDeProfil"/>
+                    <div className="imageDeProfilConfigurationPlus imageDeProfil profile-pic" >
+                        <label className="-label" for="file">
+                        <span class="camera"></span>
+                            <span>Changer</span>
+                        </label>
+                        <input type="file" id="file" onChange={handleLoadFile}/>
+                        <img src={PLUS} id="output" />
+                    </div>
+                </div >
+                <div className='buttonPopup'>
+                <button  onClick={() => setDisplayAdd(false)/*&&setUpdateImage(true)*/}>Retour</button>
+                <button /*onClick={} */>Valider</button>
+                </div>
+                </div>
+            </div>
+        )}
     </div>
 
     )

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

@@ -4,6 +4,7 @@ import { NavLink } from "react-router-dom";
 
 const PolitiqueDeConfidentialite =()=>{
     return(
+        
         <div className='PolitiqueDeConfidentialiteText'>
            <p> Cette politique de confidentialité s’applique au site : Designed By GG.
             La présente politique de confidentialité a pour but d’exposer aux utilisateurs du site :

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

@@ -1,10 +1,11 @@
 import React, {useEffect} from 'react';
 import {isEmpty} from "./Utils";
 import {useSelector} from "react-redux";
+import axios from "axios";
 
-const Notif = ({message} ) => {
-    const usersData = useSelector((state) => state.users.users);
+import { useDispatch } from 'react-redux';
 
+const Notif = ({message} ) => {
     return (
         <div className='conteneur_notif'>
             <div className={'contenue_notif'}>

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

@@ -28,25 +28,27 @@ const Configuration = () => {
 
         };        
     return(
-        <main className='mainConfig'>
+        <>
         <Navbar />
+        <div className='configuration'>
             <div className='boutonDeConfigurations'>
-            <button onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
+            <a onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
             Configuration du profil
-            </button>
-            <button onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
+            </a>
+            <a onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
             Configuration du compte
-            </button>
-            <button onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
+            </a>
+            <a onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
             Politique de confidentialite
-            </button>
+            </a>
             </div>
             
             
             {ConfigurationProfil &&<ConfigurationDuProfil/>}
             {ConfigurationCompte &&<ConfigurationDuCompte/>}
             {PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>}
-        </main>
+        </div>
+        </>
     );
 }
 

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

@@ -14,7 +14,7 @@ const Profil = () => {
     return (
         <>
             <Navbar />
-            <main>
+            {/* <main>
             <div id="bandeauProfil">
                 <h1 className='affichage-date'>Compte créé le : {dateParser(userData.createdAt)}</h1>
                 <div id="image">
@@ -93,6 +93,146 @@ const Profil = () => {
                     </div>
                 </div>
                 
+            </div>
+            </main> */}
+
+            <main>
+            <div>
+            <div>
+                <div class="imageProfil">
+                    <img class="image" src={userData.picture}/>
+                </div>
+                <div class="divPseudo">
+                    <h3 class="pseudo">{userData.pseudo}</h3>
+                    {/* <h3>suuu</h3> */}
+                </div>
+                <div class="divSuivreFollowing">
+                    <a href="#" class="button" id="button">Suivre +</a>
+                </div>
+                <div class="divSuivreFollowing">
+                 <div class="nbFollow" onClick={() => setFollowingPopup(true)}>
+                  <h4>{userData.following.length}</h4>
+                  <h4 class="txtFollower">Abonnements</h4>
+                 </div>
+                 <div class="nbFollow" onClick={() => setFollowerPopup(true)}>
+                    <h4>{userData.followers.length}</h4>
+                    <h4 class="txtFollower">Abonnés</h4>
+                  </div> 
+                </div>
+                  {followingPopup && (
+                                <div className="popup-profil-container">
+                                <div className="modal">
+                                    <h3>Abonnements</h3>
+                                    <span className="cross" onClick={() => setFollowingPopup(false)}>
+                                    &#10005;
+                                    </span>
+                                    <ul>
+                                    {usersData.map((user) => {
+                                        for (let i = 0; i < userData.following.length; i++) {
+                                        if (user._id === userData.following[i]) {
+                                            return (
+                                            <li key={user._id}>
+                                                <img src={user.picture} alt="user-pic" />
+                                                <h4>{user.pseudo}</h4>
+                                                <div className="follow-handler">
+                                                <FollowHandler idToFollow={user._id} type={'card'}/>
+                                                </div>
+                                            </li>
+                                            );
+                                        } 
+                                        }
+                                        return null;
+                                    })}
+                                    </ul>
+                                </div>
+                                </div>
+                            )}
+                            {followerPopup && (
+                                <div className="popup-profil-container">
+                                <div className="modal">
+                                    <h3>Abonnés</h3>
+                                    <span className="cross" onClick={() => setFollowerPopup(false)}>
+                                    &#10005;
+                                    </span>
+                                    <ul>
+                                    {usersData.map((user) => {
+                                        for (let i = 0; i < userData.followers.length; i++) {
+                                        if (user._id === userData.followers[i]) {
+                                            return (
+                                            <li key={user._id}>
+                                                <img src={user.picture} alt="user-pic" />
+                                                <h4>{user.pseudo}</h4>
+                                                <div className="follow-handler">
+                                                <FollowHandler idToFollow={user._id} type={'card'} />
+                                                </div>
+                                            </li>
+                                            );
+                                        }
+                                        }
+                                        return null;
+                                    })}
+                                    </ul>
+                                </div>
+                                </div>
+                            )}
+
+                
+            </div>
+        
+            
+        <div class="basDePage">
+          <div class="divMenu">
+                <div>
+                    <nav role="navigation" class="navProfil">
+                        <ul class="navItemsProfil">
+                            <li class="navItemProfil">
+                                <a href="#" class="navLinkProfil" ><span>Dossier Personnel</span></a>
+                            </li> 
+                            <li class="navItemProfil">
+                                <a href="#" class="navLinkProfil"><span>Posts</span></a>
+                            </li>
+                            <li class="navItemProfil">
+                                <a href="#" class="navLinkProfil"><span>Posts likés</span></a>
+                            </li> 
+                          
+                        </ul>
+                     </nav>
+              </div>
+              <div class="menuContent">
+                <div class="listContent">
+                  <span>suu</span>
+                </div>
+                  
+              </div>
+          </div>
+          <div class="recoDiv">
+            <div class="reco">
+              <span>Vous pourriez suivre</span>
+              <hr/>
+              <div class="ListReco">
+                <div class="UtiReco">
+                <img class="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
+                <span>UtiT</span>
+                <a href="#" class="buttonReco" id="button">Suivre</a>
+              </div>
+              <div class="UtiReco">
+                <img class="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
+                <span>UtiT</span>
+                <a href="#" class="buttonReco" id="button">Suivre</a>
+              </div>
+              <div class="UtiReco">
+                <img class="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
+                <span>UtiT</span>
+                <a href="#" class="buttonReco" id="button">Suivre</a>
+              </div>
+              </div>
+              
+            </div>
+              
+          </div>
+          
+         
+        </div>
         </div>
             </main>
         </>

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

@@ -5,8 +5,9 @@ $color-2: #CCF2F4;
 $color-3: #F4F9F9;
 $color-4: #AAAAAA;
 $color-5: #AABBCC;
-
-
+$color-6:  #5499c7  ;
+$color-7:  #19104f ;
+$color-8: #FAFAFA;
 
 
 // $color-1: #4cbfa6;
@@ -17,14 +18,20 @@ $color-5: #AABBCC;
 // $color-6: yellow;
 
 
+
+
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }
 
+body{
+    background-color: #F0F0F0;
+}
+
 .imageDeProfil{
-    object-fit: none;
+    object-fit: cover;
     clip-path:circle(50%);
     
 }

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

@@ -25,9 +25,24 @@
         margin-left: 6%;
         width: 16%;
         max-width: 160px;
+        min-width: 120px;
         background-color: $color-3;
         border: 2px solid $color-4;
         border-radius: 20px;
+    }
+    .buttonSuppressionText{
+        margin-left: 2%;
+        max-width: 400px;
+        min-width: 200px;
+        width: 35%;
+        font-style: italic;
+        color: red;
+        opacity: 70%;
+        background-color: $color-3;
+        height: fit-content;
+        padding: 1%;
+        
+
     }
     button:hover  {
         background-color: $color-1;

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

@@ -1,7 +1,7 @@
-
-.modificationDuProfilBackgroud{
-    // background: $color-6;
-    
+@mixin object-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .modificationDuProfil{
@@ -25,13 +25,38 @@ span{
 
 }
 
-.imageDeProfilConfiguration{
+
+.plusButton{
+    position: absolute; 
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%); 
+    opacity: 0; 
+    transition: opacity 0.5s; 
+}
+
+
+.imageDeProfilConfigurationPlus {
+    position: relative;
     width: 15%;
+    max-width: 180px;
+    min-width: 130px;
+    border: none;
+
+}
+
+.imageDeProfilConfigurationPlus:hover .plusButton {
+    opacity:0.70;
     
 }
+
 .imageDeProfilConfiguration:hover{
     filter: blur(1px);
+    opacity: 0.2; 
+    transition: opacity 1s; 
+    
 }
+
 .accesDossiersPerso{
     display: flex;
     align-items: row;
@@ -46,12 +71,161 @@ input{
     margin-bottom: 2%;
 }
 
+
+
 .accesDossiersPerso{
     display: flex;
+    flex-direction: column;
   
 }
+.accesDossiersPersoValidation{
+    flex-direction: row;
+}
 
 .textAccesDossiersPerso{
     margin-left:18px;
+    font-size: medium;
+    font-style: italic;
+    opacity: 70%;
+
 }
 
+.popup-modificationProfil{
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: fixed;
+    animation: popup 1s forwards;
+
+    @keyframes popup {
+      to {
+        backdrop-filter: blur(2px);
+      }
+    }
+
+    .modal {
+      position: absolute;
+      top: 10%;
+      left: 50%;
+      transform: translate(-100%);
+      background: $color-2;
+      padding: 25px;
+      border-radius: 20px;
+      box-shadow: 0 0 2px rgba(131, 130, 130, 0.356);
+      overflow: auto;
+      transform: scaleY(0);
+      transform-origin: center;
+      animation: modal .5s forwards;
+      max-width: 360px;
+      min-width: 320px;
+      border: 2px solid $color-4;
+      border-bottom-right-radius: 50px;
+
+      @keyframes modal {
+        to {
+          transform: scale(1) translate(-50%);
+        }
+      }
+
+        &:hover {
+          transform: scale(1.07);
+        }
+      }
+
+
+        &::-webkit-scrollbar {
+          width: 2px;
+        }
+        &::-webkit-scrollbar-track {
+          background: $color-4;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: $color-1;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+          background: #555;
+        }
+        .imagesPopup{
+            display: flex;
+            justify-content: space-between;
+            flex-direction: row;
+            .profile-pic {
+              color: transparent;
+              transition: all .3s ease;
+              @include object-center;
+              position: relative;
+              transition: all .3s ease;
+              
+              input{
+                display:none;
+              }
+
+              img{
+                position: absolute;
+                object-fit: cover;
+                z-index: 0;
+              }
+              .-label {
+                cursor: pointer;
+              }
+
+              &:hover {
+                .-label {
+                  @include object-center;
+                  background-color: rgba(0,0,0,.8);
+                  z-index: 10;
+                  color: rgba(255,255,255);
+                  transition: background-color .2s ease-in-out;
+                  border-radius: 20px;
+                  margin-bottom: 0;
+               }
+              }
+              
+              span {
+                display: inline-flex;
+                padding: .2em;
+                height: 2em;
+              }
+            }
+        }
+        .buttonPopup {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 5%;
+          margin-left: 8%;
+          margin-right: 8%;
+          button{
+            background: $color-4;
+            border-radius: 20px;
+
+            &:hover {
+                color: $color-3;
+                transform: translateX(2px);
+            }
+          }
+  
+        }
+        
+}
+
+.buttonValidationChangements{
+  position: relative;
+  margin-top: 2%;
+  border-radius: 20px;
+  min-width: 80px;
+  background-color: $color-7;
+  color: white;
+  transition: all 1s;
+}
+
+
+.camera{
+  background: url("./../../assets/img/Photo-Video-Camera-icon.png");
+}
+
+.alignementText{
+  margin-bottom: 2%;
+}

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

@@ -36,6 +36,7 @@
     background:var(--navbar-background-color);
     box-shadow: rgba(12,43, 30, 0.2) 0 4px 14px;
     transition: width var(--navbar-transition-speed) ease;
+    z-index: 11;
   }
   
   .navbar:hover {

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

@@ -1,5 +1,5 @@
 .newPoste-form-popup {
-  background-color: white;
+  background-color: $color-8;
   display: none;
   position:fixed;
 
@@ -38,6 +38,7 @@ textarea[name="description"]{
   margin-left:10%;
   margin-right:10%;
   margin-bottom:10px;
+  margin-top:10px;
   display:flex;
   justify-content: space-between;
 }

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

@@ -0,0 +1,45 @@
+
+.PolitiqueDeConfidentialiteText{
+  margin-top: 2%;
+  margin-left: 5%;
+  text-indent: 1%;   
+  text-align: justify;
+  display: flex;
+  justify-content: center;
+  background-color: $color-8;
+  border: 0.2px solid $color-5;
+  max-width:85% ;
+  min-width: 380px;
+  height: 550px;
+
+  p{
+      animation-duration: 2s;
+      animation-name: slide;
+      margin: 1.5%;
+      
+        
+        @keyframes slide {
+          from {
+            margin-top: 100%;
+            width: 50%;
+          }
+        
+          to {
+            margin-top: 0%;
+            width: 100%;
+          }
+        }
+        
+  }
+}
+
+
+
+
+
+
+
+
+
+
+

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

@@ -1,13 +1,31 @@
 #cadrePoste{
-    background: white;
-    border: 2px solid grey;
+    background: $color-8;
+    border: 0.3px solid $color-5;
     border-radius:5px;
+    margin-bottom: 10px;
     width: 70%;
-    margin-bottom: 20px;
+
+    margin-left: 3%;
 }
 
 #postContenu{
     padding: 15px;
+    
+
+}
+
+#contenuePoste{
+    background: $color-8;
+    border: 0.3px solid $color-5;
+    border-radius:5px;
+    margin-bottom: 10px;
+    p{
+        margin-top: 0.5%;
+        margin: 1%;
+        background-color: $color-3;
+        border: 0.2px solid $color-5;
+    }
+
 }
 
 #hautPoste{
@@ -21,11 +39,13 @@
     list-style-type: none;
     display: flex;
     justify-content: center;
+    
 }
 
 #cadreInfoPoste{
     display: flex;
     align-items:center;
+    
 }
 #PhotoProfile{
     margin: 0px 15px 0px 0px;
@@ -33,6 +53,7 @@
     height:40px;
     border-radius: 20px;
     border: 2px solid #555;
+    margin-bottom: 8%;
 }
 
 #NomProfile{
@@ -47,9 +68,14 @@
     justify-content: space-between;
     margin-left: 10px;
     margin-right: 10px;
+
+    
 }
 
 #like, #commentaire{
     display: flex;
     align-items:center;
+    
 }
+
+

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

@@ -1,3 +0,0 @@
-#listeNotif{
-  margin-left: 10%;
-}

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

@@ -5,9 +5,13 @@
 @import './component/poste';
 @import './pages/configuration';
 @import './component/ajoutLien';
-@import './component/configurationDuProfil';
+@import'./component/configurationDuProfil.scss';
+@import'./component/configurationDuCompte.scss';
+@import'./component/politiqueDeConfidentialite';
 @import './component/newPoste';
 
+
+
 @import './component/notif';
-@import './component/trends';
+@import './pages/trends';
 

Site Web/client/src/styles/pages/_configuration.scss

@@ -1,28 +1,46 @@
 
+
 .boutonDeConfigurations{
+
     display: flex;
-    justify-content: center;
+    justify-content: space-between;   
     flex-direction: row;
+    background-color: $color-7;
+    margin-left: -1%;
+    margin-right: 1%;
+    
     
-    button{
+    a{
+
+        transition: margin-right 2s,1s;
+        transition: background-color linear 1s,1s;
         padding: 1%;
         margin-bottom: 1%;
-        margin-top: 2%;
-        margin-left: 6%;
-        width: 16%;
-        max-width: 200px;
+        margin-top: 1%;
+        margin-left: 3%;
+        margin-right: 3%;
+        width: 30%;
+        min-width: 140px;
         background-color: $color-3;
         border: 2px solid $color-4;
         border-radius: 20px;
+        text-align: center;
+        height: px;
     }
-    button:hover  {
-        background-color: $color-1;
-        border-color: black;
-        
+    a:hover  {
+        background-color: $color-6;
+        padding-right:14%;
+        color:$color-3;
     }
 
 }
 
+.configuration{
+    input:focus{
+        background-color:$color-3;
+    }
+    margin-left: 1%;
+}
 
 .ligneHorizontal{
     border-bottom: thick solid $color-1;
@@ -32,7 +50,17 @@
     margin-top: 2%;
 }
 
-.mainConfig{
-    display: flex;
-    flex-direction: column;
-}
+.buttonValidationChangements:hover{
+    min-width: 100px;
+    padding-right: 6%;
+  
+  
+  }
+  
+
+
+// body{
+//     background-color: gray;
+// }
+
+

Site Web/client/src/styles/pages/_profil.scss

@@ -1,44 +1,44 @@
-#PhotoProfile{
-	display: block;
-    	margin-left: auto;
-        margin-right: auto;
-	width: 150px;
-	height:150px;
-	border-radius: 80px;
-	border: 2px solid #555;
-}
+// #PhotoProfile{
+// 	display: block;
+//     	margin-left: auto;
+//         margin-right: auto;
+// 	width: 150px;
+// 	height:150px;
+// 	border-radius: 80px;
+// 	border: 2px solid #555;
+// }
 
-#blocAbonnement{
-	display: flex;
-	justify-content: center;
+// #blocAbonnement{
+// 	display: flex;
+// 	justify-content: center;
 	
 	
-}
-#blocAbonnement .bloc-aboonnements-abonner{
-	margin-left: 80px;
-	margin-right: 80px;
-}
+// }
+// #blocAbonnement .bloc-aboonnements-abonner{
+// 	margin-left: 80px;
+// 	margin-right: 80px;
+// }
 
-#blocName{
-	text-align: center;
-}
+// #blocName{
+// 	text-align: center;
+// }
 
-.affichage-date{
-  font-size: 15px;
-}
+// .affichage-date{
+//   font-size: 15px;
+// }
 
-.nombre{
-	color:black;
-}
+// .nombre{
+// 	color:black;
+// }
 
-.texteNombre{
-	color:white;
-}
+// .texteNombre{
+// 	color:white;
+// }
 
-#bandeauProfil{
-    background-color: #D9D9D9;
-    margin-top: 50px;
-}
+// #bandeauProfil{
+//     background-color: #D9D9D9;
+//     margin-top: 50px;
+// }
 
 .popup-profil-container {
     z-index: 100;
@@ -145,3 +145,230 @@
       }
     }
 }
+
+.navProfil {
+  margin: 0% 0 0% 4%;
+  padding-top: 0.5%;
+}
+
+/* Navigation */
+
+.navProfil {
+  font-family: Georgia, Arial, sans-serif;
+  font-size: 14px;
+}
+
+.navItemsProfil {
+  padding-top: 2%;
+  padding-bottom: 2%;
+  list-style: none;
+}
+
+.navItemProfil {
+  display: inline-block;
+  margin-right: 25px; 
+}
+
+
+
+.navLinkProfil,
+.navLinkProfil:link, 
+.navLinkProfil:visited, 
+.navLinkProfil:active {
+  display: block;
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 1px;
+  cursor: pointer;
+  text-decoration: none;
+  outline: none;
+}
+
+.navLinkProfil,
+.navLinkProfil:link, 
+.navLinkProfil:visited, 
+.navLinkProfil:active {
+  color: black;
+  font-weight: bold;
+}
+
+.navLinkProfil::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: rgba(0,0,0,0.2);
+  opacity: 0;
+  -webkit-transform: translate(0, 10px);
+  transform: translate(0, 10px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.navLinkProfil:hover::before,
+.navLinkProfil:hover::before {
+  opacity: 1;
+  -webkit-transform: translate(0, 5px);
+  transform: translate(0, 5px);
+}
+
+.image {
+  margin-top: 1%;
+border-radius: 100%;
+width: 10%;
+}
+
+.imageProfil{
+  display: flex;
+justify-content: center;
+}
+
+.flex-menu {
+    display:flex;
+          justify-content: center;
+  }
+
+.flex-menu li:not(:last-child) {
+    margin-right:40px;
+}
+
+.divSuivreFollowing {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 1%;
+}
+
+.nbFollow {
+  margin: 0% 8% 0% 5%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 3%;
+}
+
+.nbFollow h4 {
+  margin: 5% 0% 0% 0%;
+display: flex;
+justify-content: center;
+font-weight: bold;
+}
+
+// h3 {
+//   margin: 0%;
+// }
+
+// h4 {
+// margin: 40% 0% 0% 0%;
+// display: flex;
+// justify-content: center;
+// font-weight: bold;
+// }
+
+.pseudo {
+  margin:1% 0% 0% 0%;
+}
+
+.divPseudo {
+  display: grid;
+  justify-items: center;
+}
+
+/* * {
+padding:0;
+margin:0;
+} */
+
+// .txtFollower {
+// display: flex;
+// justify-content: center;
+// margin: 0%;
+// padding: 0% 0% 20% 0%;
+// }
+
+.button {
+padding: 0.5% 0.5%;
+border-radius: 10%;
+background: #19104f;
+text-decoration: none;
+color: white;
+font-size: 16px;
+letter-spacing: .08em;
+margin-top: 1%;
+}
+
+.buttonReco {
+padding-top: 1.5%;
+border-radius: 10%;
+background: #19104f;
+text-decoration: none;
+color: white;
+font-size: 13px;
+letter-spacing: .08em;
+margin-top: 1%;
+}
+
+.divMenu {
+  margin: 0%;
+  background-color: #cccaca;
+  width: 75%;
+  height: 500px;
+  border-radius: 25px;
+}
+
+.menuContent{
+background-color: #8c8c8e;
+margin: 0% 0% 0% 2.5%;
+border-radius: 25px;
+width: 95%;
+height: 85%;
+}
+
+.reco{
+background-color: #a8a8a8;
+margin: 0% 0% 0% 2.5%;
+border-radius: 25px;
+width: 100%;
+height: 300px;
+}
+
+.reco span{
+display: flex;
+justify-content: center;
+padding-top: 3%;
+}
+
+.listContent {
+/* display: flex;
+justify-content: center; */
+padding-left: 2.5%;
+padding-top: 2.5%;
+}
+
+.basDePage {
+display: flex;
+  flex-direction: row ;
+  justify-content: space-around;
+
+}
+
+.recoDiv {
+width: 20%;
+}
+
+.UtiReco {
+display: flex;
+flex-direction: row;
+justify-content: space-evenly;
+padding: 5% 0% 0% 0%;
+}
+
+.ListReco {
+display: flex;
+flex-direction: column;
+align-content: space-around;
+}
+
+// div {
+//   border: 5px ridge;
+// } 

Site Web/client/src/styles/pages/_trends.scss

@@ -0,0 +1,11 @@
+#listeNotif{
+  margin: 2%;
+  margin-left: 8%;
+  padding:1%;
+  border-color: $color-5;
+  border-style:solid;
+  border-width: 0.3px;
+  min-width: 410px;
+  width: 84%;
+  background: $color-8;
+}

Site Web/controllers/notifFonction.js

@@ -0,0 +1,12 @@
+const UserModel = require("../models/user.model");
+
+module.exports.addNotification = (userId, notification) => {
+    UserModel.findById(userId, (err, user) => {
+        if (err) {
+            console.log(err);
+        } else {
+            user.notif.push(notification);
+            user.save();
+        }
+    });
+};

Site Web/controllers/post.controller.js

@@ -7,6 +7,21 @@ const ObjectID = require("mongoose").Types.ObjectId;
 const fs = require("fs");
 const { promisify } = require("util");
 
+//import { addNotification } from "./notifFonction";
+const {addNotification} = require("./notifFonction");
+//const UserModel = require("../models/user.model");
+
+/*const addNotification = (userId, notification) => {
+  UserModel.findById(userId, (err, user) => {
+    if (err) {
+      console.log(err);
+    } else {
+      user.notif.push(notification);
+      user.save();
+    }
+  });
+};*/
+
 module.exports.readPost = (req, res) => {
   PostModel.find((err, docs) => {
     if (!err) res.send(docs);
@@ -60,7 +75,15 @@ module.exports.deletePost = (req, res) => {
   });
 };
 
+
 module.exports.likePost = async (req, res) => {
+  addNotification("63b835de3f9be509b614df36", {
+    typeNotif: "like",
+    id_user: "5f1a32c2f9f9ab74a1b7a6c8",
+    id_post1: "5f1a32c2f9f9ab74a1b7a6c8",
+    id_post2: ""
+  });
+
   if (!ObjectID.isValid(req.params.id))
     return res.status(400).send("ID unknown : " + req.params.id);
 

Site Web/models/post.model.js

@@ -1,4 +1,4 @@
-const mongoose = require('mongoose');
+ const mongoose = require('mongoose');
 
 //trim pour supprimer les espaces
 const postSchema = new mongoose.Schema(

Site Web/models/user.model.js

@@ -5,6 +5,25 @@ const { isEmail } = require('validator');
 const bcrypt = require('bcrypt');
 
 
+const NotifSchema = new mongoose.Schema({
+    typeNotif: {
+        type: String,
+        required: true
+    },
+    id_user: {
+        type: String,
+        required: true
+    },
+    id_post1: {
+        type: String,
+        required: true
+    },
+    id_post2: {
+        type: String,
+        required: true
+    }
+});
+
 //trim pour supprimer les espaces
 const userSchema = new mongoose.Schema(
   {
@@ -46,7 +65,8 @@ const userSchema = new mongoose.Schema(
     },
     likes: {
       type: [String]
-    }
+    },
+    notif: [NotifSchema]
   },
   {
     timestamps: true,

Site Web/package.json

@@ -10,17 +10,26 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "axios": "^1.1.3",
+    "@reduxjs/toolkit": "^1.9.1",
+    "axios": "^1.2.2",
     "bcrypt": "^5.1.0",
     "body-parser": "^1.20.1",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
+    "js-cookie": "^3.0.1",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^6.6.6",
     "multer": "^1.4.5-lts.1",
     "nodemon": "^2.0.20",
-    "validator": "^13.7.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.6.1",
+    "react-scripts": "^5.0.1",
+    "sass": "^1.57.1",
+    "tachyons": "^4.12.0",
+    "validator": "^13.7.0",
+    "web-vitals": "^3.1.0"
   }
 }

Site Web/routes/user.routes.js

@@ -21,7 +21,6 @@ router.delete('/:id', userController.deleteUser);
 router.patch('/follow/:id', userController.follow);
 router.patch('/unfollow/:id', userController.unfollow);
 
-
 //upload pb avec postman
 router.post("/upload", upload.single('file'), uploadController.uploadProfil);