Group message in the inbox #2380

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -682,6 +682,7 @@ export default function ChatComponent({
           users={users}
           shouldReinitializeEditor={shouldReinitializeEditor}
           onClearFinished={onClearFinished}
+          groupChat={chatChannel && chatChannel?.participants.length > 2}
         />
         <button
           className={styles.sendIcon}

src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts

@@ -39,7 +39,10 @@ export const useDiscussionChatAdapter = (options: Options): Return => {
   const userId = user?.uid;
   const { data: commonMembers, fetchCommonMembers } = useCommonMembers();
 
-  const allUsers = useMemo(() => commonMembers.map(({ user }) => user), [commonMembers]);
+  const allUsers = useMemo(
+    () => commonMembers.map(({ user }) => user),
+    [commonMembers],
+  );
 
   const discussionUsers = useMemo(
     () => allUsers.filter((user) => user.uid !== userId),

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

@@ -44,9 +44,12 @@ export interface FeedItemBaseContentProps {
   hasImages?: boolean;
   isLoading?: boolean;
   shouldHideBottomContent?: boolean;
-  dmUserId?: string;
+  dmUserIds?: string[];
   hasUnseenMention?: boolean;
   notion?: CommonNotion;
+  isGroupMessage?: boolean;
+  createdBy?: string;
+  hoverTitle?: string;
 }
 
 export interface GetLastMessageOptions {

src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx

@@ -83,7 +83,7 @@ const ProfileContent: FC<ProfileContentProps> = (props) => {
     if (onDMClick) {
       onDMClick();
     } else {
-      fetchDMUserChatChannel(userId);
+      fetchDMUserChatChannel([userId]);
     }
   };
 

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

@@ -1,15 +1,19 @@
-import React, { FC, useCallback, useEffect } from "react";
+import React, { FC, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { useChatContext } from "@/pages/common/components/ChatComponent";
 import { UserAvatar } from "@/shared/components";
 import { LastSeenEntity } from "@/shared/constants";
 import { ChatChannelToDiscussionConverter } from "@/shared/converters";
-import { useChatChannelUserStatus, useUserById } from "@/shared/hooks/useCases";
+import {
+  useChatChannelUserStatus,
+  useUsersByIds,
+} from "@/shared/hooks/useCases";
 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";
@@ -19,7 +23,7 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
   const { chatChannel, isActive, onActiveItemDataChange } = props;
   const dispatch = useDispatch();
   const isTabletView = useIsTabletView();
-  const { fetchUser: fetchDMUser, data: dmUser } = useUserById();
+  const { fetchUsers: fetchDMUsers, data: dmUsers } = useUsersByIds();
   const {
     data: chatChannelUserStatus,
     fetched: isChatChannelUserStatusFetched,
@@ -30,14 +34,23 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     useChatContext();
   const user = useSelector(selectUser());
   const userId = user?.uid;
-  const dmUserId =
-    chatChannel.participants.length === 1
-      ? chatChannel.participants[0]
-      : chatChannel.participants.filter(
-          (participant) => participant !== userId,
-        )[0];
-  const dmUserName = getUserName(dmUser);
-  const finalTitle = dmUserName;
+
+  const isGroupMessage = chatChannel.participants.length > 2;
+  const dmUserIds = useMemo(
+    () =>
+      chatChannel.participants.filter((participant) => participant !== userId),
+    [],
+  );
+
+  const dmUsersNames = dmUsers?.map((user) => getUserName(user));
+  const dmFirstNames = dmUsers?.map((user) => user.firstName);
+  const finalTitle = joinWithLast(isGroupMessage ? dmFirstNames : dmUsersNames);
+  const hoverTitle = isGroupMessage ? joinWithLast(dmUsersNames) : finalTitle;
+  const groupChatCreatorName = getUserName(
+    chatChannel.createdBy === user?.uid
+      ? user
+      : dmUsers?.find((user) => user.uid === chatChannel.createdBy),
+  );
 
   const handleOpenChat = useCallback(() => {
     setChatItem({
@@ -70,20 +83,23 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     [dispatch],
   );
 
-  const renderImage = (className?: string) => (
-    <UserAvatar
-      className={className}
-      photoURL={dmUser?.photoURL}
-      nameForRandomAvatar={dmUserName}
-      userName={dmUserName}
-    />
-  );
+  const renderImage = (className?: string) =>
+    isGroupMessage ? (
+      <GroupChatIcon className={className} />
+    ) : (
+      <UserAvatar
+        className={className}
+        photoURL={dmUsers?.[0]?.photoURL}
+        nameForRandomAvatar={dmUsersNames?.[0]}
+        userName={dmUsersNames?.[0]}
+      />
+    );
 
   useChatChannelSubscription(chatChannel.id, userId, handleChatChannelUpdate);
 
   useEffect(() => {
-    fetchDMUser(dmUserId);
-  }, [dmUserId]);
+    fetchDMUsers(dmUserIds); // dm users not including the current user.
+  }, [dmUserIds]);
 
   useEffect(() => {
     fetchChatChannelUserStatus({
@@ -104,14 +120,14 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
   }, [isChatChannelUserStatusFetched, shouldAllowChatAutoOpen]);
 
   useEffect(() => {
-    if (isActive && finalTitle) {
+    if (isActive && finalTitle && dmUsersNames) {
       onActiveItemDataChange?.({
         itemId: chatChannel.id,
-        title: finalTitle,
-        image: dmUser?.photoURL,
+        title: dmUsersNames?.[0],
+        image: dmUsers?.[0]?.photoURL,
       });
     }
-  }, [isActive, finalTitle, dmUser?.photoURL]);
+  }, [isActive, finalTitle, dmUsers?.[0]?.photoURL, dmUsersNames?.[0]]);
 
   return (
     <FeedItemBaseContent
@@ -129,7 +145,10 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
       ownerId={userId}
       renderImage={renderImage}
       isImageRounded
-      dmUserId={dmUserId}
+      dmUserIds={dmUserIds}
+      isGroupMessage={isGroupMessage}
+      createdBy={groupChatCreatorName}
+      hoverTitle={hoverTitle}
     />
   );
 };

src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss

@@ -7,6 +7,7 @@
   max-height: 29.25rem;
   border-radius: 0;
   box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
+  height: 37rem;
 
   :global(.modal__header-wrapper--with-modal-padding) {
     .modalHeader {
@@ -19,10 +20,6 @@
     padding: 0 1.5rem;
   }
 
-  .modalContent {
-    padding: 0;
-  }
-
   .modalCloseWrapper {
     top: 0.5rem;
     margin: 0;
@@ -31,6 +28,7 @@
   @include tablet {
     max-width: unset;
     max-height: unset;
+    height: 100%;
   }
 }
 
@@ -82,3 +80,22 @@
 .userItem {
   padding: 0.375rem 1.75rem;
 }
+
+.optionWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.userAvatar {
+  margin-right: 0.75rem;
+}
+
+.searchIcon {
+  margin-right: 0.5rem;
+}
+
+.createGroupChatButton {
+  margin-left: auto;
+  margin-top: 1rem;
+  width: 10rem;
+}