stream-chat-react-native-core 3.10.2-next.1 → 4.0.0-beta.3

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,

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

@@ -1,12 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
+import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
+import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -17,10 +16,12 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { ONE_SECOND_IN_MS } from '../../../utils/date';
+import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
-const wait = (ms: number) =>
+const waitSeconds = (seconds: number) =>
   new Promise((resolve) => {
-    setTimeout(resolve, ms);
+    setTimeout(resolve, seconds * ONE_SECOND_IN_MS);
   });
 
 type Parameters<
@@ -37,6 +38,12 @@ const DEFAULT_OPTIONS = {
   message_limit: 10,
 };
 
+const MAX_NUMBER_OF_RETRIES = 3;
+const RETRY_INTERVAL_IN_MS = 5000;
+
+type QueryType = 'reload' | 'refresh' | 'loadChannels';
+export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
+
 export const usePaginatedChannels = <
   At extends UnknownType = DefaultAttachmentType,
   Ch extends UnknownType = DefaultChannelType,
@@ -51,80 +58,115 @@ export const usePaginatedChannels = <
   sort = {},
 }: Parameters<Ch, Co, Us>) => {
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-
   const [channels, setChannels] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>([]);
-  const [error, setError] = useState(false);
+  const activeChannels = useActiveChannelsRefContext();
+
+  const [error, setError] = useState<Error>();
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
-  const [loadingChannels, setLoadingChannels] = useState(false);
-  const [loadingNextPage, setLoadingNextPage] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const isMounted = useIsMountedRef();
-
-  const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {
-    if (!client || loadingChannels || loadingNextPage || refreshing || !isMounted.current) return;
-
-    if (queryType === 'reload') {
-      setLoadingChannels(true);
-    } else if (queryType === 'refresh') {
-      setRefreshing(true);
-    } else if (!queryType) {
-      setLoadingNextPage(true);
+  const isQueryingRef = useRef(false);
+  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>();
+  const isMountedRef = useIsMountedRef();
+  const filtersRef = useRef<typeof filters | null>(null);
+  const sortRef = useRef<typeof filters | null>(null);
+  const activeRequestId = useRef<number>(0);
+
+  const queryChannels: QueryChannels = async (
+    queryType: QueryType = 'loadChannels',
+    retryCount = 0,
+  ): Promise<void> => {
+    if (!client || !isMountedRef.current) return;
+
+    const hasUpdatedData = () =>
+      [
+        JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
+        JSON.stringify(sortRef.current) !== JSON.stringify(sort),
+        activeRequestId.current !== currentRequestId,
+      ].some(Boolean); // will return true if any element is truthy
+
+    const queryIsStale = () => !isMountedRef || activeRequestId.current !== currentRequestId;
+
+    /**
+     * We don't need to make another call to query channels if we don't
+     * have new data for the query to include
+     * */
+    if (!hasUpdatedData) {
+      if (activeQueryType === null) return;
     }
 
+    filtersRef.current = filters;
+    isQueryingRef.current = true;
+    setError(undefined);
+    activeRequestId.current++;
+    const currentRequestId = activeRequestId.current;
+    setActiveQueryType(queryType);
+
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : channels.length,
+      offset: queryType === 'loadChannels' ? channels.length : 0,
       ...options,
     };
 
     try {
-      const channelQueryResponse = await client.queryChannels(filters, sort, newOptions);
+      const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {
+        skipInitialization: activeChannels.current,
+      });
 
-      if (!isMounted.current) return;
+      if (queryIsStale() || !isMountedRef.current) {
+        return;
+      }
 
       channelQueryResponse.forEach((channel) => channel.state.setIsUpToDate(true));
 
       const newChannels =
-        queryType === 'reload' || queryType === 'refresh'
-          ? channelQueryResponse
-          : [...channels, ...channelQueryResponse];
+        queryType === 'loadChannels'
+          ? [...channels, ...channelQueryResponse]
+          : channelQueryResponse;
 
       setChannels(newChannels);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-      setError(false);
-    } catch (err) {
-      await wait(2000);
-
-      if (!isMounted.current) return;
+      setError(undefined);
+      isQueryingRef.current = false;
+    } catch (err: unknown) {
+      isQueryingRef.current = false;
+      await waitSeconds(2);
+
+      if (queryIsStale()) {
+        return;
+      }
 
-      if (retryCount === 3) {
-        setLoadingChannels(false);
-        setLoadingNextPage(false);
-        setRefreshing(false);
+      // querying.current check is needed in order to make sure the next query call doesnt flick an error
+      // state and then succeed (reconnect case)
+      if (retryCount === MAX_NUMBER_OF_RETRIES && !isQueryingRef.current) {
+        setActiveQueryType(null);
         console.warn(err);
-        return setError(true);
+        setError(
+          new Error(
+            `Maximum number of retries reached in queryChannels. Last error message is: ${err}`,
+          ),
+        );
+        return;
       }
 
       return queryChannels(queryType, retryCount + 1);
     }
 
-    setLoadingChannels(false);
-    setLoadingNextPage(false);
-    setRefreshing(false);
+    setActiveQueryType(null);
   };
 
   const loadNextPage = hasNextPage ? queryChannels : undefined;
+
   const refreshList = () => {
     const now = Date.now();
     // Only allow pull-to-refresh 5 seconds after last successful refresh.
-    if (now - lastRefresh.current < 5000 && !error) {
+    if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
       return;
     }
 
     lastRefresh.current = Date.now();
     return queryChannels('refresh');
   };
+
   const reloadList = () => queryChannels('reload');
 
   /**
@@ -153,10 +195,10 @@ export const usePaginatedChannels = <
     channels,
     error,
     hasNextPage,
-    loadingChannels,
-    loadingNextPage,
+    loadingChannels: activeQueryType === 'reload',
+    loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
-    refreshing,
+    refreshing: activeQueryType === 'refresh',
     refreshList,
     reloadList,
     setChannels,

package/src/components/ChannelPreview/ChannelAvatar.tsx

@@ -1,13 +1,9 @@
 import React from 'react';
 
+import type { ChannelPreviewProps } from './ChannelPreview';
 import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplayAvatar';
 import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';
 
-import { Avatar } from '../Avatar/Avatar';
-import { GroupAvatar } from '../Avatar/GroupAvatar';
-
-import type { ChannelPreviewProps } from './ChannelPreview';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -18,6 +14,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { Avatar } from '../Avatar/Avatar';
+import { GroupAvatar } from '../Avatar/GroupAvatar';
 
 export type ChannelAvatarProps<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 
+import type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';
+
 import { useLatestMessagePreview } from './hooks/useLatestMessagePreview';
 
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
-
-import type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 
 import type {
   DefaultAttachmentType,

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
 import type { LatestMessagePreview } from './hooks/useLatestMessagePreview';
 
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -3,18 +3,21 @@ import { StyleSheet, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { ChannelAvatar } from './ChannelAvatar';
+import type { ChannelPreviewProps } from './ChannelPreview';
+import { ChannelPreviewMessage } from './ChannelPreviewMessage';
+import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
+import { ChannelPreviewStatus } from './ChannelPreviewStatus';
+import { ChannelPreviewTitle } from './ChannelPreviewTitle';
+import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
 import { useChannelPreviewDisplayName } from './hooks/useChannelPreviewDisplayName';
 
+import type { LatestMessagePreview } from './hooks/useLatestMessagePreview';
+
 import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { vw } from '../../utils/utils';
-
-import type { ChannelPreviewProps } from './ChannelPreview';
-import type { LatestMessagePreview } from './hooks/useLatestMessagePreview';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -25,10 +28,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
-import { ChannelPreviewTitle } from './ChannelPreviewTitle';
-import { ChannelPreviewMessage } from './ChannelPreviewMessage';
-import { ChannelPreviewStatus } from './ChannelPreviewStatus';
-import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
+import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   container: {
@@ -46,6 +46,10 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingLeft: 8,
   },
+  statusContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
   title: { fontSize: 14, fontWeight: '700' },
 });
 
@@ -66,6 +70,7 @@ export type ChannelPreviewMessengerPropsWithContext<
     | 'onSelect'
     | 'PreviewAvatar'
     | 'PreviewMessage'
+    | 'PreviewMutedStatus'
     | 'PreviewStatus'
     | 'PreviewTitle'
     | 'PreviewUnreadCount'
@@ -126,6 +131,7 @@ const ChannelPreviewMessengerWithContext = <
     PreviewStatus = ChannelPreviewStatus,
     PreviewTitle = ChannelPreviewTitle,
     PreviewUnreadCount = ChannelPreviewUnreadCount,
+    PreviewMutedStatus = ChannelPreviewMutedStatus,
     unread,
   } = props;
 
@@ -141,6 +147,8 @@ const ChannelPreviewMessengerWithContext = <
     Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),
   );
 
+  const isChannelMuted = channel.muteStatus().muted;
+
   return (
     <TouchableOpacity
       onPress={() => {
@@ -156,10 +164,16 @@ const ChannelPreviewMessengerWithContext = <
       testID='channel-preview-button'
     >
       <PreviewAvatar channel={channel} />
-      <View style={[styles.contentContainer, contentContainer]}>
+      <View
+        style={[styles.contentContainer, contentContainer]}
+        testID={`channel-preview-content-${channel.id}`}
+      >
         <View style={[styles.row, row]}>
           <PreviewTitle channel={channel} displayName={displayName} />
-          <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
+          <View style={[styles.statusContainer, row]}>
+            <PreviewMutedStatus channel={channel} muted={isChannelMuted} />
+            <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
+          </View>
         </View>
         <View style={[styles.row, row]}>
           <PreviewMessage latestMessagePreview={latestMessagePreview} />
@@ -217,6 +231,7 @@ export const ChannelPreviewMessenger = <
     onSelect,
     PreviewAvatar,
     PreviewMessage,
+    PreviewMutedStatus,
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
@@ -228,6 +243,7 @@ export const ChannelPreviewMessenger = <
         onSelect,
         PreviewAvatar,
         PreviewMessage,
+        PreviewMutedStatus,
         PreviewStatus,
         PreviewTitle,
         PreviewUnreadCount,

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { StyleSheet } from 'react-native';
+
+import type { ChannelPreviewProps } from './ChannelPreview';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Mute } from '../../icons';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
+
+const styles = StyleSheet.create({
+  iconStyle: {
+    marginRight: 8,
+  },
+});
+
+export type ChannelPreviewMutedStatusProps<
+  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,
+> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'> & {
+  muted: boolean;
+};
+
+/**
+ * This UI component displays an avatar for a particular channel.
+ */
+export const ChannelPreviewMutedStatus = <
+  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,
+>(
+  props: ChannelPreviewMutedStatusProps<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  const { muted } = props;
+
+  const {
+    theme: {
+      channelPreview: {
+        mutedStatus: { height, iconStyle, width },
+      },
+      colors: { grey_dark },
+    },
+  } = useTheme();
+
+  return muted ? (
+    <Mute
+      height={height}
+      pathFill={grey_dark}
+      style={[styles.iconStyle, iconStyle]}
+      width={width}
+    />
+  ) : null;
+};

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Check, CheckAll } from '../../icons';
-
 import type { ChannelPreviewProps } from './ChannelPreview';
+
 import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
 
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Check, CheckAll } from '../../icons';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/ChannelPreviewTitle.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
 import type { ChannelPreviewProps } from './ChannelPreview';
 
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import type { ChannelPreviewProps } from './ChannelPreview';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { ChannelPreviewProps } from './ChannelPreview';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

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

@@ -1,19 +1,18 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { act, render, waitFor } from '@testing-library/react-native';
-
-import { ChannelPreview } from '../ChannelPreview';
 
-import { Chat } from '../../Chat/Chat';
+import { act, render, waitFor } from '@testing-library/react-native';
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchMessageReadEvent from '../../../mock-builders/event/messageRead';
-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 { Chat } from '../../Chat/Chat';
+import { ChannelPreview } from '../ChannelPreview';
 
 const ChannelPreviewUIComponent = (props) => (
   <>
@@ -63,7 +62,7 @@ describe('ChannelPreview', () => {
     const message = generateMessage({
       user: clientUser,
     });
-    const c = generateChannel({
+    const c = generateChannelResponse({
       messages: [message],
     });
     await initializeChannel(c);
@@ -72,7 +71,7 @@ describe('ChannelPreview', () => {
   });
 
   it('should mark channel as read, when message.read event is received for current user', async () => {
-    const c = generateChannel();
+    const c = generateChannelResponse();
     await initializeChannel(c);
     channel.countUnread = () => 20;
 
@@ -92,7 +91,7 @@ describe('ChannelPreview', () => {
   });
 
   it('should update the lastest message on "message.new" event', async () => {
-    const c = generateChannel();
+    const c = generateChannelResponse();
     await initializeChannel(c);
 
     const { getByTestId } = render(getComponent());
@@ -113,7 +112,7 @@ describe('ChannelPreview', () => {
   });
 
   it('should update the unread count on "message.new" event', async () => {
-    const c = generateChannel();
+    const c = generateChannelResponse();
     await initializeChannel(c);
 
     const { getByTestId } = render(getComponent());

package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -1,18 +1,17 @@
 import React from 'react';
+
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import truncate from 'lodash/truncate';
 
-import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
-
-import { Chat } from '../../Chat/Chat';
-
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-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 { Chat } from '../../Chat/Chat';
+import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
 
 describe('ChannelPreviewMessenger', () => {
   const clientUser = generateUser();
@@ -59,7 +58,7 @@ describe('ChannelPreviewMessenger', () => {
 
   it('should call setActiveChannel on click', async () => {
     const onSelect = jest.fn();
-    await initializeChannel(generateChannel());
+    await initializeChannel(generateChannelResponse());
 
     const { getByTestId } = render(
       getComponent({
@@ -80,7 +79,7 @@ describe('ChannelPreviewMessenger', () => {
   it('should render name of channel', async () => {
     const channelName = Date.now().toString();
     await initializeChannel(
-      generateChannel({
+      generateChannelResponse({
         channel: {
           name: channelName,
         },
@@ -96,7 +95,7 @@ describe('ChannelPreviewMessenger', () => {
     const m3 = generateMember();
 
     await initializeChannel(
-      generateChannel({
+      generateChannelResponse({
         members: [m1, m2, m3],
       }),
     );
@@ -109,7 +108,7 @@ describe('ChannelPreviewMessenger', () => {
 
   it('should render latest message, truncated to length given by latestMessageLength', async () => {
     const message = generateMessage();
-    await initializeChannel(generateChannel());
+    await initializeChannel(generateChannelResponse());
 
     const { queryByText } = render(
       getComponent({