feat: add delete reactions and fix sending reactions

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -1479,7 +1479,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     ];
 
     if (enableOfflineSupport) {
-      addReactionToLocalState({
+      await addReactionToLocalState({
         channel,
         enforceUniqueReaction,
         messageId,
@@ -1551,29 +1551,18 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
     const payload: Parameters<ChannelClass['deleteReaction']> = [messageId, type];
 
-    if (!enableOfflineSupport) {
-      await channel.deleteReaction(...payload);
-      return;
-    }
-
-    removeReactionFromLocalState({
-      channel,
-      messageId,
-      reactionType: type,
-      user: client.user,
-    });
+    if (enableOfflineSupport) {
+      removeReactionFromLocalState({
+        channel,
+        messageId,
+        reactionType: type,
+        user: client.user,
+      });
 
-    copyMessagesStateFromChannel(channel);
+      copyMessagesStateFromChannel(channel);
+    }
 
-    await client.offlineDb.syncManager.queueTask({
-      task: {
-        channelId: channel.id,
-        channelType: channel.type,
-        messageId,
-        payload,
-        type: 'delete-reaction',
-      },
-    });
+    await channel.deleteReaction(...payload);
   };
 
   /**

package/src/store/OfflineDB.ts

@@ -1,11 +1,11 @@
-import {
-  AbstractOfflineDB,
+import { AbstractOfflineDB, StreamChat } from 'stream-chat';
+import type {
+  GetChannelsForQueryType,
+  GetChannelsType,
   GetLastSyncedAtType,
-  type ReactionResponse,
-  StreamChat,
+  UpsertReactionType,
   UpsertUserSyncStatusType,
 } from 'stream-chat';
-import type { GetChannelsForQueryType, GetChannelsType, UpsertReactionType } from 'stream-chat';
 
 import * as api from './apis';
 import { SqliteClient } from './SqliteClient';
@@ -36,47 +36,17 @@ 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,
-      });
-    }
-  };
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  // @ts-expect-error Not yet impelmented
+  upsertReaction = async (options: UpsertReactionType) => {};
+  /* eslint-enable */
 
   addPendingTask = api.addPendingTask;
 
   deletePendingTask = api.deletePendingTask;
 
+  deleteReaction = api.deleteReaction;
+
   getPendingTasks = api.getPendingTasks;
 
   resetDB = SqliteClient.resetDB;

package/src/store/apis/deleteReaction.ts

@@ -1,22 +1,50 @@
+import { Channel } from 'stream-chat';
+
 import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery';
+import { createUpdateQuery } from '../sqlite-utils/createUpdateQuery';
 import { SqliteClient } from '../SqliteClient';
+import { PreparedQueries } from '../types';
 
 export const deleteReaction = async ({
+  channel,
   flush = true,
   messageId,
   reactionType,
   userId,
 }: {
+  channel: Channel;
   messageId: string;
   reactionType: string;
   userId: string;
   flush?: boolean;
 }) => {
-  const query = createDeleteQuery('reactions', {
-    messageId,
-    type: reactionType,
-    userId,
-  });
+  const queries: PreparedQueries[] = [];
+
+  const message = channel.state.messages.find(({ id }) => id === messageId);
+
+  if (!message) {
+    return;
+  }
+
+  queries.push(
+    createDeleteQuery('reactions', {
+      messageId,
+      type: reactionType,
+      userId,
+    }),
+  );
+
+  const stringifiedNewReactionGroups = JSON.stringify(message.reaction_groups);
+
+  queries.push(
+    createUpdateQuery(
+      'messages',
+      {
+        reactionGroups: stringifiedNewReactionGroups,
+      },
+      { id: message.id },
+    ),
+  );
 
   SqliteClient.logger?.('info', 'deleteReaction', {
     messageId,
@@ -25,8 +53,8 @@ export const deleteReaction = async ({
   });
 
   if (flush) {
-    await SqliteClient.executeSql.apply(null, query);
+    await SqliteClient.executeSqlBatch(queries);
   }
 
-  return [query];
+  return queries;
 };

package/src/utils/addReactionToLocalState.ts

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

package/src/utils/removeReactionFromLocalState.ts

@@ -1,7 +1,5 @@
 import type { Channel, UserResponse } from 'stream-chat';
 
-import { deleteReaction } from '../store/apis/deleteReaction';
-
 export const removeReactionFromLocalState = ({
   channel,
   messageId,
@@ -48,10 +46,4 @@ export const removeReactionFromLocalState = ({
       delete message.reaction_groups[reactionType];
     }
   }
-
-  deleteReaction({
-    messageId,
-    reactionType,
-    userId: user.id,
-  });
 };