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

package/lib/typescript/mock-builders/generator/channel.d.ts

@@ -31,20 +31,20 @@ export function generateChannel(customValues: any): {
         created_by: {
             banned: boolean;
             created_at: string;
-            id: any;
-            image: any;
-            name: any;
+            id: string;
+            image: string;
+            name: string;
             online: boolean;
             role: string;
             updated_at: string;
         };
         frozen: boolean;
-        id: any;
+        id: string;
         own_capabilities: string[];
         type: string;
         updated_at: string;
     };
-    id: any;
+    id: string;
     state: {
         members: {};
         messages: never[];
@@ -54,18 +54,18 @@ export function generateChannel(customValues: any): {
 };
 export function generateChannelResponse(customValues?: {
     channel: {};
-    id: any;
+    id: string;
     type: string;
 }): {
     channel: {
-        id: any;
+        id: string;
         type: string;
         user: {
             banned: boolean;
             created_at: string;
-            id: any;
-            image: any;
-            name: any;
+            id: string;
+            image: string;
+            name: string;
             online: boolean;
             role: string;
             updated_at: string;
@@ -100,9 +100,9 @@ export function generateChannelResponse(customValues?: {
         created_by: {
             banned: boolean;
             created_at: string;
-            id: any;
-            image: any;
-            name: any;
+            id: string;
+            image: string;
+            name: string;
             online: boolean;
             role: string;
             updated_at: string;

package/lib/typescript/mock-builders/generator/message.d.ts

@@ -0,0 +1,38 @@
+export function generateMessage(options?: {}): {
+    attachments: never[];
+    created_at: any;
+    html: string;
+    id: string;
+    text: string;
+    type: string;
+    updated_at: any;
+    user: {
+        banned: boolean;
+        created_at: string;
+        id: string;
+        image: string;
+        name: string;
+        online: boolean;
+        role: string;
+        updated_at: string;
+    };
+};
+export function generateStaticMessage(seed: any, options: any, date: any): {
+    attachments: never[];
+    created_at: any;
+    html: string;
+    id: string;
+    text: string;
+    type: string;
+    updated_at: any;
+    user: {
+        banned: boolean;
+        created_at: string;
+        id: string;
+        image: string;
+        name: string;
+        online: boolean;
+        role: string;
+        updated_at: string;
+    };
+};

package/lib/typescript/mock-builders/generator/user.d.ts

@@ -1,9 +1,9 @@
 export function getUserDefaults(): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;
@@ -11,9 +11,9 @@ export function getUserDefaults(): {
 export function generateUser(options?: {}): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;
@@ -21,9 +21,9 @@ export function generateUser(options?: {}): {
 export function generateStaticUser(userNumber: any): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.9.0-beta.3",
+  "version": "4.9.0-beta.4",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -80,7 +80,7 @@
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "6.2.0"
+    "stream-chat": "6.7.0"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"
@@ -88,18 +88,18 @@
   "devDependencies": {
     "@babel/cli": "^7.12.17",
     "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
     "@babel/plugin-proposal-object-rest-spread": "7.13.8",
     "@babel/plugin-transform-runtime": "7.13.10",
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-typescript": "7.13.0",
+    "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "2.0.0",
     "@react-native-community/eslint-plugin": "1.1.0",
     "@react-native-community/netinfo": "6.0.0",
     "@testing-library/jest-native": "4.0.4",
-    "@testing-library/react-native": "9.0.0",
     "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react-native": "9.0.0",
     "@types/eslint": "7.2.10",
     "@types/jest": "26.0.23",
     "@types/lodash": "4.14.169",
@@ -107,6 +107,7 @@
     "@types/react": "17.0.5",
     "@types/react-native": "0.67.3",
     "@types/react-test-renderer": "17.0.1",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "babel-eslint": "10.1.0",

package/src/components/Attachment/Gallery.tsx

@@ -212,7 +212,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
+            {rows.map(({ height, resizeMode, thumb_url, type, url, width }, rowIndex) => {
               const openImageViewer = () => {
                 if (!legacyImageViewerSwipeBehaviour && message) {
                   // Added if-else to keep the logic readable, instead of DRY.
@@ -307,6 +307,7 @@ const GalleryWithContext = <
                           width: width - 1,
                         },
                       ]}
+                      thumb_url={thumb_url}
                     />
                   ) : (
                     <View style={styles.imageContainerStyle}>

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { ImageBackground, StyleSheet, View, ViewProps } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons';
@@ -24,7 +24,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export type VideoThumbnailProps = ViewProps;
+export type VideoThumbnailProps = ViewProps & {
+  thumb_url?: string;
+};
 
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const {
@@ -34,12 +36,17 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       },
     },
   } = useTheme();
-  const { style, ...rest } = props;
+  const { style, thumb_url, ...rest } = props;
   return (
-    <View {...rest} style={[styles.container, container, style]}>
+    <ImageBackground
+      accessibilityLabel='video-thumbnail'
+      source={{ uri: thumb_url }}
+      {...rest}
+      style={[styles.container, container, style]}
+    >
       <View style={[styles.roundedView, roundedView]}>
         <Play height={24} pathFill={'#000'} width={24} />
       </View>
-    </View>
+    </ImageBackground>
   );
 };

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

@@ -11,8 +11,10 @@ import {
   generateAudioAttachment,
   generateFileAttachment,
   generateImageAttachment,
+  generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+import * as NativeUtils from '../../../native';
 
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
@@ -47,6 +49,16 @@ describe('Attachment', () => {
     });
   });
 
+  it('should render File component for "video" type attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => false));
+    const attachment = generateVideoAttachment();
+    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByTestId('file-attachment')).toBeTruthy();
+    });
+  });
+
   it('should render File component for "file" type attachment', async () => {
     const attachment = generateFileAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));

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

@@ -11,12 +11,16 @@ import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvide
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} 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 * as NativeUtils from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
@@ -75,6 +79,24 @@ describe('Gallery', () => {
     });
   });
 
+  it('should render one image and one video attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => true));
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateVideoAttachment();
+    const component = await getComponent([attachment1, attachment2]);
+    const { getAllByA11yLabel, queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(getAllByA11yLabel('video-thumbnail').length).toBe(1);
+    });
+  });
+
   it('should render portrait and landscape image in two rows', async () => {
     const attachment1 = generateImageAttachment({
       original_height: 600,

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -36,6 +36,7 @@ export function buildThumbnail<
     resizeMode: resizeMode
       ? resizeMode
       : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),
+    thumb_url: image.thumb_url,
     type: image.type,
     url: shouldResize
       ? getResizedImageUrl({

package/src/components/Attachment/utils/buildGallery/types.ts

@@ -6,6 +6,7 @@ export type Thumbnail = {
   url: string;
   width: number;
   id?: string;
+  thumb_url?: string;
   type?: string;
 };
 

package/src/components/Message/Message.tsx

@@ -333,7 +333,11 @@ const MessageWithContext = <
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
             } else if (cur.type === 'video' && !cur.og_scrape_url && isVideoPackageAvailable()) {
-              acc.videos.push({ image_url: cur.asset_url, type: 'video' });
+              acc.videos.push({
+                image_url: cur.asset_url,
+                thumb_url: cur.thumb_url,
+                type: 'video',
+              });
               acc.other = [];
             } else if (cur.type === 'video' && !cur.og_scrape_url) {
               acc.files.push(cur);

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -62,6 +62,7 @@ export type FileUpload = {
   file: File;
   id: string;
   state: FileStateValue;
+  thumb_url?: string;
   url?: string;
 };
 
@@ -710,6 +711,7 @@ export const MessageInputProvider = <
             duration: file.file.duration,
             file_size: file.file.size,
             mime_type: file.file.type,
+            thumb_url: file.thumb_url,
             title: file.file.name,
             type: 'video',
           } as Attachment<StreamChatGenerics>);
@@ -897,9 +899,6 @@ export const MessageInputProvider = <
   };
 
   const uploadFile = async ({ newFile }: { newFile: FileUpload }) => {
-    if (!newFile) {
-      return;
-    }
     const { file, id } = newFile;
 
     setFileUploads(getUploadSetStateAction(id, FileState.UPLOADING));
@@ -911,7 +910,7 @@ export const MessageInputProvider = <
       } else if (channel && file.uri) {
         response = await channel.sendFile(file.uri, file.name, file.type);
       }
-      const extraData: Partial<FileUpload> = { url: response.file };
+      const extraData: Partial<FileUpload> = { thumb_url: response.thumb_url, url: response.file };
       setFileUploads(getUploadSetStateAction(id, FileState.UPLOADED, extraData));
     } catch (error: unknown) {
       handleFileOrImageUploadError(error, false, id);

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

@@ -0,0 +1,208 @@
+import React, { PropsWithChildren } from 'react';
+
+import type { TextInput } from 'react-native';
+
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
+
+import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+
+import {
+  generateFileAttachment,
+  generateImageAttachment,
+} from '../../../mock-builders/generator/attachment';
+
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+
+import * as NativeUtils from '../../../native';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { FileState } from '../../../utils/utils';
+import {
+  InputMessageInputContextValue,
+  MessageInputContextValue,
+  MessageInputProvider,
+  useMessageInputContext,
+} from '../MessageInputContext';
+
+type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  Partial<InputMessageInputContextValue<StreamChatGenerics>>;
+
+afterEach(jest.clearAllMocks);
+
+describe('MessageInputContext', () => {
+  const Wrapper = <
+    StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  >({
+    children,
+    ...rest
+  }: PropsWithChildren<WrapperType<StreamChatGenerics>>) => (
+    <ChatProvider
+      value={
+        {
+          appSettings: {
+            app: {
+              file_upload_config: {
+                blocked_file_extensions: ['.mp3'],
+                blocked_mime_types: ['video/mp4'],
+              },
+              image_upload_config: {
+                blocked_file_extensions: ['.png'],
+                blocked_mime_types: ['image/png'],
+              },
+            },
+          } as unknown as AppSettingsAPIResponse<StreamChatGenerics>,
+          client: {
+            updateMessage: jest.fn().mockResolvedValue({ message: generateMessage() }),
+          } as unknown as StreamChat<StreamChatGenerics>,
+        } as ChatContextValue<StreamChatGenerics>
+      }
+    >
+      <MessageInputProvider
+        value={
+          {
+            ...rest,
+          } as MessageInputContextValue<StreamChatGenerics>
+        }
+      >
+        {children}
+      </MessageInputProvider>
+    </ChatProvider>
+  );
+
+  it('appendText works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([]);
+      result.current.setImageUploads([]);
+      result.current.setMentionedUsers([]);
+      result.current.setText('dummy');
+      result.current.appendText('text');
+    });
+
+    expect(result.current.text).toBe('dummytext');
+  });
+
+  it('uploadNewImage with blocked image extensions to be not supported', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        maxNumberOfFiles: 2,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.uploadNewImage(
+        generateImageAttachment({
+          uri: 'https://www.bastiaanmulder.nl/wp-content/uploads/2013/11/dummy-image-square.png',
+        }),
+      );
+    });
+
+    expect(result.current.imageUploads[0].state).toBe(FileState.NOT_SUPPORTED);
+  });
+
+  it('onSelectItem works', () => {
+    const mentioned_user = generateUser();
+    const initialUsers = [mentioned_user.id];
+
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([]);
+      result.current.setImageUploads([]);
+      result.current.setMentionedUsers(initialUsers);
+      result.current.onSelectItem(mentioned_user);
+    });
+
+    expect(result.current.mentionedUsers.length).toBe(2);
+  });
+
+  it('setInputBoxRef works', () => {
+    const setInputRefMock = jest.fn();
+    const inputRef = React.createRef<TextInput | null>();
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        setInputRef: setInputRefMock,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setInputBoxRef(inputRef.current);
+    });
+
+    expect(setInputRefMock).toHaveBeenCalled();
+  });
+
+  it('openCommandsPicker works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openCommandsPicker();
+    });
+
+    expect(result.current.text).toBe('/');
+  });
+
+  it('openMentionPicker works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openMentionsPicker();
+    });
+
+    expect(result.current.text).toBe('@');
+  });
+
+  it('openAttachmentPicker works', async () => {
+    jest.spyOn(NativeUtils, 'pickDocument').mockImplementation(
+      jest.fn().mockResolvedValue({
+        cancelled: false,
+        docs: [generateFileAttachment(), generateImageAttachment()],
+      }),
+    );
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasFilePicker: true,
+        hasImagePicker: false,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openAttachmentPicker();
+    });
+
+    expect(await result.current.pickFile()).toBe(undefined);
+  });
+});