Merge pull request #2440 from daostack/dev

Sprint 31 Group messages
daostack · Dec 29, 2023 · d683879 · d683879
2 parents e0206a2 + d6bf058
commit d683879
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.tsx b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.tsx
@@ -10,15 +10,15 @@ import {
 import { checkHasAccessToChat } from "@/pages/common/components/CommonTabPanels/components";
 import { InternalLinkData } from "@/shared/components";
 import { ChatType } from "@/shared/constants";
-import { useUserById } from "@/shared/hooks/useCases";
+import { useUsersByIds } from "@/shared/hooks/useCases";
 import {
   Circles,
   CirclesPermissions,
   CommonMember,
   DirectParent,
   PredefinedTypes,
 } from "@/shared/models";
-import { getUserName } from "@/shared/utils";
+import { getUserName, joinWithLast } from "@/shared/utils";
 import { Header } from "./components";
 import styles from "./MobileChat.module.scss";
 
@@ -60,25 +60,34 @@ const MobileChat: FC<ChatProps> = (props) => {
     onInternalLinkClick,
   } = props;
   const { setIsShowFeedItemDetailsModal } = useChatContext();
-  const {
-    fetchUser: fetchDMUser,
-    setUser: setDMUser,
-    data: dmUser,
-  } = useUserById();
+  const { fetchUsers: fetchDMUsers, data: dmUsers } = useUsersByIds();
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const userCircleIds = useMemo(
     () => Object.values(commonMember?.circles.map ?? {}),
     [commonMember?.circles.map],
   );
-  const dmUserId = chatItem?.chatChannel?.participants.filter(
-    (participant) => participant !== userId,
-  )[0];
-  const title =
-    getUserName(dmUser) ||
-    (chatItem?.discussion?.predefinedType === PredefinedTypes.General
-      ? commonName
-      : chatItem?.discussion?.title || "");
+
+  const chatParticipants = chatItem?.chatChannel?.participants;
+  const isDM = chatParticipants && chatParticipants.length > 0;
+  const isGroupMessage = chatParticipants && chatParticipants.length > 2;
+
+  const dmUserIds = useMemo(
+    () =>
+      isDM
+        ? chatParticipants.filter((participant) => participant !== userId)
+        : [],
+    [isDM, userId],
+  );
+
+  const dmUsersNames = dmUsers?.map((user) => getUserName(user));
+  const dmFirstNames = dmUsers?.map((user) => user.firstName);
+  const dmTitle = joinWithLast(isGroupMessage ? dmFirstNames : dmUsersNames);
+  const title = isDM
+    ? dmTitle
+    : chatItem?.discussion?.predefinedType === PredefinedTypes.General
+    ? commonName
+    : chatItem?.discussion?.title;
 
   const hasAccessToChat = useMemo(
     () => checkHasAccessToChat(userCircleIds, chatItem),
@@ -90,12 +99,10 @@ const MobileChat: FC<ChatProps> = (props) => {
   };
 
   useEffect(() => {
-    if (dmUserId) {
-      fetchDMUser(dmUserId);
-    } else {
-      setDMUser(null);
+    if (isDM && dmUserIds.length > 0) {
+      fetchDMUsers(dmUserIds);
     }
-  }, [dmUserId]);
+  }, [isDM, dmUserIds]);
 
   return (
     <>
@@ -109,8 +116,8 @@ const MobileChat: FC<ChatProps> = (props) => {
         header={
           <Header
             titleWrapperClassName={styles.headerTitleWrapper}
-            title={title}
-            userAvatar={dmUser?.photoURL}
+            title={title ?? ""}
+            userAvatar={isDM && !isGroupMessage ? dmUsers?.[0]?.photoURL : ""}
             userName={title}
             onBackClick={onClose}
             onTitleWrapperClick={

diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx
@@ -98,7 +98,7 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
   useChatChannelSubscription(chatChannel.id, userId, handleChatChannelUpdate);
 
   useEffect(() => {
-    fetchDMUsers(dmUserIds); // dm users not including the current user.
+    fetchDMUsers(dmUserIds);
   }, [dmUserIds]);
 
   useEffect(() => {
@@ -123,8 +123,8 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     if (isActive && finalTitle && dmUsersNames) {
       onActiveItemDataChange?.({
         itemId: chatChannel.id,
-        title: dmUsersNames?.[0],
-        image: dmUsers?.[0]?.photoURL,
+        title: finalTitle,
+        image: isGroupMessage ? "" : dmUsers?.[0]?.photoURL,
       });
     }
   }, [isActive, finalTitle, dmUsers?.[0]?.photoURL, dmUsersNames?.[0]]);

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -117,7 +117,7 @@ export default function ChatMessage({
         ));
 
       const parsedText = await getTextFromTextEditorString({
-        textEditorString: parentMessage.text,
+        textEditorString: parentMessage?.text,
         users,
         commonId: discussionMessage.commonId,
         directParent,

diff --git a/...components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.module.scss b/...components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.module.scss
@@ -13,7 +13,6 @@
 }
 
 .name {
-  max-width: 17rem;
   padding: 0.375rem 0.75rem;
   font-family: PoppinsSans, sans-serif;
   font-size: $moderate-xsmall;