stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -0,0 +1,153 @@
+import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { SharedValue } from 'react-native-reanimated';
+
+import { Channel } from 'stream-chat';
+
+import { ChannelDetailsBottomSheet as DefaultChannelDetailsBottomSheet } from './ChannelDetailsBottomSheet';
+import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet';
+
+import { useTheme } from '../../contexts';
+import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
+import { Archive, MenuPointHorizontal, Mute } from '../../icons';
+import { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
+import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
+import { useChannelActionItemsById } from '../ChannelList/hooks/useChannelActionItemsById';
+import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
+import {
+  BottomSheetModal,
+  RightActions,
+  SwipableActionItem,
+  SwipableWrapper,
+  SwipableWrapperProps,
+} from '../UIComponents';
+
+export const OpenChannelDetailsButton = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return <MenuPointHorizontal stroke={semantics.textPrimary} />;
+};
+
+export const ChannelSwipableWrapper = ({
+  channel,
+  getChannelActionItems,
+  ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent = DefaultChannelDetailsBottomSheet,
+  swipableProps: _swipableProps,
+  children,
+}: PropsWithChildren<{
+  channel: Channel;
+  ChannelDetailsBottomSheet?: React.ComponentType<ChannelDetailsBottomSheetProps>;
+  getChannelActionItems?: GetChannelActionItems;
+  swipableProps?: SwipableWrapperProps['swipableProps'];
+}>) => {
+  const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
+  const channelActionsById = useChannelActionItemsById({ channel, getChannelActionItems });
+  const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
+  const swipableRegistry = useSwipeRegistryContext();
+
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const styles = useStyles();
+
+  const isDirectChannel = useIsDirectChat(channel);
+
+  const Icon = useCallback(
+    () =>
+      isDirectChannel ? (
+        <Mute width={20} height={20} fill={semantics.textOnAccent} />
+      ) : (
+        <Archive width={20} height={20} stroke={semantics.textOnAccent} />
+      ),
+    [isDirectChannel, semantics.textOnAccent],
+  );
+
+  const swipableActions = useMemo<SwipableActionItem[]>(() => {
+    const items: SwipableActionItem[] = [
+      {
+        id: 'openSheet',
+        action: () => setChannelDetailSheetOpen(true),
+        contentContainerStyle: [styles.contentContainerStyle, styles.elipsis],
+        Content: OpenChannelDetailsButton,
+      },
+    ];
+
+    const extraItem = isDirectChannel ? channelActionsById.mute : channelActionsById.archive;
+
+    if (extraItem) {
+      const { id, action } = extraItem;
+      items.push({
+        id,
+        action: () => {
+          action();
+          swipableRegistry?.closeAll();
+        },
+        Content: Icon,
+        contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+      });
+    }
+
+    return items;
+  }, [
+    styles.contentContainerStyle,
+    styles.elipsis,
+    styles.standard,
+    isDirectChannel,
+    channelActionsById.mute,
+    channelActionsById.archive,
+    Icon,
+    swipableRegistry,
+  ]);
+
+  const renderRightActions = useCallback(
+    (_progress: SharedValue<number>, translation: SharedValue<number>) => (
+      <RightActions items={swipableActions} translation={translation} />
+    ),
+    [swipableActions],
+  );
+
+  const swipableProps = useMemo(
+    () => ({ renderRightActions, ..._swipableProps }),
+    [_swipableProps, renderRightActions],
+  );
+
+  return (
+    <>
+      <SwipableWrapper swipeableId={channel.cid} swipableProps={swipableProps}>
+        {children}
+      </SwipableWrapper>
+      <BottomSheetModal
+        onClose={() => setChannelDetailSheetOpen(false)}
+        visible={channelDetailSheetOpen}
+        height={356}
+      >
+        <ChannelDetailsBottomSheetComponent channel={channel} items={channelActionItems} />
+      </BottomSheetModal>
+    </>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        contentContainerStyle: {
+          alignItems: 'center',
+          flex: 1,
+          justifyContent: 'center',
+        },
+        elipsis: {
+          backgroundColor: semantics.backgroundCoreSurface,
+        },
+        standard: {
+          backgroundColor: semantics.accentPrimary,
+        },
+      }),
+    [semantics.accentPrimary, semantics.backgroundCoreSurface],
+  );
+};

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ThemeProvider, defaultTheme } from '../../../contexts';
+import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import type { ChannelDetailsHeaderProps } from '../ChannelDetailsBottomSheet';
+import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';
+
+const mockStreamBottomSheetModalFlatList = jest.fn(() => null);
+
+jest.mock('../../UIComponents', () => ({
+  StreamBottomSheetModalFlatList: (...args: unknown[]) =>
+    mockStreamBottomSheetModalFlatList(...args),
+}));
+
+describe('ChannelDetailsBottomSheet', () => {
+  const channel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
+
+  const items: ChannelActionItem[] = [
+    {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'mute',
+      label: 'Mute',
+      placement: 'both',
+      type: 'standard',
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders custom ChannelDetailsHeader override', () => {
+    const CustomChannelDetailsHeader = ({ channel: headerChannel }: ChannelDetailsHeaderProps) => (
+      <Text testID='custom-channel-details-header'>{headerChannel.cid}</Text>
+    );
+
+    const { getByTestId } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ChannelDetailsBottomSheet
+          channel={channel}
+          items={items}
+          ChannelDetailsHeader={CustomChannelDetailsHeader}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('custom-channel-details-header')).toHaveTextContent(
+      'messaging:test-channel',
+    );
+  });
+
+  it('forwards additionalFlatListProps to StreamBottomSheetModalFlatList', () => {
+    const onEndReached = jest.fn();
+
+    render(
+      <ThemeProvider theme={defaultTheme}>
+        <ChannelDetailsBottomSheet
+          channel={channel}
+          items={items}
+          ChannelDetailsHeader={() => null}
+          additionalFlatListProps={{ onEndReached, testID: 'channel-details-list' }}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(mockStreamBottomSheetModalFlatList).toHaveBeenCalled();
+    const flatListProps = mockStreamBottomSheetModalFlatList.mock.calls[0]?.[0];
+    expect(flatListProps).toEqual(
+      expect.objectContaining({
+        onEndReached,
+        testID: 'channel-details-list',
+      }),
+    );
+  });
+});

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

@@ -1,10 +1,12 @@
-import React, { ComponentType } from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 
 import { act, render, waitFor } from '@testing-library/react-native';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
+import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
+import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
 import {
   getOrCreateChannelApi,
   GetOrCreateChannelApiParams,
@@ -19,33 +21,37 @@ import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { ChannelPreview } from '../ChannelPreview';
-import type { ChannelPreviewMessengerProps } from '../ChannelPreviewMessenger';
 
 import '@testing-library/jest-native/extend-expect';
+import { LastMessageType } from '../hooks/useChannelPreviewData';
 
 type ChannelPreviewUIComponentProps = {
   channel: {
     id: string;
   };
-  latestMessagePreview: {
-    messageObject: {
-      text: string;
-    };
-  };
+  lastMessage: LastMessageType;
   unread: number;
+  muted: boolean;
 };
 
-const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => (
-  <>
-    <Text testID='channel-id'>{props.channel.id}</Text>
-    <Text testID='unread-count'>{props.unread}</Text>
-    <Text testID='latest-message'>
-      {props.latestMessagePreview &&
-        props.latestMessagePreview.messageObject &&
-        props.latestMessagePreview.messageObject.text}
-    </Text>
-  </>
-);
+const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
+const mockChannelSwipableWrapper = jest.fn(({ children }: React.PropsWithChildren) => (
+  <Text testID='swipe-wrapper'>{children}</Text>
+));
+
+jest.mock('../ChannelSwipableWrapper', () => ({
+  ChannelSwipableWrapper: (...args: unknown[]) => mockChannelSwipableWrapper(...args),
+}));
+
+const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => {
+  return (
+    <>
+      <Text testID='channel-id'>{props.channel.id}</Text>
+      <Text testID='unread-count'>{props.unread}</Text>
+      <Text testID='latest-message'>{props.lastMessage?.text}</Text>
+    </>
+  );
+};
 
 const initChannelFromData = async (
   chatClient: StreamChat,
@@ -60,6 +66,7 @@ const initChannelFromData = async (
   channel.initialized = true;
   channel.lastMessage = jest.fn().mockReturnValue(generateMessage());
   channel.muteStatus = jest.fn().mockReturnValue({ muted: false });
+  channel.state.messages = [generateMessage()];
 
   return channel;
 };
@@ -80,7 +87,7 @@ describe('ChannelPreview', () => {
           {...props}
           channel={channel}
           client={chatClient}
-          Preview={ChannelPreviewUIComponent as ComponentType<ChannelPreviewMessengerProps>}
+          Preview={ChannelPreviewUIComponent}
         />
       </Chat>
     );
@@ -113,8 +120,6 @@ describe('ChannelPreview', () => {
 
   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() });
-
       channel = await initChannelFromData(chatClient);
 
       channel.countUnread = jest.fn().mockReturnValue(10);
@@ -342,7 +347,7 @@ describe('ChannelPreview', () => {
     });
   });
 
-  it('should update the lastest message on "message.new" event', async () => {
+  it('should update the latest message on "message.new" event', async () => {
     const c = generateChannelResponse();
     await useInitializeChannel(c);
 
@@ -406,4 +411,84 @@ describe('ChannelPreview', () => {
       expect(getByText(message.i18n.no_text)).toBeTruthy();
     });
   });
+
+  describe('swipeActionsEnabled', () => {
+    const ChannelDetailsBottomSheetOverride = () => null;
+
+    const SwipePreview = ({ lastMessage, muted, unread }: ChannelPreviewUIComponentProps) => (
+      <>
+        <Text testID='preview-muted'>{`${muted}`}</Text>
+        <Text testID='preview-unread'>{`${unread}`}</Text>
+        <Text testID='preview-last-message'>{lastMessage?.text ?? ''}</Text>
+      </>
+    );
+
+    const SwipeTestComponent = ({
+      channelDetailsBottomSheet,
+      swipeActionsEnabled,
+    }: {
+      channelDetailsBottomSheet?: React.ComponentType;
+      swipeActionsEnabled: boolean;
+    }) => {
+      if (channel === null) {
+        return null;
+      }
+
+      return (
+        <Chat client={chatClient}>
+          <ChannelsProvider
+            value={
+              {
+                ChannelDetailsBottomSheet: channelDetailsBottomSheet,
+                Preview: SwipePreview,
+                getChannelActionItems: undefined,
+                swipeActionsEnabled,
+              } as unknown as ChannelsContextValue
+            }
+          >
+            <ChannelPreview channel={channel} client={chatClient} Preview={SwipePreview} />
+          </ChannelsProvider>
+        </Chat>
+      );
+    };
+
+    beforeEach(async () => {
+      mockChannelSwipableWrapper.mockClear();
+      channel = await initChannelFromData(chatClient);
+    });
+
+    it('does not render ChannelSwipableWrapper when swipeActionsEnabled is false', async () => {
+      const { getByTestId, queryByTestId } = render(
+        <SwipeTestComponent swipeActionsEnabled={false} />,
+      );
+
+      await waitFor(() => expect(getByTestId('preview-unread')).toHaveTextContent('0'));
+      expect(queryByTestId('swipe-wrapper')).toBeNull();
+      expect(mockChannelSwipableWrapper).not.toHaveBeenCalled();
+    });
+
+    it('renders ChannelSwipableWrapper when swipeActionsEnabled is true', async () => {
+      const { getByTestId } = render(<SwipeTestComponent swipeActionsEnabled={true} />);
+
+      await waitFor(() => expect(getByTestId('swipe-wrapper')).toBeTruthy());
+      expect(mockChannelSwipableWrapper).toHaveBeenCalled();
+    });
+
+    it('passes ChannelDetailsBottomSheet override to ChannelSwipableWrapper', async () => {
+      render(
+        <SwipeTestComponent
+          swipeActionsEnabled={true}
+          channelDetailsBottomSheet={ChannelDetailsBottomSheetOverride}
+        />,
+      );
+
+      await waitFor(() => expect(mockChannelSwipableWrapper).toHaveBeenCalled());
+      const swipableWrapperProps = mockChannelSwipableWrapper.mock.calls[0]?.[0];
+      expect(swipableWrapperProps).toEqual(
+        expect.objectContaining({
+          ChannelDetailsBottomSheet: ChannelDetailsBottomSheetOverride,
+        }),
+      );
+    });
+  });
 });

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

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import truncate from 'lodash/truncate';
+
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Chat } from '../../Chat/Chat';
+import { ChannelPreviewView } from '../ChannelPreviewView';
+
+describe('ChannelPreviewView', () => {
+  const clientUser = generateUser();
+  let chatClient;
+  let channel;
+
+  const getComponent = (props = {}) => (
+    <Chat client={chatClient}>
+      <ChannelPreviewView
+        channel={channel}
+        client={chatClient}
+        latestMessagePreview={{
+          created_at: '',
+          messageObject: generateMessage(),
+          previews: [
+            {
+              bold: true,
+              text: 'This is the message preview text',
+            },
+          ],
+          status: 1, // read states of latest message.
+        }}
+        onSelect={jest.fn()}
+        {...props}
+      />
+    </Chat>
+  );
+
+  const initializeChannel = async (c) => {
+    useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
+
+    channel = chatClient.channel('messaging');
+
+    await channel.watch();
+  };
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(clientUser);
+  });
+
+  afterEach(() => {
+    channel = null;
+  });
+
+  it('should call setActiveChannel on click', async () => {
+    const onSelect = jest.fn();
+    await initializeChannel(generateChannelResponse());
+
+    render(
+      getComponent({
+        onSelect,
+        watchers: {},
+      }),
+    );
+
+    await waitFor(() => screen.getByTestId('channel-preview-button'));
+
+    fireEvent(screen.getByTestId('channel-preview-button'), 'onPress');
+
+    await waitFor(() => {
+      expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should render name of channel', async () => {
+    const channelName = Date.now().toString();
+    await initializeChannel(
+      generateChannelResponse({
+        channel: {
+          name: channelName,
+        },
+      }),
+    );
+    render(getComponent());
+    await waitFor(() => screen.queryByText(channelName));
+  });
+
+  it('should render comma separated names of other members, if channel has no name', async () => {
+    const m1 = generateMember();
+    const m2 = generateMember();
+    const m3 = generateMember();
+
+    await initializeChannel(
+      generateChannelResponse({
+        members: [m1, m2, m3],
+      }),
+    );
+
+    render(getComponent());
+    const expectedDisplayName = `${m1.user.name}, ${m2.user.name}, ${m3.user.name}`;
+
+    await waitFor(() => screen.queryByText(expectedDisplayName));
+  });
+
+  it('should render latest message, truncated to length given by latestMessageLength', async () => {
+    const message = generateMessage();
+    await initializeChannel(generateChannelResponse());
+
+    render(
+      getComponent({
+        latestMessage: message,
+        latestMessageLength: 6,
+      }),
+    );
+
+    const expectedMessagePreview = truncate(message.text, { length: 6 });
+    await waitFor(() => screen.queryByText(expectedMessagePreview));
+  });
+});

package/src/components/ChannelPreview/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './useChannelPreviewData';
+export * from './useChannelPreviewDraftMessage';
+export * from './useChannelPreviewPollLabel';
+export * from './useChannelPreviewDisplayName';
+export * from './useChannelPreviewDisplayPresence';
+export * from './useIsChannelMuted';
+export * from './useChannelTypingState';

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -5,8 +5,6 @@ import type { Channel, Event, LocalMessage, MessageResponse, StreamChat } from '
 
 import { useIsChannelMuted } from './useIsChannelMuted';
 
-import { useLatestMessagePreview } from './useLatestMessagePreview';
-
 import { useChannelsContext } from '../../../contexts';
 import { useStableCallback } from '../../../hooks';
 
@@ -16,7 +14,7 @@ const setLastMessageThrottleOptions = { leading: true, trailing: true };
 const refreshUnreadCountThrottleTimeout = 400;
 const refreshUnreadCountThrottleOptions = setLastMessageThrottleOptions;
 
-type LastMessageType = LocalMessage | MessageResponse;
+export type LastMessageType = LocalMessage | MessageResponse;
 
 export const useChannelPreviewData = (
   channel: Channel,
@@ -172,11 +170,5 @@ export const useChannelPreviewData = (
     return () => listeners.forEach((l) => l.unsubscribe());
   }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate, setLastMessage]);
 
-  const latestMessagePreview = useLatestMessagePreview(
-    channel,
-    forceUpdate,
-    lastMessage as LocalMessage,
-  );
-
-  return { latestMessagePreview, muted, unread };
+  return { lastMessage, muted, unread };
 };