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

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

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+
+import { Colors, defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { MessageUserReactionsItem } from '../MessageUserReactionsItem';
+
+jest.mock('../../../icons', () => ({
+  Unknown: () => null,
+}));
+
+const mockReaction = {
+  id: 'user1',
+  name: 'John Doe',
+  type: 'like',
+};
+
+const mockSupportedReactions = [
+  { Icon: () => null, type: 'like' },
+  { Icon: () => null, type: 'love' },
+];
+
+const MockOverlayReactionsAvatar = () => null;
+
+const renderComponent = async (props = {}, clientUserID = 'user2') =>
+  render(
+    <ChatProvider
+      value={{ client: await getTestClientWithUser({ id: clientUserID }) } as ChatContextValue}
+    >
+      <ThemeProvider theme={defaultTheme}>
+        <MessageUserReactionsItem
+          MessageUserReactionsAvatar={MockOverlayReactionsAvatar}
+          reaction={mockReaction}
+          supportedReactions={mockSupportedReactions}
+          {...props}
+        />
+      </ThemeProvider>
+    </ChatProvider>,
+  );
+
+describe('MessageUserReactionsItem', () => {
+  it('renders correctly', async () => {
+    const { getByLabelText, getByText } = await renderComponent();
+    expect(getByLabelText('Individual User Reaction on long press message')).toBeTruthy();
+    expect(getByText('John Doe')).toBeTruthy();
+  });
+
+  it('aligns reaction bubble to the right for other users', async () => {
+    const { getByLabelText } = await renderComponent();
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionBubble = container.props.children[0].props.children[1];
+    expect(reactionBubble.props.style[1].borderColor).toBe(Colors.grey_gainsboro);
+  });
+
+  it('aligns reaction bubble to the left for the current user', async () => {
+    const { getByLabelText } = await renderComponent({}, 'user1');
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionBubble = container.props.children[0].props.children[1];
+    expect(reactionBubble.props.style[1].borderColor).toBe(Colors.white);
+  });
+
+  it('uses Unknown icon for unsupported reaction types', async () => {
+    const { getByLabelText } = await renderComponent({
+      reaction: { ...mockReaction, type: 'unsupported' },
+    });
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionIcon = container.props.children[0].props.children[1].props.children;
+    expect(reactionIcon.type.name).toBe('Unknown');
+  });
+
+  it('uses correct icon for supported reaction types', async () => {
+    const { getByLabelText } = await renderComponent();
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionIcon = container.props.children[0].props.children[1].props.children;
+    expect(reactionIcon.type).not.toBe('Unknown');
+  });
+});

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

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { cleanup, fireEvent, render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { IconProps } from '../../../icons';
+import { ReactionButton } from '../ReactionButton';
+
+const MockIcon = (props: IconProps) => <Text>{props?.pathFill?.toString() || ''}</Text>;
+
+describe('ReactionButton', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  const mockOnPress = jest.fn();
+
+  const defaultProps = {
+    Icon: MockIcon,
+    onPress: mockOnPress,
+    selected: false,
+    type: 'like',
+  };
+
+  it('should render correctly with given props', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    // Check if the unselected pathFill color is rendered by the mock Icon
+    expect(
+      getByText(defaultTheme.messageMenu.reactionButton.unfilledColor.toString()),
+    ).toBeTruthy();
+  });
+
+  it('should call onPress function with the correct reaction type when pressed', () => {
+    const { getByLabelText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    // Simulate a press event
+    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+
+    // Verify if the mock function has been called with the correct reaction type
+    expect(mockOnPress).toHaveBeenCalledWith('like');
+  });
+
+  it('should not call onPress when the onPress prop is not provided', () => {
+    const { getByLabelText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} onPress={undefined} />
+      </ThemeProvider>,
+    );
+
+    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  it('should apply selected styles correctly when selected is true', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} selected={true} />
+      </ThemeProvider>,
+    );
+
+    expect(getByText(defaultTheme.messageMenu.reactionButton.filledColor.toString())).toBeTruthy();
+  });
+});

package/src/components/{MessageOverlay → MessageMenu}/hooks/useFetchReactions.ts

@@ -34,9 +34,9 @@ export const useFetchReactions = <
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 
   const fetchReactions = useCallback(async () => {
-    const loadOfflineReactions = () => {
+    const loadOfflineReactions = async () => {
       if (!messageId) return;
-      const reactionsFromDB = getReactionsForFilterSort({
+      const reactionsFromDB = await getReactionsForFilterSort({
         currentMessageId: messageId,
         filters: reactionType ? { type: reactionType } : {},
         sort,
@@ -83,6 +83,8 @@ export const useFetchReactions = <
   }, [fetchReactions]);
 
   useEffect(() => {
+    setReactions([]);
+    setNext(undefined);
     fetchReactions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageId, reactionType, sortString]);

package/src/components/Poll/CreatePollContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { StyleSheet, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
 
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSharedValue } from 'react-native-reanimated';
@@ -94,7 +94,7 @@ export const CreatePollContent = () => {
     <>
       <View style={[styles.headerContainer, { backgroundColor: white }, headerContainer]}>
         <PollModalHeader onPress={() => closePollCreationDialog?.()} title={t('Create Poll')} />
-        <TouchableOpacity
+        <Pressable
           disabled={!isPollValid}
           onPress={() => {
             const currentPollOptions = Object.assign({}, pollOptions);
@@ -120,7 +120,7 @@ export const CreatePollContent = () => {
                 : {}),
             });
           }}
-          style={[styles.sendButton, sendButton]}
+          style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }, styles.sendButton, sendButton]}
         >
           <SendPoll
             height={24}
@@ -128,7 +128,7 @@ export const CreatePollContent = () => {
             viewBox='0 0 24 24'
             width={24}
           />
-        </TouchableOpacity>
+        </Pressable>
       </View>
       <ScrollView
         contentContainerStyle={{ paddingBottom: 70 }}

package/src/components/Poll/Poll.tsx

@@ -3,15 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { PollOption as PollOptionClass } from 'stream-chat';
 
-import {
-  AddCommentButton,
-  EndVoteButton,
-  PollOption,
-  ShowAllCommentsButton,
-  ShowAllOptionsButton,
-  SuggestOptionButton,
-  ViewResultsButton,
-} from './components';
+import { PollButtons, PollOption } from './components';
 
 import { usePollState } from './hooks/usePollState';
 
@@ -34,17 +26,6 @@ export type PollContentProps = {
   PollHeader?: React.ComponentType;
 };
 
-export const PollButtons = () => (
-  <>
-    <ShowAllOptionsButton />
-    <ShowAllCommentsButton />
-    <SuggestOptionButton />
-    <AddCommentButton />
-    <ViewResultsButton />
-    <EndVoteButton />
-  </>
-);
-
 export const PollHeader = () => {
   const { t } = useTranslationContext();
   const { enforceUniqueVote, isClosed, maxVotesAllowed, name } = usePollState();