stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.3

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -0,0 +1,95 @@
+/**
+ * 📣 Note: Do not use named capture groups, as
+ *          it is not yet available in Hermes.
+ *
+ * These helpers indend to make it easier to skim read
+ * the patterns below, but note that some are optional,
+ * specified in the patterns these are added to.
+ * */
+const emailUserName = '[\\w+\\.~$_-]+';
+const schema = `(\\w{2,15}:\\/\\/)`;
+const domain = `((?:\\w+\\.\\w+)+(?:[^:\\/\\s]+))`;
+const port = `(:[0-9]{1,5})`;
+const path = `((?:\\/)?[^?#\\s]+)`;
+const queryString = `(\\?[^#\\s]+)`;
+const fragment = `(#[\\w_-]+)`;
+
+/**
+ * Match any email address, with and without `mailto:`
+ */
+const emailPattern = `(mailto:)?((?:${emailUserName})@(?:${domain}))`;
+
+/**
+ * Match any string starting with something that seems like it's a schema.
+ * */
+const schemePrefixedLinkPattern = `${schema}(\\S+)`;
+
+/**
+ * Match as much as possible of a fqdn, at least with a domain name formed as
+ * something.tld
+ */
+const fqdnLinkPattern = `${schema}?${domain}${port}?${path}?${queryString}?${fragment}?`;
+
+interface Link {
+  encoded: string;
+  raw: string;
+  scheme: string;
+}
+
+/**
+ * This is done separately because of the version of javascript run
+ * for expo
+ * */
+const removeMarkdownLinksFromText = (input: string) => input.replace(/\[[\w\s]+\]\(.*\)/g, '');
+
+export const parseLinksFromText = (input: string): Link[] => {
+  let matches;
+
+  const inputWithoutMarkdownLinks = removeMarkdownLinksFromText(input);
+
+  const results: Link[] = [];
+
+  const emailRegExp = new RegExp(emailPattern, 'gi');
+  while ((matches = emailRegExp.exec(input)) !== null) {
+    const [raw, scheme = 'mailto:', displayValue] = matches;
+    results.push({ encoded: encodeURI(displayValue), raw, scheme });
+  }
+
+  /**
+   * The two link patterns are checked with an "or" (`|`)
+   * to avoid overlapping matches being duplicated in the output.
+   * */
+  const linkRegex = new RegExp(`${fqdnLinkPattern}|${schemePrefixedLinkPattern}`, 'gi');
+  while ((matches = linkRegex.exec(inputWithoutMarkdownLinks)) !== null) {
+    const [
+      raw,
+      fqdnScheme = '',
+      fqdnDomainName = '',
+      fqdnPort = '',
+      fqdnPath = '',
+      fqdnQueryStraing = '',
+      fqdnFragment = '',
+      schemePrefixedScheme = '',
+      schemePrefixedPath = '',
+    ] = matches;
+
+    if (schemePrefixedScheme !== '') {
+      results.push({
+        encoded: encodeURI(schemePrefixedPath),
+        raw,
+        scheme: schemePrefixedScheme,
+      });
+      continue;
+    }
+
+    results.push({
+      encoded: encodeURI(
+        [fqdnDomainName, fqdnPort, fqdnPath, fqdnQueryStraing, fqdnFragment].join(''),
+      ),
+      raw,
+      scheme: fqdnScheme,
+    });
+  }
+
+  return results;
+};

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { GestureResponderEvent, Linking, Text, View } from 'react-native';
-import anchorme from 'anchorme';
-import truncate from 'lodash/truncate';
+
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
+
+import truncate from 'lodash/truncate';
 import {
   DefaultRules,
   defaultRules,
@@ -14,8 +15,10 @@ import {
   SingleASTNode,
 } from 'simple-markdown';
 
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
+import { parseLinksFromText } from './parseLinks';
 
+import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
+import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -26,8 +29,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
-import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
-import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
+import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
 const defaultMarkdownStyles: MarkdownStyle = {
   inlineCode: {
@@ -51,7 +53,6 @@ const defaultMarkdownStyles: MarkdownStyle = {
   mentions: {
     fontWeight: '700',
   },
-  // unfortunately marginVertical doesn't override the defaults for these within the 3rd party lib
   paragraph: {
     marginBottom: 8,
     marginTop: 8,
@@ -70,19 +71,6 @@ const parse: ParseFunction = (capture, parse, state) => ({
   content: parseInline(parse, capture[0], state),
 });
 
-const parseUrlsFromText = (text: string) => {
-  try {
-    return anchorme(text, {
-      list: true,
-    });
-  } catch (e) {
-    console.warn(`failure at parseUrlsFromText: ${e}`);
-    // In case of failures its not worth crashing the app,
-    // and instead simply to have un-parsed urls in message text.
-    return [];
-  }
-};
-
 export type MarkdownRules = Partial<DefaultRules>;
 
 export type RenderTextParams<
@@ -138,14 +126,14 @@ export const renderText = <
   if (!text) return null;
 
   let newText = text.trim();
-  const urls = parseUrlsFromText(newText);
+  const urls = parseLinksFromText(newText);
 
   for (const urlInfo of urls) {
-    const displayLink = truncate(urlInfo.encoded.replace(/^(www\.)/, ''), {
+    const displayLink = truncate(urlInfo.encoded, {
       length: 200,
       omission: '...',
     });
-    const markdown = `[${displayLink}](${urlInfo.protocol}${urlInfo.encoded})`;
+    const markdown = `[${displayLink}](${urlInfo.scheme}${urlInfo.encoded})`;
     newText = newText.replace(urlInfo.raw, markdown);
   }
 
@@ -272,7 +260,7 @@ export const renderText = <
    *
    * This custom rule overrides this behavior both for top level lists and sublists,
    * in order to start the numbering from the number of the first list item provided.
-   * */
+   */
   const customListAtLevel =
     (level: keyof typeof listLevels): ReactNodeOutput =>
     (node, output, { ...state }) => {

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -1,7 +1,5 @@
 import { useMemo } from 'react';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type {
   DefaultAttachmentType,
@@ -13,6 +11,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
 export const useCreateMessageContext = <
   At extends UnknownType = DefaultAttachmentType,

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -2,9 +2,11 @@ import type { MessageResponse, Reaction } from 'stream-chat';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import type {
+  MessageContextValue,
+  Reactions,
+} from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-import type { Reactions } from '../../../contexts/messageContext/MessageContext';
 
 import type {
   DefaultAttachmentType,
@@ -16,6 +18,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
 
 export const useMessageActionHandlers = <
   At extends UnknownType = DefaultAttachmentType,
@@ -30,6 +33,7 @@ export const useMessageActionHandlers = <
   client,
   enforceUniqueReaction,
   message,
+  removeMessage,
   retrySendMessage,
   setEditingState,
   setQuotedMessageState,
@@ -37,6 +41,7 @@ export const useMessageActionHandlers = <
   updateMessage,
 }: Pick<
   MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  | 'removeMessage'
   | 'retrySendMessage'
   | 'setEditingState'
   | 'setQuotedMessageState'
@@ -58,8 +63,12 @@ export const useMessageActionHandlers = <
   );
 
   const handleDeleteMessage = async () => {
-    const data = await client.deleteMessage(message.id);
-    updateMessage(data.message);
+    if (message.status === MessageStatusTypes.FAILED) {
+      removeMessage(message);
+    } else {
+      const data = await client.deleteMessage(message.id);
+      updateMessage(data.message);
+    }
   };
 
   const handleToggleMuteUser = async () => {

package/src/components/Message/hooks/useMessageActions.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { Alert, Clipboard } from 'react-native';
 
+import { useMessageActionHandlers } from './useMessageActionHandlers';
+
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-import { removeReservedFields } from '../utils/removeReservedFields';
+import type { OverlayContextValue } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
+import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import {
   Copy,
   CurveLineLeftUp,
@@ -22,10 +24,6 @@ import {
   Unpin,
   UserDelete,
 } from '../../../icons';
-import type { OverlayContextValue } from '../../../contexts/overlayContext/OverlayContext';
-import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -36,7 +34,11 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
-import { useMessageActionHandlers } from './useMessageActionHandlers';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
+import { removeReservedFields } from '../utils/removeReservedFields';
 
 export const useMessageActions = <
   At extends UnknownType = DefaultAttachmentType,
@@ -64,6 +66,7 @@ export const useMessageActions = <
   message,
   onThreadSelect,
   openThread,
+  removeMessage,
   retrySendMessage,
   selectReaction,
   setEditingState,
@@ -85,6 +88,7 @@ export const useMessageActions = <
   | 'handleRetry'
   | 'handleReaction'
   | 'handleThreadReply'
+  | 'removeMessage'
   | 'retrySendMessage'
   | 'setEditingState'
   | 'setQuotedMessageState'
@@ -119,6 +123,7 @@ export const useMessageActions = <
     client,
     enforceUniqueReaction,
     message,
+    removeMessage,
     retrySendMessage,
     setEditingState,
     setQuotedMessageState,
@@ -126,7 +131,7 @@ export const useMessageActions = <
     updateMessage,
   });
 
-  const error = message.type === 'error' || message.status === 'failed';
+  const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
 
   const onOpenThread = () => {
     if (onThreadSelect) {

package/src/components/Message/utils/messageActions.ts

@@ -1,6 +1,5 @@
-import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
-import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -11,6 +10,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
 
 export type MessageActionsParams<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/Message/utils/removeReservedFields.ts

@@ -1,4 +1,3 @@
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -9,6 +8,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 export const removeReservedFields = <
   At extends UnknownType = DefaultAttachmentType,

package/src/components/MessageInput/AttachButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
@@ -9,8 +10,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/CommandsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -13,8 +14,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Lightning } from '../../icons/Lightning';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/CooldownTimer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 export type CooldownTimerProps = {

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -3,7 +3,6 @@ import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
-import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import {
   FileUpload,
   MessageInputContextValue,
@@ -15,8 +14,6 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Close } from '../../icons/Close';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -27,6 +24,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
+
+import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 
 const FILE_PREVIEW_HEIGHT = 60;
 

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -10,8 +10,6 @@ import {
 } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Close } from '../../icons/Close';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -22,6 +20,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;
 

package/src/components/MessageInput/InputButtons.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type {

package/src/components/MessageInput/MessageInput.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { useCountdown } from './hooks/useCountdown';
+import type { UserResponse } from 'stream-chat';
 
-import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
-import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
+import { useCountdown } from './hooks/useCountdown';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
-import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -20,6 +18,7 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   SuggestionsContextValue,
   useSuggestionsContext,
@@ -32,8 +31,6 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 import { CircleClose, CurveLineLeftUp, Edit, Lightning } from '../../icons';
 
-import type { UserResponse } from 'stream-chat';
-
 import type { Asset } from '../../native';
 import type {
   DefaultAttachmentType,
@@ -45,6 +42,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
+import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
 const styles = StyleSheet.create({
   attachmentSeparator: {

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -8,8 +9,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { Check } from '../../icons';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -12,6 +11,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
+import { Check } from '../../icons';
 
 import type {
   DefaultAttachmentType,

package/src/components/MessageInput/__tests__/AttachButton.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { AttachButton } from '../AttachButton';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { AttachButton } from '../AttachButton';
 
 describe('AttachButton', () => {
   it('should render an enabled AttachButton', async () => {

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -1,23 +1,21 @@
 import React from 'react';
 import { View } from 'react-native';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
-
-import { FileUploadPreview } from '../FileUploadPreview';
-
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
 
-import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { FileState } from '../../../utils/utils';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { generateUser } from '../../../mock-builders/generator/user';
-import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateFileUploadPreview } 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';
-import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { FileState } from '../../../utils/utils';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { FileUploadPreview } from '../FileUploadPreview';
 
 function MockedFlatList(props) {
   const items = props.data.map((item, index) => {
@@ -39,7 +37,7 @@ describe('FileUploadPreview', () => {
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -114,7 +112,7 @@ describe('FileUploadPreview', () => {
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -191,7 +189,7 @@ describe('FileUploadPreview', () => {
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -273,7 +271,7 @@ describe('FileUploadPreview', () => {
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });

package/src/components/MessageInput/__tests__/ImageUploadPreview.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { ImageUploadPreview } from '../ImageUploadPreview';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { generateImageUploadPreview } from '../../../mock-builders/generator/attachment';
 import { FileState } from '../../../utils/utils';
 
-import { generateImageUploadPreview } from '../../../mock-builders/generator/attachment';
+import { ImageUploadPreview } from '../ImageUploadPreview';
 
 describe('ImageUploadPreview', () => {
   it('should render ImageUploadPreview with all uploading images', async () => {