stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Unknown } from '../../icons';
+
+import type { DefaultStreamChatGenerics, Reaction } from '../../types/types';
+import { ReactionData } from '../../utils/utils';
+
+export type MessageUserReactionsItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'MessageUserReactionsAvatar'> & {
+  /**
+   * The reaction object
+   */
+  reaction: Reaction;
+  /**
+   * An array of supported reactions
+   */
+  supportedReactions: ReactionData[];
+};
+
+export const MessageUserReactionsItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  MessageUserReactionsAvatar,
+  reaction,
+  supportedReactions,
+}: MessageUserReactionsItemProps<StreamChatGenerics>) => {
+  const { id, name, type } = reaction;
+  const {
+    theme: {
+      colors: { accent_blue, black, grey, grey_gainsboro, white },
+      messageMenu: {
+        userReactions: {
+          avatarContainer,
+          avatarInnerContainer,
+          avatarName,
+          avatarNameContainer,
+          avatarSize,
+          radius,
+          reactionBubbleBackground,
+          reactionBubbleBorderRadius,
+        },
+      },
+    },
+  } = useTheme();
+  const { client } = useChatContext();
+  const alignment = client.userID && client.userID === id ? 'left' : 'right';
+  const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
+  const y = avatarSize - radius;
+
+  const left =
+    alignment === 'left'
+      ? x -
+        (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +
+        radius
+      : x - radius;
+  const top =
+    y -
+    radius -
+    (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);
+
+  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon ?? Unknown;
+
+  return (
+    <View
+      accessibilityLabel='Individual User Reaction on long press message'
+      style={[styles.avatarContainer, avatarContainer]}
+    >
+      <View style={[styles.avatarInnerContainer, avatarInnerContainer]}>
+        <MessageUserReactionsAvatar reaction={reaction} size={avatarSize} />
+        <View
+          style={[
+            styles.reactionBubbleBackground,
+            {
+              backgroundColor: grey_gainsboro,
+              borderColor: alignment === 'left' ? white : grey_gainsboro,
+              borderWidth: radius / 2,
+              left,
+              top,
+            },
+            reactionBubbleBackground,
+          ]}
+        >
+          <Icon
+            height={reactionBubbleBorderRadius / 2}
+            pathFill={alignment === 'left' ? accent_blue : grey}
+            width={reactionBubbleBorderRadius / 2}
+          />
+        </View>
+      </View>
+      <View style={[styles.avatarNameContainer, avatarNameContainer]}>
+        <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
+          {name}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatarContainer: {
+    marginBottom: 8,
+  },
+  avatarInnerContainer: {
+    alignSelf: 'center',
+  },
+  avatarName: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: '700',
+    paddingTop: 6,
+    textAlign: 'center',
+  },
+  avatarNameContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexGrow: 1,
+  },
+  reactionBubbleBackground: {
+    alignItems: 'center',
+    borderRadius: 24,
+    height: 24,
+    justifyContent: 'center',
+    position: 'absolute',
+    width: 24,
+  },
+});

package/src/components/MessageMenu/ReactionButton.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../icons';
+
+type ReactionButtonProps = {
+  /**
+   * Icon to display for the reaction button
+   */
+  Icon: React.ComponentType<IconProps>;
+  /**
+   * Whether the reaction button is selected
+   */
+  selected: boolean;
+  /**
+   * The type of reaction
+   */
+  type: string;
+  /**
+   * Function to call when the reaction button is pressed
+   * @param reactionType
+   * @returns
+   */
+  onPress?: (reactionType: string) => void;
+};
+
+export const ReactionButton = (props: ReactionButtonProps) => {
+  const { Icon, onPress, selected, type } = props;
+  const {
+    theme: {
+      colors: { light_blue, white },
+      messageMenu: {
+        reactionButton: { filledColor, unfilledColor },
+        reactionPicker: { buttonContainer, reactionIconSize },
+      },
+    },
+  } = useTheme();
+
+  const onPressHandler = () => {
+    if (onPress) {
+      onPress(type);
+    }
+  };
+
+  return (
+    <Pressable
+      accessibilityLabel={`reaction-button-${type}-${selected ? 'selected' : 'unselected'}`}
+      onPress={onPressHandler}
+      style={({ pressed }) => [
+        styles.reactionButton,
+        { backgroundColor: pressed || selected ? light_blue : white },
+        buttonContainer,
+      ]}
+    >
+      <Icon
+        height={reactionIconSize}
+        pathFill={selected ? filledColor : unfilledColor}
+        width={reactionIconSize}
+      />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  reactionButton: {
+    alignItems: 'center',
+    borderRadius: 8,
+    justifyContent: 'center',
+    padding: 8,
+  },
+});

package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx

@@ -0,0 +1,48 @@
+// MessageActionList.test.tsx
+
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { MessageActionList } from '../MessageActionList';
+import { MessageActionListItemProps } from '../MessageActionListItem';
+
+const MockMessageActionListItem = (props: MessageActionListItemProps) => <Text>{props.title}</Text>;
+
+const defaultProps = {
+  MessageActionListItem: MockMessageActionListItem,
+  messageActions: [
+    { action: jest.fn(), actionType: 'copyMessage', title: 'Copy Message' },
+    { action: jest.fn(), actionType: 'deleteMessage', title: 'Delete Message' },
+  ],
+};
+
+describe('MessageActionList', () => {
+  it('should render correctly with provided message actions', () => {
+    const { getByLabelText, getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionList {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    expect(getByLabelText('Message action list')).toBeTruthy();
+
+    expect(getByText('Copy Message')).toBeTruthy();
+    expect(getByText('Delete Message')).toBeTruthy();
+  });
+
+  it('should pass the correct props to MessageActionListItem', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionList {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    expect(getByText('Copy Message')).toBeTruthy();
+    expect(getByText('Delete Message')).toBeTruthy();
+  });
+});

package/src/components/MessageMenu/__tests__/MessageActionListItem.test.tsx

@@ -0,0 +1,48 @@
+// MessageActionListItem.test.tsx
+
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { MessageActionListItem } from '../MessageActionListItem';
+
+describe('MessageActionListItem', () => {
+  const mockAction = jest.fn();
+
+  const defaultProps = {
+    action: mockAction,
+    actionType: 'copyMessage',
+    icon: <Text>Icon</Text>,
+    title: 'Copy Message',
+  };
+
+  it('should render correctly with given props', () => {
+    const { getByLabelText, getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionListItem {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    expect(getByText('Copy Message')).toBeTruthy();
+
+    expect(getByText('Icon')).toBeTruthy();
+
+    expect(getByLabelText('copyMessage action list item')).toBeTruthy();
+  });
+
+  it('should call the action callback when pressed', () => {
+    const { getByLabelText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionListItem {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    fireEvent.press(getByLabelText('copyMessage action list item'));
+
+    expect(mockAction).toHaveBeenCalled();
+  });
+});

package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import {
+  MessagesContextValue,
+  MessagesProvider,
+} from '../../../contexts/messagesContext/MessagesContext';
+import {
+  OwnCapabilitiesContextValue,
+  OwnCapabilitiesProvider,
+} from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { triggerHaptic } from '../../../native';
+import { MessageReactionPicker } from '../MessageReactionPicker';
+
+jest.mock('../../../native', () => ({
+  triggerHaptic: jest.fn(),
+}));
+
+const mockSupportedReactions = [
+  { Icon: () => null, type: 'like' },
+  { Icon: () => null, type: 'love' },
+];
+
+const defaultProps = {
+  dismissOverlay: jest.fn(),
+  handleReaction: jest.fn(),
+  ownReactionTypes: ['like'],
+};
+
+const renderComponent = (props = {}, ownCapabilities = { sendReaction: true }) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <OwnCapabilitiesProvider value={{ ...ownCapabilities } as OwnCapabilitiesContextValue}>
+        <MessagesProvider
+          value={{ supportedReactions: mockSupportedReactions } as unknown as MessagesContextValue}
+        >
+          <MessageReactionPicker {...defaultProps} {...props} />
+        </MessagesProvider>
+      </OwnCapabilitiesProvider>
+    </ThemeProvider>,
+  );
+
+describe('MessageReactionPicker', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly with supported reactions', () => {
+    const { getAllByLabelText, getByLabelText } = renderComponent();
+    expect(getByLabelText('Reaction Selector on long pressing message')).toBeTruthy();
+    expect(getAllByLabelText(/\breaction-button[^\s]+/)).toHaveLength(
+      mockSupportedReactions.length,
+    );
+  });
+
+  it('does not render when sendReaction capability is false', () => {
+    const { queryByLabelText } = renderComponent({}, { sendReaction: false });
+    expect(queryByLabelText('Reaction Selector on long pressing message')).toBeNull();
+  });
+
+  it('marks own reactions as selected', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+  });
+
+  it('calls handleReaction and dismissOverlay when a reaction is pressed', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    fireEvent.press(reactionButtons[1]);
+
+    expect(defaultProps.handleReaction).toHaveBeenCalledWith('love');
+    expect(defaultProps.dismissOverlay).toHaveBeenCalled();
+    expect(triggerHaptic).toHaveBeenCalledWith('impactLight');
+  });
+
+  it("doesn't call handleReaction when it's not provided", () => {
+    const { getAllByLabelText } = renderComponent({ handleReaction: undefined });
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    fireEvent.press(reactionButtons[1]);
+
+    expect(defaultProps.handleReaction).not.toHaveBeenCalled();
+  });
+
+  it('uses provided supportedReactions prop over context value', () => {
+    const customSupportedReactions = [
+      { Icon: () => null, type: 'wow' },
+      { Icon: () => null, type: 'haha' },
+    ];
+    const { getAllByLabelText } = renderComponent({ supportedReactions: customSupportedReactions });
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    expect(reactionButtons).toHaveLength(customSupportedReactions.length);
+  });
+});

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ReactionResponse } from 'stream-chat';
+
+import {
+  MessagesContextValue,
+  MessagesProvider,
+} from '../../../contexts/messagesContext/MessagesContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../../../contexts/translationContext/TranslationContext';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { MessageType } from '../../MessageList/hooks/useMessageList';
+import * as useFetchReactionsModule from '../hooks/useFetchReactions';
+import { MessageUserReactions } from '../MessageUserReactions';
+import { MessageUserReactionsItemProps } from '../MessageUserReactionsItem';
+
+const mockTranslations = {
+  t: jest.fn((key) => key),
+};
+
+const mockSupportedReactions = [
+  { Icon: () => null, type: 'like' },
+  { Icon: () => null, type: 'love' },
+];
+
+const defaultProps = {
+  message: {
+    ...generateMessage(),
+    reaction_groups: { like: { count: 1, sum_scores: 1 }, love: { count: 1, sum_scores: 1 } },
+  } as unknown as MessageType,
+  supportedReactions: mockSupportedReactions,
+};
+
+describe('MessageUserReactions when the supportedReactions are defined', () => {
+  beforeAll(() => {
+    const mockLoadNextPage = jest.fn();
+
+    const mockUseFetchReactions = jest.spyOn(useFetchReactionsModule, 'useFetchReactions');
+    mockUseFetchReactions.mockReturnValue({
+      loading: false,
+      loadNextPage: mockLoadNextPage,
+      reactions: [
+        {
+          type: 'like',
+          user: { id: '1', image: 'user1.jpg', name: 'User 1' },
+        } as unknown as ReactionResponse,
+        {
+          type: 'love',
+          user: { id: '2', image: 'user2.jpg', name: 'User 2' },
+        } as unknown as ReactionResponse,
+      ],
+    });
+  });
+  const renderComponent = (props = {}) =>
+    render(
+      <ThemeProvider theme={defaultTheme}>
+        <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
+          <MessagesProvider
+            value={
+              {
+                MessageUserReactionsAvatar: () => null,
+                MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
+                  <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
+                ),
+              } as unknown as MessagesContextValue
+            }
+          >
+            <MessageUserReactions {...defaultProps} {...props} />
+          </MessagesProvider>
+        </TranslationProvider>
+      </ThemeProvider>,
+    );
+
+  it('renders correctly', () => {
+    const { getByLabelText, getByText } = renderComponent();
+    expect(getByLabelText('User Reactions on long press message')).toBeTruthy();
+    expect(getByText('Message Reactions')).toBeTruthy();
+  });
+
+  it('renders reaction buttons', () => {
+    const { getByLabelText } = renderComponent();
+    const likeReactionButton = getByLabelText('reaction-button-like-selected');
+    expect(likeReactionButton).toBeDefined();
+    const loveReactionButton = getByLabelText('reaction-button-love-unselected');
+    expect(loveReactionButton).toBeDefined();
+  });
+
+  it('selects the first reaction by default', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+  });
+
+  it('changes selected reaction when a reaction button is pressed', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    fireEvent.press(reactionButtons[1]);
+
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
+  });
+
+  it('renders reactions list', async () => {
+    const { getByText } = renderComponent();
+    const reactionItems = await getByText('1 like');
+    expect(reactionItems).toBeDefined();
+  });
+
+  it('uses provided reactions when passed as a prop', () => {
+    const propReactions = [{ id: '3', image: 'user3.jpg', name: 'User 3', type: 'wow' }];
+    const { getByText } = renderComponent({ reactions: propReactions });
+    const reactionItem = getByText('3 wow');
+    expect(reactionItem).toBeDefined();
+  });
+
+  it("don't render reaction buttons that is of unsupported type", () => {
+    const { queryAllByLabelText } = renderComponent({
+      message: { ...generateMessage(), reaction_groups: { money: 1 } },
+    });
+    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons.length).toBe(0);
+  });
+});
+
+const renderComponent = (props = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
+        <MessagesProvider
+          value={
+            {
+              MessageUserReactionsAvatar: () => null,
+              MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
+                <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
+              ),
+            } as unknown as MessagesContextValue
+          }
+        >
+          <MessageUserReactions {...defaultProps} {...props} />
+        </MessagesProvider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+describe("MessageUserReactions when the supportedReactions aren't defined", () => {
+  it("don't render reaction buttons that is of unsupported type", () => {
+    const { queryAllByLabelText } = renderComponent({
+      message: { ...generateMessage(), reaction_groups: undefined },
+      supportedReactions: undefined,
+    });
+    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons.length).toBe(0);
+  });
+});
+
+describe('MessageUserReactions when the reactions are in loading phase', () => {
+  beforeAll(() => {
+    const mockLoadNextPage = jest.fn();
+
+    const mockUseFetchReactions = jest.spyOn(useFetchReactionsModule, 'useFetchReactions');
+    mockUseFetchReactions.mockReturnValue({
+      loading: true,
+      loadNextPage: mockLoadNextPage,
+      reactions: [],
+    });
+  });
+
+  it("don't render reactions flatlist when loading is false", () => {
+    const { queryByLabelText } = renderComponent();
+    const reactionsFlatList = queryByLabelText('reaction-flat-list');
+
+    expect(reactionsFlatList).toBeNull();
+  });
+});

package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { MessageUserReactionsAvatar } from '../MessageUserReactionsAvatar';
+
+describe('MessageUserReactionsAvatar', () => {
+  const reaction = { id: 'test-user', image: 'image-url', name: 'Test User', type: 'like' }; // Mock reaction data
+
+  it('should render Avatar with correct image, name, and default size', () => {
+    const { queryByTestId } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageUserReactionsAvatar reaction={reaction} />
+      </ThemeProvider>,
+    );
+
+    // Check if the mocked Avatar component is rendered with correct props
+    expect(queryByTestId(`avatar-image`)).toBeTruthy();
+  });
+
+  it('should render Avatar with correct image, name, and custom size', () => {
+    const customSize = 40;
+
+    const { queryByTestId } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageUserReactionsAvatar reaction={reaction} size={customSize} />
+      </ThemeProvider>,
+    );
+
+    // Check if the mocked Avatar component is rendered with correct custom size
+    expect(queryByTestId(`avatar-image`)).toBeTruthy();
+  });
+});