diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts index edac1a35b6..dc65fb6180 100644 --- a/src/pages/common/components/FeedItem/context.ts +++ b/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 { diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx index 3374ac4d21..28e7f07d71 100644 --- a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx +++ b/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 = (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 = (props) => { [dispatch], ); - const renderImage = (className?: string) => ( - - ); + const renderImage = (className?: string) => + groupMessage ? ( + + ) : ( + + ); useChatChannelSubscription(chatChannel.id, userId, handleChatChannelUpdate); useEffect(() => { - fetchDMUser(dmUserIds); + fetchDMUser(dmUserIds[0]); }, [dmUserIds]); useEffect(() => { @@ -129,7 +137,9 @@ export const ChatChannelItem: FC = (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. /> ); }; diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx index 723bb3ed80..1ba01ecfa1 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx @@ -45,6 +45,8 @@ export const FeedItemBaseContent: FC = (props) => { dmUserIds, commonId, hasUnseenMention, + groupMessage, + createdBy, } = props; const history = useHistory(); const { getCommonPagePath } = useRoutesContext(); @@ -63,7 +65,6 @@ export const FeedItemBaseContent: FC = (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 = (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 (
= (props) => { {lastMessage && !checkIsTextEditorValueEmpty(lastMessage) ? ( = (props) => { readOnly /> ) : ( -
+ groupMessage && + createdBy && ( + + {`${createdBy} created this group chat`} + + ) )}
=> { + // 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 diff --git a/src/shared/hooks/useCases/useDMUserChatChannel.ts b/src/shared/hooks/useCases/useDMUserChatChannel.ts index ff1456de6b..8875442ee6 100644 --- a/src/shared/hooks/useCases/useDMUserChatChannel.ts +++ b/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; } diff --git a/src/shared/icons/group-chat.icon.tsx b/src/shared/icons/group-chat.icon.tsx new file mode 100644 index 0000000000..6f65eadfc4 --- /dev/null +++ b/src/shared/icons/group-chat.icon.tsx @@ -0,0 +1,56 @@ +import React, { FC } from "react"; + +interface GroupChatIconProps { + className?: string; +} + +const GroupChatIcon: FC = ({ className }) => ( + + + + + + + + + + + + + + + +); + +export default GroupChatIcon; diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts index 5fe92d3c25..b435170119 100644 --- a/src/shared/icons/index.ts +++ b/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";