stream-chat-react-native-core 5.27.0-beta.9 → 5.27.1-beta.1

package/src/components/ChannelList/ChannelList.tsx

@@ -243,8 +243,8 @@ export const ChannelList = <
     additionalFlatListProps = {},
     channelRenderFilterFn,
     EmptyStateIndicator = EmptyStateIndicatorDefault,
-    FooterLoadingIndicator = ChannelListFooterLoadingIndicator,
     filters = DEFAULT_FILTERS,
+    FooterLoadingIndicator = ChannelListFooterLoadingIndicator,
     HeaderErrorIndicator = ChannelListHeaderErrorIndicator,
     HeaderNetworkDownIndicator = ChannelListHeaderNetworkDownIndicator,
     List = ChannelListMessenger,
@@ -259,14 +259,14 @@ export const ChannelList = <
     onAddedToChannel,
     onChannelDeleted,
     onChannelHidden,
-    onChannelVisible,
     onChannelTruncated,
     onChannelUpdated,
+    onChannelVisible,
     onMessageNew,
-    onRemovedFromChannel,
-    onSelect,
     onNewMessage,
     onNewMessageNotification,
+    onRemovedFromChannel,
+    onSelect,
     options = DEFAULT_OPTIONS,
     Preview = ChannelPreviewMessenger,
     PreviewAvatar,

package/src/components/ChannelList/ChannelListFooterLoadingIndicator.tsx

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const ChannelListFooterLoadingIndicator: React.FC = () => {
+export const ChannelListFooterLoadingIndicator = () => {
   const {
     theme: {
       channelListFooterLoadingIndicator: { container },

package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx

@@ -21,9 +21,7 @@ export type HeaderErrorProps = {
   onPress?: (event: GestureResponderEvent) => void;
 };
 
-export const ChannelListHeaderErrorIndicator: React.FC<HeaderErrorProps> = ({
-  onPress = () => null,
-}) => {
+export const ChannelListHeaderErrorIndicator = ({ onPress = () => null }: HeaderErrorProps) => {
   const {
     theme: {
       channelListHeaderErrorIndicator: { container, errorText },
@@ -38,7 +36,7 @@ export const ChannelListHeaderErrorIndicator: React.FC<HeaderErrorProps> = ({
       style={[styles.container, { backgroundColor: `${grey_dark}E6` }, container]}
     >
       <Text style={[styles.errorText, { color: white }, errorText]} testID='channel-loading-error'>
-        {t('Error while loading, please reload/refresh')}
+        {t<string>('Error while loading, please reload/refresh')}
       </Text>
     </TouchableOpacity>
   );

package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx

@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const ChannelListHeaderNetworkDownIndicator: React.FC = () => {
+export const ChannelListHeaderNetworkDownIndicator = () => {
   const {
     theme: {
       channelListHeaderErrorIndicator: { container, errorText },
@@ -30,7 +30,9 @@ export const ChannelListHeaderNetworkDownIndicator: React.FC = () => {
       style={[styles.container, { backgroundColor: `${grey_dark}E6` }, container]}
       testID='network-down-indicator'
     >
-      <Text style={[styles.errorText, { color: white }, errorText]}>{t('Reconnecting...')}</Text>
+      <Text style={[styles.errorText, { color: white }, errorText]}>
+        {t<string>('Reconnecting...')}
+      </Text>
     </View>
   );
 };

package/src/components/ChannelList/ChannelListLoadingIndicator.tsx

@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const ChannelListLoadingIndicator: React.FC = () => {
+export const ChannelListLoadingIndicator = () => {
   const {
     theme: {
       channelListLoadingIndicator: { container },

package/src/components/ChannelList/Skeleton.tsx

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const Skeleton: React.FC = () => {
+export const Skeleton = () => {
   const width = useWindowDimensions().width;
   const startOffset = useSharedValue(-width);
 

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { act, cleanup, fireEvent, render, waitFor, within } from '@testing-library/react-native';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react-native';
 
 import { useChannelsContext } from '../../../contexts/channelsContext/ChannelsContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -33,7 +41,7 @@ import { ChannelList } from '../ChannelList';
  * to debug.
  */
 const ChannelPreviewComponent = ({ channel, setActiveChannel }) => (
-  <View accessibilityRole='list-item' onPress={setActiveChannel} testID={channel.id}>
+  <View accessibilityLabel='list-item' onPress={setActiveChannel} testID={channel.id}>
     <Text>{channel.data.name}</Text>
     <Text>{channel.state.messages[0]?.text}</Text>
   </View>
@@ -112,27 +120,27 @@ describe('ChannelList', () => {
   it('should re-query channels when filters change', async () => {
     useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
 
-    const { getByTestId, rerender } = render(
+    render(
       <Chat client={chatClient}>
         <ChannelList {...props} />
       </Chat>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('channel-list')).toBeTruthy();
-      expect(getByTestId(testChannel1.channel.id)).toBeTruthy();
+      expect(screen.getByTestId('channel-list')).toBeTruthy();
+      expect(screen.getByTestId(testChannel1.channel.id)).toBeTruthy();
     });
 
     useMockedApis(chatClient, [queryChannelsApi([testChannel2])]);
 
-    rerender(
+    screen.rerender(
       <Chat client={chatClient}>
         <ChannelList {...props} filters={{ dummyFilter: true }} />
       </Chat>,
     );
 
     await waitFor(() => {
-      expect(getByTestId(testChannel2.channel.id)).toBeTruthy();
+      expect(screen.getByTestId(testChannel2.channel.id)).toBeTruthy();
     });
   });
 
@@ -151,7 +159,7 @@ describe('ChannelList', () => {
       return deferredCallForStaleFilter.promise;
     });
 
-    const { getByTestId, rerender } = render(
+    render(
       <Chat client={chatClient}>
         <ChannelList {...props} filters={staleFilter} />
       </Chat>,
@@ -166,10 +174,10 @@ describe('ChannelList', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('channel-list')).toBeTruthy();
+      expect(screen.getByTestId('channel-list')).toBeTruthy();
     });
 
-    rerender(
+    screen.rerender(
       <Chat client={chatClient}>
         <ChannelList {...props} filters={freshFilter} />
       </Chat>,
@@ -186,8 +194,8 @@ describe('ChannelList', () => {
     deferredCallForStaleFilter.resolve(staleChannel);
     deferredCallForFreshFilter.resolve(freshChannel);
     await waitFor(() => {
-      expect(getByTestId('channel-list')).toBeTruthy();
-      expect(getByTestId('new-channel')).toBeTruthy();
+      expect(screen.getByTestId('channel-list')).toBeTruthy();
+      expect(screen.getByTestId('new-channel')).toBeTruthy();
     });
   });
 
@@ -195,17 +203,17 @@ describe('ChannelList', () => {
     const setActiveChannel = jest.fn();
     useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
 
-    const { getByTestId } = render(
+    render(
       <Chat client={chatClient}>
         <ChannelList {...props} onSelect={setActiveChannel} />
       </Chat>,
     );
 
     await waitFor(() => {
-      expect(getByTestId(testChannel1.channel.id)).toBeTruthy();
+      expect(screen.getByTestId(testChannel1.channel.id)).toBeTruthy();
     });
 
-    fireEvent.press(getByTestId(testChannel1.channel.id));
+    fireEvent(screen.getByTestId(testChannel1.channel.id), 'onSelect');
 
     await waitFor(() => {
       expect(setActiveChannel).toHaveBeenCalledTimes(1);
@@ -227,21 +235,21 @@ describe('ChannelList', () => {
       });
 
       it('should move channel to top of the list by default', async () => {
-        const { getAllByRole, getByTestId, getByText } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
-        await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
         const newMessage = sendNewMessageOnChannel3();
 
         await waitFor(() => {
-          expect(getByText(newMessage.text)).toBeTruthy();
+          expect(screen.getByText(newMessage.text)).toBeTruthy();
         });
 
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
 
         await waitFor(() => {
           expect(within(items[0]).getByText(newMessage.text)).toBeTruthy();
@@ -249,16 +257,16 @@ describe('ChannelList', () => {
       });
 
       it('should add channel to top if channel is hidden from the list', async () => {
-        const { getAllByRole, getByTestId, getByText } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
-        await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
         act(() => dispatchChannelHiddenEvent(chatClient, testChannel3.channel));
 
-        const newItems = getAllByRole('list-item');
+        const newItems = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(newItems).toHaveLength(2);
         });
@@ -266,10 +274,10 @@ describe('ChannelList', () => {
         const newMessage = sendNewMessageOnChannel3();
 
         await waitFor(() => {
-          expect(getByText(newMessage.text)).toBeTruthy();
+          expect(screen.getByText(newMessage.text)).toBeTruthy();
         });
 
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
 
         await waitFor(() => {
           expect(within(items[0]).getByText(newMessage.text)).toBeTruthy();
@@ -277,23 +285,23 @@ describe('ChannelList', () => {
       });
 
       it('should not alter order if `lockChannelOrder` prop is true', async () => {
-        const { getAllByRole, getByTestId, getByText } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} lockChannelOrder={true} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         const newMessage = sendNewMessageOnChannel3();
 
         await waitFor(() => {
-          expect(getByText(newMessage.text)).toBeTruthy();
+          expect(screen.getByText(newMessage.text)).toBeTruthy();
         });
 
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
 
         await waitFor(() => {
           expect(within(items[2]).getByText(newMessage.text)).toBeTruthy();
@@ -301,14 +309,14 @@ describe('ChannelList', () => {
       });
       it('should call the `onNewMessage` function prop, if provided', async () => {
         const onNewMessage = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onNewMessage={onNewMessage} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchMessageNewEvent(chatClient, testChannel2.channel));
@@ -328,21 +336,21 @@ describe('ChannelList', () => {
       });
 
       it('should move a channel to top of the list by default', async () => {
-        const { getAllByRole, getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchNotificationMessageNewEvent(chatClient, testChannel3.channel));
 
         await waitFor(() => {
-          expect(getByTestId(testChannel3.channel.id)).toBeTruthy();
+          expect(screen.getByTestId(testChannel3.channel.id)).toBeTruthy();
         });
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(within(items[0]).getByTestId(testChannel3.channel.id)).toBeTruthy();
         });
@@ -350,14 +358,14 @@ describe('ChannelList', () => {
 
       it('should call the `onMessageNew` function prop, if provided', async () => {
         const onMessageNew = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onMessageNew={onMessageNew} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchNotificationMessageNewEvent(chatClient, testChannel2.channel));
@@ -369,14 +377,14 @@ describe('ChannelList', () => {
 
       it('should call the `onNewMessageNotification` function prop, if provided', async () => {
         const onNewMessageNotification = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onNewMessageNotification={onNewMessageNotification} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchNotificationMessageNewEvent(chatClient, testChannel2.channel));
@@ -396,23 +404,23 @@ describe('ChannelList', () => {
       });
 
       it('should move a channel to top of the list by default', async () => {
-        const { getAllByRole, getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchNotificationAddedToChannelEvent(chatClient, testChannel3.channel));
 
         await waitFor(() => {
-          expect(getByTestId(testChannel3.channel.id)).toBeTruthy();
+          expect(screen.getByTestId(testChannel3.channel.id)).toBeTruthy();
         });
 
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
 
         await waitFor(() => {
           expect(within(items[0]).getByTestId(testChannel3.channel.id)).toBeTruthy();
@@ -421,14 +429,14 @@ describe('ChannelList', () => {
 
       it('should call the `onAddedToChannel` function prop, if provided', async () => {
         const onAddedToChannel = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onAddedToChannel={onAddedToChannel} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchNotificationAddedToChannelEvent(chatClient, testChannel3.channel));
@@ -445,24 +453,24 @@ describe('ChannelList', () => {
       });
 
       it('should remove the channel from list by default', async () => {
-        const { getAllByRole, getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(items).toHaveLength(3);
         });
 
         act(() => dispatchNotificationRemovedFromChannel(chatClient, testChannel3.channel));
 
-        const newItems = getAllByRole('list-item');
+        const newItems = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(newItems).toHaveLength(2);
         });
@@ -470,14 +478,14 @@ describe('ChannelList', () => {
 
       it('should call the `onRemovedFromChannel` function prop, if provided', async () => {
         const onRemovedFromChannel = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onRemovedFromChannel={onRemovedFromChannel} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchNotificationRemovedFromChannel(chatClient, testChannel3.channel));
@@ -494,14 +502,14 @@ describe('ChannelList', () => {
       });
 
       it('should update a channel in the list by default', async () => {
-        const { getByTestId, getByText } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() =>
@@ -512,20 +520,20 @@ describe('ChannelList', () => {
         );
 
         await waitFor(() => {
-          expect(getByText('updated')).toBeTruthy();
+          expect(screen.getByText('updated')).toBeTruthy();
         });
       });
 
       it('should call the `onChannelUpdated` function prop, if provided', async () => {
         const onChannelUpdated = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onChannelUpdated={onChannelUpdated} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() =>
@@ -547,24 +555,24 @@ describe('ChannelList', () => {
       });
 
       it('should remove a channel from the list by default', async () => {
-        const { getAllByRole, getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(items).toHaveLength(2);
         });
 
         act(() => dispatchChannelDeletedEvent(chatClient, testChannel2.channel));
 
-        const newItems = getAllByRole('list-item');
+        const newItems = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(newItems).toHaveLength(1);
         });
@@ -572,14 +580,14 @@ describe('ChannelList', () => {
 
       it('should call the `onChannelDeleted` function prop, if provided', async () => {
         const onChannelDeleted = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onChannelDeleted={onChannelDeleted} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchChannelDeletedEvent(chatClient, testChannel2.channel));
@@ -596,24 +604,24 @@ describe('ChannelList', () => {
       });
 
       it('should hide a channel from the list by default', async () => {
-        const { getAllByRole, getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
-        const items = getAllByRole('list-item');
+        const items = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(items).toHaveLength(2);
         });
 
         act(() => dispatchChannelHiddenEvent(chatClient, testChannel2.channel));
 
-        const newItems = getAllByRole('list-item');
+        const newItems = screen.getAllByLabelText('list-item');
         await waitFor(() => {
           expect(newItems).toHaveLength(1);
         });
@@ -621,14 +629,14 @@ describe('ChannelList', () => {
 
       it('should call the `onChannelHidden` function prop, if provided', async () => {
         const onChannelHidden = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onChannelHidden={onChannelHidden} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchChannelHiddenEvent(chatClient, testChannel2.channel));
@@ -644,14 +652,14 @@ describe('ChannelList', () => {
         useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
         const recoverSpy = jest.spyOn(chatClient, 'on');
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchConnectionRecoveredEvent(chatClient));
@@ -666,14 +674,14 @@ describe('ChannelList', () => {
       it('should call the `onChannelTruncated` function prop, if provided', async () => {
         useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
         const onChannelTruncated = jest.fn();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} onChannelTruncated={onChannelTruncated} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() => dispatchChannelTruncatedEvent(chatClient, testChannel1.channel));
@@ -690,14 +698,14 @@ describe('ChannelList', () => {
         const updateSpy = jest.spyOn(chatClient, 'on');
         const offlineUser = generateUser();
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() =>
@@ -720,14 +728,14 @@ describe('ChannelList', () => {
         const updateSpy = jest.spyOn(chatClient, 'on');
         const offlineUser = generateUser();
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
         act(() =>

package/src/components/ChannelList/utils.ts

@@ -12,8 +12,8 @@ type MoveParameters<
 export const moveChannelUp = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  cid,
   channels = [],
+  cid,
 }: MoveParameters<StreamChatGenerics>) => {
   // get channel from channels
   const index = channels.findIndex((c) => c.cid === cid);