Noan07
2 years ago
parent
c11df0979d
commit
5483bd17ff
@ -0,0 +1,67 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { deleteComment } from '../../actions/post.actions';
|
||||
import { UidContext } from '../AppContext';
|
||||
|
||||
|
||||
const ActionComment = ( { commentaire , postId}) => {
|
||||
const [createur, setCreateur] = useState(false);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const [message,setMessage] = useState('');
|
||||
const uid = useContext(UidContext);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleEdit = (e) => {
|
||||
e.preventDefault();
|
||||
if(message){
|
||||
//dispatch();
|
||||
setMessage('');
|
||||
setEdit(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
//dispatch(deleteComment(postId, commentaire._id))
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const verifCreateur = () => {
|
||||
if(uid === commentaire.commenterId){
|
||||
setCreateur(true);
|
||||
}
|
||||
}
|
||||
verifCreateur();
|
||||
}, [uid, commentaire.commenterId]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{createur && edit === false && (
|
||||
<span onClick={() => setEdit(!edit)}>
|
||||
<img src="" alt="editer"/>
|
||||
</span>
|
||||
)}
|
||||
{createur && edit && (
|
||||
<form action="" onSubmit={handleEdit}
|
||||
className="edit-form">
|
||||
<label htmlFor='text' onClick={() => setEdit(!edit)}>Modifier le commentaire</label>
|
||||
|
||||
<input type="text" name="text" onChange={(e) => setMessage(e.target.value)} defaultValue={commentaire.text}/>
|
||||
|
||||
<div>
|
||||
<span onClick={() => {
|
||||
if(window.confirm("Etes-vous sur de supprimer ce commentaire ?")){
|
||||
handleDelete();
|
||||
}
|
||||
}}>
|
||||
<img src="" alt="Icon supprimer"/>
|
||||
</span>
|
||||
</div>
|
||||
<input type="submit" value="Modifier"/>
|
||||
</form>
|
||||
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionComment;
|
||||
@ -0,0 +1,56 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { addComment, getPosts } from '../../actions/post.actions';
|
||||
import FollowHandler from '../UserProfil/FollowHandler';
|
||||
import { isEmpty, timestampParser } from '../Utils';
|
||||
import ActionComment from './ActionComment';
|
||||
|
||||
const Comment = ({ post }) => {
|
||||
const [message, setMessage] = useState("");
|
||||
const usersData = useSelector((state) => state.users.users);
|
||||
const userData = useSelector((state) => state.user.user);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleComment = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (message) {
|
||||
dispatch(addComment(post._id, userData._id, message, userData.pseudo))
|
||||
.then(() => dispatch(getPosts()))
|
||||
.then(() => setMessage(''));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{post.comments.map((comment) => {
|
||||
return (
|
||||
<div className={comment.commenterId === userData._id ? "comment-friend" : "comment-user"} key={comment._id}>
|
||||
<img id="PhotoProfile" alt="ppCommentaire" src={
|
||||
!isEmpty(usersData[0]) &&
|
||||
usersData.map((user) => {
|
||||
if (user._id === comment.commenterId) return user.picture;
|
||||
else return null;
|
||||
}).join('')
|
||||
}/>
|
||||
<p>{comment.commenterPseudo}</p>
|
||||
{comment.commenterPseudo !== userData._id && (
|
||||
<FollowHandler idToFollow={comment.commenterId} type={'suggest'}/>)}
|
||||
<span></span>
|
||||
{timestampParser(comment.timestamp)}
|
||||
<p>{comment.text}</p>
|
||||
<ActionComment commentaire={comment} postId={post._Id} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{userData._id && (
|
||||
<form action="" onSubmit={handleComment} className="form-comment">
|
||||
<input type="text" name="text" onChange={(e) => setMessage(e.target.value)} value={message} placeholder="Ajoutez un commentaire" />
|
||||
<input type="submit" value="Partager"/>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Comment;
|
||||
@ -0,0 +1,79 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { isEmpty } from '../Utils';
|
||||
import FollowHandler from './FollowHandler';
|
||||
|
||||
const SuggestFriends = () => {
|
||||
// const userData = useSelector((state) => state.user.user);
|
||||
// const usersData = useSelector((state) => state.users.users);
|
||||
// const [chargement,setChargement] = useState(true);
|
||||
// const [change, setChange] = useState(true);
|
||||
// const [friends, setFriends] = useState([]);
|
||||
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// const stateFriend = () => {
|
||||
// let array = [];
|
||||
// usersData.map((user) => {
|
||||
// if(user._id !== userData._id && user.followers.includes(userData._id)){
|
||||
// return array.push(user._id);
|
||||
// }
|
||||
// })
|
||||
// //mettre dans un ordre aléatoire
|
||||
// array.sort(() => 0.5 - Math.random());
|
||||
// if(window.innerHeight > 780){
|
||||
// array.length = 5;
|
||||
// }
|
||||
// if(window.innerHeight > 720){
|
||||
// array.length = 4;
|
||||
// }
|
||||
// if(window.innerHeight > 660){
|
||||
// array.length = 3;
|
||||
// }
|
||||
// if(window.innerHeight > 600){
|
||||
// array.length = 2;
|
||||
// }
|
||||
// if(window.innerHeight > 540){
|
||||
// array.length = 1;
|
||||
// }else {
|
||||
// array.length = 0;
|
||||
// }
|
||||
// setFriends(array);
|
||||
// }
|
||||
|
||||
// if(change && !isEmpty(usersData[0]) && !isEmpty(userData._id)){
|
||||
// stateFriend();
|
||||
// setChargement(false);
|
||||
// setChange(false);
|
||||
// }
|
||||
// }, [userData, usersData, change])
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <p>Suggestions</p>
|
||||
// {chargement ? (
|
||||
// <i className='fas fa-spinner fa-pulse'></i>
|
||||
// ) : (
|
||||
// <ul>
|
||||
// {friends && friends.map((user) => {
|
||||
// for(let i = 0; i < usersData.length; i++){
|
||||
// if(user === usersData[i]._id){
|
||||
// return (
|
||||
// <li className='suggest-friend-card' key={user}>
|
||||
// <img src={usersData[i].picture} alt="img"/>
|
||||
// <p>{usersData[i].pseudo}</p>
|
||||
// <FollowHandler idToFollow={usersData[i]._id} type={"card"}/>
|
||||
// </li>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
// })}
|
||||
|
||||
// </ul>
|
||||
// )}
|
||||
// </div>
|
||||
//);
|
||||
};
|
||||
|
||||
export default SuggestFriends;
|
||||
Loading…
Reference in new issue