Merge pull request #639 from GetStream/fix-infite-depth-complexity

Fix Channel infinite depth complexity

Author: nhannah

src/components/Channel/Channel.tsx

@@ -228,7 +228,6 @@ export type ChannelPropsWithContext<
       | 'animatedLongPress'
       | 'Attachment'
       | 'AttachmentActions'
-      | 'FileAttachmentIcon'
       | 'blockUser'
       | 'Card'
       | 'CardCover'
@@ -241,6 +240,7 @@ export type ChannelPropsWithContext<
       | 'dismissKeyboardOnMessageTouch'
       | 'editMessage'
       | 'FileAttachment'
+      | 'FileAttachmentIcon'
       | 'FileAttachmentGroup'
       | 'flagMessage'
       | 'FlatList'
@@ -264,13 +264,12 @@ export type ChannelPropsWithContext<
       | 'Message'
       | 'messageActions'
       | 'MessageAvatar'
-      | 'MessageDeleted'
       | 'MessageContent'
       | 'messageContentOrder'
+      | 'MessageDeleted'
       | 'MessageFooter'
       | 'MessageHeader'
       | 'MessageList'
-      | 'ScrollToBottomButton'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
       | 'MessageSimple'
@@ -288,6 +287,7 @@ export type ChannelPropsWithContext<
       | 'Reply'
       | 'reply'
       | 'retry'
+      | 'ScrollToBottomButton'
       | 'selectReaction'
       | 'supportedReactions'
       | 'threadReply'

src/components/ChannelList/hooks/listeners/useChannelVisible.ts

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import uniqBy from 'lodash/uniqBy';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { getChannel } from '../../utils';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type { Channel, Event } from 'stream-chat';
 
 import type {

src/components/Message/MessageSimple/MessageContent.tsx

@@ -292,7 +292,6 @@ const MessageContentWithContext = <
           MessageStatus={MessageStatus}
           otherAttachments={otherAttachments}
           showMessageStatus={showMessageStatus}
-          testID='message-header'
         />
       )}
       <View onLayout={onLayout} style={wrapper}>
@@ -393,7 +392,6 @@ const MessageContentWithContext = <
       <MessageFooter
         formattedDate={getDateText(formatDate)}
         isDeleted={!!message.deleted_at}
-        testID='message-footer'
       />
     </TouchableOpacity>
   );

src/components/Message/MessageSimple/MessageDeleted.tsx

@@ -5,6 +5,7 @@ import merge from 'lodash/merge';
 import { MessageTextContainer } from './MessageTextContainer';
 
 import {
+  Alignment,
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
@@ -14,6 +15,10 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
+import type { MessageFooterProps } from './MessageFooter';
+
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -40,20 +45,6 @@ const styles = StyleSheet.create({
   },
 });
 
-type MessageDeletedContextProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType
-> = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'alignment' | 'message'
-> &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageFooter'>;
-
 type MessageDeletedComponentProps = {
   formattedDate: string | Date;
   groupStyle: string;
@@ -69,8 +60,12 @@ type MessageDeletedPropsWithContext<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType
-> = MessageDeletedComponentProps &
-  MessageDeletedContextProps<At, Ch, Co, Ev, Me, Re, Us>;
+> = Pick<
+  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  'alignment' | 'message'
+> &
+  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageFooter'> &
+  MessageDeletedComponentProps;
 
 const MessageDeletedWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -140,11 +135,7 @@ const MessageDeletedWithContext = <
           message={{ ...message, text: '_Message deleted_' }}
         />
       </View>
-      <MessageFooter
-        formattedDate={formattedDate}
-        isDeleted
-        testID='message-footer'
-      />
+      <MessageFooter formattedDate={formattedDate} isDeleted />
     </View>
   );
 };
@@ -202,8 +193,13 @@ export type MessageDeletedProps<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends DefaultUserType = DefaultUserType
-> = MessageDeletedComponentProps &
-  Partial<MessageDeletedContextProps<At, Ch, Co, Ev, Me, Re, Us>>;
+> = MessageDeletedComponentProps & {
+  alignment?: Alignment;
+  message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+  MessageFooter?: React.ComponentType<
+    MessageFooterProps<At, Ch, Co, Ev, Me, Re, Us>
+  >;
+};
 
 export const MessageDeleted = <
   At extends UnknownType = DefaultAttachmentType,

src/components/Message/MessageSimple/MessageFooter.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import {
+  Alignment,
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
@@ -14,6 +15,13 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Eye } from '../../../icons';
 
+import type { Attachment } from 'stream-chat';
+
+import type { MessageStatusProps } from './MessageStatus';
+
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -25,7 +33,12 @@ import type {
   UnknownType,
 } from '../../../types/types';
 
-type MessageFooterContextProps<
+type MessageFooterComponentProps = {
+  formattedDate: string | Date;
+  isDeleted?: boolean;
+};
+
+type MessageFooterPropsWithContext<
   At extends UnknownType = DefaultAttachmentType,
   Ch extends UnknownType = DefaultChannelType,
   Co extends string = DefaultCommandType,
@@ -42,27 +55,8 @@ type MessageFooterContextProps<
   | 'showMessageStatus'
   | 'lastGroupMessage'
 > &
-  Pick<
-    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'MessageStatus' | 'MessageFooter'
-  >;
-
-type MessageFooterComponentProps = {
-  formattedDate: string | Date;
-  testID: string;
-  isDeleted?: boolean;
-};
-
-type MessageFooterPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType
-> = MessageFooterComponentProps &
-  MessageFooterContextProps<At, Ch, Co, Ev, Me, Re, Us>;
+  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageStatus'> &
+  MessageFooterComponentProps;
 
 const MessageFooterWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -85,7 +79,6 @@ const MessageFooterWithContext = <
     MessageStatus,
     otherAttachments,
     showMessageStatus,
-    testID,
   } = props;
 
   const {
@@ -106,7 +99,7 @@ const MessageFooterWithContext = <
 
   if (isDeleted) {
     return (
-      <View style={metaContainer} testID={testID}>
+      <View style={metaContainer} testID='message-footer'>
         <Eye pathFill={isDeleted ? undefined : grey} {...eyeIcon} />
         <Text
           style={[
@@ -244,8 +237,17 @@ export type MessageFooterProps<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends DefaultUserType = DefaultUserType
-> = MessageFooterComponentProps &
-  Partial<MessageFooterContextProps<At, Ch, Co, Ev, Me, Re, Us>>;
+> = Partial<Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'members'>> &
+  MessageFooterComponentProps & {
+    alignment?: Alignment;
+    lastGroupMessage?: boolean;
+    message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+    MessageStatus?: React.ComponentType<
+      MessageStatusProps<At, Ch, Co, Ev, Me, Re, Us>
+    >;
+    otherAttachments?: Attachment<At>[];
+    showMessageStatus?: boolean;
+  };
 
 export const MessageFooter = <
   At extends UnknownType = DefaultAttachmentType,
@@ -267,15 +269,7 @@ export const MessageFooter = <
     showMessageStatus,
   } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  const { MessageFooter, MessageStatus } = useMessagesContext<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >();
+  const { MessageStatus } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <MemoizedMessageFooter
@@ -284,7 +278,6 @@ export const MessageFooter = <
         lastGroupMessage,
         members,
         message,
-        MessageFooter,
         MessageStatus,
         otherAttachments,
         showMessageStatus,