fix: remove blocked messages from offline db (#1666)

Blocked messages where not cleared from offline DB. We need to clear
them before we attempt to send a new message making sure that they don't
appear on the UI.

Author: khushal87

src/channel_state.ts

@@ -15,6 +15,7 @@ import {
   deleteUserMessages as _deleteUserMessages,
   addToMessageList,
   formatMessage,
+  isBlockedMessage,
 } from './utils';
 import { DEFAULT_MESSAGE_SET_PAGINATION } from './constants';
 
@@ -798,6 +799,12 @@ export class ChannelState {
       (message) => message.type !== 'error',
     );
 
+    const blockedMessages = this.latestMessages.filter(isBlockedMessage);
+    // We need to hard delete the blocked messages from the offline database.
+    for (const message of blockedMessages) {
+      this._channel.getClient().offlineDb?.hardDeleteMessage({ id: message.id });
+    }
+
     this.latestMessages = filteredMessages;
   }
 

src/utils.ts

@@ -1342,3 +1342,13 @@ export const runDetached = <T>(
 
   promise.catch(onError);
 };
+
+export const isBlockedMessage = (message: LocalMessage) =>
+  message.type === 'error' &&
+  (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_REMOVE' ||
+    message.moderation?.action === 'remove');
+
+export const isBouncedMessage = (message: LocalMessage) =>
+  message.type === 'error' &&
+  (message?.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE' ||
+    message?.moderation?.action === 'bounce');

test/unit/channel_state.test.js

@@ -9,15 +9,20 @@ import { DEFAULT_MESSAGE_SET_PAGINATION } from '../../src/constants';
 import { generateUUIDv4 as uuidv4 } from '../../src/utils';
 
 import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { MockOfflineDB } from './offline-support/MockOfflineDB';
 
 const toISOString = (timestampMs) => new Date(timestampMs).toISOString();
 
 describe('ChannelState addMessagesSorted', function () {
 	let state;
+	let client;
 
-	beforeEach(() => {
-		const client = new StreamChat();
-		client.userID = 'userId';
+	beforeEach(async () => {
+		client = new StreamChat();
+		const offlineDb = new MockOfflineDB({ client });
+
+		client.setOfflineDBApi(offlineDb);
+		await client.offlineDb.init(client.userID);
 		const channel = new Channel(client, 'type', 'id', {});
 		client._addChannelConfig({ cid: channel.cid, config: {} });
 		state = new ChannelState(channel);
@@ -277,6 +282,36 @@ describe('ChannelState addMessagesSorted', function () {
 		expect(state.latestMessages[2].id).to.be.equal('14');
 	});
 
+	it('should remove blocked messages from the latest messages from the offline database', () => {
+		state.addMessagesSorted(
+			[
+				generateMsg({
+					id: '12',
+					date: toISOString(1200),
+					type: 'error',
+					moderation_details: { action: 'MESSAGE_RESPONSE_ACTION_REMOVE' },
+				}),
+				generateMsg({
+					id: '13',
+					date: toISOString(1300),
+					type: 'error',
+					moderation: { action: 'remove' },
+				}),
+				generateMsg({ id: '14', date: toISOString(1400) }),
+			],
+			false,
+			false,
+			true,
+			'latest',
+		);
+		expect(state.latestMessages.length).to.be.equal(3);
+		state.filterErrorMessages();
+		expect(state.latestMessages.length).to.be.equal(1);
+		expect(client.offlineDb.hardDeleteMessage).toHaveBeenCalledTimes(2);
+		expect(client.offlineDb.hardDeleteMessage).toHaveBeenCalledWith({ id: '12' });
+		expect(client.offlineDb.hardDeleteMessage).toHaveBeenCalledWith({ id: '13' });
+	});
+
 	it('adds message page sorted', () => {
 		// load first page
 		state.addMessagesSorted(