feat: listen to notification.mark_read and notification.mark_unread event and introduce improvements

Author: khushal87

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -12,30 +12,33 @@ import { ChatContextValue, useChatContext } from '../../contexts/chatContext/Cha
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { useChannelPreviewData } from './hooks/useChannelPreviewData';
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
-export type ChannelPreviewPropsWithContext<
+export type ChannelPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview' | 'forceUpdate'> & {
+> = Partial<Pick<ChatContextValue<StreamChatGenerics>, 'client'>> &
+  Partial<Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview' | 'forceUpdate'>> & {
     /**
      * Instance of Channel from stream-chat package.
      */
     channel: Channel<StreamChatGenerics>;
   };
 
-/**
- * This component manages state for the ChannelPreviewMessenger UI component and receives
- * all props from the ChannelListMessenger component.
- */
-const ChannelPreviewWithContext = <
+export const ChannelPreview = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ChannelPreviewPropsWithContext<StreamChatGenerics>,
+  props: ChannelPreviewProps<StreamChatGenerics>,
 ) => {
-  const { forceUpdate, channel, client, Preview } = props;
-  const { muted } = useIsChannelMuted(channel);
-  const { lastMessage, unread } = useChannelPreviewData(channel, client, forceUpdate, muted);
+  const { channel, client: propClient, forceUpdate: propForceUpdate, Preview: propPreview } = props;
+
+  const { client: contextClient } = useChatContext<StreamChatGenerics>();
+  const { forceUpdate: contextForceUpdate, Preview: contextPreview } =
+    useChannelsContext<StreamChatGenerics>();
+
+  const client = propClient || contextClient;
+  const forceUpdate = propForceUpdate || contextForceUpdate;
+  const Preview = propPreview || contextPreview;
+
+  const { lastMessage, muted, unread } = useChannelPreviewData(channel, client, forceUpdate);
   const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
 
   return (
@@ -47,19 +50,3 @@ const ChannelPreviewWithContext = <
     />
   );
 };
-
-export type ChannelPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<Omit<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>> &
-  Pick<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>;
-
-export const ChannelPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewProps<StreamChatGenerics>,
-) => {
-  const { client } = useChatContext<StreamChatGenerics>();
-  const { forceUpdate, Preview } = useChannelsContext<StreamChatGenerics>();
-
-  return <ChannelPreviewWithContext {...{ client, forceUpdate, Preview }} {...props} />;
-};

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

@@ -3,20 +3,21 @@ import type { Channel, ChannelState, Event, MessageResponse, StreamChat } from '
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { useEffect, useMemo, useState } from 'react';
 import throttle from 'lodash/throttle';
+import { useIsChannelMuted } from './useIsChannelMuted';
 
 export const useChannelPreviewData = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel: Channel<StreamChatGenerics>,
   client: StreamChat<StreamChatGenerics>,
   forceUpdate?: number,
-  muted?: boolean,
 ) => {
   const [lastMessage, setLastMessage] = useState<
     | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
     | MessageResponse<StreamChatGenerics>
   >(channel.state.messages[channel.state.messages.length - 1]);
   const [unread, setUnread] = useState(channel.countUnread());
+  const { muted } = useIsChannelMuted(channel);
 
   /**
    * This effect listens for the `notification.mark_read` event and sets the unread count to 0
@@ -78,5 +79,5 @@ export const useChannelPreviewData = <
     return () => listeners.forEach((l) => l.unsubscribe());
   }, [channel, refreshUnreadCount, forceUpdate]);
 
-  return { lastMessage, unread };
+  return { lastMessage, muted, unread };
 };