stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -1,209 +0,0 @@
-import React, { useMemo } from 'react';
-import { FlatList, StyleSheet, Text, View } from 'react-native';
-
-import { ReactionSortBase } from 'stream-chat';
-
-import { useFetchReactions } from './hooks/useFetchReactions';
-import { ReactionButton } from './ReactionButton';
-
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { DefaultStreamChatGenerics, Reaction } from '../../types/types';
-import { ReactionData } from '../../utils/utils';
-import { MessageType } from '../MessageList/hooks/useMessageList';
-
-export type MessageUserReactionsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<
-  Pick<
-    MessagesContextValue<StreamChatGenerics>,
-    'MessageUserReactionsAvatar' | 'MessageUserReactionsItem' | 'supportedReactions'
-  >
-> & {
-  /**
-   * The message object
-   */
-  message?: MessageType<StreamChatGenerics>;
-  /**
-   * An array of reactions
-   */
-  reactions?: Reaction[];
-};
-
-const sort: ReactionSortBase = {
-  created_at: -1,
-};
-
-export type ReactionSelectorItemType = ReactionData & {
-  onSelectReaction: (type: string) => void;
-  selectedReaction?: string;
-};
-
-const renderSelectorItem = ({ index, item }: { index: number; item: ReactionSelectorItemType }) => (
-  <ReactionButton
-    Icon={item.Icon}
-    key={`${item.type}_${index}`}
-    onPress={item.onSelectReaction}
-    selected={item.selectedReaction === item.type}
-    type={item.type}
-  />
-);
-
-export const MessageUserReactions = (props: MessageUserReactionsProps) => {
-  const {
-    message,
-    MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
-    MessageUserReactionsItem: propMessageUserReactionsItem,
-    reactions: propReactions,
-    supportedReactions: propSupportedReactions,
-  } = props;
-  const reactionTypes = Object.keys(message?.reaction_groups ?? {});
-  const [selectedReaction, setSelectedReaction] = React.useState<string | undefined>(
-    reactionTypes[0],
-  );
-  const {
-    MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
-    MessageUserReactionsItem: contextMessageUserReactionsItem,
-    supportedReactions: contextSupportedReactions,
-  } = useMessagesContext();
-  const supportedReactions = propSupportedReactions ?? contextSupportedReactions;
-  const MessageUserReactionsAvatar =
-    propMessageUserReactionsAvatar ?? contextMessageUserReactionsAvatar;
-  const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
-
-  const onSelectReaction = (reactionType: string) => {
-    setSelectedReaction(reactionType);
-  };
-
-  const messageReactions = useMemo(
-    () =>
-      reactionTypes.reduce<ReactionData[]>((acc, reaction) => {
-        const reactionData = supportedReactions?.find(
-          (supportedReaction) => supportedReaction.type === reaction,
-        );
-        if (reactionData) {
-          acc.push(reactionData);
-        }
-        return acc;
-      }, []),
-    [reactionTypes, supportedReactions],
-  );
-
-  const {
-    loading,
-    loadNextPage,
-    reactions: fetchedReactions,
-  } = useFetchReactions({
-    messageId: message?.id,
-    reactionType: selectedReaction,
-    sort,
-  });
-
-  const {
-    theme: {
-      messageMenu: {
-        userReactions: {
-          container,
-          contentContainer,
-          flatlistColumnContainer,
-          flatlistContainer,
-          reactionSelectorContainer,
-          reactionsText,
-        },
-      },
-    },
-  } = useTheme();
-  const { t } = useTranslationContext();
-
-  const reactions = useMemo(
-    () =>
-      propReactions ||
-      (fetchedReactions.map((reaction) => ({
-        id: reaction.user?.id,
-        image: reaction.user?.image,
-        name: reaction.user?.name,
-        type: reaction.type,
-      })) as Reaction[]),
-    [propReactions, fetchedReactions],
-  );
-
-  const renderItem = ({ item }: { item: Reaction }) => (
-    <MessageUserReactionsItem
-      MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-      reaction={item}
-      supportedReactions={supportedReactions ?? []}
-    />
-  );
-
-  const renderHeader = () => (
-    <Text style={[styles.reactionsText, reactionsText]}>{t<string>('Message Reactions')}</Text>
-  );
-
-  const selectorReactions: ReactionSelectorItemType[] = messageReactions.map((reaction) => ({
-    ...reaction,
-    onSelectReaction,
-    selectedReaction,
-  }));
-
-  return (
-    <View
-      accessibilityLabel='User Reactions on long press message'
-      style={[styles.container, container]}
-    >
-      <View style={[styles.reactionSelectorContainer, reactionSelectorContainer]}>
-        <FlatList
-          contentContainerStyle={[styles.contentContainer, contentContainer]}
-          data={selectorReactions}
-          horizontal
-          keyExtractor={(item) => item.type}
-          renderItem={renderSelectorItem}
-        />
-      </View>
-
-      {!loading ? (
-        <FlatList
-          accessibilityLabel='reaction-flat-list'
-          columnWrapperStyle={[styles.flatListColumnContainer, flatlistColumnContainer]}
-          contentContainerStyle={[styles.flatListContainer, flatlistContainer]}
-          data={reactions}
-          keyExtractor={(item) => item.id}
-          ListHeaderComponent={renderHeader}
-          numColumns={4}
-          onEndReached={loadNextPage}
-          renderItem={renderItem}
-        />
-      ) : null}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  contentContainer: {
-    flexGrow: 1,
-    justifyContent: 'space-around',
-    marginVertical: 16,
-  },
-  flatListColumnContainer: {
-    justifyContent: 'space-evenly',
-  },
-  flatListContainer: {
-    justifyContent: 'center',
-  },
-  reactionSelectorContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  reactionsText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    marginVertical: 16,
-    textAlign: 'center',
-  },
-});

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -1,130 +0,0 @@
-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,
-          avatarName,
-          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}>
-        <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}>
-        <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

@@ -1,72 +0,0 @@
-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

@@ -1,48 +0,0 @@
-// 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

@@ -1,48 +0,0 @@
-// 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

@@ -1,101 +0,0 @@
-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);
-  });
-});