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

package/src/store/apis/getChannelMessages.ts

@@ -8,7 +8,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { mapStorableToMessage } from '../mappers/mapStorableToMessage';
 import type { TableRowJoinedUser } from '../types';
 
-export const getMessages = <
+export const getChannelMessages = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channelIds,

package/src/store/apis/getChannels.ts

@@ -1,6 +1,6 @@
 import type { ChannelAPIResponse } from 'stream-chat';
 
-import { getMessages } from './getChannelMessages';
+import { getChannelMessages } from './getChannelMessages';
 import { getMembers } from './getMembers';
 import { getReads } from './getReads';
 import { selectChannels } from './queries/selectChannels';
@@ -30,7 +30,7 @@ export const getChannels = <
 
   const cidVsMembers = getMembers<StreamChatGenerics>({ channelIds });
   const cidVsReads = getReads<StreamChatGenerics>({ channelIds });
-  const cidVsMessages = getMessages<StreamChatGenerics>({
+  const cidVsMessages = getChannelMessages<StreamChatGenerics>({
     channelIds,
     currentUserId,
   });

package/src/store/apis/getPendingTasks.ts

@@ -0,0 +1,13 @@
+import { mapStorableToTask } from '../mappers/mapStorableToTask';
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createSelectQuery } from '../sqlite-utils/createSelectQuery';
+
+export const getPendingTasks = (conditions: { messageId?: string } = {}) => {
+  const query = createSelectQuery('pendingTasks', ['*'], conditions, {
+    createdAt: 1,
+  });
+
+  const result = QuickSqliteClient.executeSql.apply(null, query);
+
+  return result.map((r) => mapStorableToTask(r));
+};

package/src/store/apis/index.ts

@@ -1,5 +1,6 @@
 export * from './deleteChannel';
 export * from './deleteMember';
+export * from './deleteMessage';
 export * from './deleteMessagesForChannel';
 export * from './deleteReactions';
 export * from './getAllChannelIds';

package/src/store/apis/insertReaction.ts

@@ -0,0 +1,29 @@
+import type { ReactionResponse } from 'stream-chat';
+
+import { mapReactionToStorable } from '../mappers/mapReactionToStorable';
+import { QuickSqliteClient } from '../QuickSqliteClient';
+import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery';
+import type { PreparedQueries } from '../types';
+
+export const insertReaction = ({
+  flush = true,
+  reaction,
+}: {
+  reaction: ReactionResponse;
+  flush?: boolean;
+}) => {
+  const queries: PreparedQueries[] = [];
+
+  queries.push(createUpsertQuery('reactions', mapReactionToStorable(reaction)));
+
+  queries.push([
+    'UPDATE messages SET reactionCounts = reactionCounts + 1 WHERE id = ?',
+    [reaction.message_id],
+  ]);
+
+  if (flush) {
+    QuickSqliteClient.executeSqlBatch(queries);
+  }
+
+  return queries;
+};

package/src/store/apis/updateMessage.ts

@@ -1,4 +1,4 @@
-import type { MessageResponse } from 'stream-chat';
+import type { FormatMessageResponse, MessageResponse } from 'stream-chat';
 
 import { mapMessageToStorable } from '../mappers/mapMessageToStorable';
 import { mapReactionToStorable } from '../mappers/mapReactionToStorable';
@@ -14,7 +14,7 @@ export const updateMessage = ({
   flush = true,
   message,
 }: {
-  message: MessageResponse;
+  message: MessageResponse | FormatMessageResponse;
   flush?: boolean;
 }) => {
   const queries: PreparedQueries[] = [];

package/src/store/apis/updateReaction.ts

@@ -1,4 +1,4 @@
-import type { MessageResponse, ReactionResponse } from 'stream-chat';
+import type { FormatMessageResponse, MessageResponse, ReactionResponse } from 'stream-chat';
 
 import { mapMessageToStorable } from '../mappers/mapMessageToStorable';
 import { mapReactionToStorable } from '../mappers/mapReactionToStorable';
@@ -13,7 +13,7 @@ export const updateReaction = ({
   message,
   reaction,
 }: {
-  message: MessageResponse;
+  message: MessageResponse | FormatMessageResponse;
   reaction: ReactionResponse;
   flush?: boolean;
 }) => {

package/src/store/mappers/mapDateTimeToStorable.ts

@@ -1,4 +1,4 @@
-export const mapDateTimeToStorable = (datetime?: string) => {
+export const mapDateTimeToStorable = (datetime?: string | Date) => {
   if (!datetime) return '';
 
   return new Date(datetime).toISOString();

package/src/store/mappers/mapMessageToStorable.ts

@@ -1,16 +1,22 @@
-import type { MessageResponse } from 'stream-chat';
+import type { FormatMessageResponse, MessageResponse } from 'stream-chat';
 
 import { mapDateTimeToStorable } from './mapDateTimeToStorable';
 
 import type { TableRow } from '../types';
 
-export const mapMessageToStorable = (message: MessageResponse): TableRow<'messages'> => {
+export const mapMessageToStorable = (
+  message: MessageResponse | FormatMessageResponse,
+): TableRow<'messages'> => {
   const {
     attachments,
     cid,
     created_at,
     deleted_at,
     id,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    latest_reactions,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    own_reactions,
     reaction_counts,
     text,
     type,

package/src/store/mappers/mapStorableToTask.ts

@@ -0,0 +1,13 @@
+import type { PendingTask, TableRowJoinedUser } from '../types';
+
+export const mapStorableToTask = (row: TableRowJoinedUser<'pendingTasks'>): PendingTask => {
+  const { channelId, channelType, id, messageId, type } = row;
+  return {
+    channelId,
+    channelType,
+    id,
+    messageId,
+    payload: JSON.parse(row.payload),
+    type,
+  };
+};

package/src/store/mappers/mapTaskToStorable.ts

@@ -0,0 +1,7 @@
+import type { PendingTask } from '../types';
+
+export const mapTaskToStorable = (task: PendingTask) => ({
+  ...task,
+  createdAt: new Date().toISOString(),
+  payload: JSON.stringify(task.payload),
+});

package/src/store/schema.ts

@@ -1,11 +1,14 @@
 import type { MessageLabel, Role } from 'stream-chat';
 
+import type { PendingTaskTypes } from './types';
+
+import type { ValueOf } from '../types/types';
+
 type Tables = {
   [P in keyof Schema]: {
     columns: {
       [K in keyof Schema[P]]: string;
     };
-    primaryKey: Array<keyof Schema[P]>;
     foreignKeys?: Array<{
       column: `${Exclude<keyof Schema[P], symbol>}`;
       referenceTable: `${keyof Schema}`;
@@ -18,6 +21,7 @@ type Tables = {
       name: string;
       unique: boolean;
     }>;
+    primaryKey?: Array<keyof Schema[P]>;
   };
 };
 
@@ -121,6 +125,17 @@ export const tables: Tables = {
     ],
     primaryKey: ['id'],
   },
+  pendingTasks: {
+    columns: {
+      channelId: 'TEXT',
+      channelType: 'TEXT',
+      createdAt: 'TEXT',
+      id: 'INTEGER PRIMARY KEY AUTOINCREMENT',
+      messageId: 'TEXT',
+      payload: 'TEXT',
+      type: 'TEXT',
+    },
+  },
   reactions: {
     columns: {
       createdAt: 'TEXT',
@@ -252,6 +267,15 @@ export type Schema = {
     text?: string;
     userId?: string;
   };
+  pendingTasks: {
+    channelId: string;
+    channelType: string;
+    createdAt: string;
+    id: number;
+    messageId: string;
+    payload: string;
+    type: ValueOf<PendingTaskTypes>;
+  };
   reactions: {
     createdAt: string;
     messageId: string;

package/src/store/sqlite-utils/appendOrderByClause.ts

@@ -0,0 +1,24 @@
+import type { Schema } from '../schema';
+import type { PreparedQueries, TableColumnNames } from '../types';
+
+export const appendOrderByClause = <T extends keyof Schema>(
+  selectQuery: string,
+  orderBy?: Partial<{ [k in TableColumnNames<T>]: 1 | -1 }>,
+): PreparedQueries => {
+  if (!orderBy) return [selectQuery, []];
+
+  const orderByClause = [];
+
+  for (const key in orderBy) {
+    const order = orderBy[key];
+    if (order === undefined) continue;
+
+    orderByClause.push(`${key} ${order === 1 ? 'ASC' : 'DESC'}`);
+  }
+
+  if (!orderByClause.length) {
+    return [selectQuery, []];
+  }
+
+  return [`${selectQuery} ORDER BY ${orderByClause.join(', ')}`];
+};

package/src/store/sqlite-utils/createCreateTableQuery.ts

@@ -8,8 +8,8 @@ export const createCreateTableQuery = (tableName: Table): PreparedQueries[] => {
   });
 
   const primaryKeyConstraints =
-    tables[tableName].primaryKey.length > 0
-      ? [`PRIMARY KEY (${tables[tableName].primaryKey.join(', ')})`]
+    (tables[tableName].primaryKey || []).length > 0
+      ? [`PRIMARY KEY (${(tables[tableName].primaryKey || []).join(', ')})`]
       : [];
   const foreignKeysConstraints =
     tables[tableName].foreignKeys?.map(

package/src/store/sqlite-utils/createSelectQuery.ts

@@ -1,3 +1,4 @@
+import { appendOrderByClause } from './appendOrderByClause';
 import { appendWhereClause } from './appendWhereCluase';
 
 import type { Schema } from '../schema';
@@ -17,9 +18,11 @@ export const createSelectQuery = <T extends keyof Schema>(
   table: T,
   fields: Array<'*'> | Array<TableColumnNames<T>> = ['*'],
   whereCondition?: Partial<{ [k in TableColumnNames<T>]: TableColumnValue | TableColumnValue[] }>,
+  orderBy?: Partial<{ [k in TableColumnNames<T>]: 1 | -1 }>,
 ): PreparedQueries => {
   const selectQuery = `SELECT ${fields.join(', ')} FROM ${table}`;
   const [selectQueryWithWhere, whereParams] = appendWhereClause(selectQuery, whereCondition);
+  const [selectQueryWithOrderBy] = appendOrderByClause(selectQueryWithWhere, orderBy);
 
-  return [`${selectQueryWithWhere}`, whereParams || []];
+  return [`${selectQueryWithOrderBy}`, whereParams || []];
 };

package/src/store/sqlite-utils/createUpdateQuery.ts

@@ -19,9 +19,10 @@ export const createUpdateQuery = <T extends keyof Schema>(
   whereCondition: Partial<{ [k in TableColumnNames<T>]: TableColumnValue | TableColumnValue[] }>,
 ): PreparedQueries => {
   const fields = Object.keys(set).map((key) => `${key} = ?`);
-  const updateQuery = `UPDATE ${table} SET ${fields.join(',')}`;
+
+  const updateQuery = `UPDATE OR IGNORE ${table} SET ${fields.join(',')}`;
 
   const [updateQueryWithWhere, whereParams] = appendWhereClause(updateQuery, whereCondition);
 
-  return [updateQueryWithWhere, [...Object.values(set), ...(whereParams || [])]];
+  return [`${updateQueryWithWhere}`, [...Object.values(set), ...(whereParams || [])]];
 };

package/src/store/sqlite-utils/createUpsertQuery.ts

@@ -30,7 +30,7 @@ export const createUpsertQuery = <T extends keyof Schema>(
   const fields = Object.keys(filteredRow) as (keyof typeof row)[];
 
   const questionMarks = Array(Object.keys(fields).length).fill('?').join(',');
-  const conflictKeys = conflictCheckKeys || tables[table].primaryKey;
+  const conflictKeys = conflictCheckKeys || tables[table].primaryKey || [];
   const conflictMatchersWithoutPK: string[] = (fields as string[])
     .filter((f) => !(conflictKeys as string[]).includes(f))
     .map((f) => `${f}=excluded.${f}`);

package/src/store/types.ts

@@ -1,3 +1,5 @@
+import type { Channel, StreamChat } from 'stream-chat';
+
 import type { Schema } from './schema';
 
 export type Table = keyof Schema;
@@ -10,3 +12,29 @@ export type TableColumnNames<T extends Table> = keyof Schema[T];
 export type TableColumnValue = string | boolean | number | undefined;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type PreparedQueries = [string] | [string, Array<any>];
+
+export type PendingTaskTypes = {
+  deleteMessage: 'delete-message';
+  deleteReaction: 'delete-reaction';
+  sendReaction: 'send-reaction';
+};
+
+export type PendingTask = {
+  channelId: string;
+  channelType: string;
+  messageId: string;
+  id?: number;
+} & (
+  | {
+      payload: Parameters<Channel['sendReaction']>;
+      type: PendingTaskTypes['sendReaction'];
+    }
+  | {
+      payload: Parameters<StreamChat['deleteMessage']>;
+      type: PendingTaskTypes['deleteMessage'];
+    }
+  | {
+      payload: Parameters<Channel['deleteReaction']>;
+      type: PendingTaskTypes['deleteReaction'];
+    }
+);

package/src/types/types.ts

@@ -25,6 +25,7 @@ export type File = {
 export type DefaultAttachmentType = UnknownType & {
   file_size?: number | string;
   mime_type?: string;
+  originalFile?: File;
 };
 
 interface DefaultUserType extends UnknownType {
@@ -37,7 +38,7 @@ interface DefaultChannelType extends UnknownType {
 }
 
 export interface DefaultStreamChatGenerics extends ExtendableGenerics {
-  attachmentType: UnknownType;
+  attachmentType: DefaultAttachmentType;
   channelType: DefaultChannelType;
   commandType: LiteralStringForUnion;
   eventType: UnknownType;
@@ -47,3 +48,5 @@ export interface DefaultStreamChatGenerics extends ExtendableGenerics {
 }
 
 export type UnknownType = Record<string, unknown>;
+
+export type ValueOf<T> = T[keyof T];

package/src/utils/DBSyncManager.ts

@@ -0,0 +1,222 @@
+import type { AxiosError } from 'axios';
+import type { APIErrorResponse, StreamChat } from 'stream-chat';
+
+import { handleEventToSyncDB } from '../components/Chat/hooks/handleEventToSyncDB';
+import { getAllChannelIds, getLastSyncedAt, upsertLastSyncedAt } from '../store/apis';
+
+import { addPendingTask } from '../store/apis/addPendingTask';
+
+import { deletePendingTask } from '../store/apis/deletePendingTask';
+import { getPendingTasks } from '../store/apis/getPendingTasks';
+import { QuickSqliteClient } from '../store/QuickSqliteClient';
+import type { PendingTask, PreparedQueries } from '../store/types';
+import type { DefaultStreamChatGenerics } from '../types/types';
+/**
+ * DBSyncManager has the responsibility to sync the channel states
+ * within local database whenever possible.
+ *
+ * Components can get the current sync status using DBSyncManager.getCurrentStatus().
+ * Or components can attach a listener for status change as following:
+ *
+ * ```tsx
+ * useEffect(() => {
+ *  const unsubscribe = DBSyncManager.onSyncStatusChange((syncStatus) => {
+ *    if (syncStatus) {
+ *      doSomething();
+ *    }
+ *  })
+ *
+ *  return () => unsubscribe();
+ * })
+ * ```
+ */
+const restBeforeNextTask = () => new Promise((resolve) => setTimeout(resolve, 500));
+
+export class DBSyncManager {
+  static syncStatus = false;
+  static listeners: Array<(status: boolean) => void> = [];
+  static client: StreamChat | null = null;
+
+  /**
+   * Returns weather channel states in local DB are synced with backend or not.
+   * @returns boolean
+   */
+  static getSyncStatus = () => this.syncStatus;
+
+  /**
+   * Initializes the DBSyncManager. This function should be called only once
+   * throughout the lifetime of SDK.
+   *
+   * @param client
+   */
+  static init = async (client: StreamChat) => {
+    this.client = client;
+    // If the websocket connection is already active, then straightaway
+    // call the sync api and also execute pending api calls.
+    // Otherwise wait for `connection.changed` event.
+    if (client.user?.id && client.wsConnection?.isHealthy) {
+      await this.syncAndExecutePendingTasks();
+      this.syncStatus = true;
+      this.listeners.forEach((l) => l(true));
+    }
+
+    this.client.on('connection.changed', async (event) => {
+      if (event.online) {
+        await this.syncAndExecutePendingTasks();
+        this.listeners.forEach((l) => l(true));
+      } else {
+        this.listeners.forEach((l) => l(false));
+      }
+    });
+  };
+
+  /**
+   * Subscribes a listener for sync status change.
+   *
+   * @param listener {function}
+   * @returns {function} to unsubscribe the listener.
+   */
+  static onSyncStatusChange = (listener: (status: boolean) => void) => {
+    this.listeners.push(listener);
+
+    return {
+      unsubscribe: () => {
+        this.listeners = this.listeners.filter((el) => el !== listener);
+      },
+    };
+  };
+
+  static sync = async () => {
+    if (!this.client?.user) return;
+
+    const lastSyncedAt = getLastSyncedAt({
+      currentUserId: this.client.user.id,
+    });
+    const cids = getAllChannelIds();
+
+    if (lastSyncedAt) {
+      try {
+        const result = await this.client.sync(cids, new Date(lastSyncedAt).toISOString());
+        const queries = result.events.reduce<PreparedQueries[]>((queries, event) => {
+          queries = queries.concat(handleEventToSyncDB(event, false));
+          return queries;
+        }, []);
+
+        if (queries.length) {
+          QuickSqliteClient.executeSqlBatch(queries);
+        }
+      } catch (e) {
+        // Error will be raised by the sync API if there are too many events.
+        // In that case reset the entire DB and start fresh.
+        QuickSqliteClient.resetDB();
+      }
+    }
+    upsertLastSyncedAt({
+      currentUserId: this.client.user.id,
+      lastSyncedAt: new Date().toString(),
+    });
+  };
+
+  static syncAndExecutePendingTasks = async () => {
+    if (!this.client) return;
+
+    await this.executePendingTasks(this.client);
+    await this.sync();
+  };
+
+  static queueTask = async <
+    StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  >({
+    client,
+    task,
+  }: {
+    client: StreamChat<StreamChatGenerics>;
+    task: PendingTask;
+  }) => {
+    const removeFromApi = addPendingTask(task);
+
+    let response;
+    try {
+      response = await this.executeTask<StreamChatGenerics>({ client, task });
+    } catch (e) {
+      if ((e as AxiosError<APIErrorResponse>)?.response?.data?.code === 4) {
+        // Error code 16 - message already exists
+        // ignore
+      } else {
+        throw e;
+      }
+    }
+
+    removeFromApi();
+
+    return response;
+  };
+
+  static executeTask = async <
+    StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  >({
+    client,
+    task,
+  }: {
+    client: StreamChat<StreamChatGenerics>;
+    task: PendingTask;
+  }) => {
+    const channel = client.channel(task.channelType, task.channelId);
+
+    if (task.type === 'send-reaction') {
+      return await channel.sendReaction(...task.payload);
+    }
+
+    if (task.type === 'delete-reaction') {
+      return await channel.deleteReaction(...task.payload);
+    }
+
+    if (task.type === 'delete-message') {
+      return await client.deleteMessage(...task.payload);
+    }
+
+    throw new Error('Invalid task type');
+  };
+
+  static executePendingTasks = async <
+    StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  >(
+    client: StreamChat<StreamChatGenerics>,
+  ) => {
+    const queue = getPendingTasks();
+    for (const task of queue) {
+      if (!task.id) continue;
+
+      try {
+        await this.executeTask<StreamChatGenerics>({
+          client,
+          task,
+        });
+      } catch (e) {
+        if ((e as AxiosError<APIErrorResponse>)?.response?.data?.code === 4) {
+          // Error code 16 - message already exists
+          // ignore
+        } else {
+          throw e;
+        }
+      }
+
+      deletePendingTask({
+        id: task.id,
+      });
+      await restBeforeNextTask();
+    }
+  };
+
+  static dropPendingTasks = (conditions: { messageId: string }) => {
+    const tasks = getPendingTasks(conditions);
+
+    for (const task of tasks) {
+      if (!task.id) continue;
+
+      deletePendingTask({
+        id: task.id,
+      });
+    }
+  };
+}

package/src/utils/addReactionToLocalState.ts

@@ -0,0 +1,87 @@
+import type { Channel, ReactionResponse, UserResponse } from 'stream-chat';
+
+import { updateReaction } from '../store/apis';
+import { insertReaction } from '../store/apis/insertReaction';
+
+import type { DefaultStreamChatGenerics } from '../types/types';
+
+export const addReactionToLocalState = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channel,
+  enforceUniqueReaction,
+  messageId,
+  reactionType,
+  user,
+}: {
+  channel: Channel<StreamChatGenerics>;
+  enforceUniqueReaction: boolean;
+  messageId: string;
+  reactionType: string;
+  user: UserResponse<StreamChatGenerics>;
+}) => {
+  const message = channel.state.messages.find(({ id }) => id === messageId);
+
+  if (!message) return;
+
+  const reaction: ReactionResponse = {
+    created_at: new Date().toISOString(),
+    message_id: messageId,
+    type: reactionType,
+    updated_at: new Date().toISOString(),
+    user,
+    user_id: user?.id,
+  };
+
+  const hasOwnReaction = message.own_reactions && message.own_reactions.length > 0;
+  if (!message.own_reactions) {
+    message.own_reactions = [];
+  }
+
+  if (!message.latest_reactions) {
+    message.latest_reactions = [];
+  }
+
+  if (enforceUniqueReaction) {
+    const currentReaction = message.own_reactions[0];
+    message.own_reactions = [];
+    if (!message.latest_reactions) {
+      message.latest_reactions = [];
+    }
+    message.latest_reactions = message.latest_reactions.filter((r) => r.user_id !== user.id);
+    if (currentReaction && message.reaction_counts) {
+      message.reaction_counts[currentReaction.type] =
+        message.reaction_counts[currentReaction.type] - 1;
+    }
+
+    if (!message.reaction_counts) {
+      message.reaction_counts = {
+        [reactionType]: 1,
+      };
+    } else {
+      message.reaction_counts[reactionType] = (message.reaction_counts?.[reactionType] || 0) + 1;
+    }
+  } else {
+    if (!message.reaction_counts) {
+      message.reaction_counts = {
+        [reactionType]: 1,
+      };
+    } else {
+      message.reaction_counts[reactionType] = message.reaction_counts[reactionType] + 1;
+    }
+  }
+
+  message.own_reactions = [...message.own_reactions, reaction];
+  message.latest_reactions = [...message.latest_reactions, reaction];
+
+  if (enforceUniqueReaction && hasOwnReaction) {
+    updateReaction({
+      message,
+      reaction,
+    });
+  } else {
+    insertReaction({
+      reaction,
+    });
+  }
+};