Merge pull request #200 from So-Fan/SD-458-Fix-bug-dropdown-button-po…

…st-feed Sd 458 fix bug dropdown button post feed
So-Fan · Sep 1, 2023 · 447632e · 447632e
2 parents 739d092 + 5e49c77
commit 447632e
Show file tree

Hide file tree

Showing 14 changed files with 332 additions and 70 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -20,6 +20,8 @@ import CGU from "./Pages/CGU/CGU";
 import UserContext from "./contexts/UserContext/UserContext";
 import SettingsPage from "./Pages/SettingsPage/SettingsPage";
 import ErrorPage from "./Pages/ErrorPage/ErrorPage";
+import FullPagePost from "./Pages/FullPagePost/FullPagePost";
+import FullPagePostPage from "./Pages/FullPagePostPage/FullPagePostPage";
 
 function App() {
   const [loggedInUser, setLoggedInUser] = useState(null);
@@ -219,6 +221,10 @@ function App() {
                   />
                 }
               />
+              <Route path="/post/:id" element={<FullPagePostPage
+              isLogged={loggedInUser}
+              dataPost={dataPost}
+              />} />
               <Route
                 path="/athleteprofile/:id"
                 element={

diff --git a/client/src/Components/Navbar/Navbar.js b/client/src/Components/Navbar/Navbar.js
@@ -40,7 +40,7 @@ const Navbar = ({
   const [isPageLaunchpadDisplay, setIsPageLaunchpadDisplay] = useState(false);
   // const navigate = useNavigate();
   const location = useLocation();
-  console.log(location.pathname);
+  // console.log(location.pathname);
   function handleSignInButtonClick() {
     // navigate('/login'); // redirect to signin popup
     setIsSignInButtonClicked(true);

diff --git a/client/src/Components/PostsComponents/DropDownButtonMenu/DropDownButtonMenu.js b/client/src/Components/PostsComponents/DropDownButtonMenu/DropDownButtonMenu.js
@@ -10,7 +10,7 @@ function DropDownButtonMenu({
   return (
     <>
       <button
-        onClick={handleDropdownPostFeedClick}
+        onClick={()=>handleDropdownPostFeedClick(id)}
         className={`dropdown-menu-button-container ${dropDownMenuSizeContainer}`}
         id={id?.toString()}
       >

diff --git a/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.css b/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.css
@@ -14,16 +14,16 @@
   text-align: center;
   background-color: white;
 }
-.dropdown-menu-container ul {
+.dropdown-menu-container ul,
+.dropdown-menu-container-fullpagepost-page ul {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   flex-direction: column;
 }
-.dropdown-menu-container a
-/* ,.dropdown-menu-container #link-dropdown-menu  */
- {
+.dropdown-menu-container li,
+.dropdown-menu-container-fullpagepost-page li {
   outline: none;
   margin: 0;
   padding: 0;
@@ -35,14 +35,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
   /* background-color: red; */
 }
 
-.dropdown-menu-container a:hover {
+.dropdown-menu-container li:hover,
+.dropdown-menu-container-fullpagepost-page li:hover {
   color: #f6d463;
   transition: 0.3s;
 }
-
+/* Conditionnal rendering for FullPagePostPage */
+.dropdown-menu-container-fullpagepost-page {
+  z-index: 998 !important;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  font-size: 0.9rem;
+  width: 120px;
+  height: auto;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  position: absolute;
+  /* top: 20% !important;
+  right: 15% ; */
+  text-align: center;
+  background-color: white;
+}
+.dropdown-menu-container-fullpagepost-page a {
+  text-decoration: none;
+  color: black;
+}
 .separation-line-dropdown-menu {
   width: 90%;
   border: 0.3px solid rgba(0, 0, 0, 0.2);

diff --git a/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js b/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js
@@ -2,22 +2,23 @@ import React from "react";
 import "./DropDownMenu.css";
 
 function DropDownMenu({
-  isDropDownMenuCommentClicked,
   dropdownStates,
-  commentId,
-  isAdminLogged,
-  isAthleteLogged,
-  isCommentsOwnerLogged,
+  id,
+  handleClickCopyPostLink,
+  fullPagePostPageStyle,
+  postCreatorId,
 }) {
   // Backend here
   const isOwner = true;
-
+  console.log(id);
   return (
     <>
       <section
-      id={commentId}
+        id={id}
         style={
-          dropdownStates[commentId]
+          fullPagePostPageStyle
+            ? { top: "24%", right: "16%" }
+            : dropdownStates && id && dropdownStates[id]
             ? {
                 top: "95%",
                 right: "-15%",
@@ -27,26 +28,22 @@ function DropDownMenu({
               }
             : { top: "7%", right: "5%" }
         }
-        className="dropdown-menu-container"
+        className={
+          fullPagePostPageStyle
+            ? "dropdown-menu-container-fullpagepost-page"
+            : "dropdown-menu-container"
+        }
       >
-        <ul>
+        <ul id={id}>
           {isOwner && (
             <>
-              <a href="/" id="link-dropdown-menu">
-                <li>Supprimer</li>
-              </a>
-              {/* <div className="separation-line-dropdown-menu"></div>
-              <a href="/" id="link-dropdown-menu">
-                <li>Modifier la publication</li>
-              </a> */}
+              <li>Supprimer</li>
               <div className="separation-line-dropdown-menu"></div>
             </>
           )}
-          <a href="/" id="link-dropdown-menu">
-            <li>Copier le lien</li>
-          </a>
+          <li onClick={() => handleClickCopyPostLink(id)}>Copier le lien</li>
           <div className="separation-line-dropdown-menu"></div>
-          <a href="/athleteprofile" id="link-dropdown-menu">
+          <a target="blank" href={`/athleteprofile/${postCreatorId}`}>
             <li>Voir le profil</li>
           </a>
         </ul>

diff --git a/client/src/Components/PostsComponents/HeadOfPost/HeadOfPost.js b/client/src/Components/PostsComponents/HeadOfPost/HeadOfPost.js
@@ -9,6 +9,7 @@ import { collection, doc, getDoc } from "firebase/firestore";
 import { db } from "../../../Configs/firebase";
 import { useNavigate } from "react-router-dom";
 import spinnerAnimation from "../../../Assets/Image/spinner-animation-small.svg";
+import DropDownMenu from "../DropDownMenu/DropDownMenu";
 
 function HeadOfPost({
   dropDownMenuSize,
@@ -17,7 +18,7 @@ function HeadOfPost({
   publicationTypeHeadOfPostPollPost,
   agePublicationPollPost,
   athleteNamePollPost,
-  handleDropdownPostFeedClick,
+  // handleDropdownPostFeedClick,
   id,
   postCreatorId,
   //
@@ -27,13 +28,51 @@ function HeadOfPost({
   postType,
   fullPagePostHeadOfPostStyle,
   isMediaQueriesFullPagePostDisabled,
+  handleClickCopyPostLink,
+  fullPagePostPageStyle,
 }) {
   // const [isPostTypePremium, setIsPostTypePremium] = useState([
   //   postType
   // ]);
   const [postCreatorData, setPostCreatorData] = useState(null);
+  const [dropdownStates, setDropdownStates] = useState({});
   const navigate = useNavigate();
+  // const handleDropdownPostFeedClick = (idPost) => {
+  //   setDropdownStates((prev) => ({
+  //     ...prev,
+  //     [id]: !prev[idPost],
+  //   }));
+  // };
+  const handleDropdownPostFeedClick = (id) => {
+    // console.log("id:", id);
+    setDropdownStates((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
+  useEffect(() => {
+    function handleClickOutside(event) {
+      const dropdownMenu = document.getElementById(`${id}`);
+      const dropdownButton = document.getElementById(`${id}`);
+      if (
+        dropdownMenu &&
+        dropdownButton &&
+        !dropdownMenu.contains(event.target) &&
+        !dropdownButton.contains(event.target)
+      ) {
+        setDropdownStates((prev) => ({
+          ...prev,
+          [id]: false,
+        }));
+      }
+    }
 
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [id, setDropdownStates]);
   const getPostCreatorData = async (uid) => {
     try {
       if (!uid) {
@@ -71,7 +110,9 @@ function HeadOfPost({
     addSuffix: true,
   });
   postDate = postDate.replace("environ ", "");
-  // console.log(agePublicationPollPost);
+  // console.log("dropdownStates:", dropdownStates);
+  // console.log("id:", id);
+
   return (
     <div
       className={
@@ -152,6 +193,16 @@ function HeadOfPost({
           dropDownMenuSize={dropDownMenuSize}
           id={id}
         />
+        {dropdownStates[id] && (
+          <>
+            <DropDownMenu
+              postCreatorId={postCreatorId}
+              id={id}
+              handleClickCopyPostLink={handleClickCopyPostLink}
+              fullPagePostPageStyle={fullPagePostPageStyle}
+            />
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/client/src/Components/PostsComponents/LikeButton/LikeButton.js b/client/src/Components/PostsComponents/LikeButton/LikeButton.js
@@ -14,8 +14,8 @@ function LikeButton({
   likeButtonSizePollPost,
   postId,
   loggedInUserId,
-  setIsPostClicked,
-  isPostClicked,
+  // setIsPostClicked,
+  // isPostClicked,
   isMediaQueriesFullPagePostDisabled,
 }) {
   const [isPostLiked, setIsPostedLiked] = useState(false);

diff --git a/client/src/Components/PostsComponents/PollPost/PollPost.js b/client/src/Components/PostsComponents/PollPost/PollPost.js
@@ -14,10 +14,10 @@ const PollPost = ({
   pollSecondChoice,
   pollThirdChoice,
   pollFourthChoice,
-  pollDate,
-  pollDateType,
+  // pollDate,
+  // pollDateType,
   //
-  pollTotalVote,
+  // pollTotalVote,
   pollFirstChoiceNumber,
   pollSecondChoiceNumber,
   pollThirdChoiceNumber,
@@ -174,10 +174,13 @@ const PollPost = ({
         <div className="ageofpost-poll-container">
           <div className="ageofpost-poll-wrap">
             <div className="ageofpost-and-timeleft-poll">
-              <div>{pollTotalVote} votes</div>
+              <div>
+                {/* {pollTotalVote}  */}
+                votes</div>
               <div>-</div>
               <div>
-                {pollDate} {pollDateType}
+                {/* {pollDate}  */}
+                {/* {pollDateType} */}
               </div>
             </div>
           </div>