fix: giphies with replies

Author: isekovanic

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -617,7 +617,8 @@ export const MessageContent = (props: MessageContentProps) => {
   const messageHasSingleFile =
     messageContentOrder.length === 1 && messageContentOrder[0] === 'files' && isSingleFile;
   const messageHasOnlyText = messageContentOrder.length === 1 && messageContentOrder[0] === 'text';
-  const messageHasGiphyOrImgur =
+  const messageHasStandaloneGiphyOrImgur =
+    !message.quoted_message &&
     otherAttachments.filter(
       (file) => file.type === FileTypes.Giphy || file.type === FileTypes.Imgur,
     ).length > 0;
@@ -627,17 +628,20 @@ export const MessageContent = (props: MessageContentProps) => {
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur;
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingHorizontal =
-    messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasGiphyOrImgur;
+    messageHasPoll ||
+    messageHasSingleMedia ||
+    messageHasSingleFile ||
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingBottom =
     messageHasPoll ||
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur ||
+    messageHasStandaloneGiphyOrImgur ||
     (messageContentOrder.length > 1 &&
       messageContentOrder[messageContentOrder.length - 1] === 'text');
 

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -17,6 +17,7 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../../hooks/useStableCallback';
 
 import { primitives } from '../../../theme';
+import { FileTypes } from '../../../types/types';
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
 import { useMessageData } from '../hooks/useMessageData';
 
@@ -293,10 +294,14 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   });
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const hasStandaloneGiphyOrImgur =
+    !message.quoted_message &&
+    otherAttachments.length > 0 &&
+    (otherAttachments[0].type === FileTypes.Giphy || otherAttachments[0].type === FileTypes.Imgur);
 
   let noBorder = onlyEmojis && !message.quoted_message;
   if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+    if (hasStandaloneGiphyOrImgur && !isMyMessage) {
       noBorder = false;
     } else {
       noBorder = true;
@@ -306,10 +311,8 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   let backgroundColor = semantics.chatBgOutgoing;
   if (onlyEmojis && !message.quoted_message) {
     backgroundColor = 'transparent';
-  } else if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = 'transparent';
-    }
+  } else if (hasStandaloneGiphyOrImgur) {
+    backgroundColor = 'transparent';
   } else if (isMessageReceivedOrErrorType) {
     backgroundColor = semantics.chatBgIncoming;
   }

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js

@@ -7,7 +7,10 @@ import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateVideoAttachment } from '../../../../mock-builders/generator/attachment';
+import {
+  generateGiphyAttachment,
+  generateVideoAttachment,
+} from '../../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
@@ -326,6 +329,46 @@ describe('MessageContent', () => {
     expect(contentContainerStyle.paddingBottom).toBe(0);
   });
 
+  it('keeps content padding for a quoted reply with a giphy attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('giphy-attachment')).toBeTruthy();
+    });
+
+    const giphyAttachment = screen.getByTestId('giphy-attachment');
+    let ancestor = giphyAttachment.parent;
+    let contentContainerStyle;
+
+    while (ancestor && !contentContainerStyle) {
+      const flattenedStyle = StyleSheet.flatten(ancestor.props.style);
+      if (
+        flattenedStyle &&
+        'paddingTop' in flattenedStyle &&
+        'paddingHorizontal' in flattenedStyle &&
+        'paddingBottom' in flattenedStyle
+      ) {
+        contentContainerStyle = flattenedStyle;
+        break;
+      }
+      ancestor = ancestor.parent;
+    }
+
+    expect(contentContainerStyle).toBeTruthy();
+    expect(contentContainerStyle.paddingTop).toBeGreaterThan(0);
+    expect(contentContainerStyle.paddingHorizontal).toBeGreaterThan(0);
+    expect(contentContainerStyle.paddingBottom).toBeGreaterThan(0);
+  });
+
   it('renders the FileAttachment component when a file attachment exists', async () => {
     const user = generateUser();
     const message = generateMessage({

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
@@ -10,6 +10,7 @@ import { useMessageContext } from '../../../../contexts/messageContext/MessageCo
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import { generateGiphyAttachment } from '../../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
@@ -256,4 +257,23 @@ describe('MessageItemView', () => {
       });
     });
   });
+
+  it('keeps the message shell background for a quoted reply with a giphy attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      const wrapperStyle = StyleSheet.flatten(
+        screen.getByTestId('message-content-wrapper').props.style,
+      );
+      expect(wrapperStyle.backgroundColor).not.toBe('transparent');
+    });
+  });
 });