hover title with full usernames ; title for group chat with first nam…

…e only

src/pages/common/components/FeedItem/context.ts

@@ -49,6 +49,7 @@ export interface FeedItemBaseContentProps {
   notion?: CommonNotion;
   groupMessage?: boolean;
   createdBy?: string;
+  hoverTitle?: string;
 }
 
 export interface GetLastMessageOptions {

src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { join } from "lodash";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { useChatContext } from "@/pages/common/components/ChatComponent";
 import { UserAvatar } from "@/shared/components";
@@ -14,7 +13,7 @@ import { useIsTabletView } from "@/shared/hooks/viewport";
 import { GroupChatIcon } from "@/shared/icons";
 import { ChatChannelFeedLayoutItemProps } from "@/shared/interfaces";
 import { ChatChannel } from "@/shared/models";
-import { getUserName } from "@/shared/utils";
+import { getUserName, joinWithLast } from "@/shared/utils";
 import { inboxActions } from "@/store/states";
 import { FeedItemBaseContent } from "../FeedItemBaseContent";
 import { useChatChannelSubscription, useMenuItems } from "./hooks";
@@ -43,11 +42,10 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     [],
   );
 
-  const dmUsersNames = dmUsers?.map((user) =>
-    groupMessage ? user.firstName : getUserName(user),
-  );
-  // TODO: need to decide for the maximum amount of users to display. Also decide about the format.
-  const finalTitle = join(dmUsersNames, " & ");
+  const dmUsersNames = dmUsers?.map((user) => getUserName(user));
+  const dmFirstNames = dmUsers?.map((user) => user.firstName);
+  const finalTitle = joinWithLast(groupMessage ? dmFirstNames : dmUsersNames);
+  const hoverTitle = groupMessage ? joinWithLast(dmUsersNames) : finalTitle;
   const groupChatCreatorName = getUserName(
     chatChannel.createdBy === user?.uid
       ? user
@@ -150,6 +148,7 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
       dmUserIds={dmUserIds}
       groupMessage={groupMessage}
       createdBy={groupChatCreatorName}
+      hoverTitle={hoverTitle}
     />
   );
 };

src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx

@@ -47,6 +47,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     hasUnseenMention,
     groupMessage,
     createdBy,
+    hoverTitle,
   } = props;
   const history = useHistory();
   const { getCommonPagePath } = useRoutesContext();
@@ -147,7 +148,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
       <div className={styles.content}>
         <div className={styles.topContent}>
           <p
-            title={typeof finalTitle === "string" ? finalTitle : undefined}
+            title={typeof hoverTitle === "string" ? hoverTitle : undefined}
             className={classNames(styles.text, styles.title, {
               [styles.titleActive]: isActive,
             })}

src/shared/utils/index.tsx

@@ -37,3 +37,4 @@ export * from "./getProjectCircleDefinition";
 export * from "./generateStaticShareLink";
 export * from "./getTheme";
 export * from "./pluralizeWord";
+export * from "./joinWithLast";

src/shared/utils/joinWithLast.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns the string array values, separated by a specified separator and lastSeperator for the last item.
+ */
+export const joinWithLast = (
+  arr?: string[],
+  seperator = ", ",
+  lastSeperator = " & ",
+): string => {
+  if (!arr) {
+    return "";
+  }
+  if (arr.length === 1) {
+    return arr[0];
+  }
+  return arr.slice(0, -1).join(seperator) + lastSeperator + arr.slice(-1);
+};