feat: include sending reactions in llc

Author: isekovanic

package/package.json

@@ -77,7 +77,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "9.0.0-rc.8",
+    "stream-chat": "https://github.com/GetStream/stream-chat-js.git#ab43f541954904c4efcf797a4fac8b162e3f342d",
     "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {
@@ -152,6 +152,7 @@
     "uuid": "^11.1.0"
   },
   "resolutions": {
-    "@types/react": "^19.0.0"
+    "@types/react": "^19.0.0",
+    "@babel/runtime": "^7.26.9"
   }
 }

package/src/components/Channel/Channel.tsx

@@ -1478,30 +1478,20 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       { enforce_unique: enforceUniqueReaction },
     ];
 
-    if (!enableOfflineSupport) {
-      await channel.sendReaction(...payload);
-      return;
-    }
+    if (enableOfflineSupport) {
+      addReactionToLocalState({
+        channel,
+        enforceUniqueReaction,
+        messageId,
+        reactionType: type,
+        user: client.user,
+      });
 
-    addReactionToLocalState({
-      channel,
-      enforceUniqueReaction,
-      messageId,
-      reactionType: type,
-      user: client.user,
-    });
+      copyMessagesStateFromChannel(channel);
+    }
 
-    copyMessagesStateFromChannel(channel);
+    const sendReactionResponse = await channel.sendReaction(...payload);
 
-    const sendReactionResponse = await client.offlineDb.syncManager.queueTask({
-      task: {
-        channelId: channel.id,
-        channelType: channel.type,
-        messageId,
-        payload,
-        type: 'send-reaction',
-      },
-    });
     if (sendReactionResponse?.message) {
       threadInstance?.upsertReplyLocally?.({ message: sendReactionResponse.message });
     }

package/src/components/Chat/Chat.tsx

@@ -214,7 +214,9 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 
     const initializeDatabase = () => {
       // TODO: Rethink this, it looks ugly
-      client.setOfflineDBApi(new OfflineDB({ client }));
+      if (!client.offlineDb.initialized) {
+        client.setOfflineDBApi(new OfflineDB({ client }));
+      }
       // This acts as a lock for some very rare occurrences of concurrency
       // issues we've encountered before with the QuickSqliteClient being
       // uninitialized before it's being invoked.

package/src/components/Chat/__tests__/Chat.test.js

@@ -240,18 +240,22 @@ describe('TranslationContext', () => {
 
     let unsubscribeSpy;
     let listenersAfterInitialMount;
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
 
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      unsubscribeSpy = jest.spyOn(
+        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
+        'unsubscribe',
+      );
       listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
     });
 
     // remount
     rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
 
     await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+      expect(initSpy).toHaveBeenCalledTimes(2);
       expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
       expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
         listenersAfterInitialMount.length,
@@ -267,10 +271,14 @@ describe('TranslationContext', () => {
 
     let unsubscribeSpy;
     let listenersAfterInitialMount;
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
 
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      unsubscribeSpy = jest.spyOn(
+        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
+        'unsubscribe',
+      );
       listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
     });
 
@@ -282,7 +290,7 @@ describe('TranslationContext', () => {
     rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
     await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+      expect(initSpy).toHaveBeenCalledTimes(2);
       expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
       expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
         listenersAfterInitialMount.length,
@@ -297,9 +305,14 @@ describe('TranslationContext', () => {
     const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
     let unsubscribeSpy;
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
+
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      unsubscribeSpy = jest.spyOn(
+        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
+        'unsubscribe',
+      );
     });
 
     const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
@@ -308,8 +321,8 @@ describe('TranslationContext', () => {
     rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
     await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(1);
-      expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
+      expect(initSpy).toHaveBeenCalledTimes(1);
+      expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
       expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
         listenersAfterInitialMount.length,
       );

package/src/store/OfflineDB.ts

@@ -1,10 +1,24 @@
-import { AbstractOfflineDB, GetLastSyncedAtType, UpsertUserSyncStatusType } from 'stream-chat';
-import type { GetChannelsForQueryType, GetChannelsType } from 'stream-chat';
+import {
+  AbstractOfflineDB,
+  GetLastSyncedAtType,
+  type ReactionResponse,
+  StreamChat,
+  UpsertUserSyncStatusType,
+} from 'stream-chat';
+import type { GetChannelsForQueryType, GetChannelsType, UpsertReactionType } from 'stream-chat';
 
 import * as api from './apis';
 import { SqliteClient } from './SqliteClient';
 
 export class OfflineDB extends AbstractOfflineDB {
+  public initialized = false;
+
+  constructor({ client }: { client: StreamChat }) {
+    super({ client });
+
+    this.initialized = true;
+  }
+
   upsertCidsForQuery = api.upsertCidsForQuery;
   upsertChannels = api.upsertChannels;
   // FIXME
@@ -22,6 +36,43 @@ export class OfflineDB extends AbstractOfflineDB {
   upsertUserSyncStatus = ({ userId, lastSyncedAt }: UpsertUserSyncStatusType) =>
     api.upsertUserSyncStatus({ currentUserId: userId, lastSyncedAt });
 
+  upsertReaction = async ({
+    channel,
+    enforceUniqueReaction,
+    messageId,
+    reactionType,
+    user,
+  }: UpsertReactionType) => {
+    const message = channel.state.messages.find(({ id }) => id === messageId);
+
+    if (!message) {
+      return;
+    }
+
+    const hasOwnReaction = message.own_reactions && message.own_reactions.length > 0;
+
+    const reaction: ReactionResponse = {
+      created_at: new Date().toISOString(),
+      message_id: messageId,
+      type: reactionType,
+      updated_at: new Date().toISOString(),
+      user,
+      user_id: user?.id,
+    };
+
+    if (enforceUniqueReaction && hasOwnReaction) {
+      await api.updateReaction({
+        message,
+        reaction,
+      });
+    } else {
+      await api.insertReaction({
+        message,
+        reaction,
+      });
+    }
+  };
+
   addPendingTask = api.addPendingTask;
 
   deletePendingTask = api.deletePendingTask;

package/src/store/apis/index.ts

@@ -13,6 +13,8 @@ export * from './getMembers';
 export * from './getReads';
 export * from './updateMessage';
 export * from './updateReaction';
+export * from './insertReaction';
+export * from './deleteReaction';
 export * from './upsertAppSettings';
 export * from './upsertChannelData';
 export * from './upsertChannels';

package/src/utils/addReactionToLocalState.ts

@@ -1,8 +1,5 @@
 import type { Channel, ReactionResponse, UserResponse } from 'stream-chat';
 
-import { updateReaction } from '../store/apis';
-import { insertReaction } from '../store/apis/insertReaction';
-
 export const addReactionToLocalState = ({
   channel,
   enforceUniqueReaction,
@@ -31,7 +28,6 @@ export const addReactionToLocalState = ({
     user_id: user?.id,
   };
 
-  const hasOwnReaction = message.own_reactions && message.own_reactions.length > 0;
   if (!message.own_reactions) {
     message.own_reactions = [];
   }
@@ -92,15 +88,5 @@ export const addReactionToLocalState = ({
   message.own_reactions = [...message.own_reactions, reaction];
   message.latest_reactions = [...message.latest_reactions, reaction];
 
-  if (enforceUniqueReaction && hasOwnReaction) {
-    updateReaction({
-      message,
-      reaction,
-    });
-  } else {
-    insertReaction({
-      message,
-      reaction,
-    });
-  }
+  return { message, reaction };
 };

package/yarn.lock

@@ -7680,10 +7680,9 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected]:
-  version "9.0.0-rc.8"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.0.0-rc.8.tgz#e188e481841493584691ae491916843d0ef5f9cd"
-  integrity sha512-P+Ksnu1cQQfL1t2/QTJ5rr/z2Jehvd2ap41xZgtfbJssHSD7ahe14TCF/1L7q4jjaNlZcTtLcKXCWbbOdKjDcg==
+"stream-chat@https://github.com/GetStream/stream-chat-js.git#ab43f541954904c4efcf797a4fac8b162e3f342d":
+  version "0.0.0-development"
+  resolved "https://github.com/GetStream/stream-chat-js.git#ab43f541954904c4efcf797a4fac8b162e3f342d"
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"