stream-chat-react-native-core 4.8.0 → 4.9.0-beta.3

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -4,6 +4,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAttachmentAction,
@@ -12,6 +13,9 @@ import {
   generateImageAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+
+import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
 
@@ -19,9 +23,11 @@ const getAttachmentComponent = (props) => {
   const message = generateMessage();
   return (
     <ThemeProvider>
-      <MessageProvider value={{ message }}>
-        <Attachment {...props} />
-      </MessageProvider>
+      <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
+        <MessageProvider value={{ message }}>
+          <Attachment {...props} />
+        </MessageProvider>
+      </MessagesProvider>
     </ThemeProvider>
   );
 };

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -1,6 +1,11 @@
 import React from 'react';
 
-import { render, waitFor } from '@testing-library/react-native';
+import {
+  fireEvent,
+  render,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
@@ -230,4 +235,34 @@ describe('Gallery', () => {
       expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
     });
   });
+
+  it('should render an error indicator', async () => {
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+
+    const component = await getComponent([image1]);
+    const { getByA11yLabel, getByAccessibilityHint } = render(component);
+
+    fireEvent(getByA11yLabel('gallery-image'), 'error');
+    expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
+  });
+
+  it('should render a loading indicator and when successful render the image', async () => {
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+
+    const component = await getComponent([image1]);
+    const { getByA11yLabel, getByAccessibilityHint } = render(component);
+
+    fireEvent(getByA11yLabel('gallery-image'), 'onLoadStart');
+    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+
+    fireEvent(getByA11yLabel('gallery-image'), 'onLoadFinish');
+    waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
+    expect(getByA11yLabel('gallery-image')).toBeTruthy();
+  });
 });

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -1,22 +1,28 @@
 import React from 'react';
 
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react-native';
 
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import {
-  generateGiphyAttachment,
-  generateImgurAttachment,
-} from '../../../mock-builders/generator/attachment';
+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';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
@@ -27,15 +33,66 @@ describe('Giphy', () => {
     const message = generateMessage();
     return (
       <ThemeProvider>
-        <MessageProvider value={{ message }}>
-          <Giphy {...props} />
-        </MessageProvider>
+        <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
+          <MessageProvider value={{ message }}>
+            <Giphy {...props} />
+          </MessageProvider>
+        </MessagesProvider>
       </ThemeProvider>
     );
   };
+  let chatClient;
+  let channel;
+  let attachment;
+
+  const actions = [
+    { name: 'image_action', text: 'Send', value: 'send' },
+    { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+    {
+      name: 'image_action',
+      text: 'Cancel',
+      value: 'cancel',
+    },
+  ];
+
+  const giphy = {
+    fixed_height: {
+      height: '200',
+      url: 'https://media1.giphy.com/media/test/fixed_height.gif',
+      width: '375',
+    },
+    original: {
+      height: '256',
+      url: 'https://media1.giphy.com/media/test/original.gif',
+      width: '480',
+    },
+  };
+  const initChannel = async () => {
+    const user1 = generateUser();
+    attachment = generateGiphyAttachment();
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
+      ],
+    });
+
+    chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+  };
+
+  beforeEach(async () => {
+    await initChannel();
+  });
+
+  afterEach(cleanup);
 
   it('should render Card component for "imgur" type attachment', async () => {
-    const attachment = generateImgurAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
@@ -44,7 +101,6 @@ describe('Giphy', () => {
   });
 
   it('should render Card component for "giphy" type attachment', async () => {
-    const attachment = generateGiphyAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
@@ -53,19 +109,7 @@ describe('Giphy', () => {
   });
 
   it('"giphy" attachment size should be customisable', async () => {
-    const attachment = generateGiphyAttachment();
-    attachment.giphy = {
-      fixed_height: {
-        height: '200',
-        url: 'https://media1.giphy.com/media/test/fixed_height.gif',
-        width: '375',
-      },
-      original: {
-        height: '256',
-        url: 'https://media1.giphy.com/media/test/original.gif',
-        width: '480',
-      },
-    };
+    attachment.giphy = giphy;
     const { getByTestId: getByTestIdFixedHeight } = render(
       getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
     );
@@ -94,16 +138,7 @@ describe('Giphy', () => {
   });
 
   it('show render giphy action UI and all the 3 action buttons', async () => {
-    const attachment = generateGiphyAttachment();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
     );
@@ -117,17 +152,8 @@ describe('Giphy', () => {
   });
 
   it('should trigger the cancel giphy action', async () => {
-    const attachment = generateGiphyAttachment();
     const handleAction = jest.fn();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({
         attachment,
@@ -150,17 +176,8 @@ describe('Giphy', () => {
   });
 
   it('should trigger the shuffle giphy action', async () => {
-    const attachment = generateGiphyAttachment();
     const handleAction = jest.fn();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({
         attachment,
@@ -183,17 +200,8 @@ describe('Giphy', () => {
   });
 
   it('should trigger the send giphy action', async () => {
-    const attachment = generateGiphyAttachment();
     const handleAction = jest.fn();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({
         attachment,
@@ -217,16 +225,7 @@ describe('Giphy', () => {
 
   it('giphy attachment UI should render within the message list with actions', async () => {
     const user1 = generateUser();
-    const attachment = generateGiphyAttachment();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
@@ -260,23 +259,6 @@ describe('Giphy', () => {
   });
 
   it('giphy attachment UI should render within the message list', async () => {
-    const user1 = generateUser();
-    const attachment = generateGiphyAttachment();
-
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ user: user1 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
     const { queryByTestId } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
@@ -291,4 +273,42 @@ describe('Giphy', () => {
       expect(queryByTestId('giphy-attachment')).toBeTruthy();
     });
   });
+
+  it('should render a error indicator in giphy image', () => {
+    const { getByA11yLabel, getByAccessibilityHint } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    fireEvent(getByA11yLabel('giphy-attachment-image'), 'error');
+    expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
+  });
+
+  it('should render a loading indicator in giphy image and when successful render the image', () => {
+    const { getByA11yLabel, getByAccessibilityHint } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+
+    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadStart');
+
+    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+
+    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadFinish');
+
+    waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
+    expect(getByA11yLabel('giphy-attachment-image')).toBeTruthy();
+  });
 });

package/src/components/Attachment/hooks/useLoadingImage.tsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+
+export const useLoadingImage = () => {
+  const [isLoadingImage, setLoadingImage] = useState(true);
+  const [isLoadingImageError, setLoadingImageError] = useState(false);
+
+  return { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError };
+};

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, TextInput, TextInputProps } from 'react-native';
+import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native';
 
 import throttle from 'lodash/throttle';
 
@@ -417,6 +417,7 @@ const AutoCompleteInputWithContext = <
         {
           color: black,
           maxHeight: (textHeight || 17) * numberOfLines,
+          textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         inputBox,
       ]}

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 14,
     fontWeight: 'bold',
-    paddingRight: 8,
+    paddingHorizontal: 8,
   },
 });
 

package/src/components/Channel/Channel.tsx

@@ -82,6 +82,8 @@ import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
+import { ImageLoadingFailedIndicator as ImageLoadingFailedIndicatorDefault } from '../Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator as ImageLoadingIndicatorDefault } from '../Attachment/ImageLoadingIndicator';
 import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
@@ -258,6 +260,8 @@ export type ChannelPropsWithContext<
       | 'InlineUnreadIndicator'
       | 'isAttachmentEqual'
       | 'legacyImageViewerSwipeBehaviour'
+      | 'ImageLoadingFailedIndicator'
+      | 'ImageLoadingIndicator'
       | 'markdownRules'
       | 'Message'
       | 'messageActions'
@@ -470,6 +474,8 @@ const ChannelWithContext = <
     LoadingIndicator = LoadingIndicatorDefault,
     loadingMore: loadingMoreProp,
     loadingMoreRecent: loadingMoreRecentProp,
+    ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
+    ImageLoadingIndicator = ImageLoadingIndicatorDefault,
     markdownRules,
     maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
@@ -1700,6 +1706,8 @@ const ChannelWithContext = <
     handleReaction,
     handleRetry,
     handleThreadReply,
+    ImageLoadingFailedIndicator,
+    ImageLoadingIndicator,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -39,6 +39,8 @@ export const useCreateMessagesContext = <
   handleReaction,
   handleRetry,
   handleThreadReply,
+  ImageLoadingFailedIndicator,
+  ImageLoadingIndicator,
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
@@ -126,6 +128,8 @@ export const useCreateMessagesContext = <
       handleReaction,
       handleRetry,
       handleThreadReply,
+      ImageLoadingFailedIndicator,
+      ImageLoadingIndicator,
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,

package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -71,7 +71,6 @@ describe('ChannelPreviewMessenger', () => {
     fireEvent.press(getByTestId('channel-preview-button'));
 
     await waitFor(() => {
-      // eslint-disable-next-line jest/prefer-called-with
       expect(onSelect).toHaveBeenCalledTimes(1);
     });
   });

package/src/components/ChannelPreview/hooks/__tests__/useLatestMessagePreview.test.tsx

@@ -0,0 +1,145 @@
+import React, { FC } from 'react';
+
+import { renderHook } from '@testing-library/react-hooks/native';
+import { waitFor } from '@testing-library/react-native';
+
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+
+import type { DefaultGenerics, StreamChat } from 'stream-chat';
+
+import { ChatContext, ChatContextValue } from '../../../../contexts/chatContext/ChatContext';
+import {
+  CHANNEL,
+  CHANNEL_WITH_DELETED_MESSAGES,
+  CHANNEL_WITH_EMPTY_MESSAGE,
+  CHANNEL_WITH_MENTIONED_USERS,
+  CHANNEL_WITH_MESSAGES_ATTACHMENTS,
+  CHANNEL_WITH_MESSAGES_COMMAND,
+  CHANNEL_WITH_MESSAGES_TEXT,
+  CHANNEL_WITH_NO_MESSAGES,
+  LATEST_MESSAGE,
+} from '../../../../mock-builders/api/channelMocks';
+
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+
+import { useLatestMessagePreview } from '../useLatestMessagePreview';
+
+describe('useLatestMessagePreview', () => {
+  const FORCE_UPDATE = 15;
+  const clientUser = generateUser();
+  let chatClient: StreamChat<DefaultGenerics> | StreamChat<DefaultStreamChatGenerics>;
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(clientUser);
+  });
+
+  const ChatProvider: FC<{ children: React.ReactNode }> = ({ children }) => (
+    <ChatContext.Provider
+      value={
+        {
+          auto_translation_enabled: true,
+          client: chatClient,
+        } as unknown as ChatContextValue
+      }
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+
+  it('should return a channel latest message', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toBeTruthy();
+    });
+  });
+
+  it('should return a deleted message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_DELETED_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([{ bold: false, text: 'Message deleted' }]);
+    });
+  });
+
+  it('should return an "Nothing yet..." message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_NO_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([{ bold: false, text: 'Nothing yet...' }]);
+    });
+  });
+
+  it('should return latest message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_TEXT, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: true, text: '@okechukwu: ' },
+        { bold: false, text: 'jkbkbiubicbi' },
+      ]);
+    });
+  });
+
+  it('should return a channel with an empty message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_EMPTY_MESSAGE, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: false, text: '' },
+        { bold: false, text: 'Empty message...' },
+      ]);
+    });
+  });
+
+  it('should return a mentioned user (@Max) message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_MENTIONED_USERS, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: false, text: '' },
+        { bold: false, text: 'Max' },
+      ]);
+    });
+  });
+
+  it('should return the latest command preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_COMMAND, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: true, text: '@okechukwu: ' },
+        { bold: false, text: '/giphy' },
+      ]);
+    });
+  });
+
+  it('should return an attachment preview', async () => {
+    const { result } = renderHook(
+      () =>
+        useLatestMessagePreview(CHANNEL_WITH_MESSAGES_ATTACHMENTS, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: true, text: '@okechukwu: ' },
+        { bold: false, text: '🏙 Attachment...' },
+      ]);
+    });
+  });
+});