fix: edited name (#25)

* fix: bugs

* fix: get bookmark call

* disabled search

* fix: edit profile

* feat: search functionality

* docs: update README and COMMENTS

* styles: text-overflow

* fix: edited name

COMMENTS.md

@@ -1,3 +1,5 @@
+### Merged PR #25 (fix: edited name)
+
 ### Merged PR #24 (feat: search functionality)
 
 - **Join** tag line in Landing page

src/components/broadcast-box/BroadcastBox.jsx

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { Box } from "@mui/material";
+import { useSelector } from "react-redux";
 import styles from "./BroadcastBox.module.css";
 import { EllipsisHorizontalIcon } from "assets";
 import { useBroadcastDetails } from "custom-hooks";
@@ -31,6 +32,15 @@ export const BroadcastBox = ({ broadcastDetails }) => {
 
   const navigate = useNavigate();
 
+  const {
+    profile: { status, data },
+  } = useSelector((state) => state.user);
+
+  const fullNameToShow =
+    status === "success" && data.username === username
+      ? `${data.firstName} ${data.lastName}`
+      : `${firstName} ${lastName}`;
+
   const {
     anchorEl,
     setAnchorEl,
@@ -55,9 +65,9 @@ export const BroadcastBox = ({ broadcastDetails }) => {
           postContentText={content}
           postUserProfilePic={profilePic}
           openReplyDialog={openReplyDialog}
+          postUserFullname={fullNameToShow}
           setOpenReplyDialog={setOpenReplyDialog}
           postTimeDurationToShow={timeDurationToShow}
-          postUserFullname={`${firstName} ${lastName}`}
         />
       )}
 
@@ -80,8 +90,8 @@ export const BroadcastBox = ({ broadcastDetails }) => {
       >
         <Box className={styles.container}>
           <BroadcastBoxHeader
+            h2Text={fullNameToShow}
             className={styles.header}
-            h2Text={`${firstName} ${lastName}`}
             linkProps={{
               component: Link,
               to: `${ROUTE_PROFILE}/${username}`,

src/components/comment-box/CommentBox.jsx

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import styles from "./CommentBox.module.css";
 import { Box, Typography } from "@mui/material";
@@ -10,6 +11,15 @@ export const CommentBox = ({ postUsername, comment }) => {
   const { username, profilePic, lastName, firstName, text, createdAt } =
     comment;
 
+  const {
+    profile: { status, data },
+  } = useSelector((state) => state.user);
+
+  const fullNameToShow =
+    status === "success" && data.username === username
+      ? `${data.firstName} ${data.lastName}`
+      : `${firstName} ${lastName}`;
+
   const [timeDurationToShow, setTimeDurationToShow] = useState(
     getTimeDurationToShow(createdAt)
   );
@@ -31,7 +41,7 @@ export const CommentBox = ({ postUsername, comment }) => {
     >
       <Box className={styles.container}>
         <BroadcastBoxHeader
-          h2Text={`${firstName} ${lastName}`}
+          h2Text={fullNameToShow}
           linkProps={{
             component: Link,
             to: `${ROUTE_PROFILE}/${username}`,

src/components/right-sidebar/RightSideBar.jsx

@@ -135,6 +135,7 @@ export const RightSideBar = () => {
           className={styles.inputField}
           placeholder="Search ThinkLoud"
           onChange={handleSearchInputChange}
+          onClick={(event) => event.stopPropagation()}
           startAdornment={
             <InputAdornment position="start">
               <SearchIcon className={styles.searchIcon} />

src/components/single-main-post/SingleMainPost.jsx

@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import { ROUTE_PROFILE } from "utils";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
 import { EllipsisHorizontalIcon } from "assets";
 import { Box, Typography } from "@mui/material";
 import styles from "./SingleMainPost.module.css";
@@ -28,6 +29,15 @@ export const SingleMainPost = ({ details }) => {
     likes: { likeCount, likedBy },
   } = details;
 
+  const {
+    profile: { status, data },
+  } = useSelector((state) => state.user);
+
+  const fullNameToShow =
+    status === "success" && data.username === username
+      ? `${data.firstName} ${data.lastName}`
+      : `${firstName} ${lastName}`;
+
   const {
     anchorEl,
     setAnchorEl,
@@ -57,9 +67,9 @@ export const SingleMainPost = ({ details }) => {
           postContentText={content}
           postUserProfilePic={profilePic}
           openReplyDialog={openReplyDialog}
+          postUserFullname={fullNameToShow}
           setOpenReplyDialog={setOpenReplyDialog}
           postTimeDurationToShow={timeDurationToShow}
-          postUserFullname={`${firstName} ${lastName}`}
         />
       )}
 
@@ -85,7 +95,7 @@ export const SingleMainPost = ({ details }) => {
 
           <Box className={styles.name}>
             <Typography component={Link} to={`${ROUTE_PROFILE}/${username}`}>
-              {`${firstName} ${lastName}`}
+              {fullNameToShow}
             </Typography>
             <Typography component="p">{`@${username} • ${timeDurationToShow}`}</Typography>
           </Box>

src/components/single-main-post/SingleMainPost.module.css

@@ -7,13 +7,18 @@ button.btnMenu_icon svg path {
   display: flex;
   flex-direction: column;
   margin-left: 2rem;
+  max-width: 75%;
 }
 
 .name a {
   color: var(--COLOR-TEXT);
   font-size: 1.6rem;
   font-weight: bold;
+  max-width: 100%;
+  overflow: hidden;
   text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .name a:hover {

src/pages/single-post/SinglePost.jsx

@@ -14,6 +14,9 @@ import {
 
 export const SinglePost = () => {
   const { postId } = useParams();
+  const {
+    profile: { data: profileData },
+  } = useSelector((state) => state.user);
   const { api, propertyToGet } = API_TO_GET_SINGLE_POST;
   const { data: postsData } = useSelector((state) => state.posts);
 
@@ -28,7 +31,11 @@ export const SinglePost = () => {
 
   useScrollToTop();
   useDocumentTitle(
-    status === "success" ? `${data.firstName} ${data.lastName} thinks` : "Post"
+    status === "success"
+      ? profileData.username === data.username
+        ? `${profileData.firstName} ${profileData.lastName} thinks`
+        : `${data.firstName} ${data.lastName} thinks`
+      : "Post"
   );
 
   useEffect(() => {