stream-chat-react-native-core 4.15.0-beta.2 → 5.0.0-beta.1

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -26,7 +26,6 @@ import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
 import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
-import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -167,9 +166,6 @@ export const OverlayProvider = <
     }
   }, [overlay]);
 
-  // Setup translators
-  useStreami18n({ i18nInstance, setTranslators });
-
   const attachmentPickerContext = {
     attachmentPickerBottomSheetHeight,
     attachmentSelectionBarHeight,
@@ -204,7 +200,7 @@ export const OverlayProvider = <
         <MessageOverlayProvider<StreamChatGenerics>>
           <AttachmentPickerProvider value={attachmentPickerContext}>
             <ImageGalleryProvider>
-              <ChannelsStateProvider<StreamChatGenerics>>{children}</ChannelsStateProvider>
+              {children}
               <ThemeProvider style={overlayContext.style}>
                 <Animated.View
                   pointerEvents={overlay === 'none' ? 'none' : 'auto'}

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -15,6 +15,10 @@ export type PaginatedMessageListContextValue<
    * Has more messages to load
    */
   hasMore: boolean;
+  /**
+   * Flag to indicate that are no more recent messages to be loaded
+   */
+  hasNoMoreRecentMessagesToLoad: boolean;
   /**
    * Is loading more messages
    */

package/src/{components/Attachment/hooks → hooks}/useLoadingImage.tsx

@@ -1,8 +1,16 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+
+import { useNetInfo } from '@react-native-community/netinfo';
 
 export const useLoadingImage = () => {
   const [isLoadingImage, setLoadingImage] = useState(true);
   const [isLoadingImageError, setLoadingImageError] = useState(false);
+  const { isConnected } = useNetInfo();
+  useEffect(() => {
+    if (isConnected) {
+      setLoadingImageError(false);
+    }
+  }, [isConnected]);
 
   return { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError };
 };

package/src/index.ts

@@ -20,4 +20,8 @@ export { default as ruTranslations } from './i18n/ru.json';
 export { default as trTranslations } from './i18n/tr.json';
 export { default as heTranslations } from './i18n/he.json';
 
+export { QuickSqliteClient } from './store/QuickSqliteClient';
 export { version } from './version.json';
+
+import * as OfflineStoreApis from './store/apis';
+export { OfflineStoreApis };

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

@@ -0,0 +1,2 @@
+export const SUCCESSFUL_QUERY_RESULT = { message: 'success', status: 0 };
+export const FAILED_QUERY_RESULT = { message: 'fail', status: 1 };

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

@@ -0,0 +1,107 @@
+import Sqlite3 from 'better-sqlite3';
+
+import type { PreparedQueries } from '../../store/types';
+
+export let db: Sqlite3.Database;
+
+export const sqliteMock = {
+  close: () => {
+    db.close();
+    return {
+      message: '',
+      status: 0,
+    };
+  },
+  executeSql: (dbName: string, queryInput: string, params: unknown[]) => {
+    const query = queryInput.trim().toLowerCase();
+    const stmt = db.prepare(query);
+    let result: unknown[] = [];
+
+    if (query.indexOf('select') === 0) {
+      if (params) {
+        const modifiedParams = params.map((p) => {
+          if (typeof p == 'boolean') {
+            return Number(p);
+          } else {
+            return p;
+          }
+        });
+        result = stmt.all(modifiedParams);
+      } else {
+        result = stmt.all();
+      }
+
+      return {
+        message: '',
+        rows: {
+          _array: result,
+        },
+        status: 0,
+      };
+    }
+
+    if (query.indexOf('pragma') === 0) {
+      const pragmaQueryTokens = query.split(' ');
+      if (pragmaQueryTokens[2] === '=') {
+        db.pragma(`${pragmaQueryTokens[1]} = ${pragmaQueryTokens[3]}`);
+      } else {
+        result = db.pragma(`${pragmaQueryTokens[1]}`);
+      }
+
+      return {
+        message: '',
+        rows: {
+          _array: result,
+        },
+        status: 0,
+      };
+    }
+
+    // insert or create table query
+    if (params) {
+      stmt.run(params);
+    } else {
+      stmt.run();
+    }
+
+    return {
+      message: '',
+      rows: {
+        _array: result,
+      },
+      status: 0,
+    };
+  },
+  executeSqlBatch: (dbName: string, queriesArr: PreparedQueries[]) => {
+    queriesArr.forEach((queryAndParams) => {
+      const query = queryAndParams[0];
+      const params = queryAndParams[1];
+      const stmt = db.prepare(query);
+      if (params) {
+        const modifiedParams = params.map((p) => {
+          if (typeof p == 'boolean') {
+            return Number(p);
+          } else {
+            return p;
+          }
+        });
+
+        stmt.run(modifiedParams);
+      } else {
+        stmt.run();
+      }
+    });
+
+    return {
+      message: '',
+      staus: 0,
+    };
+  },
+  open: () => {
+    db = new Sqlite3('foobar.db');
+    return {
+      message: '',
+      status: 0,
+    };
+  },
+};

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

@@ -0,0 +1,8 @@
+export default (client, member, channel = {}) => {
+  client.dispatchEvent({
+    channel,
+    cid: channel.cid,
+    member,
+    type: 'member.added',
+  });
+};

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

@@ -0,0 +1,8 @@
+export default (client, member, channel = {}) => {
+  client.dispatchEvent({
+    channel,
+    cid: channel.cid,
+    member,
+    type: 'member.removed',
+  });
+};

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

@@ -0,0 +1,8 @@
+export default (client, member, channel = {}) => {
+  client.dispatchEvent({
+    channel,
+    cid: channel.cid,
+    member,
+    type: 'member.updated',
+  });
+};

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

@@ -0,0 +1,9 @@
+export default (client, reaction, message, channel = {}) => {
+  client.dispatchEvent({
+    channel,
+    cid: channel.cid,
+    message,
+    reaction,
+    type: 'reaction.deleted',
+  });
+};

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

@@ -0,0 +1,9 @@
+export default (client, reaction, message, channel = {}) => {
+  client.dispatchEvent({
+    channel,
+    cid: channel.cid,
+    message,
+    reaction,
+    type: 'reaction.new',
+  });
+};

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

@@ -0,0 +1,9 @@
+export default (client, reaction, message, channel = {}) => {
+  client.dispatchEvent({
+    channel,
+    cid: channel.cid,
+    message,
+    reaction,
+    type: 'reaction.updated',
+  });
+};

package/src/mock-builders/generator/reaction.js

@@ -6,7 +6,7 @@ export const generateReaction = (options = {}) => {
     created_at: new Date(),
     type: 'love',
     user,
-    user_id: user.user_id,
+    user_id: user.id,
     ...options,
   };
 };

package/src/store/QuickSqliteClient.ts

@@ -0,0 +1,144 @@
+/* eslint-disable no-underscore-dangle */
+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 { tables } from './schema';
+import { createCreateTableQuery } from './sqlite-utils/createCreateTableQuery';
+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.
+ */
+export class QuickSqliteClient {
+  static dbVersion = 2;
+
+  static dbName = DB_NAME;
+  static dbLocation = DB_LOCATION;
+
+  static getDbVersion = () => this.dbVersion;
+  // Force a specific db version. This is mainly useful for testsuit.
+  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}`);
+    }
+  };
+
+  static closeDB = () => {
+    const { message, status } = sqlite.open(this.dbName, this.dbLocation);
+
+    if (status === DB_STATUS_ERROR) {
+      console.error(`Error opening 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 dropTables = () => {
+    const queries: PreparedQueries[] = Object.keys(tables).map((table) => [
+      `DROP TABLE IF EXISTS ${table}`,
+      [],
+    ]);
+
+    this.executeSqlBatch(queries);
+  };
+
+  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 initializeDatabase = () => {
+    // @ts-ignore
+    if (sqlite === undefined) {
+      throw new Error(
+        'Please install "react-native-quick-sqlite" package to enable offline support',
+      );
+    }
+
+    const version = this.getUserPragmaVersion();
+
+    if (version !== this.dbVersion) {
+      this.dropTables();
+      this.updateUserPragmaVersion(this.dbVersion);
+    }
+    const q = (Object.keys(tables) as Table[]).reduce<PreparedQueries[]>(
+      (queriesSoFar, tableName) => {
+        queriesSoFar.push(...createCreateTableQuery(tableName));
+        return queriesSoFar;
+      },
+      [],
+    );
+
+    this.executeSqlBatch(q);
+  };
+
+  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;
+  };
+
+  static resetDB = () => {
+    this.dropTables();
+    this.initializeDatabase();
+  };
+}

package/src/store/apis/deleteChannel.ts

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

package/src/store/apis/deleteMember.ts

@@ -0,0 +1,25 @@
+import type { ChannelMemberResponse } from 'stream-chat';
+
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery';
+
+export const deleteMember = ({
+  cid,
+  flush = true,
+  member,
+}: {
+  cid: string;
+  member: ChannelMemberResponse;
+  flush?: boolean;
+}) => {
+  const query = createDeleteQuery('members', {
+    cid,
+    userId: member.user_id,
+  });
+
+  if (flush) {
+    QuickSqliteClient.executeSql.apply(null, query);
+  }
+
+  return [query];
+};

package/src/store/apis/deleteMessagesForChannel.ts

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

package/src/store/apis/deleteReactions.ts

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

package/src/store/apis/getAllChannelIds.ts

@@ -0,0 +1,7 @@
+import { selectChannels } from './queries/selectChannels';
+
+export const getAllChannelIds = () => {
+  const channels = selectChannels();
+
+  return channels.map((c) => c.cid);
+};

package/src/store/apis/getChannelMessages.ts

@@ -0,0 +1,50 @@
+import type { MessageResponse } from 'stream-chat';
+
+import { selectMessagesForChannels } from './queries/selectMessagesForChannels';
+
+import { selectReactionsForMessages } from './queries/selectReactionsForMessages';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { mapStorableToMessage } from '../mappers/mapStorableToMessage';
+import type { TableRowJoinedUser } from '../types';
+
+export const getMessages = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channelIds,
+  currentUserId,
+}: {
+  channelIds: string[];
+  currentUserId: string;
+}) => {
+  const messageRows = selectMessagesForChannels(channelIds);
+  const messageIds = messageRows.map(({ id }) => id);
+
+  // Populate the message reactions.
+  const reactionRows = selectReactionsForMessages(messageIds);
+  const messageIdVsReactions: Record<string, TableRowJoinedUser<'reactions'>[]> = {};
+  reactionRows.forEach((reaction) => {
+    if (!messageIdVsReactions[reaction.messageId]) {
+      messageIdVsReactions[reaction.messageId] = [];
+    }
+    messageIdVsReactions[reaction.messageId].push(reaction);
+  });
+
+  // Populate the messages.
+  const cidVsMessages: Record<string, MessageResponse<StreamChatGenerics>[]> = {};
+  messageRows.forEach((m) => {
+    if (!cidVsMessages[m.cid]) {
+      cidVsMessages[m.cid] = [];
+    }
+
+    cidVsMessages[m.cid].push(
+      mapStorableToMessage<StreamChatGenerics>({
+        currentUserId,
+        messageRow: m,
+        reactionRows: messageIdVsReactions[m.id],
+      }),
+    );
+  });
+
+  return cidVsMessages;
+};

package/src/store/apis/getChannels.ts

@@ -0,0 +1,46 @@
+import type { ChannelAPIResponse } from 'stream-chat';
+
+import { getMessages } from './getChannelMessages';
+import { getMembers } from './getMembers';
+import { getReads } from './getReads';
+import { selectChannels } from './queries/selectChannels';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { mapStorableToChannel } from '../mappers/mapStorableToChannel';
+
+/**
+ * Returns the list of channels with state enriched for given channel ids.
+ *
+ * @param {Object} param
+ * @param {Array} param.channelIds List of channel ids to fetch.
+ * @param {Array} param.currentUserId Id of the current logged in user.
+ *
+ * @returns {Array} Channels with enriched state.
+ */
+export const getChannels = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channelIds,
+  currentUserId,
+}: {
+  channelIds: string[];
+  currentUserId: string;
+}): Omit<ChannelAPIResponse<StreamChatGenerics>, 'duration'>[] => {
+  const channels = selectChannels({ channelIds });
+
+  const cidVsMembers = getMembers<StreamChatGenerics>({ channelIds });
+  const cidVsReads = getReads<StreamChatGenerics>({ channelIds });
+  const cidVsMessages = getMessages<StreamChatGenerics>({
+    channelIds,
+    currentUserId,
+  });
+
+  // Enrich the channels with state
+  return channels.map((c) => ({
+    ...mapStorableToChannel<StreamChatGenerics>(c),
+    members: cidVsMembers[c.cid],
+    messages: cidVsMessages[c.cid],
+    pinned_messages: [],
+    read: cidVsReads[c.cid],
+  }));
+};

package/src/store/apis/getChannelsForFilterSort.ts

@@ -0,0 +1,45 @@
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+import type { ChannelAPIResponse, ChannelFilters, ChannelSort } from 'stream-chat';
+
+import { getChannels } from './getChannels';
+import { selectChannelIdsForFilterSort } from './queries/selectChannelIdsForFilterSort';
+
+/**
+ * Gets the channels from database for given filter and sort query.
+ *
+ * @param {Object} param
+ * @param {string} param.currentUserId Id of current logged in user
+ * @param {Object} param.filters Filters for channels https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=su#query-parameters
+ * @param {Object} param.sort Sort for channels https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=su#query-parameters
+ *
+ * @returns Array of channels corresponding to filters & sort. Returns null if filters + sort query doesn't exist in "channelQueries" table.
+ */
+export const getChannelsForFilterSort = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  currentUserId,
+  filters,
+  sort,
+}: {
+  currentUserId: string;
+  filters?: ChannelFilters<StreamChatGenerics>;
+  sort?: ChannelSort<StreamChatGenerics>;
+}): Omit<ChannelAPIResponse<StreamChatGenerics>, 'duration'>[] | null => {
+  if (!filters && !sort) {
+    console.warn('Please provide the query (filters/sort) to fetch channels from DB');
+    return null;
+  }
+
+  const channelIds = selectChannelIdsForFilterSort({ filters, sort });
+
+  if (!channelIds) return null;
+
+  if (channelIds.length === 0) {
+    return [];
+  }
+
+  return getChannels({
+    channelIds,
+    currentUserId,
+  });
+};

package/src/store/apis/getLastSyncedAt.ts

@@ -0,0 +1,17 @@
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createSelectQuery } from '../sqlite-utils/createSelectQuery';
+
+export const getLastSyncedAt = ({
+  currentUserId,
+}: {
+  currentUserId: string;
+}): number | undefined => {
+  const result = QuickSqliteClient.executeSql.apply(
+    null,
+    createSelectQuery('userSyncStatus', ['*'], {
+      userId: currentUserId,
+    }),
+  );
+
+  return result[0]?.lastSyncedAt;
+};

package/src/store/apis/getMembers.ts

@@ -0,0 +1,26 @@
+import type { ChannelMemberResponse } from 'stream-chat';
+
+import { selectMembersForChannels } from './queries/selectMembersForChannels';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { mapStorableToMember } from '../mappers/mapStorableToMember';
+
+export const getMembers = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channelIds,
+}: {
+  channelIds: string[];
+}) => {
+  const memberRows = selectMembersForChannels(channelIds);
+  const cidVsMembers: Record<string, ChannelMemberResponse<StreamChatGenerics>[]> = {};
+  memberRows.forEach((member) => {
+    if (!cidVsMembers[member.cid]) {
+      cidVsMembers[member.cid] = [];
+    }
+
+    cidVsMembers[member.cid].push(mapStorableToMember<StreamChatGenerics>(member));
+  });
+
+  return cidVsMembers;
+};