stream-chat-react-native-core 5.8.0-beta.1 → 5.8.0-beta.3

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

@@ -1,19 +1,63 @@
 import React from 'react';
 
+import { Alert } from 'react-native';
+
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
+import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import {
+  generateFileAttachment,
+  generateImageAttachment,
+} from '../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { CameraSelectorIcon } from '../../AttachmentPicker/components/CameraSelectorIcon';
+import { FileSelectorIcon } from '../../AttachmentPicker/components/FileSelectorIcon';
+import { ImageSelectorIcon } from '../../AttachmentPicker/components/ImageSelectorIcon';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageInput } from '../MessageInput';
 
 describe('MessageInput', () => {
+  jest.spyOn(Alert, 'alert');
+  jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
+    jest.fn(() => ({
+      CameraSelectorIcon,
+      closePicker: jest.fn(),
+      FileSelectorIcon,
+      ImageSelectorIcon,
+      openPicker: jest.fn(),
+      selectedFiles: [
+        generateFileAttachment({ name: 'Dummy.pdf', size: 500000000 }),
+        generateFileAttachment({ name: 'Dummy.pdf', size: 600000000 }),
+      ],
+      selectedImages: [
+        generateImageAttachment({
+          file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
+          fileSize: 500000000,
+          uri: 'https://picsum.photos/200/300',
+        }),
+        generateImageAttachment({
+          file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
+          fileSize: 600000000,
+          uri: 'https://picsum.photos/200/300',
+        }),
+      ],
+      selectedPicker: 'images',
+      setBottomInset: jest.fn(),
+      setMaxNumberOfFiles: jest.fn(),
+      setSelectedFiles: jest.fn(),
+      setSelectedImages: jest.fn(),
+      setSelectedPicker: jest.fn(),
+      setTopInset: jest.fn(),
+    })),
+  );
+
   const clientUser = generateUser();
   let chatClient;
   let channel;
@@ -47,17 +91,12 @@ describe('MessageInput', () => {
 
   it('should render MessageInput', async () => {
     await initializeChannel(generateChannelResponse());
+
     const openPicker = jest.fn();
     const closePicker = jest.fn();
     const attachmentValue = { closePicker, openPicker };
 
-    const { getByTestId, queryByTestId, queryByText, toJSON } = render(
-      getComponent({ attachmentValue }),
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('attach-button')).toBeTruthy();
-    });
+    const { getByTestId, queryByTestId, queryByText } = render(getComponent({ attachmentValue }));
 
     fireEvent.press(getByTestId('attach-button'));
 
@@ -69,11 +108,22 @@ describe('MessageInput', () => {
       expect(queryByTestId('send-button')).toBeTruthy();
       expect(queryByText('Editing Message')).toBeFalsy();
     });
+  });
 
-    const snapshot = toJSON();
+  it('trigger file size threshold limit alert when images size above the limit', async () => {
+    await initializeChannel(generateChannelResponse());
 
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
+    render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageInput />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    // Both for files and for images triggered in one test itself.
+    expect(Alert.alert).toHaveBeenCalledTimes(4);
   });
 });

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -590,17 +590,28 @@ export const MessageInputProvider = <
     const result = await pickDocument({
       maxNumberOfFiles: value.maxNumberOfFiles - numberOfUploads,
     });
+
+    const MEGA_BYTES_TO_BYTES = 1024 * 1024;
+    const MAX_FILE_SIZE_TO_UPLOAD_IN_MB = 100;
+
     if (!result.cancelled && result.docs) {
-      result.docs.forEach((doc) => {
-        /**
-         * TODO: The current tight coupling of images to the image
-         * picker does not allow images picked from the file picker
-         * to be rendered in a preview via the uploadNewImage call.
-         * This should be updated alongside allowing image a file
-         * uploads together.
-         */
-        uploadNewFile(doc);
-      });
+      const totalFileSize = result.docs.reduce((acc, doc) => acc + Number(doc.size), 0);
+      if (totalFileSize / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB) {
+        Alert.alert(
+          `Maximum file size upload limit reached, please upload files below ${MAX_FILE_SIZE_TO_UPLOAD_IN_MB}MB.`,
+        );
+      } else {
+        result.docs.forEach((doc) => {
+          /**
+           * TODO: The current tight coupling of images to the image
+           * picker does not allow images picked from the file picker
+           * to be rendered in a preview via the uploadNewImage call.
+           * This should be updated alongside allowing image a file
+           * uploads together.
+           */
+          uploadNewFile(doc);
+        });
+      }
     }
   };
 

package/src/contexts/messageInputContext/__tests__/pickFile.test.tsx

@@ -4,6 +4,10 @@ import { act } from 'react-test-renderer';
 
 import { renderHook } from '@testing-library/react-hooks';
 
+import { generateFileAttachment } from '../../../mock-builders/generator/attachment';
+
+import * as NativeUtils from '../../../native';
+
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import {
   InputMessageInputContextValue,
@@ -34,6 +38,15 @@ afterEach(jest.clearAllMocks);
 
 describe("MessageInputContext's pickFile", () => {
   jest.spyOn(Alert, 'alert');
+  jest.spyOn(NativeUtils, 'pickDocument').mockImplementation(
+    jest.fn().mockResolvedValue({
+      cancelled: false,
+      docs: [
+        generateFileAttachment({ size: 500000000 }),
+        generateFileAttachment({ size: 600000000 }),
+      ],
+    }),
+  );
 
   const initialProps = {
     editing: true,
@@ -64,4 +77,17 @@ describe("MessageInputContext's pickFile", () => {
       expect(Alert.alert).toHaveBeenCalledTimes(numberOfTimesCalled);
     },
   );
+
+  it('trigger file size threshold limit alert when file size above the limit', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps,
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.pickFile();
+    });
+
+    expect(Alert.alert).toHaveBeenCalledTimes(1);
+  });
 });

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './icons';
 
 export * from './types/types';
 
+export * from './utils/patchMessageTextCommand';
 export * from './utils/Streami18n';
 export * from './utils/utils';
 

package/src/utils/__tests__/patchMessageTextCommand.test.ts

@@ -0,0 +1,14 @@
+import { patchMessageTextCommand } from '../patchMessageTextCommand';
+
+describe('patchMessageTextCommand', () => {
+  test.each<[string, string, string[]]>([
+    ['/ban @santhosh vaiyapuri reason', '/ban @santhosh reason', ['santhosh']],
+    ['/ban @santhosh vaiyapuri', '/ban @santhosh vaiyapuri', ['santhosh']],
+    ['/ban @santhosh', '/ban @santhosh @santhosh', ['santhosh']],
+    ['/ban @santhosh vaiyapuri @khushal reason', '/ban @santhosh reason', ['santhosh', 'khushal']],
+    ['/mute @santhosh vaiyapuri', '/mute @santhosh', ['santhosh']],
+    ['/mute @santhosh vaiyapuri @khushal reason', '/mute @santhosh', ['santhosh', 'khushal']],
+  ])('Patch message with text:"%s" to "%s")', (input, expectedOutput, mentionedUserIds) => {
+    expect(patchMessageTextCommand(input, mentionedUserIds)).toBe(expectedOutput);
+  });
+});

package/src/utils/patchMessageTextCommand.ts

@@ -0,0 +1,35 @@
+/**
+ * Converts a message text command to proper format
+ * Example: "/mute @username" to "/mute @userId"
+ * Supports "/ban", "/unban", "/mute", "/unmute"
+ * @param messageText
+ * @param mentionedUsers
+ * @returns
+ */
+export function patchMessageTextCommand(messageText: string, mentionedUserIds: string[]): string {
+  if (mentionedUserIds.length === 0) {
+    return messageText;
+  }
+  const trimmedMessageText = messageText.trim();
+
+  /**
+   * The required formats are "/unban @userid" or "/mute @userid" or "/unmute @userid"
+   */
+  if (
+    trimmedMessageText.startsWith('/mute ') ||
+    trimmedMessageText.startsWith('/unmute ') ||
+    trimmedMessageText.startsWith('/unban ')
+  ) {
+    return trimmedMessageText.replace(/@.+/, `@${mentionedUserIds[0]}`);
+  }
+
+  /**
+   * The required format is "/ban @userid reason"
+   */
+  if (trimmedMessageText.startsWith('/ban ')) {
+    const reasonText = trimmedMessageText.split(' ').pop() ?? '';
+    return `/ban @${mentionedUserIds[0]} ${reasonText}`.trim();
+  }
+
+  return messageText;
+}

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.8.0-beta.1"
+  "version": "5.8.0-beta.3"
 }