avancement profil
continuous-integration/drone/push Build encountered an error
Details
continuous-integration/drone/push Build encountered an error
Details
Darius BERTRAND
3 years ago
parent
bef19fa1c6
commit
e80ed4149e
@ -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;
|
||||
@ -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;
|
||||
@ -0,0 +1,18 @@
|
||||
import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const DossiersPersonnels=()=>{
|
||||
|
||||
return(
|
||||
<div className='dossierPersonnel'>
|
||||
pppp
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default DossiersPersonnels;
|
||||
@ -0,0 +1,20 @@
|
||||
import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const PostLikes=()=>{
|
||||
|
||||
|
||||
return(
|
||||
|
||||
<div className='postPersonnel'>
|
||||
<NouveauDisplayPosts/>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default PostLikes;
|
||||
@ -0,0 +1,21 @@
|
||||
import NouveauDisplayPosts from "../../Post/NouveauDisplayPosts";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const PostPersonnels=()=>{
|
||||
|
||||
return(
|
||||
<div className='postPersonnel'>
|
||||
oooo
|
||||
<NouveauDisplayPosts/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default PostPersonnels;
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue