Chat: after deleting a message it disappears only after refresh #2354

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -544,6 +544,8 @@ export default function ChatComponent({
     (messageId: string) => {
       if (isChatChannel) {
         chatMessagesData.deleteChatMessage(messageId);
+      } else {
+        discussionMessagesData.deleteDiscussionMessage(messageId);
       }
     },
     [isChatChannel, chatMessagesData.deleteChatMessage],

src/shared/components/DeleteModal/DeleteModal.tsx

@@ -77,6 +77,7 @@ const DeleteModal: FC<PropsWithChildren<ReportModalProps>> = (props) => {
               return;
             }
 
+            onDeleteOutside?.(entity.id);
             setLoading(false);
             notify("The message has deleted!");
             onClose();

src/shared/components/DeleteModal/index.scss

@@ -46,3 +46,8 @@
 .delete-modal__button-container__cancel {
   margin-right: 0.75rem;
 }
+
+.delete-modal__button-container__send__loader {
+  left: 0;
+  transform: unset;
+}

src/shared/hooks/useCases/useDiscussionMessagesById.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useUpdateEffect } from "react-use";
 import classNames from 'classnames';
@@ -47,6 +47,7 @@ interface Return extends State {
   fetchDiscussionMessages: () => void;
   fetchRepliedMessages: (messageId: string, endDate: Date) => Promise<void>;
   addDiscussionMessage: (discussionMessage: DiscussionMessage) => void;
+  deleteDiscussionMessage: (discussionMessageId: string) => void;
   isEndOfList: Record<string, boolean> | null;
   rawData: DiscussionMessage[] | null;
 }
@@ -123,6 +124,15 @@ export const useDiscussionMessagesById = ({
     );
   };
 
+  const deleteDiscussionMessage = useCallback((discussionMessageId: string) => {
+    dispatch(
+      cacheActions.deleteDiscussionMessageById({
+        discussionId,
+        discussionMessageId
+      })
+    )
+  }, []);
+
   const fetchRepliedMessages = async (messageId: string, endDate: Date): Promise<void> => {
     if (state.data?.find((item) => item.id === discussionId)) {
       return Promise.resolve();
@@ -327,5 +337,6 @@ export const useDiscussionMessagesById = ({
     fetchDiscussionMessages,
     fetchRepliedMessages,
     addDiscussionMessage,
+    deleteDiscussionMessage,
   };
 };

src/store/states/cache/actions.ts

@@ -116,6 +116,13 @@ export const addDiscussionMessageByDiscussionId = createStandardAction(
   discussionMessage: DiscussionMessageWithParsedText;
 }>();
 
+export const deleteDiscussionMessageById = createStandardAction(
+  CacheActionType.DELETE_DISCUSSION_MESSAGE_BY_ID,
+)<{
+  discussionId: string;
+  discussionMessageId: string;
+}>();
+
 export const getProposalStateById = createAsyncAction(
   CacheActionType.GET_PROPOSAL_STATE_BY_ID,
   CacheActionType.GET_PROPOSAL_STATE_BY_ID_SUCCESS,

src/store/states/cache/constants.ts

@@ -23,6 +23,7 @@ export enum CacheActionType {
   UPDATE_DISCUSSION_STATES = "@CACHE/UPDATE_DISCUSSION_STATES",
   UPDATE_DISCUSSION_STATE_BY_DISCUSSION_ID = "@CACHE/UPDATE_DISCUSSION_STATE_BY_DISCUSSION_ID",
   ADD_DISCUSSION_MESSAGE_BY_DISCUSSION_ID = "@CACHE/ADD_DISCUSSION_MESSAGE_BY_DISCUSSION_ID",
+  DELETE_DISCUSSION_MESSAGE_BY_ID = "@CACHE/DELETE_DISCUSSION_MESSAGE_BY_ID",
   UPDATE_DISCUSSION_STATE_BY_DISCUSSION_MESSAGES_ACTUAL_ID = "@CACHE/UPDATE_DISCUSSION_STATE_BY_DISCUSSION_MESSAGES_ACTUAL_ID",
   GET_PROPOSAL_STATE_BY_ID = "@CACHE/GET_PROPOSAL_STATE_BY_ID",
   GET_PROPOSAL_STATE_BY_ID_SUCCESS = "@CACHE/GET_PROPOSAL_STATE_BY_ID_SUCCESS",

src/store/states/cache/reducer.tsx

@@ -174,4 +174,18 @@ export const reducer = createReducer<CacheState, Action>(INITIAL_CACHE_STATE)
           data: updatedDiscussionMessages,
         };
       }),
+  )
+  .handleAction(actions.deleteDiscussionMessageById, (state, { payload }) =>
+    produce(state, (nextState) => {
+      const { discussionMessageId, discussionId } = payload;
+
+      const updatedDiscussionMessages = (
+        state.discussionMessagesStates[discussionId]?.data ?? []
+      ).filter((message) => message.id !== discussionMessageId);
+
+      nextState.discussionMessagesStates[discussionId] = {
+        ...state.discussionMessagesStates[discussionId],
+        data: updatedDiscussionMessages,
+      };
+    }),
   );