updates 2

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

@@ -47,6 +47,8 @@ export interface FeedItemBaseContentProps {
   dmUserIds?: string[];
   hasUnseenMention?: boolean;
   notion?: CommonNotion;
+  groupMessage?: boolean;
+  createdBy?: string;
 }
 
 export interface GetLastMessageOptions {

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

@@ -1,4 +1,4 @@
-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";
@@ -7,6 +7,7 @@ import { LastSeenEntity } from "@/shared/constants";
 import { ChatChannelToDiscussionConverter } from "@/shared/converters";
 import { useChatChannelUserStatus, useUserById } 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";
@@ -30,14 +31,18 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     useChatContext();
   const user = useSelector(selectUser());
   const userId = user?.uid;
-  const dmUserIds =
-    chatChannel.participants.length === 1
-      ? chatChannel.participants[0]
-      : chatChannel.participants.filter(
-          (participant) => participant !== userId,
-        )[0];
+
+  const groupMessage = chatChannel.participants.length > 2;
+  const dmUserIds = useMemo(
+    () =>
+      chatChannel.participants.filter((participant) => participant !== userId),
+    [],
+  );
+
   const dmUserName = getUserName(dmUser);
-  const finalTitle = chatChannel.participants.length > 2 ? "Group" : dmUserName;
+
+  // TODO: need to find a way to fetch multiple users info by ids.
+  const finalTitle = groupMessage ? "Group" : dmUserName;
 
   const handleOpenChat = useCallback(() => {
     setChatItem({
@@ -70,19 +75,22 @@ 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) =>
+    groupMessage ? (
+      <GroupChatIcon className={className} />
+    ) : (
+      <UserAvatar
+        className={className}
+        photoURL={dmUser?.photoURL}
+        nameForRandomAvatar={dmUserName}
+        userName={dmUserName}
+      />
+    );
 
   useChatChannelSubscription(chatChannel.id, userId, handleChatChannelUpdate);
 
   useEffect(() => {
-    fetchDMUser(dmUserIds);
+    fetchDMUser(dmUserIds[0]);
   }, [dmUserIds]);
 
   useEffect(() => {
@@ -129,7 +137,9 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
       ownerId={userId}
       renderImage={renderImage}
       isImageRounded
-      dmUserIds={[dmUserIds]}
+      dmUserIds={dmUserIds}
+      groupMessage={groupMessage}
+      createdBy={chatChannel.createdBy} // TODO: need to fetch createdBy user name. Check first if it's the current user since we have info already.
     />
   );
 };

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

@@ -45,6 +45,8 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     dmUserIds,
     commonId,
     hasUnseenMention,
+    groupMessage,
+    createdBy,
   } = props;
   const history = useHistory();
   const { getCommonPagePath } = useRoutesContext();
@@ -63,7 +65,6 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     [styles.imageNonRounded]: !shouldImageBeRounded,
     [styles.imageRounded]: shouldImageBeRounded,
   });
-  //const groupMessage = dmUserIds && dmUserIds?.length > 1;
 
   // Here we get either MouseEven, or TouchEven, but I was struggling with importing them from react
   // and use here to have correct types.
@@ -111,13 +112,17 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
   };
 
   const handleAvatarClick = () => {
-    if (onUserSelect && dmUserIds) {
+    if (onUserSelect && dmUserIds && !groupMessage) {
       onUserSelect(dmUserIds[0]);
     } else if (commonId) {
       history.push(getCommonPagePath(commonId));
     }
   };
 
+  const lastMessageClassName = classNames(styles.text, styles.lastMessage, {
+    [styles.lastMessageActive]: isActive || (isExpanded && isMobileView),
+  });
+
   return (
     <div
       className={classNames(styles.container, {
@@ -161,18 +166,20 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
           {lastMessage && !checkIsTextEditorValueEmpty(lastMessage) ? (
             <TextEditor
               className={styles.lastMessageContainer}
-              editorClassName={classNames(styles.text, styles.lastMessage, {
-                [styles.lastMessageActive]:
-                  isActive || (isExpanded && isMobileView),
-              })}
+              editorClassName={lastMessageClassName}
               value={lastMessage}
               elementStyles={{
                 mention: isActive ? styles.mentionText : "",
               }}
               readOnly
             />
           ) : (
-            <div />
+            groupMessage &&
+            createdBy && (
+              <span className={lastMessageClassName}>
+                {`${createdBy} created this group chat`}
+              </span>
+            )
           )}
           <div className={styles.bottomContentRight}>
             <FeedCardTags

src/services/Chat.ts

@@ -81,6 +81,7 @@ class ChatService {
     currentUserId: string,
     dmUserIds: string[],
   ): Promise<ChatChannel | null> => {
+    // What is it? Looks like this condition is never fulfilled because dmUserIds never includes the currrent user.
     if (currentUserId === dmUserIds[0]) {
       return this.getUserOwnChatChannel(currentUserId);
     }
@@ -91,8 +92,8 @@ class ChatService {
     const docSnapshot = snapshot.docs.find((doc) => {
       const { participants } = doc.data();
 
-      // dmUserIds - never includes me.
-      // participants - includes me.
+      // dmUserIds - never includes the currrent user.
+      // participants - includes the currrent user.
 
       if (dmUserIds.length === 1) {
         // Regular 1 on 1 chat

src/shared/hooks/useCases/useDMUserChatChannel.ts

@@ -8,7 +8,7 @@ import { ChatChannel } from "@/shared/models";
 interface Return {
   loading: boolean;
   dmUserChatChannel: ChatChannel | null;
-  fetchDMUserChatChannel: (dmUserId: string[]) => void;
+  fetchDMUserChatChannel: (dmUserIds: string[]) => void;
   resetDMUserChatChannel: () => void;
   error?: boolean;
 }

src/shared/icons/group-chat.icon.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from "react";
+
+interface GroupChatIconProps {
+  className?: string;
+}
+
+const GroupChatIcon: FC<GroupChatIconProps> = ({ className }) => (
+  <svg
+    className={className}
+    width="32"
+    height="32"
+    viewBox="0 0 25 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Layer_1" clip-path="url(#clip0_11827_31255)">
+      <path
+        id="Vector"
+        d="M12.4725 8.84766C8.9225 8.84766 6.03516 12.2649 6.03516 14.4519C6.03516 16.6389 8.91856 17.9824 12.4725 17.9824C16.0265 17.9824 18.9138 16.6389 18.9138 14.4675C18.9138 12.2961 16.0501 8.84766 12.4725 8.84766Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_2"
+        d="M12.4761 8.22478C14.4541 8.22478 16.0577 6.3836 16.0577 4.11239C16.0577 1.84118 14.4541 0 12.4761 0C10.4981 0 8.89453 1.84118 8.89453 4.11239C8.89453 6.3836 10.4981 8.22478 12.4761 8.22478Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_3"
+        d="M20.2311 8.54297C19.1982 8.56446 18.2013 8.92275 17.395 9.56228C19.1227 10.9175 20.2311 12.8389 20.2311 14.2878C20.2304 14.6417 20.1593 14.9921 20.022 15.3188H20.2311C22.866 15.3188 24.9999 14.3112 24.9999 12.6905C24.9999 11.0698 22.866 8.54297 20.2311 8.54297Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_4"
+        d="M20.2352 8.08852C21.7013 8.08852 22.8898 6.72469 22.8898 5.04231C22.8898 3.35993 21.7013 1.99609 20.2352 1.99609C18.7691 1.99609 17.5806 3.35993 17.5806 5.04231C17.5806 6.72469 18.7691 8.08852 20.2352 8.08852Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_5"
+        d="M7.60492 9.56228C6.79862 8.92275 5.80175 8.56446 4.76885 8.54297C2.13395 8.54297 0 11.0737 0 12.6944C0 14.3152 2.13395 15.3227 4.76885 15.3227H4.97791C4.84023 14.9975 4.76917 14.6483 4.76885 14.2956C4.76885 12.8389 5.87725 10.9175 7.60492 9.56228Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_6"
+        d="M4.76888 8.08852C6.23499 8.08852 7.4235 6.72469 7.4235 5.04231C7.4235 3.35993 6.23499 1.99609 4.76888 1.99609C3.30277 1.99609 2.11426 3.35993 2.11426 5.04231C2.11426 6.72469 3.30277 8.08852 4.76888 8.08852Z"
+        fill="#525876"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11827_31255">
+        <rect width="25" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default GroupChatIcon;

src/shared/icons/index.ts

@@ -71,3 +71,4 @@ export { default as ReplyIcon } from "./reply.icon";
 export { default as CopyIcon } from "./copy.icon";
 export { default as HideIcon } from "./hide.icon";
 export { default as InboxFilterIcon } from "./inboxFilter.icon";
+export { default as GroupChatIcon } from "./group-chat.icon";