stream-chat-react-native-core 4.4.0 → 4.5.0-beta.1

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

@@ -14,11 +14,12 @@ describe('ImageUploadPreview', () => {
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADING }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADING }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOADING }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.UPLOADING }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -35,6 +36,7 @@ describe('ImageUploadPreview', () => {
       expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(imageUploads.length);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('Not supported')).toHaveLength(0);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
@@ -45,25 +47,6 @@ describe('ImageUploadPreview', () => {
       expect(removeImage).toHaveBeenCalledTimes(1);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <ThemeProvider>
-        <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
-          removeImage={removeImage}
-          uploadImage={uploadImage}
-        />
-      </ThemeProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render ImageUploadPreview with all uploaded images', async () => {
@@ -71,11 +54,12 @@ describe('ImageUploadPreview', () => {
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADED }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADED }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOADED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.UPLOADED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -92,6 +76,7 @@ describe('ImageUploadPreview', () => {
       );
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('Not supported')).toHaveLength(0);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
@@ -102,25 +87,6 @@ describe('ImageUploadPreview', () => {
       expect(removeImage).toHaveBeenCalledTimes(1);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <ThemeProvider>
-        <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
-          removeImage={removeImage}
-          uploadImage={uploadImage}
-        />
-      </ThemeProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render ImageUploadPreview with all failed images', async () => {
@@ -128,11 +94,12 @@ describe('ImageUploadPreview', () => {
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOAD_FAILED }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOAD_FAILED }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.UPLOAD_FAILED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -149,6 +116,7 @@ describe('ImageUploadPreview', () => {
       expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(imageUploads.length);
+      expect(queryAllByText('Not supported')).toHaveLength(0);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
@@ -166,37 +134,65 @@ describe('ImageUploadPreview', () => {
       expect(removeImage).toHaveBeenCalledTimes(1);
       expect(uploadImage).toHaveBeenCalledTimes(1);
     });
+  });
 
-    rerender(
+  it('should render ImageUploadPreview with all unsupported', async () => {
+    const imageUploads = [
+      generateImageUploadPreview({
+        id: 'image-upload-preview-1',
+        state: FileState.NOT_SUPPORTED,
+      }),
+      generateImageUploadPreview({
+        id: 'image-upload-preview-2',
+        state: FileState.NOT_SUPPORTED,
+      }),
+      generateImageUploadPreview({
+        id: 'image-upload-preview-3',
+        state: FileState.NOT_SUPPORTED,
+      }),
+      generateImageUploadPreview({
+        id: 'image-upload-preview-4',
+        state: FileState.NOT_SUPPORTED,
+      }),
+    ];
+    const removeImage = jest.fn();
+    const uploadImage = jest.fn();
+
+    const { queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
+          imageUploads={imageUploads}
           removeImage={removeImage}
           uploadImage={uploadImage}
         />
       </ThemeProvider>,
     );
 
-    const snapshot = toJSON();
-
     await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
+      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
+        imageUploads.length,
+      );
+      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('Not supported')).toHaveLength(imageUploads.length);
+      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+
+      expect(removeImage).toHaveBeenCalledTimes(0);
+      expect(uploadImage).toHaveBeenCalledTimes(0);
     });
   });
 
-  it('should render ImageUploadPreview with 1 uploading, 1 uploaded, and 1 failed image', async () => {
+  it('should render ImageUploadPreview with 1 uploading, 1 uploaded, and 1 failed image, and 1 unsupported', async () => {
     const imageUploads = [
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADING }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADED }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.NOT_SUPPORTED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { queryAllByTestId, rerender, toJSON } = render(
+    const { queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -207,33 +203,12 @@ describe('ImageUploadPreview', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
-        imageUploads.length - 1,
-      );
-      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(1);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
+      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(1);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
+      expect(queryAllByText('Not supported')).toHaveLength(1);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <ThemeProvider>
-        <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
-          removeImage={removeImage}
-          uploadImage={uploadImage}
-        />
-      </ThemeProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 });

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

@@ -7,14 +7,14 @@ import { ProgressIndicatorTypes } from '../../../utils/utils';
 import { UploadProgressIndicator } from '../UploadProgressIndicator';
 
 describe('UploadProgressIndicator', () => {
-  it('should render an inactive IN_PROGRESS UploadProgressIndicator', async () => {
+  it('should render an inactive UploadProgressIndicator', async () => {
     const action = jest.fn();
 
     const { queryByTestId, toJSON } = render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
-          type={ProgressIndicatorTypes.IN_PROGRESS}
+          type={ProgressIndicatorTypes.INACTIVE}
         ></UploadProgressIndicator>
       </ThemeProvider>,
     );
@@ -32,21 +32,21 @@ describe('UploadProgressIndicator', () => {
     });
   });
 
-  it('should render an inactive RETRY UploadProgressIndicator', async () => {
+  it('should render an active UploadProgressIndicator', async () => {
     const action = jest.fn();
 
     const { queryByTestId, toJSON } = render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
-          type={ProgressIndicatorTypes.RETRY}
+          type={ProgressIndicatorTypes.IN_PROGRESS}
         ></UploadProgressIndicator>
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(queryByTestId('active-upload-progress-indicator')).toBeFalsy();
-      expect(queryByTestId('inactive-upload-progress-indicator')).toBeTruthy();
+      expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
+      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
       expect(action).toHaveBeenCalledTimes(0);
     });
 
@@ -57,24 +57,48 @@ describe('UploadProgressIndicator', () => {
     });
   });
 
-  it('should render an active IN_PROGRESS UploadProgressIndicator', async () => {
+  it('should render an active UploadProgressIndicator and not-supported indicator', async () => {
     const action = jest.fn();
 
     const { queryByTestId, toJSON } = render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
-          active
-          type={ProgressIndicatorTypes.IN_PROGRESS}
+          type={ProgressIndicatorTypes.NOT_SUPPORTED}
         ></UploadProgressIndicator>
       </ThemeProvider>,
     );
 
     await waitFor(() => {
       expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
+      expect(queryByTestId('not-supported-upload-progress-indicator')).toBeTruthy();
       expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
+      expect(action).toHaveBeenCalledTimes(0);
+    });
+
+    const snapshot = toJSON();
+
+    await waitFor(() => {
+      expect(snapshot).toMatchSnapshot();
+    });
+  });
+
+  it('should render an active UploadProgressIndicator and in-progress indicator', async () => {
+    const action = jest.fn();
+
+    const { queryByTestId, toJSON } = render(
+      <ThemeProvider>
+        <UploadProgressIndicator
+          action={action}
+          type={ProgressIndicatorTypes.IN_PROGRESS}
+        ></UploadProgressIndicator>
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
       expect(queryByTestId('upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('retry-upload-progress-indicator')).toBeFalsy();
+      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
       expect(action).toHaveBeenCalledTimes(0);
     });
 
@@ -85,14 +109,13 @@ describe('UploadProgressIndicator', () => {
     });
   });
 
-  it('should render an active RETRY UploadProgressIndicator', async () => {
+  it('should render an active UploadProgressIndicator and retry indicator', async () => {
     const action = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
-          active
           type={ProgressIndicatorTypes.RETRY}
         ></UploadProgressIndicator>
       </ThemeProvider>,
@@ -100,8 +123,8 @@ describe('UploadProgressIndicator', () => {
 
     await waitFor(() => {
       expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
       expect(queryByTestId('upload-progress-indicator')).toBeFalsy();
+      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
       expect(queryByTestId('retry-upload-progress-indicator')).toBeTruthy();
       expect(action).toHaveBeenCalledTimes(0);
     });

package/src/components/MessageInput/__tests__/__snapshots__/UploadProgressIndicator.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgressIndicator 1`] = `
+exports[`UploadProgressIndicator should render an active UploadProgressIndicator 1`] = `
 <View
   style={
     Array [
@@ -46,6 +46,7 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
         Object {},
       ]
     }
+    testID="not-supported-upload-progress-indicator"
   >
     <View
       style={
@@ -69,7 +70,7 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
 </View>
 `;
 
-exports[`UploadProgressIndicator should render an active RETRY UploadProgressIndicator 1`] = `
+exports[`UploadProgressIndicator should render an active UploadProgressIndicator and in-progress indicator 1`] = `
 <View
   style={
     Array [
@@ -115,6 +116,124 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
         Object {},
       ]
     }
+    testID="not-supported-upload-progress-indicator"
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "bottom": 0,
+          "justifyContent": "center",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <ActivityIndicator
+        color="#F2F2F2"
+        testID="upload-progress-indicator"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`UploadProgressIndicator should render an active UploadProgressIndicator and not-supported indicator 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="active-upload-progress-indicator"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": "100%",
+          "justifyContent": "center",
+          "opacity": 0,
+          "position": "absolute",
+          "width": "100%",
+        },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
+        Object {},
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
+        Object {},
+      ]
+    }
+    testID="not-supported-upload-progress-indicator"
+  />
+</View>
+`;
+
+exports[`UploadProgressIndicator should render an active UploadProgressIndicator and retry indicator 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="active-upload-progress-indicator"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": "100%",
+          "justifyContent": "center",
+          "opacity": 0,
+          "position": "absolute",
+          "width": "100%",
+        },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
+        Object {},
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": "100%",
+          "justifyContent": "center",
+          "position": "absolute",
+          "width": "100%",
+        },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
+        Object {},
+      ]
+    }
+    testID="not-supported-upload-progress-indicator"
   >
     <View
       accessible={true}
@@ -188,21 +307,7 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
 </View>
 `;
 
-exports[`UploadProgressIndicator should render an inactive IN_PROGRESS UploadProgressIndicator 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="inactive-upload-progress-indicator"
-/>
-`;
-
-exports[`UploadProgressIndicator should render an inactive RETRY UploadProgressIndicator 1`] = `
+exports[`UploadProgressIndicator should render an inactive UploadProgressIndicator 1`] = `
 <View
   style={
     Array [

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { Channel, Mute, StreamChat } from 'stream-chat';
+import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
@@ -8,6 +8,10 @@ import { getDisplayName } from '../utils/getDisplayName';
 export type ChatContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
+  /**
+   * Object of application settings returned from Stream.
+   * */
+  appSettings: AppSettingsAPIResponse<StreamChatGenerics> | null;
   /**
    * The StreamChat client object
    *

package/src/contexts/messageContext/MessageContext.tsx

@@ -3,7 +3,10 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { Attachment } from 'stream-chat';
 
 import type { ActionHandler } from '../../components/Attachment/Attachment';
-import type { TouchableHandlerPayload } from '../../components/Message/Message';
+import type {
+  MessageTouchableHandlerPayload,
+  TouchableHandlerPayload,
+} from '../../components/Message/Message';
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import type { MessageContentType } from '../../contexts/messagesContext/MessagesContext';
@@ -62,7 +65,7 @@ export type MessageContextValue<
    *
    * By default, we show the overlay with all the message actions on long press.
    *
-   * @param event   Event object for onLongPress event
+   * @param payload   Payload object for onLongPress event
    */
   onLongPress: (payload: TouchableHandlerPayload) => void;
   /** Whether the message is only text and the text is only emojis */
@@ -77,9 +80,9 @@ export type MessageContextValue<
    *
    * By default, we will dismiss the keyboard on press.
    *
-   * @param event   Event object for onPress event
+   * @param payload   Payload object for onPress event
    */
-  onPress: (payload: TouchableHandlerPayload) => void;
+  onPress: (payload: MessageTouchableHandlerPayload) => void;
   onPressIn: ((payload: TouchableHandlerPayload) => void) | null;
   /** The images attached to a message */
   otherAttachments: Attachment<StreamChatGenerics>[];