stream-chat-react-native-core 4.0.0 → 4.1.0

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,40 +24,20 @@ 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,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } 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,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<
   Pick<
-    ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    ChannelsContextValue<StreamChatGenerics>,
     | 'additionalFlatListProps'
     | 'EmptyStateIndicator'
     | 'FooterLoadingIndicator'
@@ -83,13 +67,13 @@ export type ChannelListProps<
    *
    * @overrideType object
    * */
-  filters?: ChannelFilters<Ch, Co, Us>;
+  filters?: ChannelFilters<StreamChatGenerics>;
   /**
    * Custom UI component to display the list of channels
    *
    * Default: [ChannelListMessenger](https://getstream.github.io/stream-chat-react-native/v3/#channellistmessenger)
    */
-  List?: React.ComponentType<ChannelListMessengerProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  List?: React.ComponentType<ChannelListMessengerProps<StreamChatGenerics>>;
   /**
    * If set to true, channels won't dynamically sort by most recent message, defaults to false
    */
@@ -103,8 +87,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onAddedToChannel?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Function that overrides default behavior when a channel gets deleted. In absence of this prop, the channel will be removed from the list.
@@ -115,8 +99,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelDeleted?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Function that overrides default behavior when a channel gets hidden. In absence of this prop, the channel will be removed from the list.
@@ -127,8 +111,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelHidden?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Function to customize behavior when a channel gets truncated
@@ -139,8 +123,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelTruncated?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Function that overrides default behavior when a channel gets updated
@@ -151,8 +135,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelUpdated?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Function that overrides default behavior when a channel gets visible. In absence of this prop, the channel will be added to the list.
@@ -163,8 +147,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelVisible?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Override the default listener/handler for event `notification.message_new`
@@ -176,8 +160,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onMessageNew?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Function that overrides default behavior when a user gets removed from a channel
@@ -188,8 +172,8 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onRemovedFromChannel?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    event: Event<StreamChatGenerics>,
   ) => void;
   /**
    * Object containing channel query options
@@ -200,7 +184,7 @@ export type ChannelListProps<
    * Object containing channel sort parameters
    * @see See [Channel query documentation](https://getstream.io/chat/docs/query_channels) for a list of available sorting fields
    * */
-  sort?: ChannelSort<Ch>;
+  sort?: ChannelSort<StreamChatGenerics>;
 };
 
 const DEFAULT_FILTERS = {};
@@ -215,15 +199,9 @@ const DEFAULT_SORT = {};
  * @example ./ChannelList.md
  */
 export const ChannelList = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ChannelListProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelListProps<StreamChatGenerics>,
 ) => {
   const {
     additionalFlatListProps = {},
@@ -275,7 +253,7 @@ export const ChannelList = <
     refreshList,
     reloadList,
     setChannels,
-  } = usePaginatedChannels<At, Ch, Co, Ev, Me, Re, Us>({
+  } = usePaginatedChannels<StreamChatGenerics>({
     filters,
     options,
     sort,
@@ -314,7 +292,7 @@ export const ChannelList = <
     setChannels,
   });
 
-  useConnectionRecovered<At, Ch, Co, Ev, Me, Re, Us>({
+  useConnectionRecovered<StreamChatGenerics>({
     refreshList,
     setForceUpdate,
   });
@@ -367,7 +345,7 @@ export const ChannelList = <
     refreshing,
     refreshList,
     reloadList,
-    setFlatListRef: (ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => {
+    setFlatListRef: (ref: FlatList<Channel<StreamChatGenerics>> | null) => {
       if (setFlatListRef) {
         setFlatListRef(ref);
       }
@@ -377,7 +355,7 @@ export const ChannelList = <
 
   return (
     <ChannelsProvider value={channelsContext}>
-      <List<At, Ch, Co, Ev, Me, Re, Us> />
+      <List<StreamChatGenerics> />
     </ChannelsProvider>
   );
 };

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: {
@@ -21,7 +20,7 @@ export const ChannelListFooterLoadingIndicator: React.FC = () => {
   } = useTheme();
 
   return (
-    <View style={[styles.container, container]}>
+    <View style={[styles.container, container]} testID='channel-list-footer-loading-indicator'>
       <Spinner />
     </View>
   );

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,13 +20,16 @@ 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]}>
+    <View
+      style={[styles.container, { backgroundColor: `${grey_dark}E6` }, container]}
+      testID='network-down-indicator'
+    >
       <Text style={[styles.errorText, { color: white }, errorText]}>{t('Reconnecting...')}</Text>
     </View>
   );

package/src/components/ChannelList/ChannelListLoadingIndicator.tsx

@@ -13,13 +13,17 @@ const styles = StyleSheet.create({
 export const ChannelListLoadingIndicator: React.FC = () => {
   const {
     theme: {
+      channelListLoadingIndicator: { container },
       colors: { white_snow },
     },
   } = useTheme();
   const { numberOfSkeletons, Skeleton } = useChannelsContext();
 
   return (
-    <View style={[styles.container, { backgroundColor: white_snow }]}>
+    <View
+      style={[styles.container, { backgroundColor: white_snow }, container]}
+      testID='channel-list-loading-indicator'
+    >
       {Array.from(Array(numberOfSkeletons)).map((_, index) => (
         <Skeleton key={`skeleton_${index}`} />
       ))}

package/src/components/ChannelList/ChannelListMessenger.tsx

@@ -3,27 +3,17 @@ 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,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 
 const styles = StyleSheet.create({
   flatList: { flex: 1 },
@@ -32,15 +22,9 @@ const styles = StyleSheet.create({
 });
 
 export type ChannelListMessengerPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<
-  ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  ChannelsContextValue<StreamChatGenerics>,
   | 'hasNextPage'
   | 'HeaderErrorIndicator'
   | 'HeaderNetworkDownIndicator'
@@ -56,17 +40,11 @@ export type ChannelListMessengerPropsWithContext<
 >;
 
 const StatusIndicator = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const { isOnline } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { isOnline } = useChatContext<StreamChatGenerics>();
   const { error, HeaderErrorIndicator, HeaderNetworkDownIndicator, loadingChannels, refreshList } =
-    useChannelsContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useChannelsContext<StreamChatGenerics>();
 
   if (loadingChannels) return null;
 
@@ -87,41 +65,23 @@ const StatusIndicator = <
 };
 
 const renderItem = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   item,
 }: {
-  item: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-}) => <ChannelPreview<At, Ch, Co, Ev, Me, Re, Us> channel={item} />;
+  item: Channel<StreamChatGenerics>;
+}) => <ChannelPreview<StreamChatGenerics> channel={item} />;
 
 const keyExtractor = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  item: Channel<At, Ch, Co, Ev, Me, Re, Us>,
+  item: Channel<StreamChatGenerics>,
 ) => item.cid;
 
 const ChannelListMessengerWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ChannelListMessengerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelListMessengerPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalFlatListProps,
@@ -212,20 +172,14 @@ const ChannelListMessengerWithContext = <
         testID='channel-list-messenger'
         {...additionalFlatListProps}
       />
-      <StatusIndicator<At, Ch, Co, Ev, Me, Re, Us> />
+      <StatusIndicator<StreamChatGenerics> />
     </>
   );
 };
 
 export type ChannelListMessengerProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<ChannelListMessengerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<ChannelListMessengerPropsWithContext<StreamChatGenerics>>;
 
 /**
  * This UI component displays the preview list of channels and handles Channel navigation. It
@@ -234,15 +188,9 @@ export type ChannelListMessengerProps<
  * @example ./ChannelListMessenger.md
  */
 export const ChannelListMessenger = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ChannelListMessengerProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelListMessengerProps<StreamChatGenerics>,
 ) => {
   const {
     additionalFlatListProps,
@@ -262,7 +210,7 @@ export const ChannelListMessenger = <
     refreshList,
     reloadList,
     setFlatListRef,
-  } = useChannelsContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useChannelsContext<StreamChatGenerics>();
 
   return (
     <ChannelListMessengerWithContext

package/src/components/ChannelList/Skeleton.tsx

@@ -41,6 +41,7 @@ export const Skeleton: React.FC = () => {
         gradientStart,
         gradientStop,
         height = 64,
+        maskFillColor,
       },
       colors: { border, grey_gainsboro, white_snow },
     },
@@ -138,7 +139,7 @@ export const Skeleton: React.FC = () => {
         </Svg>
       </Animated.View>
       <Svg height={height} width={width}>
-        <Path d={d.value} fill={white_snow} />
+        <Path d={d.value} fill={maskFillColor || white_snow} />
       </Svg>
     </View>
   );

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,16 +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 { 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}>
@@ -39,7 +40,7 @@ const ChannelPreviewComponent = ({ channel, setActiveChannel }) => (
 );
 
 const ChannelListComponent = (props) => {
-  const { channels, onSelect } = props;
+  const { channels, onSelect } = useChannelsContext();
   return (
     <View testID='channel-list'>
       {channels.map((channel) => (
@@ -54,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;
@@ -66,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);
@@ -125,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])]);
@@ -167,9 +231,7 @@ describe('ChannelList', () => {
           </Chat>,
         );
 
-        await waitFor(() => {
-          expect(getByTestId('channel-list')).toBeTruthy();
-        });
+        await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
 
         const newMessage = sendNewMessageOnChannel3();
 
@@ -223,7 +285,6 @@ describe('ChannelList', () => {
             <ChannelList {...props} />
           </Chat>,
         );
-
         await waitFor(() => {
           expect(getByTestId('channel-list')).toBeTruthy();
         });
@@ -233,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();
         });