feat: reflect user.messages.deleted WS event

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -425,6 +425,11 @@ const ChannelInner = (
       });
     }
 
+    // ignore the event if it is not targeted at the current channel.
+    // Event targeted at this channel or globally targeted event should lead to state refresh
+    if (event.type === 'user.messages.deleted' && event.cid && event.cid !== channel.cid)
+      return;
+
     if (event.type === 'user.watching.start' || event.type === 'user.watching.stop')
       return;
 
@@ -568,6 +573,7 @@ const ChannelInner = (
         client.on('connection.recovered', handleEvent);
         client.on('user.updated', handleEvent);
         client.on('user.deleted', handleEvent);
+        client.on('user.messages.deleted', handleEvent);
         channel.on(handleEvent);
       }
     })();

src/components/ChannelPreview/ChannelPreview.tsx

@@ -135,7 +135,12 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
   useEffect(() => {
     refreshUnreadCount();
 
-    const handleEvent = () => {
+    const handleEvent = (event: Event) => {
+      const deletedMessagesInAnotherChannel =
+        event.type === 'user.messages.deleted' && event.cid && event.cid !== channel.cid;
+
+      if (deletedMessagesInAnotherChannel) return;
+
       setLastMessage(
         channel.state.latestMessages[channel.state.latestMessages.length - 1],
       );
@@ -145,17 +150,19 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
     channel.on('message.new', handleEvent);
     channel.on('message.updated', handleEvent);
     channel.on('message.deleted', handleEvent);
+    client.on('user.messages.deleted', handleEvent);
     channel.on('message.undeleted', handleEvent);
     channel.on('channel.truncated', handleEvent);
 
     return () => {
       channel.off('message.new', handleEvent);
       channel.off('message.updated', handleEvent);
       channel.off('message.deleted', handleEvent);
+      client.off('user.messages.deleted', handleEvent);
       channel.off('message.undeleted', handleEvent);
       channel.off('channel.truncated', handleEvent);
     };
-  }, [channel, refreshUnreadCount, channelUpdateCount]);
+  }, [channel, client, refreshUnreadCount, channelUpdateCount]);
 
   if (!Preview) return null;
 

src/components/ChannelPreview/__tests__/ChannelPreview.test.js

@@ -15,6 +15,7 @@ import {
   dispatchMessageUpdatedEvent,
   dispatchNotificationMarkRead,
   dispatchNotificationMarkUnread,
+  dispatchUserMessagesDeletedEvent,
   dispatchUserUpdatedEvent,
   generateChannel,
   generateMember,
@@ -363,6 +364,131 @@ describe('ChannelPreview', () => {
     },
   );
 
+  describe('user.messages.deleted', () => {
+    const deletedMessageText = 'Message deleted';
+    const user = { id: 'banned-user' };
+
+    it('should update latest message preview for all ChannelPreviews if global ban', async () => {
+      const {
+        channels: [c0, c1],
+        client,
+      } = await initClientWithChannels({
+        channelsData: [
+          generateChannel({
+            messages: [
+              generateMessage({
+                created_at: '1970-01-01T00:00:00.000Z',
+                user: { id: 'other-user' },
+              }),
+              generateMessage({ created_at: '1970-01-02T00:00:00.000Z', user }),
+            ],
+          }),
+          generateChannel({
+            messages: [
+              generateMessage({
+                created_at: '1971-01-01T00:00:00.000Z',
+                user: { id: 'other-user' },
+              }),
+              generateMessage({ created_at: '1971-01-02T00:00:00.000Z', user }),
+            ],
+          }),
+        ],
+        customUser: user,
+      });
+
+      const { container } = render(
+        <ChatContext.Provider
+          value={{
+            channel: c0,
+            client,
+            setActiveChannel: () => jest.fn(),
+          }}
+        >
+          <ChannelPreview channel={c0} />
+          <ChannelPreview channel={c1} />
+        </ChatContext.Provider>,
+      );
+
+      await act(() => {
+        dispatchUserMessagesDeletedEvent({
+          client,
+          user,
+        });
+      });
+
+      await waitFor(() => {
+        const lastMessagePreviews = container.querySelectorAll(
+          '.str-chat__channel-preview-messenger--last-message',
+        );
+        expect(lastMessagePreviews.length).toBe(2);
+        lastMessagePreviews.forEach((preview) => {
+          expect(preview).toHaveTextContent(deletedMessageText);
+        });
+      });
+    });
+
+    it('should update latest message preview if the channel is the target', async () => {
+      const {
+        channels: [c0, c1],
+        client,
+      } = await initClientWithChannels({
+        channelsData: [
+          generateChannel({
+            messages: [
+              generateMessage({
+                created_at: '1970-01-01T00:00:00.000Z',
+                user: { id: 'other-user' },
+              }),
+              generateMessage({ created_at: '1970-01-02T00:00:00.000Z', user }),
+            ],
+          }),
+          generateChannel({
+            messages: [
+              generateMessage({
+                created_at: '1971-01-01T00:00:00.000Z',
+                user: { id: 'other-user' },
+              }),
+              generateMessage({ created_at: '1971-01-02T00:00:00.000Z', user }),
+            ],
+          }),
+        ],
+        customUser: user,
+      });
+
+      const { container } = render(
+        <ChatContext.Provider
+          value={{
+            channel: c0,
+            client,
+            setActiveChannel: () => jest.fn(),
+          }}
+        >
+          <ChannelPreview channel={c0} />
+          <ChannelPreview channel={c1} />
+        </ChatContext.Provider>,
+      );
+
+      await act(() => {
+        dispatchUserMessagesDeletedEvent({
+          channel: c0, // target
+          client,
+          user,
+        });
+      });
+
+      await waitFor(() => {
+        const lastMessagePreviews = container.querySelectorAll(
+          '.str-chat__channel-preview-messenger--last-message',
+        );
+        expect(lastMessagePreviews.length).toBe(2);
+        expect(lastMessagePreviews[0]).toHaveTextContent(deletedMessageText);
+        expect(lastMessagePreviews[1]).toHaveTextContent(
+          c1.state.messages.slice(-1)[0].text,
+        );
+      });
+    });
+  });
+
   describe('notification.mark_read', () => {
     it('should set unread count to 0 for event missing CID', async () => {
       const unreadCount = getRandomInt(1, 10);

src/mock-builders/event/index.js

@@ -15,4 +15,5 @@ export { default as dispatchNotificationMarkUnread } from './notificationMarkUnr
 export { default as dispatchNotificationMessageNewEvent } from './notificationMessageNew';
 export { default as dispatchNotificationMutesUpdated } from './notificationMutesUpdated';
 export { default as dispatchNotificationRemovedFromChannel } from './notificationRemovedFromChannel';
+export { default as dispatchUserMessagesDeletedEvent } from './userMessagesDeleted';
 export { default as dispatchUserUpdatedEvent } from './userUpdated';

src/mock-builders/event/userMessagesDeleted.ts

@@ -0,0 +1,38 @@
+import type { ChannelResponse, StreamChat, UserResponse } from 'stream-chat';
+
+export default ({
+  channel,
+  client,
+  hardDelete,
+  user,
+}: {
+  channel: ChannelResponse & { name?: string }; // mock-builders are excluded in tsconfig.json
+  client: StreamChat;
+  hardDelete?: boolean;
+  user: UserResponse;
+}) => {
+  if (channel) {
+    const [channel_id, channel_type] = channel.cid.split(':');
+    client.dispatchEvent({
+      channel_custom: {
+        // archived: false,
+        name: channel.name,
+      },
+      channel_id,
+      channel_member_count: 2,
+      channel_type,
+      cid: channel.cid,
+      created_at: new Date().toISOString(),
+      hard_delete: !!hardDelete,
+      type: 'user.messages.deleted',
+      user,
+    });
+  } else {
+    client.dispatchEvent({
+      created_at: new Date().toISOString(),
+      hard_delete: !!hardDelete,
+      type: 'user.messages.deleted',
+      user,
+    });
+  }
+};

src/mock-builders/generator/channel.ts

@@ -1,13 +1,10 @@
 import { nanoid } from 'nanoid';
-import type { ChannelConfigWithInfo, ChannelResponse } from 'stream-chat';
+import type { ChannelAPIResponse, ChannelConfigWithInfo } from 'stream-chat';
+import type { DeepPartial } from '../../../../stream-chat-js/src/types.utility';
 
-export const generateChannel = (
-  options: {
-    channel?: Partial<ChannelResponse>;
-    config?: Partial<ChannelConfigWithInfo>;
-  } = { channel: {}, config: {} },
-) => {
-  const { channel: optionsChannel, ...optionsBesidesChannel } = options;
+export const generateChannel = (options?: DeepPartial<ChannelAPIResponse>) => {
+  const { channel: optionsChannel, ...optionsBesidesChannel } =
+    options ?? ({} as ChannelAPIResponse);
   const id = optionsChannel?.id ?? nanoid();
   const type = optionsChannel?.type ?? 'messaging';
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -68,6 +65,6 @@ export const generateChannel = (
       type,
       updated_at: '2020-04-28T11:20:48.578147Z',
       ...restOptionsChannel,
-    } as ChannelResponse,
+    },
   };
 };