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

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__/MessageInputContext.test.tsx

@@ -4,6 +4,7 @@ import type { TextInput } from 'react-native';
 
 import { act, renderHook } from '@testing-library/react-hooks';
 
+import { waitFor } from '@testing-library/react-native';
 import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
 
 import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
@@ -167,7 +168,7 @@ describe('MessageInputContext', () => {
     expect(result.current.text).toBe('/');
   });
 
-  it('openMentionPicker works', () => {
+  it('openMentionPicker works', async () => {
     const { result } = renderHook(() => useMessageInputContext(), {
       initialProps: {
         editing: true,
@@ -180,7 +181,9 @@ describe('MessageInputContext', () => {
       result.current.openMentionsPicker();
     });
 
-    expect(result.current.text).toBe('@');
+    await waitFor(() => {
+      expect(result.current.text).toBe('@');
+    });
   });
 
   it('openAttachmentPicker works', async () => {
@@ -203,6 +206,8 @@ describe('MessageInputContext', () => {
       result.current.openAttachmentPicker();
     });
 
-    expect(await result.current.pickFile()).toBe(undefined);
+    await waitFor(async () => {
+      expect(await result.current.pickFile()).toBe(undefined);
+    });
   });
 });

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/__tests__/uploadFile.test.tsx

@@ -3,6 +3,8 @@ import { act } from 'react-test-renderer';
 
 import { renderHook } from '@testing-library/react-hooks';
 
+import { waitFor } from '@testing-library/react-native';
+
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import {
@@ -31,7 +33,7 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
 );
 
 describe("MessageInputContext's uploadFile", () => {
-  it('uploadFile works', () => {
+  it('uploadFile works', async () => {
     const doDocUploadRequestMock = jest.fn().mockResolvedValue({
       file: {
         url: '',
@@ -46,16 +48,20 @@ describe("MessageInputContext's uploadFile", () => {
       wrapper: Wrapper,
     });
 
-    expect(result.current.fileUploads).toHaveLength(0);
+    await waitFor(() => {
+      expect(result.current.fileUploads).toHaveLength(0);
+    });
 
     act(() => {
       result.current.uploadFile({ newFile: generateFileUploadPreview({ state: '' }) });
     });
 
-    expect(doDocUploadRequestMock).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(doDocUploadRequestMock).toHaveBeenCalled();
+    });
   });
 
-  it('uploadFile catch block gets executed', () => {
+  it('uploadFile catch block gets executed', async () => {
     const doDocUploadRequestMock = jest.fn().mockResolvedValue(new Error('This is an error'));
     const { result } = renderHook(() => useMessageInputContext(), {
       initialProps: {
@@ -65,12 +71,16 @@ describe("MessageInputContext's uploadFile", () => {
       wrapper: Wrapper,
     });
 
-    expect(result.current.fileUploads).toHaveLength(0);
+    await waitFor(() => {
+      expect(result.current.fileUploads).toHaveLength(0);
+    });
 
     act(() => {
       result.current.uploadFile({ newFile: generateFileUploadPreview({ state: '' }) });
     });
 
-    expect(result.current.fileUploads.length).toBe(0);
+    await waitFor(() => {
+      expect(result.current.fileUploads.length).toBe(0);
+    });
   });
 });

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/QuickSqliteClient.ts

@@ -11,6 +11,7 @@ try {
 }
 
 import { DB_LOCATION, DB_NAME } from './constants';
+import { QuickSqliteClient_v4 } from './QuickSqliteClient_v4';
 import { tables } from './schema';
 import { createCreateTableQuery } from './sqlite-utils/createCreateTableQuery';
 import type { PreparedQueries, Table } from './types';
@@ -18,6 +19,8 @@ import type { PreparedQueries, Table } from './types';
 /**
  * QuickSqliteClient takes care of any direct interaction with sqlite.
  * This way usage react-native-quick-sqlite package is scoped to a single class/file.
+ *
+ * TODO: Drop the support for v4 of react-native-quick-sqlite in the next major release.
  */
 export class QuickSqliteClient {
   static dbVersion = 3;
@@ -29,7 +32,16 @@ export class QuickSqliteClient {
   // Force a specific db version. This is mainly useful for testsuit.
   static setDbVersion = (version: number) => (this.dbVersion = version);
 
+  // @ts-ignore
+  static isQuickSqliteV4 = sqlite.executeSql ? true : false;
+
+  // print if legacy version
   static openDB = () => {
+    if (this.isQuickSqliteV4) {
+      QuickSqliteClient_v4.openDB();
+      return;
+    }
+
     try {
       sqlite.open(this.dbName, this.dbLocation);
       sqlite.execute(this.dbName, `PRAGMA foreign_keys = ON`, []);
@@ -39,6 +51,11 @@ export class QuickSqliteClient {
   };
 
   static closeDB = () => {
+    if (this.isQuickSqliteV4) {
+      QuickSqliteClient_v4.closeDB();
+      return;
+    }
+
     try {
       sqlite.close(this.dbName);
     } catch (e) {
@@ -48,10 +65,16 @@ export class QuickSqliteClient {
 
   static executeSqlBatch = (queries: PreparedQueries[]) => {
     if (!queries || !queries.length) return;
-    this.openDB();
 
+    if (this.isQuickSqliteV4) {
+      QuickSqliteClient_v4.executeSqlBatch(queries);
+      return;
+    }
+
+    this.openDB();
     try {
       sqlite.executeBatch(DB_NAME, queries);
+
       this.closeDB();
     } catch (e) {
       this.closeDB();
@@ -60,9 +83,12 @@ export class QuickSqliteClient {
   };
 
   static executeSql = (query: string, params?: string[]) => {
-    this.openDB();
+    if (this.isQuickSqliteV4) {
+      return QuickSqliteClient_v4.executeSql(query, params);
+    }
 
     try {
+      this.openDB();
       const { rows } = sqlite.execute(DB_NAME, query, params);
       this.closeDB();
 
@@ -83,6 +109,10 @@ export class QuickSqliteClient {
   };
 
   static deleteDatabase = () => {
+    if (this.isQuickSqliteV4) {
+      return QuickSqliteClient_v4.deleteDatabase();
+    }
+
     try {
       sqlite.delete(this.dbName, this.dbLocation);
     } catch (e) {
@@ -100,6 +130,14 @@ export class QuickSqliteClient {
       );
     }
 
+    if (this.isQuickSqliteV4) {
+      console.warn(
+        'You seem to be using an older version of "react-native-quick-sqlite" dependency,',
+        'and we are going to drop support for it in the next major release.',
+        'Please upgrade to the version v5 of "react-native-quick-sqlite" to avoid any issues.',
+      );
+    }
+
     const version = this.getUserPragmaVersion();
 
     if (version !== this.dbVersion) {
@@ -118,16 +156,22 @@ export class QuickSqliteClient {
   };
 
   static updateUserPragmaVersion = (version: number) => {
-    this.openDB();
+    if (this.isQuickSqliteV4) {
+      QuickSqliteClient_v4.updateUserPragmaVersion(version);
+      return;
+    }
 
+    this.openDB();
     sqlite.execute(DB_NAME, `PRAGMA user_version = ${version}`, []);
-
     this.closeDB();
   };
 
   static getUserPragmaVersion = () => {
-    this.openDB();
+    if (this.isQuickSqliteV4) {
+      return QuickSqliteClient_v4.getUserPragmaVersion();
+    }
 
+    this.openDB();
     try {
       const { rows } = sqlite.execute(DB_NAME, `PRAGMA user_version`, []);
       const result = rows ? rows._array : [];

package/src/store/QuickSqliteClient_v4.ts

@@ -0,0 +1,98 @@
+// We are going to disable type checks for this file, since this QuickSqliteClient is for legacy version of sqlite but
+// dev-dependency "react-native-quick-sqlite" is not available for legacy version of sqlite.
+/* eslint-disable no-underscore-dangle */
+// @ts-nocheck
+
+import type { QuickSQLite } from 'react-native-quick-sqlite';
+let sqlite: typeof QuickSQLite;
+
+try {
+  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 type { PreparedQueries } from './types';
+
+// QuickSqliteClient takes care of any direct interaction with sqlite for v4 of react-native-quick-sqlite.
+// This is to avoid any breaking changes for users using v4 of react-native-quick-sqlite.
+export class QuickSqliteClient_v4 {
+  static dbName = DB_NAME;
+  static dbLocation = DB_LOCATION;
+
+  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}`);
+    }
+  };
+
+  static closeDB = () => {
+    const { message, status } = sqlite.close(this.dbName);
+
+    if (status === DB_STATUS_ERROR) {
+      console.error(`Error closing database ${this.dbName}: ${message}`);
+    }
+  };
+
+  static executeSqlBatch = (queries: PreparedQueries[]) => {
+    this.openDB();
+
+    const res = sqlite.executeSqlBatch(DB_NAME, queries);
+
+    if (res.status === 1) {
+      console.error(`Query/queries failed: ${res.message} ${JSON.stringify(res)}`);
+    }
+
+    this.closeDB();
+  };
+
+  static executeSql = (query: string, params?: string[]) => {
+    this.openDB();
+
+    const { message, rows, status } = sqlite.executeSql(DB_NAME, query, params);
+
+    this.closeDB();
+
+    if (status === 1) {
+      console.error(`Query/queries failed: ${message}: `, query);
+    }
+
+    return rows ? rows._array : [];
+  };
+
+  static deleteDatabase = () => {
+    const { message, status } = sqlite.delete(this.dbName, this.dbLocation);
+    if (status === DB_STATUS_ERROR) {
+      throw new Error(`Error deleting DB: ${message}`);
+    }
+
+    return true;
+  };
+
+  static updateUserPragmaVersion = (version: number) => {
+    this.openDB();
+
+    sqlite.executeSql(DB_NAME, `PRAGMA user_version = ${version}`, []);
+
+    this.closeDB();
+  };
+
+  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}`);
+    }
+
+    const result = rows ? rows._array : [];
+    return result[0].user_version as number;
+  };
+}

package/src/store/apis/getAppSettings.ts

@@ -0,0 +1,19 @@
+import type { AppSettingsAPIResponse } from 'stream-chat';
+
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createSelectQuery } from '../sqlite-utils/createSelectQuery';
+
+export const getAppSettings = ({
+  currentUserId,
+}: {
+  currentUserId: string;
+}): AppSettingsAPIResponse => {
+  const result = QuickSqliteClient.executeSql.apply(
+    null,
+    createSelectQuery('userSyncStatus', ['*'], {
+      userId: currentUserId,
+    }),
+  );
+
+  return result[0]?.appSettings ? JSON.parse(result[0].appSettings) : null;
+};

package/src/store/apis/getPendingTasks.ts

@@ -1,6 +1,7 @@
 import { mapStorableToTask } from '../mappers/mapStorableToTask';
 import { QuickSqliteClient } from '../QuickSqliteClient';
 import { createSelectQuery } from '../sqlite-utils/createSelectQuery';
+import type { TableRowJoinedUser } from '../types';
 
 export const getPendingTasks = (conditions: { messageId?: string } = {}) => {
   const query = createSelectQuery('pendingTasks', ['*'], conditions, {
@@ -9,5 +10,5 @@ export const getPendingTasks = (conditions: { messageId?: string } = {}) => {
 
   const result = QuickSqliteClient.executeSql.apply(null, query);
 
-  return result.map((r) => mapStorableToTask(r));
+  return result.map((r: TableRowJoinedUser<'pendingTasks'>) => mapStorableToTask(r));
 };

package/src/store/apis/index.ts

@@ -4,6 +4,7 @@ export * from './deleteMessage';
 export * from './deleteMessagesForChannel';
 export * from './deleteReactions';
 export * from './getAllChannelIds';
+export * from './getAppSettings';
 export * from './getChannelMessages';
 export * from './getChannels';
 export * from './getChannelsForFilterSort';
@@ -12,6 +13,7 @@ export * from './getMembers';
 export * from './getReads';
 export * from './updateMessage';
 export * from './updateReaction';
+export * from './upsertAppSettings';
 export * from './upsertChannelData';
 export * from './upsertChannels';
 export * from './upsertCidsForQuery';

package/src/store/apis/queries/selectChannels.ts

@@ -18,7 +18,10 @@ export const selectChannels = ({
   const result = QuickSqliteClient.executeSql.apply(null, query);
 
   if (channelIds) {
-    return result.sort((a, b) => channelIds.indexOf(a.cid) - channelIds.indexOf(b.cid));
+    return result.sort(
+      (a: { cid: string }, b: { cid: string }) =>
+        channelIds.indexOf(a.cid) - channelIds.indexOf(b.cid),
+    );
   } else {
     return result;
   }

package/src/store/apis/queries/selectMembersForChannels.ts

@@ -28,5 +28,5 @@ export const selectMembersForChannels = (cids: string[]): TableRowJoinedUser<'me
     cids,
   );
 
-  return result.map((r) => JSON.parse(r.value));
+  return result.map((r: { value: string }) => JSON.parse(r.value));
 };

package/src/store/apis/queries/selectMessagesForChannels.ts

@@ -36,5 +36,5 @@ export const selectMessagesForChannels = (cids: string[]): TableRowJoinedUser<'m
     cids,
   );
 
-  return result.map((r) => JSON.parse(r.value));
+  return result.map((r: { value: string }) => JSON.parse(r.value));
 };

package/src/store/apis/queries/selectReactionsForMessages.ts

@@ -29,5 +29,5 @@ export const selectReactionsForMessages = (
     messageIds,
   );
 
-  return result.map((r) => JSON.parse(r.value));
+  return result.map((r: { value: string }) => JSON.parse(r.value));
 };

package/src/store/apis/queries/selectReadsForChannels.ts

@@ -26,5 +26,5 @@ export const selectReadsForChannels = (cids: string[]): TableRowJoinedUser<'read
     cids,
   );
 
-  return result.map((r) => JSON.parse(r.value));
+  return result.map((r: { value: string }) => JSON.parse(r.value));
 };