fix(MessageUI): use isDeleted as a flag to determine message deletion

Author: MartinCupela

src/components/Message/MessageUI.tsx

@@ -95,6 +95,8 @@ const MessageUIWithContext = ({
     () => isMessageAIGenerated?.(message),
     [isMessageAIGenerated, message],
   );
+  const isDeleted =
+    !!message.deleted_at || message.type === 'deleted' || message.deleted_for_me;
 
   const finalAttachments = useMemo(
     () =>
@@ -110,7 +112,7 @@ const MessageUIWithContext = ({
     return null;
   }
 
-  if (MessageDeleted && (message.deleted_at || message.type === 'deleted')) {
+  if (MessageDeleted && isDeleted) {
     return <MessageDeleted message={message} />;
   }
 
@@ -121,7 +123,6 @@ const MessageUIWithContext = ({
   const poll = message.poll_id && client.polls.fromState(message.poll_id);
 
   const memberCount = Object.keys(channel?.state?.members ?? {}).length;
-  const isDeleted = !!message.deleted_at;
   const hasAttachment = !isDeleted && messageHasAttachments(message);
   const hasSingleAttachment = !isDeleted && messageHasSingleAttachment(message);
   const hasGiphyAttachment = !isDeleted && messageHasGiphyAttachment(message);
@@ -216,7 +217,7 @@ const MessageUIWithContext = ({
               thread_participants={message.thread_participants}
             />
           )}
-          {message.deleted_at ? (
+          {isDeleted ? (
             <MessageDeletedBubble />
           ) : (
             <>

src/components/Message/__tests__/MessageUI.test.tsx

@@ -202,6 +202,30 @@ describe('<MessageSimple />', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should render deleted message when message type is deleted', async () => {
+    const deletedMessage = generateAliceMessage({
+      type: 'deleted',
+    });
+    const { container, getByTestId } = await renderMessageSimple({
+      message: deletedMessage,
+    });
+    expect(getByTestId('message-deleted-bubble')).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should render deleted message when message is deleted for current user', async () => {
+    const deletedMessage = generateAliceMessage({
+      deleted_for_me: true,
+    });
+    const { container, getByTestId } = await renderMessageSimple({
+      message: deletedMessage,
+    });
+    expect(getByTestId('message-deleted-bubble')).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
   it('should render deleted message with custom component when message was deleted and a custom delete message component was passed', async () => {
     const deletedMessage = generateAliceMessage({
       deleted_at: new Date('2019-12-25T03:24:00').toISOString(),