From 6357bcda0aec65776ad89062f6809b4670e7684e Mon Sep 17 00:00:00 2001 From: Noan07 <84435602+Noan07@users.noreply.github.com> Date: Sun, 15 Jan 2023 09:08:44 +0100 Subject: [PATCH] Abonnement update --- .../client/src/components/Post/Comment.js | 61 ++++++ .../src/components/Post/DisplayPosts.js | 3 + Site Web/client/src/components/Post/Post.js | 6 +- .../components/UserProfil/FollowHandler.js | 12 +- .../components/UserProfil/SuggestFriends.js | 152 ++++++++------- .../component/_configurationDuProfil.scss | 9 +- .../client/src/styles/component/_poste.scss | 178 +++++++++++++++++- Site Web/controllers/user.controller.js | 68 +------ 8 files changed, 351 insertions(+), 138 deletions(-) diff --git a/Site Web/client/src/components/Post/Comment.js b/Site Web/client/src/components/Post/Comment.js index ae7b03cb..76bac47c 100644 --- a/Site Web/client/src/components/Post/Comment.js +++ b/Site Web/client/src/components/Post/Comment.js @@ -53,4 +53,65 @@ const Comment = ({ post }) => { ); }; +// return ( +//
+// {post.comments.map((comment) => { +// return ( +//
+//
+// { +// if (user._id === comment.commenterId) return user.picture; +// else return null; +// }) +// .join("") +// } +// alt="commenter-pic" +// /> +//
+//
+//
+//
+//

{comment.commenterPseudo}

+// {comment.commenterId !== userData._id && ( +// +// )} +//
+// {timestampParser(comment.timestamp)} +//
+//

{comment.text}

+// +//
+//
+// ); +// })} +// {userData._id && ( +//
+// setMessage(e.target.value)} +// value={message} +// placeholder="Laisser un commentaire" +// /> +//
+// +//
+// )} +//
+// ); + export default Comment; \ No newline at end of file diff --git a/Site Web/client/src/components/Post/DisplayPosts.js b/Site Web/client/src/components/Post/DisplayPosts.js index 2a96ba93..170af9d8 100644 --- a/Site Web/client/src/components/Post/DisplayPosts.js +++ b/Site Web/client/src/components/Post/DisplayPosts.js @@ -17,6 +17,9 @@ const DisplayPosts = () => { } useEffect(() => { + while(postsData== null){ + + } if (loadPost) { dispatch(getPosts(count)); setLoadPost(false); diff --git a/Site Web/client/src/components/Post/Post.js b/Site Web/client/src/components/Post/Post.js index 51402bbc..c0899def 100644 --- a/Site Web/client/src/components/Post/Post.js +++ b/Site Web/client/src/components/Post/Post.js @@ -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('') } - {/* {post.postedId !== userData._id && - ()} */} + {post.postedId !== userData._id && + ()}
{dateParser(post.createdAt)}
diff --git a/Site Web/client/src/components/UserProfil/FollowHandler.js b/Site Web/client/src/components/UserProfil/FollowHandler.js index d2951f4f..026ab498 100644 --- a/Site Web/client/src/components/UserProfil/FollowHandler.js +++ b/Site Web/client/src/components/UserProfil/FollowHandler.js @@ -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(); }; diff --git a/Site Web/client/src/components/UserProfil/SuggestFriends.js b/Site Web/client/src/components/UserProfil/SuggestFriends.js index a21acc13..0d79a235 100644 --- a/Site Web/client/src/components/UserProfil/SuggestFriends.js +++ b/Site Web/client/src/components/UserProfil/SuggestFriends.js @@ -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 ( +
+
+ Vous pourriez suivre +
+ {chargement ? ( + + ) : ( +
+ {friends && friends.map((user) => { + for(let i = 0; i < usersData.length; i++){ + if(user === usersData[i]._id){ + return ( +
+ img +

{usersData[i].pseudo}

+ +
+ ); + } + } + })} - // return ( - //
- //

Suggestions

- // {chargement ? ( - // - // ) : ( - //
    - // {friends && friends.map((user) => { - // for(let i = 0; i < usersData.length; i++){ - // if(user === usersData[i]._id){ - // return ( - //
  • - // img - //

    {usersData[i].pseudo}

    - // - //
    • - // ); - // } - // } - // })} - - //
- // )} - //
- //); +
+ )} +
+
+ ); }; export default SuggestFriends; \ No newline at end of file diff --git a/Site Web/client/src/styles/component/_configurationDuProfil.scss b/Site Web/client/src/styles/component/_configurationDuProfil.scss index 63fec04e..42df3a29 100644 --- a/Site Web/client/src/styles/component/_configurationDuProfil.scss +++ b/Site Web/client/src/styles/component/_configurationDuProfil.scss @@ -16,14 +16,15 @@ flex-direction: column; padding-left:5%; font-size: medium; + span{ -} + margin-bottom: 4%; + + } -span{ +} - margin-bottom: 4%; -} .plusButton{ diff --git a/Site Web/client/src/styles/component/_poste.scss b/Site Web/client/src/styles/component/_poste.scss index 1c541bb5..9c7f6403 100644 --- a/Site Web/client/src/styles/component/_poste.scss +++ b/Site Web/client/src/styles/component/_poste.scss @@ -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); +} \ No newline at end of file diff --git a/Site Web/controllers/user.controller.js b/Site Web/controllers/user.controller.js index c762ea97..7d67c913 100644 --- a/Site Web/controllers/user.controller.js +++ b/Site Web/controllers/user.controller.js @@ -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); } }