From e80ed4149e11a39c33efbf960008b9ba2c5c6d17 Mon Sep 17 00:00:00 2001 From: Darius BERTRAND Date: Wed, 11 Jan 2023 21:24:48 +0100 Subject: [PATCH] avancement profil --- .../Configurations/ConfigurationDuProfil.js | 8 +- .../components/Post/NouveauDisplayPosts.js | 41 +++++++++ .../components/Post/PostNouvelleAffichage.js | 87 +++++++++++++++++++ .../client/src/components/Routes/index.js | 10 +-- .../NavigationProfil/DossiersPersonnels.js | 18 ++++ .../UserProfil/NavigationProfil/PostsLikes.js | 20 +++++ .../NavigationProfil/PostsPersonnels.js | 21 +++++ Site Web/client/src/pages/Configuration.js | 6 +- Site Web/client/src/pages/Profil.js | 35 +++++++- .../component/_configurationDuProfil.scss | 1 + .../component/_postNouvelleAffichage.scss | 45 ++++++++++ Site Web/client/src/styles/index.scss | 1 + 12 files changed, 275 insertions(+), 18 deletions(-) create mode 100644 Site Web/client/src/components/Post/NouveauDisplayPosts.js create mode 100644 Site Web/client/src/components/Post/PostNouvelleAffichage.js create mode 100644 Site Web/client/src/components/UserProfil/NavigationProfil/DossiersPersonnels.js create mode 100644 Site Web/client/src/components/UserProfil/NavigationProfil/PostsLikes.js create mode 100644 Site Web/client/src/components/UserProfil/NavigationProfil/PostsPersonnels.js create mode 100644 Site Web/client/src/styles/component/_postNouvelleAffichage.scss diff --git a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js index 024f854e..1fd55fb2 100644 --- a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js +++ b/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 = ()=>{ @@ -70,12 +71,7 @@ const ConfigurationDuProfil = ()=>{ - - -
- dossiers - -
+ {displayAdd && ( diff --git a/Site Web/client/src/components/Post/NouveauDisplayPosts.js b/Site Web/client/src/components/Post/NouveauDisplayPosts.js new file mode 100644 index 00000000..bdb651a0 --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +export default NouveauDisplayPosts; \ No newline at end of file diff --git a/Site Web/client/src/components/Post/PostNouvelleAffichage.js b/Site Web/client/src/components/Post/PostNouvelleAffichage.js new file mode 100644 index 00000000..ec90d12a --- /dev/null +++ b/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 (
{link}
); + } + else { + return ( +
+ + {preview.title}/ + +
+ ); + } +}; + +//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 ( +
  • + {isLoading ? ( + + ):( +
    +
    +
    {dateParser(post.createdAt)}
    +
    +
    + +

    {post.message}

    +
    +
    +
    + + {/* */} +
    {post.likers.length}
    +
    +
    + setComments(!comments)}/> +
    {post.comments.length}
    +
    +
    + {comments && } +
    + ) } +
    • + ); +}; + + + +//ce qui écrit dans le input est récuperé par le state +export default PostNouvelleAffichage; \ No newline at end of file diff --git a/Site Web/client/src/components/Routes/index.js b/Site Web/client/src/components/Routes/index.js index c4210b41..2d30b656 100644 --- a/Site Web/client/src/components/Routes/index.js +++ b/Site Web/client/src/components/Routes/index.js @@ -12,12 +12,12 @@ const index = () => { } /> - } /> - } /> - } /> + } /> + } /> + } /> {/* } /> */} - } /> - }/> + } /> + }/> ); diff --git a/Site Web/client/src/components/UserProfil/NavigationProfil/DossiersPersonnels.js b/Site Web/client/src/components/UserProfil/NavigationProfil/DossiersPersonnels.js new file mode 100644 index 00000000..008467b4 --- /dev/null +++ b/Site Web/client/src/components/UserProfil/NavigationProfil/DossiersPersonnels.js @@ -0,0 +1,18 @@ +import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts"; + + + + + +const DossiersPersonnels=()=>{ + + return( +
    + pppp + +
    + ) +} + + +export default DossiersPersonnels; \ No newline at end of file diff --git a/Site Web/client/src/components/UserProfil/NavigationProfil/PostsLikes.js b/Site Web/client/src/components/UserProfil/NavigationProfil/PostsLikes.js new file mode 100644 index 00000000..c0e37cdd --- /dev/null +++ b/Site Web/client/src/components/UserProfil/NavigationProfil/PostsLikes.js @@ -0,0 +1,20 @@ +import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts"; + + + + + +const PostLikes=()=>{ + + +return( + +
    + +
    +) + +} + + +export default PostLikes; \ No newline at end of file diff --git a/Site Web/client/src/components/UserProfil/NavigationProfil/PostsPersonnels.js b/Site Web/client/src/components/UserProfil/NavigationProfil/PostsPersonnels.js new file mode 100644 index 00000000..942a3f41 --- /dev/null +++ b/Site Web/client/src/components/UserProfil/NavigationProfil/PostsPersonnels.js @@ -0,0 +1,21 @@ +import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts"; + + + + + +const PostPersonnels=()=>{ + + return( +
    + oooo + +
    + ) +} + + +export default PostPersonnels; + + + diff --git a/Site Web/client/src/pages/Configuration.js b/Site Web/client/src/pages/Configuration.js index 0970a44d..7f147372 100644 --- a/Site Web/client/src/pages/Configuration.js +++ b/Site Web/client/src/pages/Configuration.js @@ -32,13 +32,13 @@ const Configuration = () => {
    - + Configuration du profil - + Configuration du compte - + Politique de confidentialite
    diff --git a/Site Web/client/src/pages/Profil.js b/Site Web/client/src/pages/Profil.js index 9444f0e6..6e2fa11a 100644 --- a/Site Web/client/src/pages/Profil.js +++ b/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 = () => {
    +
    - suu + {dossierPersonnels &&} + {postPersonnels &&} + {postLikes &&}
    diff --git a/Site Web/client/src/styles/component/_configurationDuProfil.scss b/Site Web/client/src/styles/component/_configurationDuProfil.scss index 254fa53d..8118274c 100644 --- a/Site Web/client/src/styles/component/_configurationDuProfil.scss +++ b/Site Web/client/src/styles/component/_configurationDuProfil.scss @@ -67,6 +67,7 @@ span{ } + input{ margin-bottom: 2%; } diff --git a/Site Web/client/src/styles/component/_postNouvelleAffichage.scss b/Site Web/client/src/styles/component/_postNouvelleAffichage.scss new file mode 100644 index 00000000..913f7dd6 --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/Site Web/client/src/styles/index.scss b/Site Web/client/src/styles/index.scss index 7863e3b2..62024312 100644 --- a/Site Web/client/src/styles/index.scss +++ b/Site Web/client/src/styles/index.scss @@ -9,6 +9,7 @@ @import'./component/configurationDuCompte.scss'; @import'./component/politiqueDeConfidentialite'; @import './component/newPoste'; +@import'./component/postNouvelleAffichage';