stream-chat-react-native-core 5.6.0-beta.0 → 5.6.0-beta.1

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -80,7 +80,7 @@ type ImageUploadPreviewPropsWithContext<
   MessageInputContextValue<StreamChatGenerics>,
   'imageUploads' | 'removeImage' | 'uploadImage'
 > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'isOnline' | 'enableOfflineSupport'>;
+  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 export type ImageUploadPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -93,7 +93,7 @@ const ImageUploadPreviewWithContext = <
 >(
   props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, imageUploads, isOnline, removeImage, uploadImage } = props;
+  const { enableOfflineSupport, imageUploads, removeImage, uploadImage } = props;
 
   const {
     theme: {
@@ -131,7 +131,7 @@ const ImageUploadPreviewWithContext = <
   };
 
   const renderItem = ({ index, item }: ImageUploadPreviewItem) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state, isOnline, enableOfflineSupport);
+    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
     const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};
 
     return (
@@ -202,40 +202,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const {
-    enableOfflineSupport: prevEnableOfflineSupport,
-    imageUploads: prevImageUploads,
-    isOnline: prevIsOnline,
-  } = prevProps;
-  const {
-    enableOfflineSupport: nextEnableOfflineSupport,
-    imageUploads: nextImageUploads,
-    isOnline: nextIsOnline,
-  } = nextProps;
-
-  const isOnlineEqual = prevIsOnline === nextIsOnline;
-
-  if (!isOnlineEqual) {
-    return false;
-  }
-
-  const enableOfflineSupportEqual = prevEnableOfflineSupport === nextEnableOfflineSupport;
-
-  if (!enableOfflineSupportEqual) {
-    return false;
-  }
+  const { imageUploads: prevImageUploads } = prevProps;
+  const { imageUploads: nextImageUploads } = nextProps;
 
-  const imageUploadsEqual =
+  return (
     prevImageUploads.length === nextImageUploads.length &&
     prevImageUploads.every(
       (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,
-    );
-
-  if (!imageUploadsEqual) {
-    return false;
-  }
-
-  return true;
+    )
+  );
 };
 
 const MemoizedImageUploadPreviewWithContext = React.memo(
@@ -251,13 +226,13 @@ export const ImageUploadPreview = <
 >(
   props: ImageUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, isOnline } = useChatContext<StreamChatGenerics>();
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();
 
   return (
     <MemoizedImageUploadPreviewWithContext
       {...{ imageUploads, removeImage, uploadImage }}
-      {...{ enableOfflineSupport, isOnline }}
+      {...{ enableOfflineSupport }}
       {...props}
     />
   );

package/src/components/index.ts

@@ -108,7 +108,7 @@ export * from './Message/MessageSimple/MessageTextContainer';
 export * from './Message/MessageSimple/ReactionList';
 export * from './Message/MessageSimple/utils/renderText';
 export * from './Message/utils/messageActions';
-export * from './Message/utils/removeReservedFields';
+export * from '../utils/removeReservedFields';
 
 export * from './MessageInput/AttachButton';
 export * from './MessageInput/CommandsButton';

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -38,6 +38,7 @@ import type { UploadProgressIndicatorProps } from '../../components/MessageInput
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import { compressImage, getLocalAssetUri, pickDocument } from '../../native';
 import type { Asset, DefaultStreamChatGenerics, File, UnknownType } from '../../types/types';
+import { removeReservedFields } from '../../utils/removeReservedFields';
 import {
   ACITriggerSettings,
   ACITriggerSettingsParams,
@@ -490,21 +491,20 @@ export const MessageInputProvider = <
       return true;
     }
 
-    for (const image of imageUploads) {
-      if ((!image || image.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
-        continue;
-      }
-
-      if (image.state === FileState.UPLOADING) {
-        // TODO: show error to user that they should wait until image is uploaded
-        return false;
+    const imagesAndFiles = [...imageUploads, ...fileUploads];
+    if (enableOfflineSupport) {
+      // Allow only if none of the attachments have unsupported status
+      for (const file of imagesAndFiles) {
+        if (file.state === FileState.NOT_SUPPORTED) {
+          return false;
+        }
       }
 
       return true;
     }
 
-    for (const file of fileUploads) {
-      if ((!file || file.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
+    for (const file of imagesAndFiles) {
+      if (!file || file.state === FileState.UPLOAD_FAILED) {
         continue;
       }
       if (file.state === FileState.UPLOADING) {
@@ -623,6 +623,62 @@ export const MessageInputProvider = <
     setText('');
   };
 
+  const mapImageUploadToAttachment = (image: ImageUpload) => {
+    const mime_type: string | boolean = lookup(image.file.filename as string);
+    return {
+      fallback: image.file.name,
+      image_url: image.url,
+      mime_type: mime_type ? mime_type : undefined,
+      original_height: image.height,
+      original_width: image.width,
+      originalFile: image.file,
+      type: 'image',
+    } as Attachment;
+  };
+
+  const mapFileUploadToAttachment = (file: FileUpload) => {
+    const mime_type: string | boolean = lookup(file.file.name as string);
+    if (file.file.type?.startsWith('image/')) {
+      return {
+        fallback: file.file.name,
+        image_url: file.url,
+        mime_type: mime_type ? mime_type : undefined,
+        originalFile: file.file,
+        type: 'image',
+      };
+    } else if (file.file.type?.startsWith('audio/')) {
+      return {
+        asset_url: file.url || file.file.uri,
+        duration: file.file.duration,
+        file_size: file.file.size,
+        mime_type: file.file.type,
+        originalFile: file.file,
+        title: file.file.name,
+        type: 'audio',
+      };
+    } else if (file.file.type?.startsWith('video/')) {
+      return {
+        asset_url: file.url || file.file.uri,
+        duration: file.file.duration,
+        file_size: file.file.size,
+        mime_type: file.file.type,
+        originalFile: file.file,
+        thumb_url: file.thumb_url,
+        title: file.file.name,
+        type: 'video',
+      };
+    } else {
+      return {
+        asset_url: file.url || file.file.uri,
+        file_size: file.file.size,
+        mime_type: file.file.type,
+        originalFile: file.file,
+        title: file.file.name,
+        type: 'file',
+      };
+    }
+  };
+
   // TODO: Figure out why this is async, as it doesn't await any promise.
   // eslint-disable-next-line require-await
   const sendMessage = async () => {
@@ -648,6 +704,14 @@ export const MessageInputProvider = <
 
     const attachments = [] as Attachment<StreamChatGenerics>[];
     for (const image of imageUploads) {
+      if (enableOfflineSupport) {
+        if (image.state === FileState.NOT_SUPPORTED) {
+          return;
+        }
+        attachments.push(mapImageUploadToAttachment(image));
+        continue;
+      }
+
       if ((!image || image.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
         continue;
       }
@@ -667,28 +731,21 @@ export const MessageInputProvider = <
       }
 
       // To get the mime type of the image from the file name and send it as an response for an image
-      const mime_type: string | boolean = lookup(image.file.filename as string);
-
-      if (
-        image.state === FileState.UPLOADED ||
-        image.state === FileState.FINISHED ||
-        (enableOfflineSupport && image.state === FileState.UPLOAD_FAILED)
-      ) {
-        // @ts-ignore
-        attachments.push({
-          fallback: image.file.name,
-          image_url: image.url,
-          mime_type: mime_type ? mime_type : undefined,
-          original_height: image.height,
-          original_width: image.width,
-          originalFile: image.file,
-          type: 'image',
-        });
+      if (image.state === FileState.UPLOADED || image.state === FileState.FINISHED) {
+        attachments.push(mapImageUploadToAttachment(image));
       }
     }
 
     for (const file of fileUploads) {
-      if ((!file || file.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
+      if (enableOfflineSupport) {
+        if (file.state === FileState.NOT_SUPPORTED) {
+          return;
+        }
+        attachments.push(mapFileUploadToAttachment(file));
+        continue;
+      }
+
+      if (!file || file.state === FileState.UPLOAD_FAILED) {
         continue;
       }
 
@@ -697,52 +754,9 @@ export const MessageInputProvider = <
         sending.current = false;
         return;
       }
-      const mime_type: string | boolean = lookup(file.file.name as string);
-
-      if (
-        file.state === FileState.UPLOADED ||
-        file.state === FileState.FINISHED ||
-        (enableOfflineSupport && file.state === FileState.UPLOAD_FAILED)
-      ) {
-        if (file.file.type?.startsWith('image/')) {
-          attachments.push({
-            fallback: file.file.name,
-            image_url: file.url,
-            mime_type: mime_type ? mime_type : undefined,
-            originalFile: file.file,
-            type: 'image',
-          });
-        } else if (file.file.type?.startsWith('audio/')) {
-          attachments.push({
-            asset_url: file.url || file.file.uri,
-            duration: file.file.duration,
-            file_size: file.file.size,
-            mime_type: file.file.type,
-            originalFile: file.file,
-            title: file.file.name,
-            type: 'audio',
-          });
-        } else if (file.file.type?.startsWith('video/')) {
-          attachments.push({
-            asset_url: file.url || file.file.uri,
-            duration: file.file.duration,
-            file_size: file.file.size,
-            mime_type: file.file.type,
-            originalFile: file.file,
-            thumb_url: file.thumb_url,
-            title: file.file.name,
-            type: 'video',
-          });
-        } else {
-          attachments.push({
-            asset_url: file.url || file.file.uri,
-            file_size: file.file.size,
-            mime_type: file.file.type,
-            originalFile: file.file,
-            title: file.file.name,
-            type: 'file',
-          });
-        }
+
+      if (file.state === FileState.UPLOADED || file.state === FileState.FINISHED) {
+        attachments.push(mapFileUploadToAttachment(file));
       }
     }
 
@@ -764,7 +778,12 @@ export const MessageInputProvider = <
       // TODO: Remove this line and show an error when submit fails
       value.clearEditingState();
 
-      const updateMessagePromise = value.editMessage(updatedMessage).then(value.clearEditingState);
+      const updateMessagePromise = value
+        .editMessage(
+          // @ts-ignore
+          removeReservedFields(updatedMessage),
+        )
+        .then(value.clearEditingState);
       resetInput(attachments);
       logChatPromiseExecution(updateMessagePromise, 'update message');
 

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -15,7 +15,6 @@ Object {
       "type": "image",
     },
   ],
-  "created_at": "Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)",
   "html": "<p>regular</p>",
   "id": "7a85f744-cc89-4f82-a1d4-5456432cc8bf",
   "mentioned_users": Array [
@@ -24,8 +23,6 @@ Object {
   ],
   "quoted_message": undefined,
   "text": "",
-  "type": "regular",
-  "updated_at": "Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)",
   "user": Object {
     "banned": false,
     "created_at": "2020-04-27T13:39:49.331742Z",

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -84,6 +84,7 @@ export const useMessageDetailsForState = <
             },
             id,
             state: 'finished',
+            thumb_url: attachment.thumb_url,
             url: attachment.asset_url,
           });
         }

package/src/store/types.ts

@@ -16,7 +16,6 @@ export type PreparedQueries = [string] | [string, Array<any>];
 export type PendingTaskTypes = {
   deleteMessage: 'delete-message';
   deleteReaction: 'delete-reaction';
-  sendMessage: 'send-message';
   sendReaction: 'send-reaction';
 };
 
@@ -30,10 +29,6 @@ export type PendingTask = {
       payload: Parameters<Channel['sendReaction']>;
       type: PendingTaskTypes['sendReaction'];
     }
-  | {
-      payload: Parameters<Channel['sendMessage']>;
-      type: PendingTaskTypes['sendMessage'];
-    }
   | {
       payload: Parameters<StreamChat['deleteMessage']>;
       type: PendingTaskTypes['deleteMessage'];

package/src/utils/DBSyncManager.ts

@@ -208,7 +208,7 @@ export class DBSyncManager {
     }
   };
 
-  dropPendingTasks = (conditions: { messageId: string }) => {
+  static dropPendingTasks = (conditions: { messageId: string }) => {
     const tasks = getPendingTasks(conditions);
 
     for (const task of tasks) {

package/src/{components/Message/utils → utils}/removeReservedFields.ts

@@ -1,5 +1,5 @@
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import type { MessageType } from '../components/MessageList/hooks/useMessageList';
+import type { DefaultStreamChatGenerics } from '../types/types';
 
 export const removeReservedFields = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -12,7 +12,11 @@ export const removeReservedFields = <
     'config',
     'created_at',
     'created_by',
-    'id',
+    'deleted_at',
+    'i18n',
+    'latest_reactions',
+    'own_reactions',
+    'reaction_counts',
     'last_message_at',
     'member_count',
     'type',

package/src/utils/utils.ts

@@ -64,15 +64,16 @@ type IndicatorStatesMap = Record<ValueOf<typeof FileState>, Progress | null>;
 
 export const getIndicatorTypeForFileState = (
   fileState: FileStateValue,
-  isOnline: boolean,
   enableOfflineSupport: boolean,
 ): Progress | null => {
   const indicatorMap: IndicatorStatesMap = {
-    [FileState.UPLOADING]: ProgressIndicatorTypes.IN_PROGRESS,
-    [FileState.UPLOAD_FAILED]:
-      !isOnline && enableOfflineSupport
-        ? ProgressIndicatorTypes.INACTIVE
-        : ProgressIndicatorTypes.RETRY,
+    [FileState.UPLOADING]: enableOfflineSupport
+      ? ProgressIndicatorTypes.INACTIVE
+      : ProgressIndicatorTypes.IN_PROGRESS,
+    // If offline support is disabled, then there is no need
+    [FileState.UPLOAD_FAILED]: enableOfflineSupport
+      ? ProgressIndicatorTypes.INACTIVE
+      : ProgressIndicatorTypes.RETRY,
     [FileState.NOT_SUPPORTED]: ProgressIndicatorTypes.NOT_SUPPORTED,
     [FileState.UPLOADED]: ProgressIndicatorTypes.INACTIVE,
     [FileState.FINISHED]: ProgressIndicatorTypes.INACTIVE,

package/src/version.json

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

package/lib/commonjs/components/Message/utils/removeReservedFields.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["removeReservedFields.ts"],"names":["removeReservedFields","message","retryMessage","reserved","forEach","key"],"mappings":";;;;;;;;;AAGO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAGlCC,OAHkC,EAI/B;AACH,MAAMC,YAAY,iCAAQD,OAAR,CAAlB;AACA,MAAME,QAAQ,GAAG,CACf,KADe,EAEf,QAFe,EAGf,YAHe,EAIf,YAJe,EAKf,IALe,EAMf,iBANe,EAOf,cAPe,EAQf,MARe,EASf,YATe,CAAjB;AAWAA,EAAAA,QAAQ,CAACC,OAAT,CAAiB,UAACC,GAAD,EAAS;AACxB,WAAOH,YAAY,CAACG,GAAD,CAAnB;AACD,GAFD;AAIA,SAAOH,YAAP;AACD,CAtBM","sourcesContent":["import type { DefaultStreamChatGenerics } from '../../../types/types';\nimport type { MessageType } from '../../MessageList/hooks/useMessageList';\n\nexport const removeReservedFields = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  message: MessageType<StreamChatGenerics>,\n) => {\n  const retryMessage = { ...message };\n  const reserved = [\n    'cid',\n    'config',\n    'created_at',\n    'created_by',\n    'id',\n    'last_message_at',\n    'member_count',\n    'type',\n    'updated_at',\n  ];\n  reserved.forEach((key) => {\n    delete retryMessage[key];\n  });\n\n  return retryMessage;\n};\n"]}