Merge pull request #204 from So-Fan/SD-461-display-comments-post

Sd 461 display comments post
So-Fan · Sep 5, 2023 · 7a41074 · 7a41074
2 parents f975cf7 + 02b04a5
commit 7a41074
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 100 deletions.
diff --git a/client/src/Components/Modal/Modal.js b/client/src/Components/Modal/Modal.js
@@ -33,7 +33,7 @@ const Modal = (props) => {
   useEffect(() => {
     document.querySelector('body').classList.add('scroll-lock');
   }, [])
-  console.log(props.isPostClicked)
+  // console.log(props.isPostClicked)
   return (
     <div id="modal-component" 
     style={{marginTop: props.dynamicPositionPopUpMargin}}

diff --git 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
@@ -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,49 @@ 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(),
+    if (!loggedInUser && !commentText){
+      return;
+    }
+      const commentData = {
+        createdAt: serverTimestamp(),
       userId: loggedInUser.id,
+      userType: loggedInUser.account_type,
       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/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({
             <div className="separation-line-dropdown-menu"></div>
           </>
           {/* )} */}
-          <li onClick={() => handleClickCopyPostLink(id)}>Copier le lien</li>
+          {isPostsCommentsDisplay ? (
+            <>
+              <li onClick={() => handleClickCopyPostLink(userId, userType)}>
+                Copier le lien
+              </li>
+            </>
+          ) : (
+            <>
+              <li onClick={() => handleClickCopyPostLink(id)}>
+                Copier le lien
+              </li>
+            </>
+          )}
           <div className="separation-line-dropdown-menu"></div>
-          <a target="blank" href={`/athleteprofile/${postCreatorId}`}>
+          <a
+            target="blank"
+            href={
+              userType === "athlete"
+                ? `/athleteprofile/${postCreatorId}`
+                : `/userprofile/${userId}`
+            }
+          >
             <li>Voir le profil</li>
           </a>
         </ul>

diff --git 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; */
 }
@@ -15,7 +17,7 @@
   height: 30px;
   max-width: 30px;
   max-height: 30px;
-  border-radius: 30px;
+  /* border-radius: 30px; */
   border: solid 2px white;
 }
 .posts-comments-component-profile-pic-container img:hover {
@@ -32,10 +34,29 @@
   font-size: 16px;
   font-family: "britanica-heavy";
 }
-.posts-comments-component-username:hover {
+.post-comments-component-username-for-hover:hover{
   text-decoration: underline;
   cursor: pointer;
 }
+.posts-comments-component-creator-badge {
+  background-color: #f6d463;
+  color: white;
+  padding: 1px 3px;
+  text-align: center;
+  border-radius: 5px;
+  font-size: 12px;
+  margin-left: 5px;
+  cursor: pointer;
+  user-select: none;
+}
+.posts-comments-component-creator-badge:hover {
+  background-color: #f7c520;
+  transition-duration: 300ms;
+}
+/* .posts-comments-component-username:hover {
+  text-decoration: underline;
+  cursor: pointer;
+} */
 .posts-comments-component-comments {
   font-size: 14px;
   margin-top: 5px;
@@ -115,11 +136,10 @@
     /* 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;
-  }
+
   .posts-comments-component-profile-pic-container img {
     width: 25px;
     height: 25px;

diff --git 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,22 @@ function PostsComments({
   setDropdownStates,
   dropdownStates,
   isMediaQueriesFullPagePostDisabled,
+  userId,
+  displayName,
+  commentText,
+  profileAvatar,
+  timeStampComment,
+  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();
   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);
@@ -50,12 +62,29 @@ function PostsComments({
       ...prevState,
       [commentId]: !prevState[commentId],
     }));
-    console.log(dropdownStates);
+    // console.log("dropdownStates --> ",dropdownStates);
+    // console.log("commentId --> ",commentId);
   }
   function redirectToProfileFromComment(e) {
-    // mettre une condition si le commentaire viens d'un utilisateur ou d'un athlete il faut changer le path
-    navigate(`/userprofile/`);
+    if (userType === "athlete") {
+      navigate(`/athleteprofile/${userId}`);
+    } else {
+      navigate(`/userprofile/${userId}`);
+    }
   }
+  timeStampComment = formatDistanceToNow(timeStampComment * 1000, {
+    locale: fr,
+    addSuffix: true,
+  });
+  timeStampComment = timeStampComment.replace("environ ", "");
+  useEffect(() => {
+    if (likesCounter > 1) {
+      setIsLikePlural(true);
+    } else {
+      setIsLikePlural(false);
+    }
+  }, [likesCounter]);
+  // console.log(userId);
   return (
     <>
       <div
@@ -71,9 +100,17 @@ function PostsComments({
               ? "posts-comments-component-profile-pic-container-no-media-queries"
               : "posts-comments-component-profile-pic-container"
           }
-          onClick={redirectToProfileFromComment}
         >
-          <img src={profilePicFan} alt="" />
+          <img
+            onClick={redirectToProfileFromComment}
+            style={
+              userType === "athlete"
+                ? { borderRadius: "10px" }
+                : { borderRadius: "30px" }
+            }
+            src={profileAvatar}
+            alt="AVATAR PROFIL PHOTO"
+          />
         </div>
         <div
           className={
@@ -95,9 +132,24 @@ function PostsComments({
                   ? "posts-comments-component-username-no-media-queries"
                   : "posts-comments-component-username"
               }
-              onClick={redirectToProfileFromComment}
+              // onClick={redirectToProfileFromComment}
             >
-              DonOfSomething
+              <span
+                onClick={redirectToProfileFromComment}
+                className="post-comments-component-username-for-hover"
+              >
+                {displayName}
+              </span>
+              {postCreatorId === userId && (
+                <>
+                  <span
+                    onClick={redirectToProfileFromComment}
+                    className="posts-comments-component-creator-badge"
+                  >
+                    Auteur
+                  </span>
+                </>
+              )}
             </div>
             <div
               className={
@@ -106,8 +158,7 @@ function PostsComments({
                   : "posts-comments-component-comments"
               }
             >
-              Lorem Ipsum is simply dummy text of the printing and typesetting
-              industry. Lorem Ipsum has been the industry's standard dumm…
+              {commentText}
             </div>
           </div>
           <div
@@ -124,7 +175,7 @@ function PostsComments({
                   : "posts-comments-component-comments-like-counter"
               }
             >
-              12 likes
+              {likesCounter} like{isLikesPlural && "s"}
             </div>
             <div
               className={
@@ -133,7 +184,7 @@ function PostsComments({
                   : "posts-comments-component-comments-timestamp"
               }
             >
-              28min
+              {timeStampComment}
             </div>
           </div>
         </div>
@@ -171,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
@@ -48,6 +48,7 @@ function PostsFeed({
 }) {
   const [isPostClicked, setIsPostClicked] = useState(false);
   const [isModdleToggled, setIsModalToggled] = useState(false);
+  const [commentsLengthPostsFeed, setCommentLengthPostsFeed] = useState();
   function handleClickShowComment(e) {
     e.preventDefault();
     setIsPostClicked(true);
@@ -82,7 +83,7 @@ function PostsFeed({
     }
   }
   // console.log("id de postfeed --> ",id)
-  console.log(postCommentNumber);
+  // console.log(postCommentNumber);
   return (
     <>
       <div
@@ -207,6 +208,7 @@ function PostsFeed({
             handleClickCopyPostLink={handleClickCopyPostLink}
             isFullPagePostModalDisplay={true}
             fullPagePostModalStyle={true}
+            setCommentLengthPostsFeed={setCommentLengthPostsFeed}
             // postType={singlePostData.postType === "normal"}
           />
         </Modal>