Abonnement update

master
Noan07 2 years ago
parent 61d77b072a
commit 6357bcda0a

@ -53,4 +53,65 @@ const Comment = ({ post }) => {
);
};
// return (
// <div className="comments-container">
// {post.comments.map((comment) => {
// return (
// <div
// className={
// comment.commenterId === userData._id
// ? "comment-container client"
// : "comment-container"
// }
// key={comment._id}
// >
// <div className="left-part">
// <img
// src={
// !isEmpty(usersData[0]) &&
// usersData
// .map((user) => {
// if (user._id === comment.commenterId) return user.picture;
// else return null;
// })
// .join("")
// }
// alt="commenter-pic"
// />
// </div>
// <div className="right-part">
// <div className="comment-header">
// <div className="pseudo">
// <h3>{comment.commenterPseudo}</h3>
// {comment.commenterId !== userData._id && (
// <FollowHandler
// idToFollow={comment.commenterId}
// type={"card"}
// />
// )}
// </div>
// <span>{timestampParser(comment.timestamp)}</span>
// </div>
// <p>{comment.text}</p>
// <ActionComment comment={comment} postId={post._id} />
// </div>
// </div>
// );
// })}
// {userData._id && (
// <form action="" onSubmit={handleComment} className="comment-form">
// <input
// type="text"
// name="text"
// onChange={(e) => setMessage(e.target.value)}
// value={message}
// placeholder="Laisser un commentaire"
// />
// <br />
// <input type="submit" value="Envoyer" />
// </form>
// )}
// </div>
// );
export default Comment;

@ -17,6 +17,9 @@ const DisplayPosts = () => {
}
useEffect(() => {
while(postsData== null){
}
if (loadPost) {
dispatch(getPosts(count));
setLoadPost(false);

@ -51,7 +51,7 @@ const Post = ( { post } ) => {
useEffect(() => {
!isEmpty(usersData[0]) && setIsLoading(false)
!isEmpty(usersData[0]) && !isEmpty(userData) && setIsLoading(false)
})
return (
@ -79,8 +79,8 @@ const Post = ( { post } ) => {
}).join('')
}
</h6>
{/* {post.postedId !== userData._id &&
(<FollowHandler idToFollow={post.postedId} type={'suggest'}/>)} */}
{post.postedId !== userData._id &&
(<FollowHandler idToFollow={post.postedId} type={'suggest'}/>)}
</div>
<div>{dateParser(post.createdAt)}</div>
</div>

@ -10,24 +10,26 @@ const FollowHandler = ( { idToFollow , type } ) => {
const [isFollowed, setIsFollowed] = useState(false);
const dispatch = useDispatch();
const handleFollow = () => {
const handleFollow = (e) => {
axios.patch(`${process.env.REACT_APP_API_URL}api/user/follow/` + userData._id, {params: {idToFollow: idToFollow}} )
axios.patch(`${process.env.REACT_APP_API_URL}api/user/follow/` + userData._id, {idToFollow: idToFollow})
.then((res) => {
//dispatch(setUserToFollowData({payload: {idToFollow}}));
})
.catch((err) => console.log(err));
setIsFollowed(false);
setIsFollowed(true);
e.preventDefault();
};
const handleUnFollow = () => {
const handleUnFollow = (e) => {
axios.patch(`${process.env.REACT_APP_API_URL}api/user/unfollow/` + userData._id, {params: {idToFollow: idToFollow}} )
axios.patch(`${process.env.REACT_APP_API_URL}api/user/unfollow/` + userData._id, {idToUnFollow: idToFollow})
.then((res) => {
// dispatch(setUserToUnFollowData({payload: {idToFollow}}));
})
.catch((err) => console.log(err));
setIsFollowed(false);
e.preventDefault();
};

@ -4,76 +4,98 @@ 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([]);
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);
}
const stateTopFollowers = () => {
let array = [];
let obj = JSON.parse(JSON.stringify(usersData));
console.log("obj");
console.log(obj);
obj.sort((a, b) => b.followers.length - a.followers.length);
console.log(obj);
obj.map((user) => {
if(user._id !== userData._id){
return array.push(user._id);
}
})
console.log(array);
array = array.splice(0, 5);
setFriends(array);
}
// 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]) && userData!=null){
if(userData.followers.length === 0){
stateTopFollowers();
}else{
stateFriend();
}
setChargement(false);
setChange(false);
}
}, [userData, usersData, change])
// if(change && !isEmpty(usersData[0]) && !isEmpty(userData._id)){
// stateFriend();
// setChargement(false);
// setChange(false);
// }
// }, [userData, usersData, change])
return (
<div class="recoDiv">
<div class="reco">
<span>Vous pourriez suivre</span>
<hr/>
{chargement ? (
<i className='fas fa-spinner fa-pulse'></i>
) : (
<div class="ListReco" >
{friends && friends.map((user) => {
for(let i = 0; i < usersData.length; i++){
if(user === usersData[i]._id){
return (
<div class="UtiReco" key={user}>
<img src={usersData[i].picture} alt="img"/>
<p>{usersData[i].pseudo}</p>
<FollowHandler idToFollow={usersData[i]._id} type={"card"}/>
</div>
);
}
}
})}
// 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>
//);
</div>
)}
</div>
</div>
);
};
export default SuggestFriends;

@ -16,14 +16,15 @@
flex-direction: column;
padding-left:5%;
font-size: medium;
span{
}
margin-bottom: 4%;
}
span{
}
margin-bottom: 4%;
}
.plusButton{

@ -53,7 +53,6 @@
height:40px;
border-radius: 20px;
border: 2px solid #555;
margin-bottom: 8%;
}
#NomProfile{
@ -88,3 +87,180 @@
max-height: 300px;
}
}
.comment-container.client {
background: $color-4;
border: none;
border-radius: 20px 20px 6px 20px;
}
.comment-container {
display: grid;
grid-template-columns: 50px 1fr;
border: 1px solid $color-2;
padding: 15px;
margin: 5px 0;
border-radius: 20px 20px 20px 6px;
img {
height: 40px;
width: 40px;
border-radius: 14px;
box-shadow: 1px 1px 3px rgba(51, 51, 51, 0.192);
object-fit: cover;
}
.comment-header {
display: flex;
justify-content: space-between;
.pseudo {
display: flex;
span {
transform: translate(6px, 4px);
cursor: pointer;
img {
box-shadow: none;
height: 15px;
width: 15px;
}
}
}
span {
font-size: 0.9rem;
font-style: italic;
}
}
p {
margin-top: 8px;
}
.edit-comment {
color: $color-2;
img {
float: right;
margin-left: 10px;
cursor: pointer;
transition: 0.15s;
box-shadow: none;
height: 20px;
width: 20px;
&:hover {
transform: scale(1.1);
}
}
.edit-comment-form {
margin-top: 14px;
label {
background: white;
color: $color-1;
padding: 6px 12px 5px;
border-radius: 20px 20px 20px 6px;
cursor: pointer;
transition: 0.2s;
display: inline-block;
&:hover {
transform: scale(1.05);
}
}
input[type="text"] {
margin: 4px 0;
background: white;
font-size: 1.15rem;
padding: 16px;
width: 100%;
border-radius: 6px 20px 6px 20px;
}
.btn {
display: flex;
align-items: center;
float: right;
span {
background: white;
padding: 10px 5px;
border-radius: 50px;
margin-right: 6px;
transition: 0.2s;
cursor: pointer;
&:hover {
background: $color-2;
}
img {
transform: translate(-5px, 0);
}
}
input[type="submit"] {
background: $color-2;
width: inherit;
transition: 0.2s;
&:hover {
width: inherit;
background: $color-1;
}
}
}
}
}
}
.comment-form {
margin-top: 6px;
input[type="text"] {
width: 100%;
background: $color-4;
border-radius: 20px 20px 6px 20px;
padding: 20px;
font-size: 1.4rem;
&:focus {
box-shadow: 0 0 2px rgba(51, 51, 51, 0.5);
}
}
input[type="submit"] {
margin-top: 4px;
padding: 12px 16px;
width: 120px;
background: $color-2;
border-radius: 20px 6px 20px 20px;
transition: 0.2s;
float: right;
&:hover {
background: $color-1;
letter-spacing: 2px;
width: 130px;
}
}
button {
float: right;
background: $color-1;
transition: 0.2s;
&:hover {
background: $color-2;
}
}
}
.like-container {
span {
font-size: 1.02rem;
position: absolute;
transform: translate(8px, -1px);
}
}
.fa-share-alt {
transform: translate(0, 2px);
}

@ -61,7 +61,6 @@ module.exports.follow = async (req, res) => {
if (!ObjectID.isValid(req.params.id) || !ObjectID.isValid(req.body.idToFollow)) {
return res.status(400).send("ID unknown : " + req.params.id);
}
try {
const user = await UserModel.findByIdAndUpdate(
req.params.id,
@ -81,68 +80,17 @@ module.exports.follow = async (req, res) => {
}
};
// module.exports.follow = async (req, res) => {
// if (
// !ObjectID.isValid(req.params.id) ||
// !ObjectID.isValid(req.body.idToFollow)
// )
// return res.status(400).send("ID unknown : " + req.params.id);
// try {
// // add to the follower list
// await UserModel.findByIdAndUpdate(
// req.params.id,
// { $addToSet: { following: req.body.idToFollow }, },
// { new: true , upsert: true },
// (err, docs) => {
// if (!err) return res.send(docs);
// else return res.status(200).send(err);
// }
// )
// // ajouter à la liste des followers
// await UserModel.findByIdAndUpdate(
// req.body.idToFollow,
// { $addToSet: { followers: req.params.id }, },
// { new: true , upsert: true},
// (err, docs) => {
// if (!err) return res.send(docs);
// else return res.status(200).send(err);
// }
// );
// } catch (err) {
// return res.status(400).send(err);
// }
// };
module.exports.unfollow = async (req, res) => {
if (
!ObjectID.isValid(req.params.id) ||
!ObjectID.isValid(req.body.idToUnfollow)
)
return res.status(400).send("ID unknown : " + req.params.id);
console.log(req.body.idToUnFollow);
if (!ObjectID.isValid(req.params.id) || !ObjectID.isValid(req.body.idToUnFollow)) {
return res.status(400).send("Invalid user ID: " + req.params.id);
}
try {
await userModel.findByIdAndUpdate(
req.params.id,
{ $pull: { following: req.body.idToUnfollow ,} },
{ new: true , upsert: true },
(err, docs) => {
if (err) return res.status(400).send(err);
}
);
// Retirer de la liste des followers
await userModel.findByIdAndUpdate(
req.body.idToUnfollow,
{ $pull: { followers: req.params.id } },
{ new: true , upsert: true},
(err, docs) => {
if (!err) return res.send(docs);
else return res.status(400).send(err);
}
);
await UserModel.findOneAndUpdate({ _id: req.params.id }, { $pull: { following: req.body.idToUnFollow } }, { new: true });
await UserModel.findOneAndUpdate({ _id: req.body.idToUnFollow }, { $pull: { followers: req.params.id } }, { new: true });
res.send({ message: 'unfollow successfull' });
} catch (err) {
return res.status(401).send(err);
return res.status(400).send(err);
}
}

Loading…
Cancel
Save