stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.3

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
+
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import {
@@ -15,15 +16,73 @@ import {
   Message as StreamMessage,
 } from 'stream-chat';
 
-import { useAppStateListener } from '../../hooks/useAppStateListener';
 import { useCreateChannelContext } from './hooks/useCreateChannelContext';
+
 import { useCreateInputMessageInputContext } from './hooks/useCreateInputMessageInputContext';
+
 import { useCreateMessagesContext } from './hooks/useCreateMessagesContext';
+
+import { useCreateOwnCapabilitiesContext } from './hooks/useCreateOwnCapabilitiesContext';
 import { useCreatePaginatedMessageListContext } from './hooks/useCreatePaginatedMessageListContext';
+
 import { useCreateThreadContext } from './hooks/useCreateThreadContext';
+
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
+
 import { useTargetedMessage } from './hooks/useTargetedMessage';
 
+import { ChannelContextValue, ChannelProvider } from '../../contexts/channelContext/ChannelContext';
+import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
+import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import {
+  InputMessageInputContextValue,
+  MessageInputProvider,
+} from '../../contexts/messageInputContext/MessageInputContext';
+import {
+  MessagesContextValue,
+  MessagesProvider,
+} from '../../contexts/messagesContext/MessagesContext';
+import {
+  OwnCapabilitiesContextValue,
+  OwnCapabilitiesProvider,
+} from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import {
+  PaginatedMessageListContextValue,
+  PaginatedMessageListProvider,
+} from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
+import {
+  SuggestionsContextValue,
+  SuggestionsProvider,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { ThreadContextValue, ThreadProvider } from '../../contexts/threadContext/ThreadContext';
+import {
+  TranslationContextValue,
+  useTranslationContext,
+} from '../../contexts/translationContext/TranslationContext';
+import { TypingProvider } from '../../contexts/typingContext/TypingContext';
+import { useAppStateListener } from '../../hooks/useAppStateListener';
+
+import {
+  LOLReaction,
+  LoveReaction,
+  ThumbsDownReaction,
+  ThumbsUpReaction,
+  WutReaction,
+} from '../../icons';
+import { FlatList as FlatListDefault } from '../../native';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
+import { generateRandomId, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
 import { Card as CardDefault } from '../Attachment/Card';
@@ -32,13 +91,15 @@ import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
+import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
+import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
+import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import {
   LoadingErrorIndicator as LoadingErrorIndicatorDefault,
   LoadingErrorProps,
 } from '../Indicators/LoadingErrorIndicator';
 import { LoadingIndicator as LoadingIndicatorDefault } from '../Indicators/LoadingIndicator';
-import { NetworkDownIndicator as NetworkDownIndicatorDefault } from '../MessageList/NetworkDownIndicator';
 import { KeyboardCompatibleView as KeyboardCompatibleViewDefault } from '../KeyboardCompatibleView/KeyboardCompatibleView';
 import { Message as MessageDefault } from '../Message/Message';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
@@ -63,73 +124,17 @@ import { SendMessageDisallowedIndicator as SendMessageDisallowedIndicatorDefault
 import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
 import { UploadProgressIndicator as UploadProgressIndicatorDefault } from '../MessageInput/UploadProgressIndicator';
 import { DateHeader as DateHeaderDefault } from '../MessageList/DateHeader';
+import type { MessageType } from '../MessageList/hooks/useMessageList';
 import { InlineDateSeparator as InlineDateSeparatorDefault } from '../MessageList/InlineDateSeparator';
 import { InlineUnreadIndicator as InlineUnreadIndicatorDefault } from '../MessageList/InlineUnreadIndicator';
 import { MessageList as MessageListDefault } from '../MessageList/MessageList';
 import { MessageSystem as MessageSystemDefault } from '../MessageList/MessageSystem';
+import { NetworkDownIndicator as NetworkDownIndicatorDefault } from '../MessageList/NetworkDownIndicator';
 import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageList/ScrollToBottomButton';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
 import { OverlayReactionList as OverlayReactionListDefault } from '../MessageOverlay/OverlayReactionList';
 import { Reply as ReplyDefault } from '../Reply/Reply';
-import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
-import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
-import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
-
-import { ChannelContextValue, ChannelProvider } from '../../contexts/channelContext/ChannelContext';
-import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
-import {
-  InputMessageInputContextValue,
-  MessageInputProvider,
-} from '../../contexts/messageInputContext/MessageInputContext';
-import {
-  MessagesContextValue,
-  MessagesProvider,
-} from '../../contexts/messagesContext/MessagesContext';
-import {
-  PaginatedMessageListContextValue,
-  PaginatedMessageListProvider,
-} from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
-import {
-  SuggestionsContextValue,
-  SuggestionsProvider,
-} from '../../contexts/suggestionsContext/SuggestionsContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { ThreadContextValue, ThreadProvider } from '../../contexts/threadContext/ThreadContext';
-import {
-  TranslationContextValue,
-  useTranslationContext,
-} from '../../contexts/translationContext/TranslationContext';
-import { TypingProvider } from '../../contexts/typingContext/TypingContext';
-import {
-  LOLReaction,
-  LoveReaction,
-  ThumbsDownReaction,
-  ThumbsUpReaction,
-  WutReaction,
-} from '../../icons';
-import { FlatList as FlatListDefault } from '../../native';
-import { generateRandomId, ReactionData } from '../../utils/utils';
-
-import type { MessageType } from '../MessageList/hooks/useMessageList';
-import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-import { useCreateOwnCapabilitiesContext } from './hooks/useCreateOwnCapabilitiesContext';
-import {
-  OwnCapabilitiesContextValue,
-  OwnCapabilitiesProvider,
-} from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 
 const styles = StyleSheet.create({
   selectChannel: { fontWeight: 'bold', padding: 16 },
@@ -1019,11 +1024,13 @@ const ChannelWithContext = <
         } as unknown as MessageResponse<At, Ch, Co, Me, Re, Us>);
 
       const failedMessages = messages
-        .filter((message) => message.status === 'failed')
+        .filter((message) => message.status === MessageStatusTypes.FAILED)
         .map(parseMessage);
 
       const failedThreadMessages = thread
-        ? threadMessages.filter((message) => message.status === 'failed').map(parseMessage)
+        ? threadMessages
+            .filter((message) => message.status === MessageStatusTypes.FAILED)
+            .map(parseMessage)
         : [];
 
       const oldListTopMessageCreatedAt = oldListTopMessage.created_at;
@@ -1250,7 +1257,7 @@ const ChannelWithContext = <
         })) || [],
       parent_id,
       reactions: [],
-      status: 'sending',
+      status: MessageStatusTypes.SENDING,
       text,
       type: 'regular',
       user: {
@@ -1329,7 +1336,7 @@ const ChannelWithContext = <
         messageResponse = await channel.sendMessage(messageData);
       }
       if (messageResponse.message) {
-        messageResponse.message.status = 'received';
+        messageResponse.message.status = MessageStatusTypes.RECEIVED;
         if (retrying) {
           replaceMessage(message, messageResponse.message);
         } else {
@@ -1338,7 +1345,7 @@ const ChannelWithContext = <
       }
     } catch (err) {
       console.log(err);
-      message.status = 'failed';
+      message.status = MessageStatusTypes.FAILED;
       updateMessage(message);
     }
   };
@@ -1370,7 +1377,7 @@ const ChannelWithContext = <
     async (message) => {
       const statusPendingMessage = {
         ...message,
-        status: 'sending',
+        status: MessageStatusTypes.SENDING,
       };
 
       updateMessage(statusPendingMessage);
@@ -1408,7 +1415,7 @@ const ChannelWithContext = <
 
     const oldestMessage = messages && messages[0];
 
-    if (oldestMessage && oldestMessage.status !== 'received') {
+    if (oldestMessage && oldestMessage.status !== MessageStatusTypes.RECEIVED) {
       return setLoadingMore(false);
     }
 
@@ -1452,7 +1459,7 @@ const ChannelWithContext = <
 
     const recentMessage = messages[messages.length - 1];
 
-    if (recentMessage?.status !== 'received') {
+    if (recentMessage?.status !== MessageStatusTypes.RECEIVED) {
       setLoadingMoreRecent(false);
       return;
     }

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

@@ -1,29 +1,29 @@
 import React, { useContext, useEffect } from 'react';
 import { View } from 'react-native';
+
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import { StreamChat } from 'stream-chat';
 
-import { Channel } from '../Channel';
-
-import { Attachment } from '../../Attachment/Attachment';
-import { Chat } from '../../Chat/Chat';
-
 import { ChannelContext, ChannelProvider } from '../../../contexts/channelContext/ChannelContext';
+import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
 import {
   MessagesContext,
   MessagesProvider,
 } from '../../../contexts/messagesContext/MessagesContext';
+
 import { ThreadContext, ThreadProvider } from '../../../contexts/threadContext/ThreadContext';
 
-import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDeleted';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
+import { Attachment } from '../../Attachment/Attachment';
+import { Chat } from '../../Chat/Chat';
+import { Channel } from '../Channel';
 
 // This component is used for performing effects in a component that consumes ChannelContext,
 // i.e. making use of the callbacks & values provided by the Channel component.
@@ -63,7 +63,7 @@ const renderComponent = (props = {}, callback = () => {}, context = ChannelConte
 describe('Channel', () => {
   beforeEach(async () => {
     const members = [generateMember({ user })];
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members,
       messages,
     });
@@ -177,7 +177,7 @@ describe('Channel', () => {
   const queryChannelWithNewMessages = (newMessages) =>
     // generate new channel mock from existing channel with new messages added
     getOrCreateChannelApi(
-      generateChannel({
+      generateChannelResponse({
         channel: {
           config: channel.getConfig(),
           id: channel.id,

package/src/components/Channel/__tests__/ownCapabilities.test.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import { FlatList } from 'react-native';
-import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { Chat } from '../../Chat/Chat';
-import { Channel } from '../../Channel/Channel';
-import { MessageInput } from '../../MessageInput/MessageInput';
-import { MessageList } from '../../MessageList/MessageList';
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { allOwnCapabilities } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { sendMessageApi } from '../../../mock-builders/api/sendMessage';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { 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 { registerNativeHandlers } from '../../../native';
-import { sendMessageApi } from '../../../mock-builders/api/sendMessage';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageInput } from '../../MessageInput/MessageInput';
+import { MessageList } from '../../MessageList/MessageList';
 
 describe('Own capabilities', () => {
   const clientUser = generateUser();
@@ -58,7 +58,7 @@ describe('Own capabilities', () => {
   );
 
   const generateChannelWithCapabilities = async (capabilities = []) => {
-    const c = generateChannel({
+    const c = generateChannelResponse({
       channel: {
         own_capabilities: capabilities,
       },

package/src/components/Channel/hooks/useCreateOwnCapabilitiesContext.ts

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
 
+import type { Channel } from 'stream-chat';
+
 import {
   allOwnCapabilities,
   OwnCapabilitiesContextValue,
@@ -15,7 +17,6 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
-import type { Channel } from 'stream-chat';
 
 export const useCreateOwnCapabilitiesContext = <
   At extends UnknownType = DefaultAttachmentType,

package/src/components/ChannelList/ChannelList.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 
-import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicator';
+import type { FlatList } from 'react-native-gesture-handler';
+
+import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
+
 import { ChannelListFooterLoadingIndicator } from './ChannelListFooterLoadingIndicator';
+import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicator';
 import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetworkDownIndicator';
 import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
 import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
@@ -20,18 +24,10 @@ import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
 import { Skeleton as SkeletonDefault } from './Skeleton';
 
-import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
-import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
-import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
-
 import {
   ChannelsContextValue,
   ChannelsProvider,
 } from '../../contexts/channelsContext/ChannelsContext';
-
-import type { FlatList } from 'react-native-gesture-handler';
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -42,6 +38,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
+import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
+import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
 
 export type ChannelListProps<
   At extends UnknownType = DefaultAttachmentType,

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();
         });