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

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,

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

@@ -1,13 +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,
@@ -18,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<
@@ -38,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,
@@ -55,32 +61,49 @@ export const usePaginatedChannels = <
   const [channels, setChannels] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>([]);
   const activeChannels = useActiveChannelsRefContext();
 
-  const [error, setError] = useState<boolean | Error>(false);
+  const [error, setError] = useState<Error>();
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
-  const querying = useRef(false);
-  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;
-
-    querying.current = true;
-    setError(false);
-
-    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,
     };
 
@@ -89,54 +112,61 @@ export const usePaginatedChannels = <
         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);
-      querying.current = false;
-    } catch (err) {
-      querying.current = false;
-      await wait(2000);
-
-      if (!isMounted.current) return;
+      setError(undefined);
+      isQueryingRef.current = false;
+    } catch (err: unknown) {
+      isQueryingRef.current = false;
+      await waitSeconds(2);
+
+      if (queryIsStale()) {
+        return;
+      }
 
       // 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 === 3 && !querying.current) {
-        setLoadingChannels(false);
-        setLoadingNextPage(false);
-        setRefreshing(false);
+      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');
 
   /**
@@ -165,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={() => {
@@ -162,7 +170,10 @@ const ChannelPreviewMessengerWithContext = <
       >
         <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} />
@@ -220,6 +231,7 @@ export const ChannelPreviewMessenger = <
     onSelect,
     PreviewAvatar,
     PreviewMessage,
+    PreviewMutedStatus,
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
@@ -231,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;
+};