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

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,
@@ -416,7 +417,7 @@ export const MessageInputProvider = <
 }>) => {
   const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
     useAttachmentPickerContext();
-  const { appSettings, client } = useChatContext<StreamChatGenerics>();
+  const { appSettings, client, enableOfflineSupport } = useChatContext<StreamChatGenerics>();
 
   const getFileUploadConfig = () => {
     const fileConfig = appSettings?.app?.file_upload_config;
@@ -490,19 +491,19 @@ export const MessageInputProvider = <
       return true;
     }
 
-    for (const image of imageUploads) {
-      if (!image || image.state === FileState.UPLOAD_FAILED) {
-        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) {
+    for (const file of imagesAndFiles) {
       if (!file || file.state === FileState.UPLOAD_FAILED) {
         continue;
       }
@@ -622,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 () => {
@@ -647,7 +704,15 @@ export const MessageInputProvider = <
 
     const attachments = [] as Attachment<StreamChatGenerics>[];
     for (const image of imageUploads) {
-      if (!image || image.state === FileState.UPLOAD_FAILED) {
+      if (enableOfflineSupport) {
+        if (image.state === FileState.NOT_SUPPORTED) {
+          return;
+        }
+        attachments.push(mapImageUploadToAttachment(image));
+        continue;
+      }
+
+      if ((!image || image.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
         continue;
       }
 
@@ -666,67 +731,32 @@ 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) {
-        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,
-          type: 'image',
-        });
+        attachments.push(mapImageUploadToAttachment(image));
       }
     }
 
     for (const file of fileUploads) {
+      if (enableOfflineSupport) {
+        if (file.state === FileState.NOT_SUPPORTED) {
+          return;
+        }
+        attachments.push(mapFileUploadToAttachment(file));
+        continue;
+      }
+
       if (!file || file.state === FileState.UPLOAD_FAILED) {
         continue;
       }
+
       if (file.state === FileState.UPLOADING) {
         // TODO: show error to user that they should wait until image is uploaded
         sending.current = false;
         return;
       }
-      const mime_type: string | boolean = lookup(file.file.name as string);
 
       if (file.state === FileState.UPLOADED || file.state === FileState.FINISHED) {
-        if (file.file.type?.startsWith('image/')) {
-          attachments.push({
-            fallback: file.file.name,
-            image_url: file.url,
-            mime_type: mime_type ? mime_type : undefined,
-            type: 'image',
-          });
-        } else if (file.file.type?.startsWith('audio/')) {
-          attachments.push({
-            asset_url: file.url,
-            duration: file.file.duration,
-            file_size: file.file.size,
-            mime_type: file.file.type,
-            title: file.file.name,
-            type: 'audio',
-          });
-        } else if (file.file.type?.startsWith('video/')) {
-          attachments.push({
-            asset_url: file.url,
-            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',
-          });
-        } else {
-          attachments.push({
-            asset_url: file.url,
-            file_size: file.file.size,
-            mime_type: file.file.type,
-            title: file.file.name,
-            type: 'file',
-          });
-        }
+        attachments.push(mapFileUploadToAttachment(file));
       }
     }
 
@@ -748,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');
 
@@ -1073,8 +1108,11 @@ export const MessageInputProvider = <
 
     const newImage: ImageUpload = {
       file: image,
+      height: image.height,
       id,
       state: imageState,
+      url: image.uri,
+      width: image.width,
     };
 
     await Promise.all([

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

@@ -7,12 +7,14 @@ Object {
       "fallback": undefined,
       "image_url": undefined,
       "mime_type": undefined,
+      "originalFile": Object {
+        "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+      },
       "original_height": undefined,
       "original_width": undefined,
       "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 [
@@ -21,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",
@@ -43,6 +43,11 @@ Object {
       "asset_url": undefined,
       "file_size": undefined,
       "mime_type": "file",
+      "originalFile": Object {
+        "name": "dummy.pdf",
+        "state": "uploaded",
+        "type": "file",
+      },
       "title": "dummy.pdf",
       "type": "file",
     },
@@ -51,6 +56,11 @@ Object {
       "duration": undefined,
       "file_size": undefined,
       "mime_type": "video/mp4",
+      "originalFile": Object {
+        "name": "dummy.pdf",
+        "state": "finished",
+        "type": "video/mp4",
+      },
       "thumb_url": undefined,
       "title": "dummy.pdf",
       "type": "video",
@@ -60,6 +70,11 @@ Object {
       "duration": undefined,
       "file_size": undefined,
       "mime_type": "audio/mp3",
+      "originalFile": Object {
+        "name": "dummy.pdf",
+        "state": "uploaded",
+        "type": "audio/mp3",
+      },
       "title": "dummy.pdf",
       "type": "audio",
     },
@@ -67,6 +82,11 @@ Object {
       "fallback": "dummy.pdf",
       "image_url": undefined,
       "mime_type": "application/pdf",
+      "originalFile": Object {
+        "name": "dummy.pdf",
+        "state": "finished",
+        "type": "image/jpeg",
+      },
       "type": "image",
     },
   ],
@@ -88,6 +108,9 @@ Object {
       "fallback": undefined,
       "image_url": undefined,
       "mime_type": undefined,
+      "originalFile": Object {
+        "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+      },
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -96,6 +119,9 @@ Object {
       "fallback": undefined,
       "image_url": undefined,
       "mime_type": undefined,
+      "originalFile": Object {
+        "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+      },
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",

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/contexts/messagesContext/MessagesContext.tsx

@@ -87,6 +87,8 @@ export type MessagesContextValue<
    * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
    **/
   DateHeader: React.ComponentType<DateHeaderProps>;
+  deleteMessage: (message: MessageResponse<StreamChatGenerics>) => Promise<void>;
+  deleteReaction: (type: string, messageId: string) => Promise<void>;
 
   /** Should keyboard be dismissed when messaged is touched */
   dismissKeyboardOnMessageTouch: boolean;
@@ -176,11 +178,11 @@ export type MessagesContextValue<
    * Custom message pinned component
    */
   MessagePinnedHeader: React.ComponentType<MessagePinnedHeaderProps<StreamChatGenerics>>;
+
   /**
    * UI component for MessageReplies
    * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageSimple/MessageReplies.tsx)
    */
-
   MessageReplies: React.ComponentType<MessageRepliesProps<StreamChatGenerics>>;
   /**
    * UI Component for MessageRepliesAvatars
@@ -226,6 +228,7 @@ export type MessagesContextValue<
    * Defaults to: [ScrollToBottomButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/scroll-to-bottom-button/)
    */
   ScrollToBottomButton: React.ComponentType<ScrollToBottomButtonProps>;
+  sendReaction: (type: string, messageId: string) => Promise<void>;
   setEditingState: (message: MessageType<StreamChatGenerics>) => void;
   setQuotedMessageState: (message: MessageType<StreamChatGenerics>) => void;
   supportedReactions: ReactionData[];

package/src/hooks/useTranslatedMessage.ts

@@ -19,7 +19,7 @@ export const useTranslatedMessage = <
 
   const translationKey: TranslationKey = `${userLanguage}_text`;
 
-  if (message.i18n && translationKey in message.i18n) {
+  if (message.i18n && translationKey in message.i18n && message.type !== 'deleted') {
     return {
       ...message,
       text: message.i18n[translationKey],

package/src/mock-builders/DB/mock.ts

@@ -12,7 +12,7 @@ export const sqliteMock = {
       status: 0,
     };
   },
-  executeSql: (dbName: string, queryInput: string, params: unknown[]) => {
+  execute: (dbName: string, queryInput: string, params: unknown[]) => {
     const query = queryInput.trim().toLowerCase();
     const stmt = db.prepare(query);
     let result: unknown[] = [];
@@ -72,7 +72,7 @@ export const sqliteMock = {
       status: 0,
     };
   },
-  executeSqlBatch: (dbName: string, queriesArr: PreparedQueries[]) => {
+  executeBatch: (dbName: string, queriesArr: PreparedQueries[]) => {
     queriesArr.forEach((queryAndParams) => {
       const query = queryAndParams[0];
       const params = queryAndParams[1];

package/src/mock-builders/api/deleteMessage.js

@@ -0,0 +1,18 @@
+import { mockedApiResponse } from './utils';
+
+import { generateMessage } from '../generator/message';
+/**
+ * Returns the api response for sendMessage api.
+ *
+ * api - /channels/{type}/{id}/message
+ *
+ * @param {*} message
+ */
+export const deleteMessageApi = (message = generateMessage()) => {
+  const result = {
+    duration: 0.01,
+    message,
+  };
+
+  return mockedApiResponse(result, 'delete');
+};

package/src/mock-builders/api/deleteReaction.js

@@ -0,0 +1,19 @@
+import { mockedApiResponse } from './utils';
+
+import { generateReaction } from '../generator/reaction';
+/**
+ * Returns the api response for sendMessage api.
+ *
+ * api - /messages/{id}/reaction
+ *
+ * @param {*} message
+ */
+export const deleteReactionApi = (message, reaction = generateReaction()) => {
+  const result = {
+    duration: 0.01,
+    message,
+    reaction,
+  };
+
+  return mockedApiResponse(result, 'delete');
+};

package/src/mock-builders/api/sendReaction.tsx

@@ -0,0 +1,19 @@
+import { mockedApiResponse } from './utils';
+
+import { generateReaction } from '../generator/reaction';
+/**
+ * Returns the api response for sendMessage api.
+ *
+ * api - /messages/{id}/reaction
+ *
+ * @param {*} message
+ */
+export const sendReactionApi = (message, reaction = generateReaction()) => {
+  const result = {
+    duration: 0.01,
+    message,
+    reaction,
+  };
+
+  return mockedApiResponse(result, 'post');
+};

package/src/mock-builders/event/connectionChanged.js

@@ -1,5 +1,6 @@
-export default (client) => {
+export default (client, online = true) => {
   client.dispatchEvent({
+    online,
     type: 'connection.changed',
   });
 };

package/src/store/QuickSqliteClient.ts

@@ -3,14 +3,14 @@ import type { QuickSQLite } from 'react-native-quick-sqlite';
 let sqlite: typeof QuickSQLite;
 
 try {
-  sqlite = require('react-native-quick-sqlite')?.QuickSQLite;
+  sqlite = require('react-native-quick-sqlite').QuickSQLite;
 } catch (e) {
   // Failed for one of the reason
   // 1. Running on expo, where we don't support offline storage yet.
   // 2. Offline support is disabled, in which case this library is not installed.
 }
 
-import { DB_LOCATION, DB_NAME, DB_STATUS_ERROR } from './constants';
+import { DB_LOCATION, DB_NAME } from './constants';
 import { tables } from './schema';
 import { createCreateTableQuery } from './sqlite-utils/createCreateTableQuery';
 import type { PreparedQueries, Table } from './types';
@@ -20,7 +20,7 @@ import type { PreparedQueries, Table } from './types';
  * This way usage react-native-quick-sqlite package is scoped to a single class/file.
  */
 export class QuickSqliteClient {
-  static dbVersion = 2;
+  static dbVersion = 3;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;
@@ -30,46 +30,47 @@ export class QuickSqliteClient {
   static setDbVersion = (version: number) => (this.dbVersion = version);
 
   static openDB = () => {
-    const { message, status } = sqlite.open(this.dbName, this.dbLocation);
-    sqlite.executeSql(this.dbName, `PRAGMA foreign_keys = ON`, []);
-
-    if (status === DB_STATUS_ERROR) {
-      console.error(`Error opening database ${this.dbName}: ${message}`);
+    try {
+      sqlite.open(this.dbName, this.dbLocation);
+      sqlite.execute(this.dbName, `PRAGMA foreign_keys = ON`, []);
+    } catch (e) {
+      console.error(`Error opening database ${this.dbName}: ${e}`);
     }
   };
 
   static closeDB = () => {
-    const { message, status } = sqlite.close(this.dbName);
-
-    if (status === DB_STATUS_ERROR) {
-      console.error(`Error closing database ${this.dbName}: ${message}`);
+    try {
+      sqlite.close(this.dbName);
+    } catch (e) {
+      console.error(`Error closing database ${this.dbName}: ${e}`);
     }
   };
 
   static executeSqlBatch = (queries: PreparedQueries[]) => {
+    if (!queries || !queries.length) return;
     this.openDB();
 
-    const res = sqlite.executeSqlBatch(DB_NAME, queries);
-
-    if (res.status === 1) {
-      console.error(`Query/queries failed: ${res.message} ${JSON.stringify(res)}`);
+    try {
+      sqlite.executeBatch(DB_NAME, queries);
+      this.closeDB();
+    } catch (e) {
+      this.closeDB();
+      throw new Error(`Query/queries failed: ${e}`);
     }
-
-    this.closeDB();
   };
 
   static executeSql = (query: string, params?: string[]) => {
     this.openDB();
 
-    const { message, rows, status } = sqlite.executeSql(DB_NAME, query, params);
+    try {
+      const { rows } = sqlite.execute(DB_NAME, query, params);
+      this.closeDB();
 
-    this.closeDB();
-
-    if (status === 1) {
-      console.error(`Query/queries failed: ${message}: `, query);
+      return rows ? rows._array : [];
+    } catch (e) {
+      this.closeDB();
+      throw new Error(`Query/queries failed: ${e}: `);
     }
-
-    return rows ? rows._array : [];
   };
 
   static dropTables = () => {
@@ -82,9 +83,10 @@ export class QuickSqliteClient {
   };
 
   static deleteDatabase = () => {
-    const { message, status } = sqlite.delete(this.dbName, this.dbLocation);
-    if (status === DB_STATUS_ERROR) {
-      throw new Error(`Error deleting DB: ${message}`);
+    try {
+      sqlite.delete(this.dbName, this.dbLocation);
+    } catch (e) {
+      throw new Error(`Error deleting DB: ${e}`);
     }
 
     return true;
@@ -118,7 +120,7 @@ export class QuickSqliteClient {
   static updateUserPragmaVersion = (version: number) => {
     this.openDB();
 
-    sqlite.executeSql(DB_NAME, `PRAGMA user_version = ${version}`, []);
+    sqlite.execute(DB_NAME, `PRAGMA user_version = ${version}`, []);
 
     this.closeDB();
   };
@@ -126,15 +128,15 @@ export class QuickSqliteClient {
   static getUserPragmaVersion = () => {
     this.openDB();
 
-    const { message, rows, status } = sqlite.executeSql(DB_NAME, `PRAGMA user_version`, []);
-
-    this.closeDB();
-    if (status === 1) {
-      console.error(`Querying for user_version failed: ${message}`);
+    try {
+      const { rows } = sqlite.execute(DB_NAME, `PRAGMA user_version`, []);
+      const result = rows ? rows._array : [];
+      this.closeDB();
+      return result[0].user_version as number;
+    } catch (e) {
+      this.closeDB();
+      throw new Error(`Querying for user_version failed: ${e}`);
     }
-
-    const result = rows ? rows._array : [];
-    return result[0].user_version as number;
   };
 
   static resetDB = () => {

package/src/store/apis/addPendingTask.ts

@@ -0,0 +1,24 @@
+import { mapTaskToStorable } from '../mappers/mapTaskToStorable';
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery';
+import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery';
+import type { PendingTask } from '../types';
+
+export const addPendingTask = (task: PendingTask) => {
+  const storable = mapTaskToStorable(task);
+  const query = createUpsertQuery('pendingTasks', storable);
+
+  QuickSqliteClient.executeSql.apply(null, query);
+
+  return () => {
+    const { channelId, channelType, payload, type } = storable;
+    const query = createDeleteQuery('pendingTasks', {
+      channelId,
+      channelType,
+      payload,
+      type,
+    });
+
+    QuickSqliteClient.executeSql.apply(null, query);
+  };
+};

package/src/store/apis/deleteMessage.ts

@@ -0,0 +1,13 @@
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery';
+
+export const deleteMessage = ({ flush = true, id }: { id: string; flush?: boolean }) => {
+  const query = createDeleteQuery('messages', {
+    id,
+  });
+  if (flush) {
+    QuickSqliteClient.executeSql.apply(null, query);
+  }
+
+  return [query];
+};

package/src/store/apis/deletePendingTask.ts

@@ -0,0 +1,12 @@
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery';
+
+export const deletePendingTask = ({ id }: { id: number }) => {
+  const query = createDeleteQuery('pendingTasks', {
+    id,
+  });
+
+  QuickSqliteClient.executeSql.apply(null, query);
+
+  return [query];
+};

package/src/store/apis/deleteReaction.ts

@@ -0,0 +1,26 @@
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery';
+
+export const deleteReaction = ({
+  flush = true,
+  messageId,
+  reactionType,
+  userId,
+}: {
+  messageId: string;
+  reactionType: string;
+  userId: string;
+  flush?: boolean;
+}) => {
+  const query = createDeleteQuery('reactions', {
+    messageId,
+    type: reactionType,
+    userId,
+  });
+
+  if (flush) {
+    QuickSqliteClient.executeSql.apply(null, query);
+  }
+
+  return [query];
+};