From f36c4cea81db7e82131b2cfc65c0ead16a21c5f6 Mon Sep 17 00:00:00 2001 From: JW Rami Date: Tue, 5 Sep 2023 00:41:42 +0200 Subject: [PATCH 1/4] update --- .../PostsComments/PostsComments.js | 35 +++++++++++++++---- client/src/Pages/FullPagePost/FullPagePost.js | 22 +++++++----- 2 files changed, 42 insertions(+), 15 deletions(-) diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.js b/client/src/Components/PostsComponents/PostsComments/PostsComments.js index fe56075a..a60adbc5 100644 --- a/client/src/Components/PostsComponents/PostsComments/PostsComments.js +++ b/client/src/Components/PostsComponents/PostsComments/PostsComments.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import "./PostsComments.css"; import "./PostsCommentsNoMediaQueries.css"; import profilePicFan from "../../../Assets/Image/profilepicmbappecomments.svg"; @@ -7,6 +7,8 @@ import DropDownButtonMenu from "../DropDownButtonMenu/DropDownButtonMenu"; import dropDownImage from "../../../Assets/Image/dropdown.svg"; import DropDownMenu from "../DropDownMenu/DropDownMenu"; import { useNavigate } from "react-router-dom"; +import { formatDistanceToNow } from "date-fns"; +import { fr } from "date-fns/locale"; function PostsComments({ likeButtonSizePollPost, postId, @@ -21,12 +23,19 @@ function PostsComments({ setDropdownStates, dropdownStates, isMediaQueriesFullPagePostDisabled, + userId, + displayName, + commentText, + profileAvatar, + timeStampComment, + likesCounter, }) { // Si l'athlete ou un admin ou le proprietaire du compte est connecté il peut voir le menu dropdown const [isAdminLogged, setIsAdminLogged] = useState(); const [isAthleteLogged, setIsAthleteLogged] = useState(); const [isCommentsOwnerLogged, setisCommentsOwnerLogged] = useState(true); const [isCommentLiked, setIsCommentLiked] = useState(false); + const [isLikesPlural, setIsLikePlural] = useState(false); const navigate = useNavigate(); function handleCommentLike() { setIsCommentLiked(!isCommentLiked); @@ -56,6 +65,19 @@ function PostsComments({ // mettre une condition si le commentaire viens d'un utilisateur ou d'un athlete il faut changer le path navigate(`/userprofile/`); } + timeStampComment = formatDistanceToNow(timeStampComment * 1000, { + locale: fr, + addSuffix: true, + }); + timeStampComment = timeStampComment.replace("environ ", ""); + useEffect(() => { + if (likesCounter > 1) { + setIsLikePlural(true); + } else { + setIsLikePlural(false); + } + }, [likesCounter]); + return ( <>
- + AVATAR PROFIL PHOTO
- DonOfSomething + {displayName}
- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dumm… + {commentText}
- 12 likes + {likesCounter} like{isLikesPlural && "s"}
- 28min + {timeStampComment}
diff --git a/client/src/Pages/FullPagePost/FullPagePost.js b/client/src/Pages/FullPagePost/FullPagePost.js index c3fe1d0a..34a028d3 100644 --- a/client/src/Pages/FullPagePost/FullPagePost.js +++ b/client/src/Pages/FullPagePost/FullPagePost.js @@ -8,8 +8,9 @@ import PostsComments from "../../Components/PostsComponents/PostsComments/PostsC import AddCommentInput from "../../Components/PostsComponents/AddCommentInput/AddCommentInput"; import PollPost from "../../Components/PostsComponents/PollPost/PollPost"; import DropDownMenu from "../../Components/PostsComponents/DropDownMenu/DropDownMenu"; +import { v4 as uuidv4 } from "uuid"; import { db } from "../../Configs/firebase"; -import { collection, query, orderBy, onSnapshot } from 'firebase/firestore'; +import { collection, query, orderBy, onSnapshot } from "firebase/firestore"; function FullPagePost({ id, @@ -49,7 +50,7 @@ function FullPagePost({ const [isDropDownMenuCommentClicked, setIsDropDownMenuCommentClicked] = useState(); const [dropdownStates, setDropdownStates] = useState({}); - const [comments, setComments] = useState({}) + const [comments, setComments] = useState([]); function handleClickOutsideDropDownMenuComments(e) { if ( @@ -99,7 +100,7 @@ function FullPagePost({ useEffect(() => { const commentsRef = collection(db, `feed_post/${id}/post_comments`); - const q = query(commentsRef, orderBy('createdAt', 'desc')); + const q = query(commentsRef, orderBy("createdAt", "desc")); const unsubscribe = onSnapshot(q, (querySnapshot) => { const comments = []; @@ -115,7 +116,6 @@ function FullPagePost({ }; }, [id]); - useEffect(() => { if (postPicture) { setIstMediaQueriesFullPagePostDisabled(false); @@ -156,7 +156,7 @@ function FullPagePost({ } // console.log("id:", id); function handleDropdownPostFeedClick() { - console.log("je m'appelle rami"); + // console.log("je m'appelle rami"); } // console.log(loggedInUserId); console.log(comments); @@ -300,12 +300,18 @@ function FullPagePost({ : "comments-container-fullpagepost" } > - {dataComments.map((comments, i) => { + {comments.map((commentss, i) => { return ( <> Date: Tue, 5 Sep 2023 01:56:15 +0200 Subject: [PATCH 2/4] up before problem --- client/src/Components/Navbar/Navbar.css | 4 +-- .../AddCommentInput/AddCommentInput.js | 30 ++++++++++--------- .../PostsComments/PostsComments.css | 10 +++++-- .../PostsComments/PostsComments.js | 2 +- .../src/Pages/FullPagePost/FullPagePost.css | 2 +- 5 files changed, 27 insertions(+), 21 deletions(-) diff --git a/client/src/Components/Navbar/Navbar.css b/client/src/Components/Navbar/Navbar.css index 02ebd404..bf871496 100644 --- a/client/src/Components/Navbar/Navbar.css +++ b/client/src/Components/Navbar/Navbar.css @@ -59,7 +59,7 @@ padding-bottom: 6px; padding-left: 10px; padding-right: 10px; - background-color: #00000015; + /* background-color: #00000015; */ transition-duration: 300ms !important; border-radius: 30px; /* text-decoration: underline; */ @@ -79,7 +79,7 @@ padding-bottom: 6px; padding-left: 10px; padding-right: 10px; - background-color: #00000015; + /* background-color: #00000015; */ transition-duration: 300ms !important; border-radius: 30px; } diff --git a/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js b/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js index ef35bce4..1b7fbb29 100644 --- a/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js +++ b/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js @@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState } from "react"; import "./AddCommentInput.css"; import "./AddCommentInputNoMediaQueries.css"; import { db } from "../../../Configs/firebase"; -import { collection, addDoc, serverTimestamp } from 'firebase/firestore'; +import { collection, addDoc, serverTimestamp } from "firebase/firestore"; function AddCommentInput({ inputAddCommentContainer, @@ -13,43 +13,45 @@ function AddCommentInput({ isMediaQueriesFullPagePostDisabled, postFeedHomeStyle, postId, - loggedInUser + loggedInUser, }) { const [focusInputComment, setFocusInputComment] = useState(); const [blurInputComment, setBlurInputComment] = useState(); const [textareaheight, setTextareaheight] = useState(1); - const [commentText, setCommentText] = useState("") + const [commentText, setCommentText] = useState(""); function handleChangeInputComment(event) { event.preventDefault(); - setCommentText(event.target.value) - + setCommentText(event.target.value); } - const feedPostCollectionRef = collection(db, 'feed_post'); + const feedPostCollectionRef = collection(db, "feed_post"); const handleSubmitComments = async (e) => { e.preventDefault(); const commentData = { createdAt: serverTimestamp(), - userId: loggedInUser.id, // Replace with the actual user ID - display_name: loggedInUser.displayName, + userId: loggedInUser.id, // Replace with the actual user ID + display_name: loggedInUser.display_name, profile_avatar: loggedInUser.profile_avatar, comment: commentText, likes: [], - status: true + status: true, }; - + try { - const commentRef = collection(feedPostCollectionRef, `${postId}/post_comments`); + const commentRef = collection( + feedPostCollectionRef, + `${postId}/post_comments` + ); await addDoc(commentRef, commentData); console.log("Comment successfully added!"); } catch (e) { console.error("Error adding comment: ", e); } setCommentText(""); - console.log('Comment Added on post ID: ', postId, "Comment: ", commentText); - } - + console.log("Comment Added on post ID: ", postId, "Comment: ", commentText); + }; + const textareaRef = useRef(null); function handleFocusInputComment(e) { setBlurInputComment(false); diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.css b/client/src/Components/PostsComponents/PostsComments/PostsComments.css index 980c74d8..2bc22de3 100644 --- a/client/src/Components/PostsComponents/PostsComments/PostsComments.css +++ b/client/src/Components/PostsComponents/PostsComments/PostsComments.css @@ -2,11 +2,13 @@ .posts-comments-component-container { width: 100%; max-width: 496px; - min-height: 81px; + /* min-height: 81px; */ + margin-bottom: 10px; display: flex; + /* background-color: red; */ } .posts-comments-component-profile-pic-container { - height: 81px; + /* height: 81px; */ margin-right: 10px; /* background-color: aquamarine; */ } @@ -115,10 +117,12 @@ /* min-height: 68px; */ /* height: 68px !important; */ /* max-height: 68px !important; */ + /* background-color: blue; */ + margin-bottom: 2px; } .posts-comments-component-profile-pic-container { /* background-color: darkblue; */ - height: 61px; + /* height: 61px; */ } .posts-comments-component-profile-pic-container img { width: 25px; diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.js b/client/src/Components/PostsComponents/PostsComments/PostsComments.js index a60adbc5..02b70a73 100644 --- a/client/src/Components/PostsComponents/PostsComments/PostsComments.js +++ b/client/src/Components/PostsComponents/PostsComments/PostsComments.js @@ -77,7 +77,7 @@ function PostsComments({ setIsLikePlural(false); } }, [likesCounter]); - +// console.log(userId); return ( <>
div:nth-child(2) > div:nth-child(2) { /* background-color: palegoldenrod; */ - font-size: 12px; + font-size: 10px; } /* .separation-line-fullpagepost { height: 10px; From 2d3057a61ea338292a75a1a5c6c5572b90ffb550 Mon Sep 17 00:00:00 2001 From: Ra Date: Tue, 5 Sep 2023 06:27:07 +0200 Subject: [PATCH 3/4] copy link profile in comments + fix dropdown comments + redirect to right profile + avoid spam with empty comments --- .../AddCommentInput/AddCommentInput.js | 7 +++- .../DropDownMenu/DropDownMenu.js | 26 ++++++++++++- .../PostsComments/PostsComments.js | 22 ++++++++--- .../PostsComponents/PostsFeed/PostsFeed.js | 2 +- client/src/Pages/FullPagePost/FullPagePost.js | 37 ++++++++++++------- 5 files changed, 71 insertions(+), 23 deletions(-) diff --git a/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js b/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js index 46afbcfd..9ab35b25 100644 --- a/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js +++ b/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js @@ -28,8 +28,11 @@ function AddCommentInput({ const handleSubmitComments = async (e) => { e.preventDefault(); - const commentData = { - createdAt: serverTimestamp(), + if (!loggedInUser && !commentText){ + return; + } + const commentData = { + createdAt: serverTimestamp(), userId: loggedInUser.id, userType: loggedInUser.account_type, display_name: loggedInUser.display_name, diff --git a/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js b/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js index 96c09451..317cb213 100644 --- a/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js +++ b/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js @@ -10,6 +10,9 @@ function DropDownMenu({ loggedInUserId, // dropDownStatesFullPagePostModal, fullPagePostModalStyle, + userType, + userId, + isPostsCommentsDisplay, }) { // Backend here const isOwner = true; @@ -46,9 +49,28 @@ function DropDownMenu({
{/* )} */} -
  • handleClickCopyPostLink(id)}>Copier le lien
    • + {isPostsCommentsDisplay ? ( + <> +
  • handleClickCopyPostLink(userId, userType)}> + Copier le lien +
    • + + ) : ( + <> +
  • handleClickCopyPostLink(id)}> + Copier le lien +
    • + + )}
    - +
  • Voir le profil
    •  diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.js b/client/src/Components/PostsComponents/PostsComments/PostsComments.js index e28cfd69..ff7754d9 100644 --- a/client/src/Components/PostsComponents/PostsComments/PostsComments.js +++ b/client/src/Components/PostsComponents/PostsComments/PostsComments.js @@ -31,6 +31,7 @@ function PostsComments({ likesCounter, userType, postCreatorId, + handleClickCopyPostLink }) { // Si l'athlete ou un admin ou le proprietaire du compte est connecté il peut voir le menu dropdown const [isAdminLogged, setIsAdminLogged] = useState(); @@ -61,7 +62,8 @@ function PostsComments({ ...prevState, [commentId]: !prevState[commentId], })); - console.log(dropdownStates); + // console.log("dropdownStates --> ",dropdownStates); + // console.log("commentId --> ",commentId); } function redirectToProfileFromComment(e) { if (userType === "athlete") { @@ -98,9 +100,9 @@ function PostsComments({ ? "posts-comments-component-profile-pic-container-no-media-queries" : "posts-comments-component-profile-pic-container" } - onClick={redirectToProfileFromComment} > - + {displayName} {postCreatorId === userId && ( <> - + Auteur @@ -214,6 +222,10 @@ function PostsComments({ isAdminLogged={isAdminLogged} isAthleteLogged={isAthleteLogged} isCommentsOwnerLogged={isCommentsOwnerLogged} + userType={userType} + userId={userId} + isPostsCommentsDisplay={true} + handleClickCopyPostLink={handleClickCopyPostLink} /> )} diff --git a/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js b/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js index 5bca8ea7..f09cd2b4 100644 --- a/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js +++ b/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js @@ -82,7 +82,7 @@ function PostsFeed({ ); } } - console.log("id de postfeed --> ",id) + // console.log("id de postfeed --> ",id) // console.log(postCommentNumber); return ( <> diff --git a/client/src/Pages/FullPagePost/FullPagePost.js b/client/src/Pages/FullPagePost/FullPagePost.js index 79d04e85..2f3c387a 100644 --- a/client/src/Pages/FullPagePost/FullPagePost.js +++ b/client/src/Pages/FullPagePost/FullPagePost.js @@ -70,9 +70,10 @@ function FullPagePost({ const unsubscribe = onSnapshot(q, (querySnapshot) => { const comments = []; querySnapshot.forEach((doc) => { - comments.push(doc.data()); + const commentData = doc.data(); + commentData.commentId = doc.id; + comments.push(commentData); }); - // Set your state here to re-render the component with the comments setComments(comments); }); @@ -117,8 +118,17 @@ function FullPagePost({ function handleDropdownPostFeedClick() { // console.log("je m'appelle rami"); } - // console.log(comments); setCommentLengthPostsFeed(comments.length); + function handleClickCopyPostLink(userId, userType) { + userType === "athlete" + ? navigator.clipboard.writeText( + `https://staging.sofan.app/athleteprofile/${userId}` + ) + : navigator.clipboard.writeText( + `https://staging.sofan.app/userprofile/${userId}` + ); + } + // console.log(comments) return ( <>
    - {comments.map((commentss, i) => { + {comments.map((comment, i) => { return ( <> ); From 02b04a5a844907371aeb648e8d96b71dab2114a4 Mon Sep 17 00:00:00 2001 From: Ra Date: Tue, 5 Sep 2023 06:37:31 +0200 Subject: [PATCH 4/4] fix redirect userprofile comments to profile --- .../Components/PostsComponents/PostsComments/PostsComments.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.js b/client/src/Components/PostsComponents/PostsComments/PostsComments.js index ff7754d9..af7f4ed2 100644 --- a/client/src/Components/PostsComponents/PostsComments/PostsComments.js +++ b/client/src/Components/PostsComponents/PostsComments/PostsComments.js @@ -68,7 +68,7 @@ function PostsComments({ function redirectToProfileFromComment(e) { if (userType === "athlete") { navigate(`/athleteprofile/${userId}`); - } else if (userType === "athlete") { + } else { navigate(`/userprofile/${userId}`); } }