init 4

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

@@ -44,7 +44,7 @@ export interface FeedItemBaseContentProps {
   hasImages?: boolean;
   isLoading?: boolean;
   shouldHideBottomContent?: boolean;
-  dmUserId?: string;
+  dmUserIds?: string[];
   hasUnseenMention?: boolean;
   notion?: CommonNotion;
 }

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

@@ -30,14 +30,14 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     useChatContext();
   const user = useSelector(selectUser());
   const userId = user?.uid;
-  const dmUserId =
+  const dmUserIds =
     chatChannel.participants.length === 1
       ? chatChannel.participants[0]
       : chatChannel.participants.filter(
           (participant) => participant !== userId,
         )[0];
   const dmUserName = getUserName(dmUser);
-  const finalTitle = dmUserName;
+  const finalTitle = chatChannel.participants.length > 1 ? "Group" : dmUserName;
 
   const handleOpenChat = useCallback(() => {
     setChatItem({
@@ -82,8 +82,8 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
   useChatChannelSubscription(chatChannel.id, userId, handleChatChannelUpdate);
 
   useEffect(() => {
-    fetchDMUser(dmUserId);
-  }, [dmUserId]);
+    fetchDMUser(dmUserIds);
+  }, [dmUserIds]);
 
   useEffect(() => {
     fetchChatChannelUserStatus({
@@ -129,7 +129,7 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
       ownerId={userId}
       renderImage={renderImage}
       isImageRounded
-      dmUserId={dmUserId}
+      dmUserIds={[dmUserIds]}
     />
   );
 };

src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx

@@ -1,12 +1,11 @@
-import React, { FC, ReactElement, useEffect } from "react";
+import React, { FC, ReactElement, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import Select from "react-select";
 import { Modal, UserAvatar } from "@/shared/components";
 import { useDMUserChatChannel } from "@/shared/hooks/useCases";
 import useThemeColor from "@/shared/hooks/useThemeColor";
 import { SearchIcon } from "@/shared/icons";
-import { DMUser } from "@/shared/interfaces";
-import { Button, Loader } from "@/shared/ui-kit";
+import { Button, ButtonVariant, Loader } from "@/shared/ui-kit";
 import { emptyFunction } from "@/shared/utils";
 import { inboxActions } from "@/store/states";
 import { selectorStyles } from "./components/selectorStyles";
@@ -22,8 +21,8 @@ interface DirectMessageModalProps {
 
 interface SelectOption {
   value: string;
-  user: DMUser;
   label: JSX.Element;
+  uid: string;
 }
 
 const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
@@ -48,9 +47,10 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
     resetDMUserChatChannel,
     error: isChannelLoadedWithError,
   } = useDMUserChatChannel();
+  const [groupUids, setGroupUids] = useState<string[]>([]);
 
-  const handleUserItemClick = (item: DMUser) => {
-    fetchDMUserChatChannel(item.uid);
+  const handleChatCreate = (uid: string[]) => {
+    fetchDMUserChatChannel(uid);
   };
 
   useEffect(() => {
@@ -89,7 +89,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
 
     const options: SelectOption[] = dmUsers.map((user) => ({
       value: user.userName,
-      user: user,
       label: (
         <div className={styles.optionWrapper}>
           <UserAvatar
@@ -101,20 +100,31 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
           <span>{user.userName}</span>
         </div>
       ),
+      uid: user.uid,
     }));
 
-    const handleClick = (item: SelectOption) => {
+    const handleItemClick = (selectedItems) => {
       if (!groupMessage) {
-        handleUserItemClick(item.user);
+        handleChatCreate([selectedItems.uid]);
       } else {
-        console.log("HANDLE GROUP MESSAGE");
+        const uids = selectedItems.map((item) => item.uid);
+        setGroupUids(uids);
       }
     };
 
     return (
       <>
+        {groupMessage && (
+          <Button
+            onClick={() => handleChatCreate(groupUids)}
+            variant={ButtonVariant.PrimaryPink}
+            disabled={!groupUids.length}
+          >
+            Create
+          </Button>
+        )}
         <Select
-          onChange={(item) => handleClick(item as SelectOption)}
+          onChange={(selectedItems) => handleItemClick(selectedItems)}
           isMulti={groupMessage}
           options={options}
           placeholder="Search"
@@ -129,7 +139,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
             IndicatorSeparator: () => null,
           }}
         />
-        {groupMessage && <Button>Create</Button>}
       </>
     );
   };

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

@@ -42,7 +42,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     isImageRounded,
     isProject,
     discussionPredefinedType,
-    dmUserId,
+    dmUserIds,
     commonId,
     hasUnseenMention,
   } = props;
@@ -63,6 +63,7 @@ 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.
@@ -110,8 +111,8 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
   };
 
   const handleAvatarClick = () => {
-    if (onUserSelect && dmUserId) {
-      onUserSelect(dmUserId);
+    if (onUserSelect && dmUserIds) {
+      onUserSelect(dmUserIds[0]);
     } else if (commonId) {
       history.push(getCommonPagePath(commonId));
     }
@@ -157,7 +158,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
           </p>
         </div>
         <div className={styles.bottomContent}>
-          {lastMessage && !checkIsTextEditorValueEmpty(lastMessage) ? (
+          {/* {lastMessage && !checkIsTextEditorValueEmpty(lastMessage) ? (
             <TextEditor
               className={styles.lastMessageContainer}
               editorClassName={classNames(styles.text, styles.lastMessage, {
@@ -172,7 +173,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
             />
           ) : (
             <div />
-          )}
+          )} */}
           <div className={styles.bottomContentRight}>
             <FeedCardTags
               unreadMessages={unreadMessages}

src/services/Proposal.ts

@@ -98,10 +98,10 @@ class ProposalService {
       const proposal = snapshot.data();
 
       if (proposal) {
-        console.log("proposal found!", proposalId);
+        //console.log("proposal found!", proposalId);
         callback(proposal);
       } else {
-        console.log("proposal was not found", proposalId);
+        //console.log("proposal was not found", proposalId);
       }
     });
   };

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: (dmUserId: string[]) => void;
   resetDMUserChatChannel: () => void;
   error?: boolean;
 }
@@ -21,7 +21,7 @@ export const useDMUserChatChannel = (): Return => {
   const userId = user?.uid;
 
   const fetchDMUserChatChannel = useCallback(
-    async (dmUserId: string) => {
+    async (dmUserId: string[]) => {
       if (!userId) {
         return;
       }
@@ -37,13 +37,13 @@ export const useDMUserChatChannel = (): Return => {
       try {
         dmUserChatChannel = await ChatService.getDMUserChatChannel(
           userId,
-          dmUserId,
+          dmUserId[0],
         );
 
         if (!dmUserChatChannel) {
           dmUserChatChannel = await ChatService.createChatChannel([
             userId,
-            dmUserId,
+            ...dmUserId,
           ]);
         }
       } catch (error) {