From 21f12cb6b97d4d5754a1ec5f4c64e9a27e652f32 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Sun, 17 Dec 2023 14:05:09 -0600
Subject: [PATCH] hover title with full usernames ; title for group chat with
 first name only

---
 src/pages/common/components/FeedItem/context.ts  |  1 +
 .../ChatChannelItem/ChatChannelItem.tsx          | 13 ++++++-------
 .../FeedItemBaseContent/FeedItemBaseContent.tsx  |  3 ++-
 src/shared/utils/index.tsx                       |  1 +
 src/shared/utils/joinWithLast.ts                 | 16 ++++++++++++++++
 5 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 src/shared/utils/joinWithLast.ts

diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts
index dc65fb6180..4220ae1fe5 100644
--- a/src/pages/common/components/FeedItem/context.ts
+++ b/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 {
diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx
index c4f7a84613..92d7ef50a7 100644
--- a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
index be9f735b3a..930b7bc0ab 100644
--- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
+++ b/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,
             })}
diff --git a/src/shared/utils/index.tsx b/src/shared/utils/index.tsx
index c0151ea0ec..acafd26b37 100755
--- a/src/shared/utils/index.tsx
+++ b/src/shared/utils/index.tsx
@@ -37,3 +37,4 @@ export * from "./getProjectCircleDefinition";
 export * from "./generateStaticShareLink";
 export * from "./getTheme";
 export * from "./pluralizeWord";
+export * from "./joinWithLast";
diff --git a/src/shared/utils/joinWithLast.ts b/src/shared/utils/joinWithLast.ts
new file mode 100644
index 0000000000..0c211fdde3
--- /dev/null
+++ b/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);
+};