From c6b1912dc87834218a43b47f67b5f59d548daa7a Mon Sep 17 00:00:00 2001
From: Ra <rami@jwcorp.fr>
Date: Thu, 7 Sep 2023 04:02:18 +0200
Subject: [PATCH] soft delete comment + soft delete post +
 counterIncrementLocaly for comment counter

---
 .../AddCommentInput/AddCommentInput.js        |  6 +-
 .../DropDownMenu/DropDownMenu.js              | 71 +++++++++++++++----
 .../PostsComponents/HeadOfPost/HeadOfPost.js  |  5 ++
 .../LikesCommentsCounter.js                   |  4 +-
 .../PostsComments/PostsComments.js            |  1 +
 .../PostsComponents/PostsFeed/PostsFeed.js    | 27 +++++--
 client/src/Pages/FullPagePost/FullPagePost.js | 24 +++++--
 client/src/Pages/Home/Home.js                 | 20 ++++--
 8 files changed, 128 insertions(+), 30 deletions(-)

diff --git a/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js b/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js
index 9ab35b25..18bd5201 100644
--- a/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js
+++ b/client/src/Components/PostsComponents/AddCommentInput/AddCommentInput.js
@@ -14,6 +14,8 @@ function AddCommentInput({
   postFeedHomeStyle,
   postId,
   loggedInUser,
+  setCommentCounterIncrementLocal,
+  commentCounterIncrementLocal
 }) {
   const [focusInputComment, setFocusInputComment] = useState();
   const [blurInputComment, setBlurInputComment] = useState();
@@ -27,7 +29,6 @@ function AddCommentInput({
   const feedPostCollectionRef = collection(db, "feed_post");
   const handleSubmitComments = async (e) => {
     e.preventDefault();
-
     if (!loggedInUser && !commentText){
       return;
     }
@@ -49,6 +50,9 @@ function AddCommentInput({
       );
       await addDoc(commentRef, commentData);
       console.log("Comment successfully added!");
+      // state here
+      setCommentCounterIncrementLocal(prevState => prevState + 1);
+      console.log("compteur depis AddCommentInput --> ",commentCounterIncrementLocal)
     } catch (e) {
       console.error("Error adding comment: ", e);
     }
diff --git a/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js b/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js
index ae35423a..8d5ea545 100644
--- a/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js
+++ b/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./DropDownMenu.css";
-
+import { updateDoc, doc } from "firebase/firestore";
+import { db } from "../../../Configs/firebase";
 function DropDownMenu({
   dropdownStates,
   id,
@@ -13,13 +14,42 @@ function DropDownMenu({
   userType,
   userId,
   isPostsCommentsDisplay,
+  commentId,
+  postId,
 }) {
-  // Backend here
-  const isOwner = true;
-  // console.log(loggedInUserId);
-  console.log(
-   "", postCreatorId,
-    loggedInUserId)
+  async function handleDeleteComments(e) {
+    try {
+      // Créer une référence vers le commentaire que vous souhaitez supprimer
+      const commentRef = doc(
+        db,
+        `feed_post/${postId}/post_comments/${commentId}`
+      );
+
+      // Mettre à jour le champ 'status' en le mettant à false
+      await updateDoc(commentRef, {
+        status: false,
+      });
+
+      console.log("Le status a bien été passé à false");
+    } catch (error) {
+      console.error("Erreur lors de la mise à jour du statut:", error);
+    }
+  }
+  async function handleDeletePosts(e) {
+    try {
+      // Créer une référence vers le commentaire que vous souhaitez supprimer
+      const postRef = doc(db, `feed_post/${id}`);
+
+      // Mettre à jour le champ 'status' en le mettant à false
+      await updateDoc(postRef, {
+        status: false,
+      });
+
+      console.log("Le status a bien été passé à false");
+    } catch (error) {
+      console.error("Erreur lors de la mise à jour du statut:", error);
+    }
+  }
   return (
     <>
       <section
@@ -46,12 +76,25 @@ function DropDownMenu({
         }
       >
         <ul id={id}>
-          {/* {postCreatorId == loggedInUserId && ( */}
-          <>
-            <li>Supprimer</li>
-            <div className="separation-line-dropdown-menu"></div>
-          </>
-          {/* )} */}
+          {isPostsCommentsDisplay ? (
+            <>
+              {userId === loggedInUserId && (
+                <>
+                  <li onClick={handleDeleteComments}>Supprimer</li>
+                  <div className="separation-line-dropdown-menu"></div>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              {postCreatorId === loggedInUserId && (
+                <>
+                  <li onClick={handleDeletePosts}>Supprimer</li>
+                  <div className="separation-line-dropdown-menu"></div>
+                </>
+              )}
+            </>
+          )}
           {isPostsCommentsDisplay ? (
             <>
               <li onClick={() => handleClickCopyPostLink(userId, userType)}>
diff --git a/client/src/Components/PostsComponents/HeadOfPost/HeadOfPost.js b/client/src/Components/PostsComponents/HeadOfPost/HeadOfPost.js
index 84271ae2..622c24e0 100644
--- a/client/src/Components/PostsComponents/HeadOfPost/HeadOfPost.js
+++ b/client/src/Components/PostsComponents/HeadOfPost/HeadOfPost.js
@@ -33,6 +33,7 @@ function HeadOfPost({
   loggedInUserId,
   isFullPagePostModalDisplay,
   fullPagePostModalStyle,
+  userType,
 }) {
   // const [isPostTypePremium, setIsPostTypePremium] = useState([
   //   postType
@@ -124,6 +125,8 @@ function HeadOfPost({
     addSuffix: true,
   });
   postDate = postDate.replace("environ ", "");
+  // console.log("postCreatorId --> ",postCreatorId)
+  // console.log("loggedInUserId --> ",loggedInUserId)
   return (
     <div
       className={
@@ -215,6 +218,7 @@ function HeadOfPost({
               fullPagePostPageStyle={fullPagePostPageStyle}
               dropDownStatesFullPagePostModal={dropDownStatesFullPagePostModal}
               fullPagePostModalStyle={fullPagePostModalStyle} // à voir si ça créer des conflits de css
+              userType={userType}
             />
           </>
         )}
@@ -228,6 +232,7 @@ function HeadOfPost({
               fullPagePostPageStyle={fullPagePostPageStyle}
               dropDownStatesFullPagePostModal={dropDownStatesFullPagePostModal}
               fullPagePostModalStyle={fullPagePostModalStyle}
+              userType={userType}
             />
           </>
         )}
diff --git a/client/src/Components/PostsComponents/LikesCommentsCounter/LikesCommentsCounter.js b/client/src/Components/PostsComponents/LikesCommentsCounter/LikesCommentsCounter.js
index 39cc748b..395c25b6 100644
--- a/client/src/Components/PostsComponents/LikesCommentsCounter/LikesCommentsCounter.js
+++ b/client/src/Components/PostsComponents/LikesCommentsCounter/LikesCommentsCounter.js
@@ -22,6 +22,7 @@ function LikesCommentsCounter({
   isMediaQueriesFullPagePostDisabled,
   fullPagePostModalStyle,
   fullPagePostPageStyle,
+  commentCounterIncrementLocal
 }) {
   const [pluralLikes, setPluralLikes] = useState();
   useEffect(() => {
@@ -32,6 +33,7 @@ function LikesCommentsCounter({
     }
   }, []);
 
+  // postLikes + commentCounterIncrementLocal
   return (
     <div
       className={
@@ -115,7 +117,7 @@ function LikesCommentsCounter({
           }
         >
           <Link onClick={setIsPostClicked}>
-            {postCommentNumber} comments
+            {postCommentNumber + commentCounterIncrementLocal} comments
           </Link>
         </div>
       </div>
diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.js b/client/src/Components/PostsComponents/PostsComments/PostsComments.js
index cf121648..8b320137 100644
--- a/client/src/Components/PostsComponents/PostsComments/PostsComments.js
+++ b/client/src/Components/PostsComponents/PostsComments/PostsComments.js
@@ -228,6 +228,7 @@ function PostsComments({
                       handleClickCopyPostLink={handleClickCopyPostLink}
                       postCreatorId={postCreatorId}
                       loggedInUserId={loggedInUserId}
+                      postId={postId}
                     />
                   </>
                 )}
diff --git a/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js b/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js
index 435af9d1..d5bf75e8 100644
--- a/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js
+++ b/client/src/Components/PostsComponents/PostsFeed/PostsFeed.js
@@ -45,10 +45,15 @@ function PostsFeed({
   polldata,
   // singlePostData,
   postFeedHomeStyle,
+  userType,
+  setCommentCounterIncrementLocal,
+  commentCounterIncrementLocal,
 }) {
   const [isPostClicked, setIsPostClicked] = useState(false);
   const [isModdleToggled, setIsModalToggled] = useState(false);
   const [commentsLengthPostsFeed, setCommentLengthPostsFeed] = useState();
+  // const [commentCounterIncrementLocal, setCommentCounterIncrementLocal] =
+  //   useState(0);
   function handleClickShowComment(e) {
     e.preventDefault();
     setIsPostClicked(true);
@@ -82,9 +87,6 @@ function PostsFeed({
       );
     }
   }
-  // console.log("id de postfeed --> ",id)
-  // console.log(postCommentNumber);
-  console.log(postPicture);
   return (
     <>
       <div
@@ -125,6 +127,8 @@ function PostsFeed({
               //
               handleDropdownPostFeedClick={handleDropdownPostFeedClick}
               handleClickCopyPostLink={handleClickCopyPostLink}
+              loggedInUserId={loggedInUser?.id}
+              userType={userType}
             />
           </div>
           <PostsDescription
@@ -151,12 +155,18 @@ function PostsFeed({
             postCommentNumber={postCommentNumber}
             postId={id}
             loggedInUserId={loggedInUser?.id}
+            commentCounterIncrementLocal={commentCounterIncrementLocal}
           />
           <div className="show-comments-button-publication">
             <Link onClick={(e) => handleClickShowComment(e)}>
-              Voir{postCommentNumber > 1 ? " les" : ""}{" "}
-              {postCommentNumber > 1
-                ? postCommentNumber + " commentaires"
+              Voir
+              {postCommentNumber + commentCounterIncrementLocal > 1
+                ? " les"
+                : ""}{" "}
+              {postCommentNumber + commentCounterIncrementLocal > 1
+                ? postCommentNumber +
+                  commentCounterIncrementLocal +
+                  " commentaires"
                 : "commentaire(s)"}
             </Link>
           </div>
@@ -173,6 +183,8 @@ function PostsFeed({
             postFeedHomeStyle={postFeedHomeStyle}
             loggedInUser={loggedInUser}
             postId={id}
+            setCommentCounterIncrementLocal={setCommentCounterIncrementLocal}
+            commentCounterIncrementLocal={commentCounterIncrementLocal}
           />
         </div>
       </div>
@@ -210,6 +222,9 @@ function PostsFeed({
             isFullPagePostModalDisplay={true}
             fullPagePostModalStyle={true}
             setCommentLengthPostsFeed={setCommentLengthPostsFeed}
+            userType={userType}
+            commentCounterIncrementLocal={commentCounterIncrementLocal}
+
             // postType={singlePostData.postType === "normal"}
           />
         </Modal>
diff --git a/client/src/Pages/FullPagePost/FullPagePost.js b/client/src/Pages/FullPagePost/FullPagePost.js
index 2f3c387a..08d28dcc 100644
--- a/client/src/Pages/FullPagePost/FullPagePost.js
+++ b/client/src/Pages/FullPagePost/FullPagePost.js
@@ -10,7 +10,13 @@ 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,
+  where,
+} from "firebase/firestore";
 
 function FullPagePost({
   id,
@@ -39,6 +45,8 @@ function FullPagePost({
   fullPagePostModalStyle,
   loggedInUser,
   setCommentLengthPostsFeed,
+  userType,
+  commentCounterIncrementLocal,
 }) {
   const [
     isMediaQueriesFullPagePostDisabled,
@@ -65,7 +73,11 @@ function FullPagePost({
 
   useEffect(() => {
     const commentsRef = collection(db, `feed_post/${id}/post_comments`);
-    const q = query(commentsRef, orderBy("createdAt", "desc"));
+    const q = query(
+      commentsRef,
+      where("status", "==", true)
+      // orderBy("createdAt", "desc")
+    );
 
     const unsubscribe = onSnapshot(q, (querySnapshot) => {
       const comments = [];
@@ -74,8 +86,10 @@ function FullPagePost({
         commentData.commentId = doc.id;
         comments.push(commentData);
       });
+      comments.sort((a, b) => b.createdAt.seconds - a.createdAt.seconds);
       setComments(comments);
     });
+    setCommentLengthPostsFeed(comments.length);
 
     return () => {
       unsubscribe();
@@ -118,7 +132,7 @@ function FullPagePost({
   function handleDropdownPostFeedClick() {
     // console.log("je m'appelle rami");
   }
-  setCommentLengthPostsFeed(comments.length);
+  // setCommentLengthPostsFeed(comments.length);
   function handleClickCopyPostLink(userId, userType) {
     userType === "athlete"
       ? navigator.clipboard.writeText(
@@ -128,7 +142,6 @@ function FullPagePost({
           `https://staging.sofan.app/userprofile/${userId}`
         );
   }
-  // console.log(comments)
   return (
     <>
       <div
@@ -221,6 +234,7 @@ function FullPagePost({
                   handleClickCopyPostLink={handleClickCopyPostLink}
                   isFullPagePostModalDisplay={isFullPagePostModalDisplay}
                   fullPagePostModalStyle={fullPagePostModalStyle}
+                  userType={userType}
                 />
               </div>
               <PostsDescription
@@ -253,6 +267,7 @@ function FullPagePost({
                   }
                   fullPagePostModalStyle={fullPagePostModalStyle}
                   fullPagePostPageStyle={fullPagePostPageStyle}
+                  commentCounterIncrementLocal={commentCounterIncrementLocal}
                 />
               </div>
               <div
@@ -296,6 +311,7 @@ function FullPagePost({
                           isMediaQueriesFullPagePostDisabled
                         }
                         handleClickCopyPostLink={handleClickCopyPostLink}
+                        postId={id}
                       />
                     </>
                   );
diff --git a/client/src/Pages/Home/Home.js b/client/src/Pages/Home/Home.js
index 144014b6..c75077f7 100644
--- a/client/src/Pages/Home/Home.js
+++ b/client/src/Pages/Home/Home.js
@@ -55,6 +55,8 @@ function Home({
   const [suggestionsAthletes, setSuggestionsAthletes] = useState([]);
   const suggestionCollectionAthlete = collection(db, "users");
   const [commentCounts, setCommentCounts] = useState({});
+  const [commentCounterIncrementLocal, setCommentCounterIncrementLocal] =
+    useState(0);
   function handleDisplayPremiumContent(i) {
     if (isUserFan === false && dataPost[i]?.visibility === false) {
       return true;
@@ -66,20 +68,23 @@ function Home({
   }
   const getCommentCount = async (postId) => {
     const commentsRef = collection(db, `feed_post/${postId}/post_comments`);
-    const q = query(commentsRef, orderBy("createdAt", "desc"));
+    const q = query(commentsRef, where("status", "==", true));
+
     const querySnapshot = await getDocs(q);
     const commentCount = querySnapshot.size;
+
     setCommentCounts((prevState) => ({ ...prevState, [postId]: commentCount }));
   };
+
   useEffect(() => {
     setIsLoading(true);
 
-    const feedPostCollectionRef = collection(db, "feed_post"); // Make sure to set your collection name
+    const feedPostCollectionRef = collection(db, "feed_post");
     const q = query(
       feedPostCollectionRef,
       where("status", "==", true),
       orderBy("createdAt", "desc")
-    ); // Order by 'createdAt' in descending order
+    );
 
     const unsubscribe = onSnapshot(q, (querySnapshot) => {
       const feedData = [];
@@ -160,7 +165,7 @@ function Home({
   useEffect(() => {
     console.log(dataPost);
   }, [dataPost]);
-
+  // console.log(loggedInUser?.account_type)
   return (
     <>
       <section className="home-component">
@@ -256,6 +261,13 @@ function Home({
                       handleClickCopyPostLink={handleClickCopyPostLink}
                       postFeedHomeStyle={true}
                       postCommentNumber={commentCounts[post.id] || 0}
+                      userType={loggedInUser?.account_type}
+                      commentCounterIncrementLocal={
+                        commentCounterIncrementLocal
+                      }
+                      setCommentCounterIncrementLocal={
+                        setCommentCounterIncrementLocal
+                      }
                     />
                   );
                 })}