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

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { act } from 'react-test-renderer';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import {
   ImageGalleryContext,
@@ -45,7 +45,7 @@ const getComponent = (props: Partial<ImageGalleryContextValue>) => (
 );
 
 describe('ImageGallery', () => {
-  it('render image gallery component', () => {
+  it('render image gallery component', async () => {
     const { queryAllByA11yLabel } = render(
       getComponent({
         messages: [
@@ -59,11 +59,14 @@ describe('ImageGallery', () => {
         ] as unknown as MessageType<DefaultStreamChatGenerics>[],
       }),
     );
-    expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
-    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
+      expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+    });
   });
 
-  it('handle handleLoad function when video item present and payload duration is available', () => {
+  it('handle handleLoad function when video item present and payload duration is available', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -86,10 +89,13 @@ describe('ImageGallery', () => {
     });
 
     const videoDurationComponent = getByA11yLabel('Video Duration');
-    expect(videoDurationComponent.children[0]).toBe('00:10');
+
+    await waitFor(() => {
+      expect(videoDurationComponent.children[0]).toBe('00:10');
+    });
   });
 
-  it('handle handleLoad function when video item present and payload duration is undefined', () => {
+  it('handle handleLoad function when video item present and payload duration is undefined', async () => {
     const { getByA11yLabel } = render(
       getComponent({
         messages: [
@@ -109,10 +115,12 @@ describe('ImageGallery', () => {
     });
 
     const videoDurationComponent = getByA11yLabel('Video Duration');
-    expect(videoDurationComponent.children[0]).toBe('00:00');
+    await waitFor(() => {
+      expect(videoDurationComponent.children[0]).toBe('00:00');
+    });
   });
 
-  it('handle handleProgress function when video item present and payload is well defined', () => {
+  it('handle handleProgress function when video item present and payload is well defined', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -143,10 +151,12 @@ describe('ImageGallery', () => {
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
 
-    expect(progressDurationComponent.children[0]).toBe('00:03');
+    await waitFor(() => {
+      expect(progressDurationComponent.children[0]).toBe('00:03');
+    });
   });
 
-  it('handle handleProgress function when video item present and payload is not defined', () => {
+  it('handle handleProgress function when video item present and payload is not defined', async () => {
     const { getByA11yLabel } = render(
       getComponent({
         messages: [
@@ -171,10 +181,12 @@ describe('ImageGallery', () => {
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
 
-    expect(progressDurationComponent.children[0]).toBe('00:00');
+    await waitFor(() => {
+      expect(progressDurationComponent.children[0]).toBe('00:00');
+    });
   });
 
-  it('handle handleEnd function when video item present', () => {
+  it('handle handleEnd function when video item present', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -198,7 +210,9 @@ describe('ImageGallery', () => {
     });
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
-    expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
-    expect(progressDurationComponent.children[0]).toBe('00:10');
+    await waitFor(() => {
+      expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
+      expect(progressDurationComponent.children[0]).toBe('00:10');
+    });
   });
 });

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -97,10 +97,13 @@ describe('ImageGalleryFooter', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Left element')).toHaveLength(1);
-    expect(queryAllByText('Right element')).toHaveLength(1);
-    expect(queryAllByText('Center element')).toHaveLength(1);
-    expect(queryAllByText('Video Control element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Left element')).toHaveLength(1);
+      expect(queryAllByText('Right element')).toHaveLength(1);
+      expect(queryAllByText('Center element')).toHaveLength(1);
+      expect(queryAllByText('Video Control element')).toHaveLength(1);
+    });
   });
 
   it('render image gallery footer component with custom component footer Grid Icon and Share Icon component', async () => {
@@ -147,8 +150,11 @@ describe('ImageGalleryFooter', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Share Icon element')).toHaveLength(1);
-    expect(queryAllByText('Grid Icon element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Share Icon element')).toHaveLength(1);
+      expect(queryAllByText('Grid Icon element')).toHaveLength(1);
+    });
   });
 
   it('should trigger the share button onPress Handler', async () => {

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -90,9 +90,12 @@ describe('ImageGalleryHeader', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Left element')).toHaveLength(1);
-    expect(queryAllByText('Right element')).toHaveLength(1);
-    expect(queryAllByText('Center element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Left element')).toHaveLength(1);
+      expect(queryAllByText('Right element')).toHaveLength(1);
+      expect(queryAllByText('Center element')).toHaveLength(1);
+    });
   });
 
   it('render image gallery header component with custom Close Icon component', async () => {
@@ -132,7 +135,9 @@ describe('ImageGalleryHeader', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Close Icon element')).toHaveLength(1);
+    await waitFor(() => {
+      expect(queryAllByText('Close Icon element')).toHaveLength(1);
+    });
   });
 
   it('should trigger the hideOverlay function on button onPress', async () => {

package/src/contexts/chatContext/ChatContext.tsx

@@ -36,7 +36,7 @@ export type ChatContextValue<
   connectionRecovering: boolean;
   enableOfflineSupport: boolean;
   ImageComponent: React.ComponentType<ImageProps>;
-  isOnline: boolean;
+  isOnline: boolean | null;
   mutedUsers: Mute<StreamChatGenerics>[];
   /**
    * @param newChannel Channel to set as active.

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__/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/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));
 };

package/src/store/apis/upsertAppSettings.ts

@@ -0,0 +1,23 @@
+import type { AppSettingsAPIResponse } from 'stream-chat';
+
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery';
+
+export const upsertAppSettings = ({
+  appSettings,
+  currentUserId,
+  flush = true,
+}: {
+  appSettings: AppSettingsAPIResponse;
+  currentUserId: string;
+  flush?: boolean;
+}) => {
+  const query = createUpsertQuery('userSyncStatus', {
+    appSettings: JSON.stringify(appSettings),
+    userId: currentUserId,
+  });
+
+  if (flush) {
+    QuickSqliteClient.executeSql.apply(null, query);
+  }
+};

package/src/store/schema.ts

@@ -201,6 +201,7 @@ export const tables: Tables = {
   },
   userSyncStatus: {
     columns: {
+      appSettings: 'TEXT',
       lastSyncedAt: 'TEXT',
       userId: 'TEXT',
     },
@@ -302,6 +303,7 @@ export type Schema = {
     updatedAt?: string;
   };
   userSyncStatus: {
+    appSettings: string;
     lastSyncedAt: string;
     userId: string;
   };

package/src/version.json

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