FIX | Drop selected messages and back to default chat view mode after add/delete chat members (#22)

BANK-1144: GROUP. Масові дії з повідомленнями
Co-authored-by: Vitalik Yatsenko <vitalik@noreply.localhost>
Reviewed-on: #22
Co-authored-by: Oksana Stepanenko <oksana.stepanenko@jetup.team>
Co-committed-by: Oksana Stepanenko <oksana.stepanenko@jetup.team>

src/containers/Chats/hooks/use-edit-group-chat.hook.ts

@@ -5,7 +5,7 @@ import {
   IChatDetails,
   IChatMember,
   useEventsListener,
-  useSocketListener
+  useSocketListener,
 } from "@/shared";
 import { getProfile } from "@/store/account";
 import { selectSelectedChatId } from "@/store/chats";
@@ -15,6 +15,7 @@ import _ from "lodash";
 import { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { transformShrotUserToChatMember } from "../transforms";
+import { appEvents } from "@/shared/events";
 
 export const useEditGroupChat = (id?: number) => {
   const [chatDetails, setChatDetails] = useState<IChatDetails>(null);
@@ -47,11 +48,11 @@ export const useEditGroupChat = (id?: number) => {
         setMembers(members);
       } else {
         const admins = members?.filter(
-          it => it.role === ChatMemberRole.Admin && !it.isDeleted
+          (it) => it.role === ChatMemberRole.Admin && !it.isDeleted
         );
-        const adminsIds = admins?.map(it => it.userId);
+        const adminsIds = admins?.map((it) => it.userId);
         const membersWithoutAdmins = members?.filter(
-          it => !adminsIds?.includes(it.userId) && !it.isDeleted
+          (it) => !adminsIds?.includes(it.userId) && !it.isDeleted
         );
 
         const membersWithAdminsAtBeginning = admins?.concat(
@@ -76,19 +77,16 @@ export const useEditGroupChat = (id?: number) => {
 
   const onAddUsersToChat = async () => {
     try {
-      if (!_.isEmpty(membersIdsToAdd))
-        console.log("mmebers ids to add", membersIdsToAdd);
-
-      // const usersIds = selectUsers.map((user) => user.id);
-
-      await chatMembersService.addMember({
-        chatId,
-        usersIds: membersIdsToAdd
-      });
+      if (!_.isEmpty(membersIdsToAdd)) {
+        await chatMembersService.addMember({
+          chatId,
+          usersIds: membersIdsToAdd,
+        });
+        appEvents.emit("onAddMember", {});
+        fetchDetails();
+      }
 
       simpleDispatch(new UnselectAllUsers());
-
-      fetchDetails();
     } catch (error) {
       console.log(error);
     }
@@ -98,13 +96,13 @@ export const useEditGroupChat = (id?: number) => {
     memberId: number;
     role: ChatMemberRole;
   }) => {
-    const member = _.find(chatMembers, member => member.id === data.memberId);
+    const member = _.find(chatMembers, (member) => member.id === data.memberId);
     if (member) {
       const changeMember = (member: IChatMember) => {
         if (member.id === data.memberId)
           return {
             ...member,
-            role: data.role
+            role: data.role,
           };
 
         return member;
@@ -114,7 +112,7 @@ export const useEditGroupChat = (id?: number) => {
       setMembers(
         _.sortBy(
           changedMembers,
-          member => member.role === ChatMemberRole.Member
+          (member) => member.role === ChatMemberRole.Member
         )
       );
 
@@ -124,38 +122,40 @@ export const useEditGroupChat = (id?: number) => {
   };
 
   const onDeleteMember = (data: { memberId: number }) => {
-    const member = _.find(chatMembers, member => member.id === data.memberId);
+    const member = _.find(chatMembers, (member) => member.id === data.memberId);
     if (member) {
       const changedMembers = chatMembers.filter(
-        member => member.id !== data.memberId
+        (member) => member.id !== data.memberId
       );
       setMembers(changedMembers);
     }
 
     const allMembers = chatDetails.chatMembers.filter(
-      member => member.id !== data.memberId
+      (member) => member.id !== data.memberId
     );
     setChatDetails({ ...chatDetails, chatMembers: allMembers });
   };
 
   useEffect(() => {
-    const activeMembers = chatDetails?.chatMembers?.filter(it => !it.isDeleted);
-    const activeMembersIds = activeMembers?.map(it => it.userId);
+    const activeMembers = chatDetails?.chatMembers?.filter(
+      (it) => !it.isDeleted
+    );
+    const activeMembersIds = activeMembers?.map((it) => it.userId);
 
-    const selectedMembersToAdd = selectedUsers.map(it =>
+    const selectedMembersToAdd = selectedUsers.map((it) =>
       transformShrotUserToChatMember(chatId, it)
     );
-    const chatMembersToAddIds = selectedMembersToAdd?.map(it => it.userId);
+    const chatMembersToAddIds = selectedMembersToAdd?.map((it) => it.userId);
 
     const membersIdsToAdd = chatMembersToAddIds?.filter(
-      id => !activeMembersIds?.includes(id)
+      (id) => !activeMembersIds?.includes(id)
     );
 
     setMembersIdsToAdd(membersIdsToAdd);
   }, [chatDetails, chatMembers]);
 
   const setMemberRole = (members: IChatMember[]) => {
-    const member = _.find(members, member => member?.userId === account.id);
+    const member = _.find(members, (member) => member?.userId === account.id);
     setRole(member?.role ? member?.role : ChatMemberRole.Member);
   };
 
@@ -186,7 +186,7 @@ export const useEditGroupChat = (id?: number) => {
   useEventsListener("onChangeMemberRole", onChangeMemberRole, [chatMembers]);
   useEventsListener("onDeleteMember", onDeleteMember, [
     chatMembers,
-    selectedUsers
+    selectedUsers,
   ]);
 
   useSocketListener("chat/edit-chat", onEditChat, [chatDetails]);
@@ -199,6 +199,6 @@ export const useEditGroupChat = (id?: number) => {
     role,
     previewImg,
     setPreviewImg,
-    onAddUsersToChat
+    onAddUsersToChat,
   };
 };

src/containers/Chats/hooks/use-selected-messages.hook.tsx

@@ -1,7 +1,7 @@
 import _ from "lodash";
 import { IChatMessage } from "../plugins/interfaces";
 import { create } from "zustand";
-import { ChatMemberRole, MessageType } from "@/shared";
+import { ChatMemberRole, MessageType, useEventsListener } from "@/shared";
 import { ChatMessageActionEnum, ChatViewModeEnum } from "../enums";
 import { useChatViewModeState } from "./use-chat-view-mode-state.hook";
 import { appEvents } from "@/shared/events";
@@ -159,6 +159,9 @@ export const useChatSelectedMessages = ({ infoMessageApi }: IProps) => {
     appEvents.emit("openSelectedMessagesMenuOptions", { items: options });
   };
 
+  useEventsListener("onDeleteMember", afterAction, []);
+  useEventsListener("onAddMember", afterAction, []);
+
   return {
     openSelectedMessagesMenu,
   };

src/shared/events/index.ts

@@ -21,6 +21,7 @@ export type AppEvents = {
 
   onChangeMemberRole: { memberId: number; role: ChatMemberRole };
   onDeleteMember: { memberId: number };
+  onAddMember: {};
   onFirstTaskComment: { taskId: number };
   onFirstTaskDocument: { taskId: number };
   onDeleteAllTaskDocs: { taskId: number };