redirect + notifications state handle

So-Fan · Aug 20, 2023 · db0ea1a · db0ea1a
1 parent a112305
commit db0ea1a
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 27 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -65,7 +65,7 @@ function App() {
   function handleClickOutside(e) {
     // Navbar
     if (e.target.id === "navbar-user-profile-img") {
-      setIsProfileClicked(true);
+      setIsProfileClicked(!isProfileClicked);
     } else {
       setIsProfileClicked(false);
     }

diff --git a/client/src/Components/Navbar/NavIcon/NavIcon.css b/client/src/Components/Navbar/NavIcon/NavIcon.css
@@ -4,6 +4,7 @@
   padding-left: 10px;
   padding-right: 10px;
   /* padding: 8px; */
+  position: relative;
 }
 .navbar-icon-container:hover {
   background-color: #00000015;
@@ -14,3 +15,12 @@
   width: 20px;
   cursor: pointer;
 }
+.navbar-icon-notifications-red-round{
+  background-color: red;
+  border-radius: 50%;
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  top: 20%;
+  right: 25%;
+}
diff --git a/client/src/Components/Navbar/NavIcon/NavIcon.js b/client/src/Components/Navbar/NavIcon/NavIcon.js
@@ -1,14 +1,19 @@
 import React from "react";
 import "./NavIcon.css";
 
-const NavIcon = ({ src, handleNotificationPopup }) => {
+const NavIcon = ({ src, handleNotificationPopup, isNotificationsRead }) => {
   return (
     <div onClick={handleNotificationPopup} className="navbar-icon-container">
       <img
         className="navbar-icon"
         src={src}
         alt={`${src.split("/").pop().split(".")[0]}`}
       />
+      {!isNotificationsRead && (
+        <>
+          <div className="navbar-icon-notifications-red-round"></div>
+        </>
+      )}
     </div>
   );
 };

diff --git a/client/src/Components/Navbar/Navbar.js b/client/src/Components/Navbar/Navbar.js
@@ -35,6 +35,7 @@ const Navbar = ({
   const handlePixelScrolledAthleteProfilePage = () => {
     setPixelScrolledAthleteProfilePage(window.scrollY);
   };
+  const [isNotificationsRead, setIsNotificationsRead] = useState(false);
   const navigate = useNavigate();
 
   function handleSignInButtonClick() {
@@ -52,19 +53,14 @@ const Navbar = ({
       handlePixelScrolledAthleteProfilePage,
       false
     );
-
-
-  }, [])
+  }, []);
   useEffect(() => {
-
-  if (isSignInButtonClicked || isSignUpButtonClicked) {
-    document.body.style.overflow = 'hidden';
-  } else {
-    document.body.style.overflow = 'auto';
-  }
-
-  }, [isSignInButtonClicked, isSignUpButtonClicked])
-
+    if (isSignInButtonClicked || isSignUpButtonClicked) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isSignInButtonClicked, isSignUpButtonClicked]);
 
   const handlePopoUpSignInSignUpClick = () => {
     setIsSignInButtonClicked(false);
@@ -113,6 +109,7 @@ const Navbar = ({
                 <div className="navbar-wrap-2-navicon-wrap">
                   <div className="navbar-vertical"></div>
                   <NavIcon
+                  isNotificationsRead={isNotificationsRead}
                     handleNotificationPopup={handleNotificationPopup}
                     src={notification}
                   />

diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.css b/client/src/Components/PostsComponents/PostsComments/PostsComments.css
@@ -16,6 +16,12 @@
   max-width: 30px;
   max-height: 30px;
   border-radius: 30px;
+  border: solid 2px white;
+}
+.posts-comments-component-profile-pic-container img:hover {
+  border: solid 2px rgba(0, 0, 0, 0.466);
+  cursor: pointer;
+  transition-duration: 500ms;
 }
 .posts-comments-component-right-container {
   width: 100%;
@@ -26,6 +32,10 @@
   font-size: 16px;
   font-family: "britanica-heavy";
 }
+.posts-comments-component-username:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
 .posts-comments-component-comments {
   font-size: 14px;
   margin-top: 5px;
@@ -80,17 +90,17 @@
   height: 20px;
   /* background-color: burlywood; */
 }
-@media (max-height:900px) {
-  .posts-comments-component-comments-like-and-timestamp{
+@media (max-height: 900px) {
+  .posts-comments-component-comments-like-and-timestamp {
     padding-top: 5px;
   }
 }
 @media (max-width: 1450px) {
-  .posts-comments-component-comments{
+  .posts-comments-component-comments {
     font-size: 12px;
     margin-top: 2px;
   }
-  .posts-comments-component-username{
+  .posts-comments-component-username {
     font-size: 14px;
   }
   .posts-comments-component-comments-like-and-timestamp {
@@ -99,30 +109,29 @@
     height: 12px;
   }
 }
-@media (max-width:900px) {
+@media (max-width: 900px) {
   .posts-comments-component-container {
     /* background-color: RED; */
     /* min-height: 68px; */
     /* height: 68px !important; */
     /* max-height: 68px !important; */
   }
-  .posts-comments-component-profile-pic-container{
+  .posts-comments-component-profile-pic-container {
     /* background-color: darkblue; */
     height: 61px;
   }
-  .posts-comments-component-profile-pic-container img{
-
+  .posts-comments-component-profile-pic-container img {
     width: 25px;
     height: 25px;
     max-width: 25px;
     max-height: 25px;
   }
-  
-  .posts-comments-component-comments{
+
+  .posts-comments-component-comments {
     font-size: 10px;
     margin-top: 2px;
   }
-  .posts-comments-component-username{
+  .posts-comments-component-username {
     font-size: 12px;
   }
   .posts-comments-component-comments-like-and-timestamp {

diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.js b/client/src/Components/PostsComponents/PostsComments/PostsComments.js
@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import "./PostsComments.css";
-import "./PostsCommentsNoMediaQueries.css"
+import "./PostsCommentsNoMediaQueries.css";
 import profilePicFan from "../../../Assets/Image/profilepicmbappecomments.svg";
 import LikeButton from "../LikeButton/LikeButton";
 import DropDownButtonMenu from "../DropDownButtonMenu/DropDownButtonMenu";
 import dropDownImage from "../../../Assets/Image/dropdown.svg";
 import DropDownMenu from "../DropDownMenu/DropDownMenu";
+import { useNavigate } from "react-router-dom";
 function PostsComments({
   likeButtonSizePollPost,
   postId,
@@ -26,6 +27,7 @@ function PostsComments({
   const [isAthleteLogged, setIsAthleteLogged] = useState();
   const [isCommentsOwnerLogged, setisCommentsOwnerLogged] = useState(true);
   const [isCommentLiked, setIsCommentLiked] = useState(false);
+  const navigate = useNavigate();
   function handleCommentLike() {
     setIsCommentLiked(!isCommentLiked);
   }
@@ -50,7 +52,10 @@ function PostsComments({
     }));
     console.log(dropdownStates);
   }
-
+  function redirectToProfileFromComment(e) {
+    // mettre une condition si le commentaire viens d'un utilisateur ou d'un athlete il faut changer le path
+    navigate(`/userprofile/`);
+  }
   return (
     <>
       <div
@@ -66,6 +71,7 @@ function PostsComments({
               ? "posts-comments-component-profile-pic-container-no-media-queries"
               : "posts-comments-component-profile-pic-container"
           }
+          onClick={redirectToProfileFromComment}
         >
           <img src={profilePicFan} alt="" />
         </div>
@@ -89,6 +95,7 @@ function PostsComments({
                   ? "posts-comments-component-username-no-media-queries"
                   : "posts-comments-component-username"
               }
+              onClick={redirectToProfileFromComment}
             >
               DonOfSomething
             </div>

diff --git a/client/src/Components/PostsComponents/PostsComments/PostsCommentsNoMediaQueries.css b/client/src/Components/PostsComponents/PostsComments/PostsCommentsNoMediaQueries.css
@@ -20,6 +20,12 @@
   max-width: 30px;
   max-height: 30px;
   border-radius: 30px;
+  border: solid 2px white;
+}
+.posts-comments-component-profile-pic-container-no-media-queries img:hover {
+  border: solid 2px rgba(0, 0, 0, 0.466);
+  cursor: pointer;
+  transition-duration: 500ms;
 }
 .posts-comments-component-right-container-no-media-queries {
   width: 100%;
@@ -30,6 +36,10 @@
   font-size: 16px;
   font-family: "britanica-heavy";
 }
+.posts-comments-component-username-no-media-queries:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
 .posts-comments-component-comments-no-media-queries {
   font-size: 14px;
   margin-top: 5px;