stream-chat-react-native-core 6.0.0-rc.9 → 6.0.0

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
-import { useLatestMessagePreview } from './hooks/useLatestMessagePreview';
+import { useChannelPreviewData } from './hooks/useChannelPreviewData';
 
 import {
   ChannelsContextValue,
@@ -12,120 +12,41 @@ import { ChatContextValue, useChatContext } from '../../contexts/chatContext/Cha
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
-export type ChannelPreviewPropsWithContext<
+export type ChannelPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview' | 'forceUpdate'> & {
+> = Partial<Pick<ChatContextValue<StreamChatGenerics>, 'client'>> &
+  Partial<Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview' | 'forceUpdate'>> & {
     /**
      * Instance of Channel from stream-chat package.
      */
     channel: Channel<StreamChatGenerics>;
   };
 
-/**
- * This component manages state for the ChannelPreviewMessenger UI component and receives
- * all props from the ChannelListMessenger component.
- */
-const ChannelPreviewWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewPropsWithContext<StreamChatGenerics>,
-) => {
-  const { channel, client, forceUpdate: channelListForceUpdate, Preview } = props;
-
-  const [lastMessage, setLastMessage] = useState<
-    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
-    | MessageResponse<StreamChatGenerics>
-    | undefined
-  >(channel.state.messages[channel.state.messages.length - 1]);
-
-  const [forceUpdate, setForceUpdate] = useState(0);
-  const [unread, setUnread] = useState(channel.countUnread());
-
-  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
-
-  const channelLastMessage = channel.lastMessage();
-  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
-
-  useEffect(() => {
-    const { unsubscribe } = client.on('notification.mark_read', () => {
-      setUnread(channel.countUnread());
-    });
-    return unsubscribe;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (
-      channelLastMessage &&
-      (channelLastMessage.id !== lastMessage?.id ||
-        channelLastMessage.updated_at !== lastMessage?.updated_at)
-    ) {
-      setLastMessage(channelLastMessage);
-    }
-
-    const newUnreadCount = channel.countUnread();
-    setUnread(newUnreadCount);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelLastMessageString, channelListForceUpdate]);
-
-  useEffect(() => {
-    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {
-      const message = event.message;
-      if (message && (!message.parent_id || message.show_in_channel)) {
-        setLastMessage(event.message);
-        setUnread(channel.countUnread());
-      }
-    };
-
-    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
-      setLastMessage((prevLastMessage) => {
-        if (prevLastMessage?.id === event.message?.id) {
-          return event.message;
-        }
-        return prevLastMessage;
-      });
-    };
-
-    const listeners = [
-      channel.on('message.new', handleNewMessageEvent),
-      channel.on('message.updated', handleUpdatedOrDeletedMessage),
-      channel.on('message.deleted', handleUpdatedOrDeletedMessage),
-    ];
-
-    return () => listeners.forEach((l) => l.unsubscribe());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    const handleReadEvent = (event: Event<StreamChatGenerics>) => {
-      if (event.user?.id === client.userID) {
-        setUnread(0);
-      } else if (event.user?.id) {
-        setForceUpdate((prev) => prev + 1);
-      }
-    };
-
-    const listener = channel.on('message.read', handleReadEvent);
-    return () => listener.unsubscribe();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} />;
-};
-
-export type ChannelPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<Omit<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>> &
-  Pick<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>;
-
 export const ChannelPreview = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ChannelPreviewProps<StreamChatGenerics>,
 ) => {
-  const { client } = useChatContext<StreamChatGenerics>();
-  const { forceUpdate, Preview } = useChannelsContext<StreamChatGenerics>();
-
-  return <ChannelPreviewWithContext {...{ client, forceUpdate, Preview }} {...props} />;
+  const { channel, client: propClient, forceUpdate: propForceUpdate, Preview: propPreview } = props;
+
+  const { client: contextClient } = useChatContext<StreamChatGenerics>();
+  const { Preview: contextPreview } = useChannelsContext<StreamChatGenerics>();
+
+  const client = propClient || contextClient;
+  const Preview = propPreview || contextPreview;
+
+  const { latestMessagePreview, muted, unread } = useChannelPreviewData(
+    channel,
+    client,
+    propForceUpdate,
+  );
+
+  return (
+    <Preview
+      channel={channel}
+      latestMessagePreview={latestMessagePreview}
+      muted={muted}
+      unread={unread}
+    />
+  );
 };

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
@@ -17,7 +17,6 @@ import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
-import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -95,6 +94,8 @@ export type ChannelPreviewMessengerPropsWithContext<
      * default formatted date. This default logic is part of ChannelPreview component.
      */
     formatLatestMessageDate?: (date: Date) => string;
+    /** If the channel is muted. */
+    muted?: boolean;
     /** Number of unread messages on the channel */
     unread?: number;
   };
@@ -109,6 +110,7 @@ const ChannelPreviewMessengerWithContext = <
     formatLatestMessageDate,
     latestMessagePreview,
     maxUnreadCount,
+    muted,
     onSelect,
     PreviewAvatar = ChannelAvatar,
     PreviewMessage = ChannelPreviewMessage,
@@ -129,23 +131,11 @@ const ChannelPreviewMessengerWithContext = <
     },
   } = useTheme();
 
-  const { client } = useChatContext<StreamChatGenerics>();
-
   const displayName = useChannelPreviewDisplayName(
     channel,
     Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),
   );
 
-  const [isChannelMuted, setIsChannelMuted] = useState(() => channel.muteStatus().muted);
-
-  useEffect(() => {
-    const handleEvent = () => setIsChannelMuted(channel.muteStatus().muted);
-
-    client.on('notification.channel_mutes_updated', handleEvent);
-    return () => client.off('notification.channel_mutes_updated', handleEvent);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
   return (
     <TouchableOpacity
       onPress={() => {
@@ -168,7 +158,7 @@ const ChannelPreviewMessengerWithContext = <
         <View style={[styles.row, row]}>
           <PreviewTitle channel={channel} displayName={displayName} />
           <View style={[styles.statusContainer, row]}>
-            {isChannelMuted && <PreviewMutedStatus />}
+            {muted && <PreviewMutedStatus />}
             <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
           </View>
         </View>

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -20,16 +20,11 @@ export const ChannelPreviewMutedStatus = () => {
       channelPreview: {
         mutedStatus: { height, iconStyle, width },
       },
-      colors: { grey_dark },
+      colors: { grey },
     },
   } = useTheme();
 
   return (
-    <Mute
-      height={height}
-      pathFill={grey_dark}
-      style={[styles.iconStyle, iconStyle]}
-      width={width}
-    />
+    <Mute height={height} pathFill={grey} style={[styles.iconStyle, iconStyle]} width={width} />
   );
 };

package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx

@@ -11,8 +11,9 @@ import {
 } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
-import dispatchMessageReadEvent from '../../../mock-builders/event/messageRead';
-import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import dispatchNotificationMarkRead from '../../../mock-builders/event/notificationMarkRead';
+import dispatchNotificationMarkUnread from '../../../mock-builders/event/notificationMarkUnread';
+import { generateChannel, generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
@@ -68,6 +69,15 @@ describe('ChannelPreview', () => {
     );
   };
 
+  const generateChannelWrapper = (overrides: Record<string, unknown>) =>
+    generateChannel({
+      countUnread: jest.fn().mockReturnValue(0),
+      initialized: true,
+      lastMessage: jest.fn().mockReturnValue(generateMessage()),
+      muteStatus: jest.fn().mockReturnValue({ muted: false }),
+      ...overrides,
+    });
+
   const useInitializeChannel = async (c: GetOrCreateChannelApiParams) => {
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
 
@@ -84,22 +94,228 @@ describe('ChannelPreview', () => {
     channel = null;
   });
 
-  it('should mark channel as read, when message.read event is received for current user', async () => {
-    const c = generateChannelResponse();
-    await useInitializeChannel(c);
+  describe('notification.mark_read event', () => {
+    it("should not update the unread count if the event's cid does not match the channel's cid", async () => {
+      const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
 
-    if (channel !== null) {
-      channel.countUnread = () => 20;
-    }
+      const c = generateChannelWrapper({
+        countUnread: jest.fn().mockReturnValue(10),
+        on: channelOnMock,
+      });
+
+      channel = c as unknown as Channel;
+
+      const { getByTestId } = render(<TestComponent />);
+
+      await waitFor(() => getByTestId('channel-id'));
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('10');
+      });
+
+      act(() => {
+        dispatchNotificationMarkRead(chatClient, { cid: 'channel-id' });
+      });
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('10');
+      });
+    });
+
+    it('should update the unread count to 0', async () => {
+      const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
+
+      const c = generateChannelWrapper({
+        countUnread: jest.fn().mockReturnValue(10),
+        on: channelOnMock,
+      });
+
+      channel = c as unknown as Channel;
+
+      const { getByTestId } = render(<TestComponent />);
+
+      await waitFor(() => getByTestId('channel-id'));
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('10');
+      });
+
+      act(() => {
+        dispatchNotificationMarkRead(chatClient, channel || {});
+      });
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+    });
+  });
+
+  describe('notification.mark_unread event', () => {
+    it("should not update the unread count if the event's cid is undefined", async () => {
+      const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
+
+      const c = generateChannelWrapper({
+        on: channelOnMock,
+      });
+
+      channel = c as unknown as Channel;
+
+      const { getByTestId } = render(<TestComponent />);
+
+      await waitFor(() => getByTestId('channel-id'));
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+
+      act(() => {
+        dispatchNotificationMarkUnread(
+          chatClient,
+          {},
+          {
+            unread_channels: 2,
+            unread_messages: 5,
+          },
+        );
+      });
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+    });
+
+    it("should not update the unread count if the event's cid does not match the channel's cid", async () => {
+      const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
+
+      const c = generateChannelWrapper({
+        on: channelOnMock,
+      });
+
+      channel = c as unknown as Channel;
+
+      const { getByTestId } = render(<TestComponent />);
+
+      await waitFor(() => getByTestId('channel-id'));
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+
+      act(() => {
+        dispatchNotificationMarkUnread(
+          chatClient,
+          { cid: 'channel-id' },
+          {
+            unread_channels: 2,
+            unread_messages: 5,
+          },
+        );
+      });
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+    });
+
+    it("should not update the unread count if the event's user id does not match the client's user id", async () => {
+      const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
+
+      const c = generateChannelWrapper({
+        on: channelOnMock,
+      });
+
+      channel = c as unknown as Channel;
+
+      const { getByTestId } = render(<TestComponent />);
+
+      await waitFor(() => getByTestId('channel-id'));
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+
+      act(() => {
+        dispatchNotificationMarkUnread(
+          chatClient,
+          { cid: channel?.cid },
+          {
+            unread_channels: 2,
+            unread_messages: 5,
+            user: { id: 'random-id' },
+          },
+        );
+      });
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+    });
+
+    it("should update the unread count if the event's user id matches the client's user id", async () => {
+      const c = generateChannelResponse();
+      await useInitializeChannel(c);
+      const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
+
+      const testChannel = generateChannelWrapper({
+        ...channel,
+        on: channelOnMock,
+      });
+
+      const { getByTestId } = render(<TestComponent />);
+
+      await waitFor(() => getByTestId('channel-id'));
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('0');
+      });
+
+      act(() => {
+        dispatchNotificationMarkUnread(
+          chatClient,
+          { cid: testChannel?.cid },
+          {
+            unread_channels: 2,
+            unread_messages: 5,
+            user: { id: clientUser.id },
+          },
+        );
+      });
+
+      await waitFor(() => {
+        expect(getByTestId('unread-count')).toHaveTextContent('5');
+      });
+    });
+  });
+
+  it('should update the unread count to 0 if the channel is muted', async () => {
+    const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
+
+    const c = generateChannelWrapper({
+      countUnread: jest.fn().mockReturnValue(10),
+      muteStatus: jest.fn().mockReturnValue({ muted: true }),
+      on: channelOnMock,
+    });
+
+    channel = c as unknown as Channel;
 
     const { getByTestId } = render(<TestComponent />);
 
     await waitFor(() => getByTestId('channel-id'));
 
-    expect(getByTestId('unread-count')).toHaveTextContent('20');
+    await waitFor(() => {
+      expect(getByTestId('unread-count')).toHaveTextContent('0');
+    });
 
     act(() => {
-      dispatchMessageReadEvent(chatClient, clientUser, channel || {});
+      dispatchNotificationMarkUnread(
+        chatClient,
+        { cid: channel?.cid },
+        {
+          unread_channels: 2,
+          unread_messages: 5,
+          user: { id: clientUser.id },
+        },
+      );
     });
 
     await waitFor(() => {

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayName.test.tsx

@@ -3,7 +3,6 @@ import { Text } from 'react-native';
 
 import { render, screen, waitFor } from '@testing-library/react-native';
 
-import type { DefaultStreamChatGenerics } from 'src/types/types';
 import type { Channel, ChannelMemberResponse, DefaultGenerics, StreamChat } from 'stream-chat';
 
 import {
@@ -13,6 +12,7 @@ import {
 } from '../../../../mock-builders/api/queryMembers';
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import {
   getChannelPreviewDisplayName,
   useChannelPreviewDisplayName,

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewMuted.test.tsx

@@ -0,0 +1,62 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native';
+import { Channel, DefaultGenerics, StreamChat } from 'stream-chat';
+
+import * as ChatContext from '../../../../contexts/chatContext/ChatContext';
+import dispatchNotificationChannelMutesUpdated from '../../../../mock-builders/event/notificationChannelMutesUpdated';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { DefaultStreamChatGenerics } from '../../../../types/types';
+import { useIsChannelMuted } from '../useIsChannelMuted';
+
+describe('useChannelPreviewMuted', () => {
+  const clientUser = generateUser();
+  let chatClient: StreamChat<DefaultGenerics> | StreamChat<DefaultStreamChatGenerics>;
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(clientUser);
+    jest.spyOn(ChatContext, 'useChatContext').mockImplementation(
+      jest.fn(
+        () =>
+          ({
+            client: chatClient,
+          } as unknown as ChatContext.ChatContextValue),
+      ),
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const mockChannel = {
+    initialized: true,
+    muteStatus: jest.fn().mockReturnValue({
+      createdAt: Date.now(),
+      expiresAt: Date.now() + 5000,
+      muted: false,
+    }),
+  } as unknown as Channel<DefaultStreamChatGenerics>;
+
+  it('should return the correct mute status', () => {
+    const { result } = renderHook(() => useIsChannelMuted(mockChannel));
+    expect(result.current.muted).toBe(false);
+  });
+
+  it("should update the mute status when the notification.channel_mutes_updated event is emitted'", () => {
+    renderHook(() => useIsChannelMuted(mockChannel));
+
+    act(() => dispatchNotificationChannelMutesUpdated(chatClient, mockChannel));
+
+    expect(mockChannel.muteStatus).toHaveBeenCalledTimes(2);
+  });
+
+  it('should clean up the event listener when the component is unmounted', async () => {
+    const { unmount } = renderHook(() => useIsChannelMuted(mockChannel));
+
+    unmount();
+
+    await waitFor(() => {
+      expect(mockChannel.muteStatus).toHaveBeenCalledTimes(1);
+    });
+  });
+});