stream-chat-react-native-core 4.0.0-beta.1 → 4.0.0-beta.5

package/src/components/ChannelList/ChannelListFooterLoadingIndicator.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Spinner } from '../Spinner/Spinner';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Spinner } from '../Spinner/Spinner';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx

@@ -13,7 +13,6 @@ const styles = StyleSheet.create({
   },
   errorText: {
     fontSize: 12,
-    fontWeight: 'bold',
     padding: 3,
   },
 });
@@ -28,7 +27,7 @@ export const ChannelListHeaderErrorIndicator: React.FC<HeaderErrorProps> = ({
   const {
     theme: {
       channelListHeaderErrorIndicator: { container, errorText },
-      colors: { accent_red, grey },
+      colors: { grey_dark, white },
     },
   } = useTheme();
   const { t } = useTranslationContext();
@@ -36,12 +35,9 @@ export const ChannelListHeaderErrorIndicator: React.FC<HeaderErrorProps> = ({
   return (
     <TouchableOpacity
       onPress={onPress}
-      style={[styles.container, { backgroundColor: `${grey}E6` }, container]}
+      style={[styles.container, { backgroundColor: `${grey_dark}E6` }, container]}
     >
-      <Text
-        style={[styles.errorText, { color: accent_red }, errorText]}
-        testID='channel-loading-error'
-      >
+      <Text style={[styles.errorText, { color: white }, errorText]} testID='channel-loading-error'>
         {t('Error while loading, please reload/refresh')}
       </Text>
     </TouchableOpacity>

package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx

@@ -20,14 +20,14 @@ export const ChannelListHeaderNetworkDownIndicator: React.FC = () => {
   const {
     theme: {
       channelListHeaderErrorIndicator: { container, errorText },
-      colors: { grey, white },
+      colors: { grey_dark, white },
     },
   } = useTheme();
   const { t } = useTranslationContext();
 
   return (
     <View
-      style={[styles.container, { backgroundColor: `${grey}E6` }, container]}
+      style={[styles.container, { backgroundColor: `${grey_dark}E6` }, container]}
       testID='network-down-indicator'
     >
       <Text style={[styles.errorText, { color: white }, errorText]}>{t('Reconnecting...')}</Text>

package/src/components/ChannelList/ChannelListMessenger.tsx

@@ -3,17 +3,15 @@ import React, { useEffect, useState } from 'react';
 // See https://github.com/software-mansion/react-native-gesture-handler/issues/598
 import { FlatList, RefreshControl, StyleSheet, View } from 'react-native';
 
-import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
+import type { Channel } from 'stream-chat';
 
-import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { Channel } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -24,6 +22,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 
 const styles = StyleSheet.create({
   flatList: { flex: 1 },

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import { act, cleanup, fireEvent, render, waitFor, within } from '@testing-library/react-native';
-
-import { ChannelList } from '../ChannelList';
 
-import { Chat } from '../../Chat/Chat';
+import { act, cleanup, fireEvent, render, waitFor, within } from '@testing-library/react-native';
 
+import { useChannelsContext } from '../../../contexts/channelsContext/ChannelsContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+
 import { queryChannelsApi } from '../../../mock-builders/api/queryChannels';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDeleted';
@@ -20,17 +19,18 @@ import dispatchNotificationMessageNewEvent from '../../../mock-builders/event/no
 import dispatchNotificationRemovedFromChannel from '../../../mock-builders/event/notificationRemovedFromChannel';
 import dispatchUserPresenceEvent from '../../../mock-builders/event/userPresence';
 import dispatchUserUpdatedEvent from '../../../mock-builders/event/userUpdated';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannel, generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { useChannelsContext } from '../../../contexts/channelsContext/ChannelsContext';
+import { Chat } from '../../Chat/Chat';
+import { ChannelList } from '../ChannelList';
 
 /**
  * We are gonna use following custom UI components for preview and list.
  * If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
  * to those components might end up breaking tests for ChannelList, which will be quite painful
- * to debug then.
+ * to debug.
  */
 const ChannelPreviewComponent = ({ channel, setActiveChannel }) => (
   <View accessibilityRole='list-item' onPress={setActiveChannel} testID={channel.id}>
@@ -55,6 +55,15 @@ const ChannelListComponent = (props) => {
   );
 };
 
+class DeferredPromise {
+  constructor() {
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+}
+
 describe('ChannelList', () => {
   let chatClient;
   let testChannel1;
@@ -67,10 +76,11 @@ describe('ChannelList', () => {
   };
 
   beforeEach(async () => {
+    jest.clearAllMocks();
     chatClient = await getTestClientWithUser({ id: 'dan' });
-    testChannel1 = generateChannel();
-    testChannel2 = generateChannel();
-    testChannel3 = generateChannel();
+    testChannel1 = generateChannelResponse();
+    testChannel2 = generateChannelResponse();
+    testChannel3 = generateChannelResponse();
   });
 
   afterEach(cleanup);
@@ -126,6 +136,59 @@ describe('ChannelList', () => {
     });
   });
 
+  it('should update if filters are updated while awaiting api call', async () => {
+    const deferredCallForStaleFilter = new DeferredPromise();
+    const deferredCallForFreshFilter = new DeferredPromise();
+    const staleFilter = { 'initial-filter': { a: { $gt: 'c' } } };
+    const freshFilter = { 'new-filter': { a: { $gt: 'c' } } };
+    const staleChannel = [generateChannel({ id: 'stale-channel' })];
+    const freshChannel = [generateChannel({ id: 'new-channel' })];
+    const spy = jest.spyOn(chatClient, 'queryChannels');
+    spy.mockImplementation((filters = {}) => {
+      if (Object.prototype.hasOwnProperty.call(filters, 'new-filter')) {
+        return deferredCallForFreshFilter.promise;
+      }
+      return deferredCallForStaleFilter.promise;
+    });
+
+    const { getByTestId, rerender } = render(
+      <Chat client={chatClient}>
+        <ChannelList {...props} filters={staleFilter} />
+      </Chat>,
+    );
+
+    expect(spy).toHaveBeenCalledWith(
+      staleFilter,
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('channel-list')).toBeTruthy();
+    });
+
+    rerender(
+      <Chat client={chatClient}>
+        <ChannelList {...props} filters={freshFilter} />
+      </Chat>,
+    );
+
+    expect(spy).toHaveBeenCalledWith(
+      freshFilter,
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+    );
+
+    deferredCallForStaleFilter.resolve(staleChannel);
+    deferredCallForFreshFilter.resolve(freshChannel);
+    await waitFor(() => {
+      expect(getByTestId('channel-list')).toBeTruthy();
+      expect(getByTestId('new-channel')).toBeTruthy();
+    });
+  });
+
   it('should call `setActiveChannel` on press of a channel in the list', async () => {
     const setActiveChannel = jest.fn();
     useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
@@ -222,7 +285,6 @@ describe('ChannelList', () => {
             <ChannelList {...props} />
           </Chat>,
         );
-
         await waitFor(() => {
           expect(getByTestId('channel-list')).toBeTruthy();
         });
@@ -232,9 +294,7 @@ describe('ChannelList', () => {
         await waitFor(() => {
           expect(getByTestId(testChannel3.channel.id)).toBeTruthy();
         });
-
         const items = getAllByRole('list-item');
-
         await waitFor(() => {
           expect(within(items[0]).getByTestId(testChannel3.channel.id)).toBeTruthy();
         });

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

@@ -1,21 +1,20 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { ChannelListMessenger } from '../ChannelListMessenger';
-import { ChannelList } from '../ChannelList';
-
-import { Chat } from '../../Chat/Chat';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
-import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
-import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { queryChannelsApi } from '../../../mock-builders/api/queryChannels';
 import {
   ChannelsProvider,
   useChannelsContext,
 } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { queryChannelsApi } from '../../../mock-builders/api/queryChannels';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Chat } from '../../Chat/Chat';
+import { ChannelList } from '../ChannelList';
+import { ChannelListMessenger } from '../ChannelListMessenger';
 
 let mockChannels;
 let chatClient;
@@ -54,8 +53,8 @@ const Component = ({ error = false, loadingChannels = false }) => (
 describe('ChannelListMessenger', () => {
   beforeAll(async () => {
     chatClient = await getTestClientWithUser({ id: 'vishal' });
-    const c1 = generateChannel();
-    const c2 = generateChannel();
+    const c1 = generateChannelResponse();
+    const c2 = generateChannelResponse();
     useMockedApis(chatClient, [getOrCreateChannelApi(c1), getOrCreateChannelApi(c2)]);
     const channel1 = chatClient.channel(c1.channel.type, c1.channel.id);
     await channel1.watch();

package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts

@@ -1,12 +1,11 @@
 import { useEffect } from 'react';
+
 import uniqBy from 'lodash/uniqBy';
 
-import { getChannel } from '../../utils';
+import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-import type { Channel, Event } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -17,6 +16,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
+import { getChannel } from '../../utils';
 
 type Parameters<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/ChannelList/hooks/listeners/useChannelDeleted.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelList/hooks/listeners/useChannelHidden.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelList/hooks/listeners/useChannelTruncated.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelList/hooks/listeners/useChannelUpdated.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelList/hooks/listeners/useChannelVisible.ts

@@ -1,12 +1,11 @@
 import { useEffect } from 'react';
+
 import uniqBy from 'lodash/uniqBy';
 
-import { getChannel } from '../../utils';
+import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-import type { Channel, Event } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -17,6 +16,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
+import { getChannel } from '../../utils';
 
 type Parameters<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -1,11 +1,9 @@
 import { useEffect } from 'react';
 
-import { moveChannelUp } from '../../utils';
+import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-import type { Channel, Event } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -16,6 +14,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
+import { moveChannelUp } from '../../utils';
 
 type Parameters<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/ChannelList/hooks/listeners/useNewMessageNotification.ts

@@ -1,12 +1,11 @@
-import uniqBy from 'lodash/uniqBy';
 import { useEffect } from 'react';
 
-import { getChannel } from '../../utils';
-
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+import uniqBy from 'lodash/uniqBy';
 
 import type { Channel, Event } from 'stream-chat';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -17,6 +16,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
+import { getChannel } from '../../utils';
 
 type Parameters<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/ChannelList/hooks/listeners/useRemovedFromChannelNotification.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelList/hooks/listeners/useUserPresence.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -55,12 +55,11 @@ export const useCreateChannelsContext = <
   const channelValueString = channels
     .map(
       (channel) =>
-        `${channel.data?.name}${Object.values(channel.state.members)
+        `${channel.data?.name ?? ''}${channel.id ?? ''}${Object.values(channel.state.members)
           .map((member) => member.user?.online)
           .join()}`,
     )
     .join();
-
   const channelsContext: ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us> = useMemo(
     () => ({
       additionalFlatListProps,