clicking on a user mention now opens the chat panel with the info ins…

…tead of the profile popup ; eliminated unnecessary UserInfoPopup components calls
daostack · Nov 30, 2023 · 3c923d1 · 3c923d1
1 parent 30edd7d
commit 3c923d1
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 70 deletions.
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -175,6 +175,7 @@ export default function ChatComponent({
       multipleEmojiText: styles.multipleEmojiText,
     },
     onFeedItemClick,
+    onUserClick,
   });
   const {
     chatMessagesData,

diff --git a/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts b/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts
@@ -28,8 +28,13 @@ interface Return {
 }
 
 export const useDiscussionChatAdapter = (options: Options): Return => {
-  const { hasPermissionToHide, textStyles, discussionId, onFeedItemClick } =
-    options;
+  const {
+    hasPermissionToHide,
+    textStyles,
+    discussionId,
+    onFeedItemClick,
+    onUserClick,
+  } = options;
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const { data: commonMembers, fetchCommonMembers } = useCommonMembers();
@@ -46,6 +51,7 @@ export const useDiscussionChatAdapter = (options: Options): Return => {
     users,
     textStyles,
     onFeedItemClick,
+    onUserClick,
   });
   const { markFeedItemAsSeen } = useMarkFeedItemAsSeen();
 

diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx
@@ -51,7 +51,6 @@ import {
 import {
   cacheActions,
   commonActions,
-  commonLayoutActions,
   selectCommonAction,
   selectRecentStreamId,
   selectSharedFeedItem,

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -8,19 +8,15 @@ import React, {
 import classNames from "classnames";
 import { useLongPress } from "use-long-press";
 import { DiscussionMessageService } from "@/services";
-import {
-  ElementDropdown,
-  UserAvatar,
-  UserInfoPopup,
-} from "@/shared/components";
+import { ElementDropdown, UserAvatar } from "@/shared/components";
 import {
   Orientation,
   ChatType,
   EntityTypes,
   QueryParamKey,
 } from "@/shared/constants";
 import { Colors } from "@/shared/constants";
-import { useModal } from "@/shared/hooks";
+//import { useModal } from "@/shared/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModerationFlags } from "@/shared/interfaces/Moderation";
 import {
@@ -146,17 +142,9 @@ export default function ChatMessage({
     (discussionMessage.editedAt?.seconds ?? 0) * 1000,
   );
 
-  const {
-    isShowing: isShowingUserProfile,
-    onClose: onCloseUserProfile,
-    onOpen: onOpenUserProfile,
-  } = useModal(false);
-
   const handleUserClick = () => {
     if (onUserClick && discussionMessageUserId) {
       onUserClick(discussionMessageUserId);
-    } else {
-      onOpenUserProfile();
     }
   };
 
@@ -414,7 +402,7 @@ export default function ChatMessage({
           </>
         )}
       </div>
-      {isShowingUserProfile && isUserDiscussionMessage && (
+      {/* {isShowingUserProfile && isUserDiscussionMessage && (
         <UserInfoPopup
           commonId={discussionMessage.commonId}
           userId={discussionMessage.ownerId}
@@ -423,7 +411,7 @@ export default function ChatMessage({
           onClose={onCloseUserProfile}
           directParent={directParent}
         />
-      )}
+      )} */}
     </li>
   );
 }
diff --git a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
@@ -8,11 +8,7 @@ import React, {
 import classNames from "classnames";
 import { useLongPress } from "use-long-press";
 import { Logger } from "@/services";
-import {
-  ElementDropdown,
-  UserAvatar,
-  UserInfoPopup,
-} from "@/shared/components";
+import { ElementDropdown, UserAvatar } from "@/shared/components";
 import {
   Orientation,
   ChatType,
@@ -21,7 +17,6 @@ import {
 } from "@/shared/constants";
 import { Colors } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
-import { useModal } from "@/shared/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModerationFlags } from "@/shared/interfaces/Moderation";
 import {
@@ -122,17 +117,9 @@ export default function DMChatMessage({
     (discussionMessage.editedAt?.seconds ?? 0) * 1000,
   );
 
-  const {
-    isShowing: isShowingUserProfile,
-    onClose: onCloseUserProfile,
-    onOpen: onOpenUserProfile,
-  } = useModal(false);
-
   const handleUserClick = () => {
     if (onUserClick && discussionMessageUserId) {
       onUserClick(discussionMessageUserId);
-    } else {
-      onOpenUserProfile();
     }
   };
 
@@ -472,7 +459,7 @@ export default function DMChatMessage({
           </>
         )}
       </div>
-      {isShowingUserProfile && isUserDiscussionMessage && (
+      {/* {isShowingUserProfile && isUserDiscussionMessage && (
         <UserInfoPopup
           commonId={discussionMessage.commonId}
           userId={discussionMessage.ownerId}
@@ -481,7 +468,7 @@ export default function DMChatMessage({
           onClose={onCloseUserProfile}
           directParent={directParent}
         />
-      )}
+      )} */}
     </li>
   );
 }
diff --git a/src/shared/components/Chat/ChatMessage/components/UserMention/UserMention.tsx b/src/shared/components/Chat/ChatMessage/components/UserMention/UserMention.tsx
@@ -1,8 +1,6 @@
 import React, { FC } from "react";
 import classNames from "classnames";
-import { UserInfoPopup } from "@/shared/components";
-import { useModal } from "@/shared/hooks";
-import { DirectParent, User } from "@/shared/models";
+import { User } from "@/shared/models";
 import { getUserName } from "@/shared/utils";
 import styles from "../../ChatMessage.module.scss";
 
@@ -11,26 +9,13 @@ interface UserMentionProps {
   userId: string;
   displayName: string;
   mentionTextClassName?: string;
-  commonId?: string;
-  directParent?: DirectParent | null;
   onUserClick?: (userId: string) => void;
 }
 
 const UserMention: FC<UserMentionProps> = (props) => {
-  const {
-    users,
-    userId,
-    displayName,
-    mentionTextClassName,
-    commonId,
-    directParent,
-    onUserClick,
-  } = props;
-  const {
-    isShowing: isShowingUserProfile,
-    onClose: onCloseUserProfile,
-    onOpen: onOpenUserProfile,
-  } = useModal(false);
+  const { users, userId, displayName, mentionTextClassName, onUserClick } =
+    props;
+
   const user = users.find(({ uid }) => uid === userId);
   const withSpace = displayName[displayName.length - 1] === " ";
   const userName = user
@@ -40,8 +25,6 @@ const UserMention: FC<UserMentionProps> = (props) => {
   const handleUserNameClick = () => {
     if (onUserClick) {
       onUserClick(userId);
-    } else {
-      onOpenUserProfile();
     }
   };
 
@@ -53,16 +36,6 @@ const UserMention: FC<UserMentionProps> = (props) => {
       >
         @{userName}
       </span>
-      {!onUserClick && (
-        <UserInfoPopup
-          avatar={user?.photoURL}
-          isShowing={isShowingUserProfile}
-          onClose={onCloseUserProfile}
-          commonId={commonId}
-          userId={user?.uid}
-          directParent={directParent}
-        />
-      )}
     </>
   );
 };

diff --git a/src/shared/components/Chat/ChatMessage/utils/getTextFromSystemMessage.tsx b/src/shared/components/Chat/ChatMessage/utils/getTextFromSystemMessage.tsx
@@ -42,8 +42,6 @@ const renderUserMention = (
       userId={user.uid}
       displayName={getUserName(user)}
       mentionTextClassName={data.mentionTextClassName}
-      commonId={data.commonId}
-      directParent={data.directParent}
       onUserClick={data.onUserClick}
     />
   ) : (

diff --git a/src/shared/components/Chat/ChatMessage/utils/getTextFromTextEditorString.tsx b/src/shared/components/Chat/ChatMessage/utils/getTextFromTextEditorString.tsx
@@ -72,8 +72,6 @@ const getTextFromDescendant = ({
           userId={descendant.userId}
           displayName={descendant.displayName}
           mentionTextClassName={mentionTextClassName}
-          commonId={commonId}
-          directParent={directParent}
           onUserClick={onUserClick}
         />
       );