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

Author: khushal87

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
 import { useLatestMessagePreview } from './hooks/useLatestMessagePreview';
 
@@ -11,6 +11,8 @@ import {
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { useChannelPreviewData } from './hooks/useChannelPreviewData';
+import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
 export type ChannelPreviewPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -31,87 +33,19 @@ const ChannelPreviewWithContext = <
 >(
   props: ChannelPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { channel, client, forceUpdate: channelListForceUpdate, Preview } = props;
-
-  const [lastMessage, setLastMessage] = useState<
-    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
-    | MessageResponse<StreamChatGenerics>
-    | undefined
-  >(channel.state.messages[channel.state.messages.length - 1]);
-
-  const [forceUpdate, setForceUpdate] = useState(0);
-  const [unread, setUnread] = useState(channel.countUnread());
-
+  const { forceUpdate, channel, client, Preview } = props;
+  const { muted } = useIsChannelMuted(channel);
+  const { lastMessage, unread } = useChannelPreviewData(channel, client, forceUpdate, muted);
   const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
 
-  const channelLastMessage = channel.lastMessage();
-  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
-
-  useEffect(() => {
-    const { unsubscribe } = client.on('notification.mark_read', () => {
-      setUnread(channel.countUnread());
-    });
-    return unsubscribe;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (
-      channelLastMessage &&
-      (channelLastMessage.id !== lastMessage?.id ||
-        channelLastMessage.updated_at !== lastMessage?.updated_at)
-    ) {
-      setLastMessage(channelLastMessage);
-    }
-
-    const newUnreadCount = channel.countUnread();
-    setUnread(newUnreadCount);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelLastMessageString, channelListForceUpdate]);
-
-  useEffect(() => {
-    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {
-      const message = event.message;
-      if (message && (!message.parent_id || message.show_in_channel)) {
-        setLastMessage(event.message);
-        setUnread(channel.countUnread());
-      }
-    };
-
-    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
-      setLastMessage((prevLastMessage) => {
-        if (prevLastMessage?.id === event.message?.id) {
-          return event.message;
-        }
-        return prevLastMessage;
-      });
-    };
-
-    const listeners = [
-      channel.on('message.new', handleNewMessageEvent),
-      channel.on('message.updated', handleUpdatedOrDeletedMessage),
-      channel.on('message.deleted', handleUpdatedOrDeletedMessage),
-    ];
-
-    return () => listeners.forEach((l) => l.unsubscribe());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    const handleReadEvent = (event: Event<StreamChatGenerics>) => {
-      if (event.user?.id === client.userID) {
-        setUnread(0);
-      } else if (event.user?.id) {
-        setForceUpdate((prev) => prev + 1);
-      }
-    };
-
-    const listener = channel.on('message.read', handleReadEvent);
-    return () => listener.unsubscribe();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} />;
+  return (
+    <Preview
+      channel={channel}
+      latestMessagePreview={latestMessagePreview}
+      muted={muted}
+      unread={unread}
+    />
+  );
 };
 
 export type ChannelPreviewProps<

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
@@ -17,7 +17,6 @@ import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
-import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -95,6 +94,8 @@ export type ChannelPreviewMessengerPropsWithContext<
      * default formatted date. This default logic is part of ChannelPreview component.
      */
     formatLatestMessageDate?: (date: Date) => string;
+    /** If the channel is muted. */
+    muted?: boolean;
     /** Number of unread messages on the channel */
     unread?: number;
   };
@@ -116,6 +117,7 @@ const ChannelPreviewMessengerWithContext = <
     PreviewStatus = ChannelPreviewStatus,
     PreviewTitle = ChannelPreviewTitle,
     PreviewUnreadCount = ChannelPreviewUnreadCount,
+    muted,
     unread,
   } = props;
   const { vw } = useViewport();
@@ -129,23 +131,11 @@ const ChannelPreviewMessengerWithContext = <
     },
   } = useTheme();
 
-  const { client } = useChatContext<StreamChatGenerics>();
-
   const displayName = useChannelPreviewDisplayName(
     channel,
     Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),
   );
 
-  const [isChannelMuted, setIsChannelMuted] = useState(() => channel.muteStatus().muted);
-
-  useEffect(() => {
-    const handleEvent = () => setIsChannelMuted(channel.muteStatus().muted);
-
-    client.on('notification.channel_mutes_updated', handleEvent);
-    return () => client.off('notification.channel_mutes_updated', handleEvent);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
   return (
     <TouchableOpacity
       onPress={() => {
@@ -168,7 +158,7 @@ const ChannelPreviewMessengerWithContext = <
         <View style={[styles.row, row]}>
           <PreviewTitle channel={channel} displayName={displayName} />
           <View style={[styles.statusContainer, row]}>
-            {isChannelMuted && <PreviewMutedStatus />}
+            {muted && <PreviewMutedStatus />}
             <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
           </View>
         </View>

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -20,16 +20,11 @@ export const ChannelPreviewMutedStatus = () => {
       channelPreview: {
         mutedStatus: { height, iconStyle, width },
       },
-      colors: { grey_dark },
+      colors: { grey },
     },
   } = useTheme();
 
   return (
-    <Mute
-      height={height}
-      pathFill={grey_dark}
-      style={[styles.iconStyle, iconStyle]}
-      width={width}
-    />
+    <Mute height={height} pathFill={grey} style={[styles.iconStyle, iconStyle]} width={width} />
   );
 };