avancement profil

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

@@ -5,6 +5,7 @@ import PLUS from "../../assets/img/plus.png";
 import { NavLink } from "react-router-dom";
 
 
+
 const ConfigurationDuProfil = ()=>{
    
    
@@ -71,11 +72,6 @@ const ConfigurationDuProfil = ()=>{
             <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
             </div>
            
-            
-            <div className='dossierPersonnel'>
-                <span>dossiers</span>
-
-            </div>
         </div> 
         
         {displayAdd && (

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

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getPosts } from '../../actions/post.actions';
+import { isEmpty } from "../Utils";
+import Post from './PostNouvelleAffichage';
+
+const NouveauDisplayPosts = () => {
+    const [loadPost, setLoadPost] = useState(true);
+    const [count , setCount] = useState(5);
+    const dispatch = useDispatch();
+    const postsData = useSelector((state) => state.post.post);
+    
+    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) => {
+                        return <Post post={post} key={post._id}/>
+                    })}
+            </ul>
+        </div>
+    );
+};
+
+export default NouveauDisplayPosts;

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

@@ -0,0 +1,87 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import FollowHandler from '../UserProfil/FollowHandler';
+import { dateParser, isEmpty } from '../Utils';
+import ButtonLike from './ButtonLike';
+import Comment from './Comment';
+
+
+const LinkPreview = ({ link }) => {
+    const [preview, setPreview] = useState({ image: '', title: '' });
+
+    useEffect(() => {
+        //const key = '9f24d981b6f0ddfce993ce4a20d58867';
+        const key = '2865b6b9d9571dc00bf940fad5728248';
+
+        const fullLink = `http://api.linkpreview.net/?key=${key}&q=${link}`;
+
+        axios
+            .get(fullLink)
+            .then((res) => setPreview(res.data))
+            .catch((err) => console.error(err));
+    }, [link]);
+
+    if(preview.image === "") {
+        return (<div className='PreviewPostNouvelleAffichage'><a href={link}>{link}</a></div>);
+    }
+    else {
+        return (
+            <div>
+                <a href={link}>
+                    <img id="imageLien" className='PreviewPostNouvelleAffichage' src={preview.image} alt={preview.title}/>
+                </a>
+            </div>
+        );
+    }
+};
+
+//e.preventDefaul(); pour ne pas recharcher la page
+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);
+
+
+    useEffect(() => {
+        !isEmpty(usersData[0]) && setIsLoading(false)
+    })
+
+    return (
+        <li className='conteneur_postes' key={post._id}>
+            {isLoading ? (
+                <i className='fas fa-spinner fa-spin'></i>
+            ):(
+            <div className="unPosteNouvelleAffichage">
+                <div className="dateDePublicationDuPost">
+                    <div>{dateParser(post.createdAt)}</div>
+                </div>
+                <div className="LienDunPosteNouvelleAffichage">
+                    <LinkPreview link={post.lien}/>
+                    <p>{post.message}</p>
+                </div>
+                <div className='informationDunPosteNouvelleAffichage'>
+                    <div id="like">
+                        <ButtonLike post={post}/>
+                        {/* <img src="coeurs.png"/> */}
+                        <div>{post.likers.length}</div>
+                    </div>
+                    <div id="commentaire">
+                        <img src="commentaire.png" onClick={() => setComments(!comments)}/>
+                        <div>{post.comments.length}</div>
+                    </div>
+                </div>
+                {comments && <Comment post={post} />}
+            </div>
+            ) }
+        </li>
+    );
+};
+
+
+
+//ce qui écrit dans le input est récuperé par le state
+export default PostNouvelleAffichage;

Site Web/client/src/components/Routes/index.js

@@ -12,12 +12,12 @@ const index = () => {
             <BrowserRouter>
                 <Routes>
                     <Route path="/" element={<HomeNavigation/>} />
-                    <Route path="/home" element={<Home/>} />
+                    <Route path="/Home" element={<Home/>} />
-                    <Route path="/trends" element={<Trends/>} />
+                    <Route path="/Trends" element={<Trends/>} />
-                    <Route path="/discover" element={<Discover/>} />
+                    <Route path="/Discover" element={<Discover/>} />
                     {/* <Route path="*" element={<HomeNavigation/>} /> */}
-                    <Route path="/profil" element={<Profil />} />
+                    <Route path="/Profil" element={<Profil />} />
-                    <Route path="/configuration" element={<Configuration/>}/>
+                    <Route path="/Configuration" element={<Configuration/>}/>
                 </Routes>
             </BrowserRouter>
     );

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

@@ -0,0 +1,18 @@
+import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
+
+
+
+
+
+const DossiersPersonnels=()=>{
+
+    return(
+    <div className='dossierPersonnel'>
+    pppp
+
+    </div>
+    )
+}
+
+
+export default DossiersPersonnels;

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

@@ -0,0 +1,20 @@
+import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
+
+
+
+
+
+const PostLikes=()=>{
+
+
+return(
+
+    <div className='postPersonnel'>
+    <NouveauDisplayPosts/>
+    </div>
+)
+
+}
+
+
+export default PostLikes;

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

@@ -0,0 +1,21 @@
+import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
+
+
+
+
+
+const PostPersonnels=()=>{
+
+    return(
+    <div className='postPersonnel'>
+        oooo
+    <NouveauDisplayPosts/>
+    </div>
+    )
+}
+
+
+export default PostPersonnels;
+
+
+

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

@@ -32,13 +32,13 @@ const Configuration = () => {
         <Navbar />
         <div className='configuration'>
             <div className='boutonDeConfigurations'>
-            <a onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
+            <a onClick={handleModals} id="ConfigurationDuProfil" >
             Configuration du profil
             </a>
-            <a onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
+            <a onClick={handleModals} id="ConfigurationDuCompte" >
             Configuration du compte
             </a>
-            <a onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
+            <a onClick={handleModals} id="PolitiqueDeConfidentialite" >
             Politique de confidentialite
             </a>
             </div>

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

@@ -3,6 +3,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import Navbar from '../components/Navbar';
 import { dateParser } from '../components/Utils';
 import FollowHandler from '../components/UserProfil/FollowHandler';
+import PostPersonnels from '../components/UserProfil/NavigationProfil/PostsPersonnels';
+import DossierPersonnels from '../components/UserProfil/NavigationProfil/DossiersPersonnels';
+import PostsLikes from '../components/UserProfil/NavigationProfil/PostsLikes';
 
 const Profil = () => {
     const userData =  useSelector((state) => state.user.user);
@@ -10,6 +13,27 @@ const Profil = () => {
     const dispatch = useDispatch();
     const [followingPopup, setFollowingPopup] = useState(false);
     const [followerPopup, setFollowerPopup] = useState(false);
+    const [dossierPersonnels,setdossierPersonnels ] = useState(false);
+    const [postPersonnels,setpostPersonnels ] = useState(true);
+    const [postLikes,setpostLikes ] =useState(false)
+
+    const handleModals = (e) => {
+        if (e.target.id === "DossierPersonnels") {
+            setdossierPersonnels(true);
+            setpostPersonnels(false);
+            setpostLikes(false);
+        } else if (e.target.id === "PostsPersonnels") {
+            setdossierPersonnels(false);
+            setpostPersonnels(true);
+            setpostLikes(false);
+        } else if (e.target.id ==="PostsLikes"){
+            setdossierPersonnels(false);
+            setpostPersonnels(false);
+            setpostLikes(true);
+        }
+    }; 
+
+
 
     return (
         <>
@@ -186,21 +210,24 @@ const Profil = () => {
                     <nav role="navigation" class="navProfil">
                         <ul class="navItemsProfil">
                             <li class="navItemProfil">
-                                <a href="#" class="navLinkProfil" ><span>Dossier Personnel</span></a>
+                                <a class="navLinkProfil" id='DossierPersonnels' onClick={handleModals}><span>Dossier Personnel</span></a>
                             </li> 
                             <li class="navItemProfil">
-                                <a href="#" class="navLinkProfil"><span>Posts</span></a>
+                                <a class="navLinkProfil" id='PostsPersonnels' onClick={handleModals}><span>Posts</span></a>
                             </li>
                             <li class="navItemProfil">
-                                <a href="#" class="navLinkProfil"><span>Posts likés</span></a>
+                                <a  class="navLinkProfil" id='PostLikes' onClick={handleModals}><span>Posts likés</span></a>
                             </li> 
                           
                         </ul>
                      </nav>
               </div>
               <div class="menuContent">
+
                 <div class="listContent">
-                  <span>suu</span>
+                {dossierPersonnels &&<DossierPersonnels/>}
+                {postPersonnels &&<PostPersonnels/>}
+                {postLikes &&<PostsLikes/>}
                 </div>
                   
               </div>

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

@@ -67,6 +67,7 @@ span{
 }
 
 
+
 input{
     margin-bottom: 2%;
 }

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

@@ -0,0 +1,45 @@
+.conteneur_postes{
+    display: flex;
+    flex-direction: column;
+    .unPosteNouvelleAffichage{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        min-height:50px ;
+        background: $color-8;
+        border: 0.3px solid $color-5;
+        margin: 0.2% 1%;
+        padding: 1%;
+        .dateDePublicationDuPost{
+            flex: 0.5 0.8 20%;
+        }
+        .LienDunPosteNouvelleAffichage{
+            display: flex;
+            justify-content: space-around;
+            flex-flow: row wrap;
+            flex: 0.9 0 60%;
+
+        }
+        .informationDunPosteNouvelleAffichage{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            padding-left: 10%;
+            flex: 0.5 0.8 auto;
+        }
+    }
+
+.PreviewPostNouvelleAffichage{
+    min-width: 100px;
+    width: 80%;
+    max-height: 48px;
+}
+
+
+.postPersonnel .dossierPersonnel{
+    display: flex;
+      flex-direction: column;
+      width: 100;
+  }
+
+}

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

@@ -9,6 +9,7 @@
 @import'./component/configurationDuCompte.scss';
 @import'./component/politiqueDeConfidentialite';
 @import './component/newPoste';
+@import'./component/postNouvelleAffichage';