fix: export relevant hooks from channel preview and channellist and mprove customization

package/src/components/ChannelList/ChannelList.tsx

@@ -51,7 +51,10 @@ export type ChannelListProps = Partial<
     | 'PreviewMutedStatus'
     | 'PreviewStatus'
     | 'PreviewTitle'
+    | 'PreviewLastMessage'
     | 'PreviewUnreadCount'
+    | 'PreviewTypingIndicator'
+    | 'PreviewMessageDeliveryStatus'
     | 'ChannelDetailsBottomSheet'
     | 'getChannelActionItems'
     | 'swipeActionsEnabled'
@@ -284,9 +287,12 @@ export const ChannelList = (props: ChannelListProps) => {
     PreviewAvatar,
     PreviewMessage,
     PreviewMutedStatus,
+    PreviewLastMessage,
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
+    PreviewTypingIndicator,
+    PreviewMessageDeliveryStatus,
     ChannelDetailsBottomSheet,
     setFlatListRef,
     Skeleton = SkeletonDefault,
@@ -417,7 +423,10 @@ export const ChannelList = (props: ChannelListProps) => {
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
+    PreviewTypingIndicator,
+    PreviewMessageDeliveryStatus,
     ChannelDetailsBottomSheet,
+    PreviewLastMessage,
     swipeActionsEnabled,
     refreshing,
     refreshList,

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

@@ -0,0 +1,11 @@
+export * from './listeners/useChannelUpdated';
+export * from './useChannelActionItems';
+export * from './useChannelActionItemsById';
+export * from './useChannelActions';
+export * from './useChannelMembershipState';
+export * from './useChannelMembersState';
+export * from './useChannelMuteActive';
+export * from './useChannelOnlineMemberCount';
+export * from './useIsDirectChat';
+export * from './useMutedChannels';
+export * from './useMutedUsers';

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

@@ -30,6 +30,9 @@ export const useCreateChannelsContext = ({
   PreviewMutedStatus,
   PreviewStatus,
   PreviewTitle,
+  PreviewLastMessage,
+  PreviewTypingIndicator,
+  PreviewMessageDeliveryStatus,
   PreviewUnreadCount,
   ChannelDetailsBottomSheet,
   swipeActionsEnabled,
@@ -80,6 +83,9 @@ export const useCreateChannelsContext = ({
       PreviewStatus,
       PreviewTitle,
       PreviewUnreadCount,
+      PreviewTypingIndicator,
+      PreviewMessageDeliveryStatus,
+      PreviewLastMessage,
       ChannelDetailsBottomSheet,
       swipeActionsEnabled,
       refreshing,

package/src/components/ChannelPreview/ChannelMessagePreview.tsx → package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx

@@ -7,11 +7,11 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks';
 import { primitives } from '../../theme';
 
-export type ChannelMessagePreviewProps = {
+export type ChannelLastMessagePreviewProps = {
   message: LocalMessage | MessageResponse | DraftMessage;
 };
 
-export const ChannelMessagePreview = ({ message }: ChannelMessagePreviewProps) => {
+export const ChannelLastMessagePreview = ({ message }: ChannelLastMessagePreviewProps) => {
   const isMessageDeleted = message?.type === 'deleted';
   const {
     theme: { semantics },

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -1,18 +1,22 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ChannelMessagePreview } from './ChannelMessagePreview';
+import { ChannelLastMessagePreview } from './ChannelLastMessagePreview';
 import { ChannelMessagePreviewDeliveryStatus } from './ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewProps } from './ChannelPreview';
 
-import { ChannelTypingIndicatorPreview } from './ChannelTypingIndicatorPreview';
+import { ChannelPreviewTypingIndicator } from './ChannelPreviewTypingIndicator';
 import { LastMessageType } from './hooks/useChannelPreviewData';
 
 import { useChannelPreviewDraftMessage } from './hooks/useChannelPreviewDraftMessage';
 import { useChannelPreviewPollLabel } from './hooks/useChannelPreviewPollLabel';
 
 import { useChannelTypingState } from './hooks/useChannelTypingState';
 
+import {
+  ChannelsContextValue,
+  useChannelsContext,
+} from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -22,12 +26,34 @@ import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
 
-export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> & {
-  lastMessage?: LastMessageType;
-};
+export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> &
+  Partial<
+    Pick<
+      ChannelsContextValue,
+      'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' | 'PreviewLastMessage'
+    >
+  > & {
+    lastMessage?: LastMessageType;
+  };
 
 export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
-  const { channel, lastMessage } = props;
+  const {
+    channel,
+    lastMessage,
+    PreviewTypingIndicator: PreviewTypingIndicatorProp = ChannelPreviewTypingIndicator,
+    PreviewMessageDeliveryStatus:
+      PreviewMessageDeliveryStatusProp = ChannelMessagePreviewDeliveryStatus,
+    PreviewLastMessage: PreviewLastMessageProp = ChannelLastMessagePreview,
+  } = props;
+  const {
+    PreviewTypingIndicator: PreviewTypingIndicatorContext,
+    PreviewMessageDeliveryStatus: PreviewMessageDeliveryStatusContext,
+    PreviewLastMessage: PreviewLastMessageContext,
+  } = useChannelsContext();
+  const PreviewTypingIndicator = PreviewTypingIndicatorProp || PreviewTypingIndicatorContext;
+  const PreviewMessageDeliveryStatus =
+    PreviewMessageDeliveryStatusProp || PreviewMessageDeliveryStatusContext;
+  const PreviewLastMessage = PreviewLastMessageProp || PreviewLastMessageContext;
   const {
     theme: { semantics },
   } = useTheme();
@@ -52,14 +78,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     lastMessage?.status === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
 
   if (usersTyping.length > 0) {
-    return <ChannelTypingIndicatorPreview channel={channel} usersTyping={usersTyping} />;
+    return <PreviewTypingIndicator channel={channel} usersTyping={usersTyping} />;
   }
 
   if (draftMessage) {
     return (
       <View style={styles.container}>
         <Text style={styles.draftText}>{t('Draft')}:</Text>
-        <ChannelMessagePreview message={draftMessage} />
+        <PreviewLastMessage message={draftMessage} />
       </View>
     );
   }
@@ -94,15 +120,15 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (channel.data?.name || membersWithoutSelf.length > 1) {
     return (
       <View style={styles.container}>
-        <ChannelMessagePreviewDeliveryStatus channel={channel} message={lastMessage} />
-        <ChannelMessagePreview message={lastMessage} />
+        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        <PreviewLastMessage message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
-        <ChannelMessagePreviewDeliveryStatus channel={channel} message={lastMessage} />
-        <ChannelMessagePreview message={lastMessage} />
+        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        <PreviewLastMessage message={lastMessage} />
       </View>
     );
   }

package/src/components/ChannelPreview/ChannelTypingIndicatorPreview.tsx → package/src/components/ChannelPreview/ChannelPreviewTypingIndicator.tsx

@@ -56,14 +56,14 @@ const getTypingString = ({
   }
 };
 
-export type ChannelTypingIndicatorPreviewProps = Pick<ChannelPreviewProps, 'channel'> & {
+export type ChannelPreviewTypingIndicatorProps = Pick<ChannelPreviewProps, 'channel'> & {
   usersTyping: UserResponse[];
 };
 
-export const ChannelTypingIndicatorPreview = ({
+export const ChannelPreviewTypingIndicator = ({
   usersTyping,
   channel,
-}: ChannelTypingIndicatorPreviewProps) => {
+}: ChannelPreviewTypingIndicatorProps) => {
   const styles = useStyles();
   const { t } = useTranslationContext();
 

package/src/components/ChannelPreview/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './useChannelPreviewData';
+export * from './useChannelPreviewDraftMessage';
+export * from './useChannelPreviewPollLabel';
+export * from './useChannelPreviewDisplayName';
+export * from './useChannelPreviewDisplayPresence';
+export * from './useIsChannelMuted';
+export * from './useChannelTypingState';

package/src/components/Chat/Chat.tsx

@@ -3,10 +3,10 @@ import { Image, Platform } from 'react-native';
 
 import { Channel, OfflineDBState } from 'stream-chat';
 
+import { useClientMutedUsers } from './hooks';
 import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
-import { useMutedUsers } from './hooks/useMutedUsers';
 
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
@@ -172,7 +172,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
    * Setup muted user listener
    * TODO: reimplement
    */
-  const mutedUsers = useMutedUsers(client);
+  const mutedUsers = useClientMutedUsers(client);
 
   const debugRef = useDebugContext();
   const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;

package/src/components/Chat/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useCreateChatClient';
+export * from './useIsOnline';
+export * from './useAppSettings';
+export * from './useClientMutedUsers';
+export * from './useCreateChatContext';

package/src/components/Chat/hooks/useMutedUsers.ts → package/src/components/Chat/hooks/useClientMutedUsers.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import type { Event, Mute, StreamChat } from 'stream-chat';
 
-export const useMutedUsers = (client: StreamChat) => {
+export const useClientMutedUsers = (client: StreamChat) => {
   const [mutedUsers, setMutedUsers] = useState<Mute[]>(client?.mutedUsers || []);
 
   useEffect(() => {

package/src/components/index.ts

@@ -33,37 +33,34 @@ export * from './Channel/hooks/useCreateThreadContext';
 export * from './Channel/hooks/useCreateTypingContext';
 export * from './Channel/hooks/useTargetedMessage';
 
+/** Channel List exports*/
 export * from './ChannelList/ChannelList';
 export * from './ChannelList/ChannelListFooterLoadingIndicator';
 export * from './ChannelList/ChannelListHeaderErrorIndicator';
 export * from './ChannelList/ChannelListHeaderNetworkDownIndicator';
 export * from './ChannelList/ChannelListLoadingIndicator';
 export * from './ChannelList/ChannelListMessenger';
-export * from './ChannelList/hooks/listeners/useChannelUpdated';
-export * from './ChannelList/hooks/useCreateChannelsContext';
-export * from './ChannelList/hooks/usePaginatedChannels';
-export * from './ChannelList/hooks/useChannelActionItems';
-export * from './ChannelList/hooks/useChannelActionItemsById';
-export * from './ChannelList/hooks/useChannelMembershipState';
 export * from './ChannelList/Skeleton';
+export * from './ChannelList/hooks';
 
+/** Channel Preview exports */
+export * from './ChannelPreview/ChannelDetailsBottomSheet';
+export * from './ChannelPreview/ChannelLastMessagePreview';
+export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 export * from './ChannelPreview/ChannelPreview';
+export * from './ChannelPreview/ChannelPreviewMessage';
 export * from './ChannelPreview/ChannelPreviewMessenger';
+export * from './ChannelPreview/ChannelPreviewMutedStatus';
+export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelPreviewStatus';
 export * from './ChannelPreview/ChannelPreviewTitle';
+export * from './ChannelPreview/ChannelPreviewTypingIndicator';
 export * from './ChannelPreview/ChannelPreviewUnreadCount';
-export * from './ChannelPreview/hooks/useChannelPreviewDisplayName';
-export * from './ChannelPreview/hooks/useChannelPreviewDisplayPresence';
-export * from './ChannelPreview/hooks/useChannelPreviewData';
-export * from './ChannelPreview/hooks/useIsChannelMuted';
-export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
+export * from './ChannelPreview/hooks';
 
+/** Chat exports */
 export * from './Chat/Chat';
-export * from './Chat/hooks/useCreateChatClient';
-export * from './Chat/hooks/useCreateChatContext';
-export * from './Chat/hooks/useIsOnline';
-export * from './Chat/hooks/useMutedUsers';
-export * from './Chat/hooks/useSyncDatabase';
+export * from './Chat/hooks';
 
 export * from './ImageGallery/ImageGallery';
 export * from './ImageGallery/components/AnimatedGalleryImage';

package/src/components/ui/Avatar/ChannelAvatar.tsx

@@ -16,15 +16,15 @@ import { hashStringToNumber } from '../../../utils/utils';
 export type ChannelAvatarProps = {
   channel: Channel;
   showOnlineIndicator?: boolean;
-  size: 'lg' | 'xl' | '2xl';
+  size?: 'lg' | 'xl' | '2xl';
   showBorder?: boolean;
 };
 
 export const ChannelAvatar = (props: ChannelAvatarProps) => {
   const { client } = useChatContext();
   const { channel } = props;
   const online = useChannelPreviewDisplayPresence(channel);
-  const { showOnlineIndicator = online, size, showBorder = true } = props;
+  const { showOnlineIndicator = online, size = 'xl', showBorder = true } = props;
 
   const {
     theme: { semantics },

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -9,15 +9,19 @@ import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListH
 import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
 import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
+import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview';
+import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger';
 import type { ChannelPreviewStatusProps } from '../../components/ChannelPreview/ChannelPreviewStatus';
 import type { ChannelPreviewTitleProps } from '../../components/ChannelPreview/ChannelPreviewTitle';
+import { ChannelPreviewTypingIndicatorProps } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
 import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPreview/ChannelPreviewUnreadCount';
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
 
+import { ChannelAvatarProps } from '../../components/ui/Avatar/ChannelAvatar';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -177,13 +181,19 @@ export type ChannelsContextValue = {
    *
    * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx)
    */
-  PreviewAvatar?: React.ComponentType;
+  PreviewAvatar?: React.ComponentType<ChannelAvatarProps>;
   /**
    * Custom UI component to render preview of latest message on channel.
    *
    * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
    */
   PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps>;
+  /**
+   * Custom UI component to render delivery status of latest message on channel.
+   *
+   * **Default** [ChannelMessagePreviewDeliveryStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx)
+   */
+  PreviewMessageDeliveryStatus?: React.ComponentType<ChannelMessagePreviewDeliveryStatusProps>;
   /**
    * Custom UI component to render muted status.
    *
@@ -208,7 +218,14 @@ export type ChannelsContextValue = {
    * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
    */
   PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps>;
+  PreviewTypingIndicator?: React.ComponentType<ChannelPreviewTypingIndicatorProps>;
   ChannelDetailsBottomSheet?: React.ComponentType<ChannelDetailsBottomSheetProps>;
+  /**
+   * Custom UI component to render preview of last message on channel.
+   *
+   * **Default** [ChannelLastMessagePreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx)
+   */
+  PreviewLastMessage?: React.ComponentType<ChannelLastMessagePreviewProps>;
   getChannelActionItems?: GetChannelActionItems;
   swipeActionsEnabled?: boolean;