stream-chat-react-native-core 5.15.0-beta.7 → 5.15.1-beta.1

package/src/components/Channel/Channel.tsx

@@ -637,7 +637,7 @@ const ChannelWithContext = <
     } else {
       setThread(null);
     }
-  }, [threadPropsExists]);
+  }, [threadPropsExists, shouldSyncChannel]);
 
   const handleAppBackground = useCallback(() => {
     const channelData = channel.data as
@@ -739,70 +739,61 @@ const ChannelWithContext = <
     ),
   ).current;
 
-  const connectionChangedHandler = () => {
-    if (shouldSyncChannel) {
-      resyncChannel();
-    }
-  };
-
-  const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
-    if (shouldSyncChannel) {
-      if (thread) {
-        const updatedThreadMessages =
-          (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
-        setThreadMessages(updatedThreadMessages);
-      }
-
-      if (channel && thread && event.message?.id === thread.id) {
-        const updatedThread = channel.state.formatMessage(event.message);
-        setThread(updatedThread);
-      }
-
-      if (event.type === 'typing.start' || event.type === 'typing.stop') {
-        copyTypingState();
-      } else if (event.type === 'message.read') {
-        copyReadState();
-      } else if (event.type === 'message.new') {
-        copyMessagesState();
-      } else if (channel) {
-        copyChannelState();
-      }
-    }
-  };
-
+  // subscribe to specific channel events
   useEffect(() => {
     const channelSubscriptions: Array<ReturnType<ChannelType['on']>> = [];
-    const clientSubscriptions: Array<ReturnType<StreamChat['on']>> = [];
+    if (channel && shouldSyncChannel) {
+      channelSubscriptions.push(channel.on('message.new', copyMessagesState));
+      channelSubscriptions.push(channel.on('message.read', copyReadState));
+      channelSubscriptions.push(channel.on('typing.start', copyTypingState));
+      channelSubscriptions.push(channel.on('typing.stop', copyTypingState));
+    }
+    return () => {
+      channelSubscriptions.forEach((s) => s.unsubscribe());
+    };
+  }, [channelId, shouldSyncChannel]);
 
-    if (!channel) return;
+  // subscribe to the generic all channel event
+  useEffect(() => {
+    const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
+      if (shouldSyncChannel) {
+        if (thread) {
+          const updatedThreadMessages =
+            (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
+          setThreadMessages(updatedThreadMessages);
+        }
 
-    clientSubscriptions.push(
-      client.on('channel.deleted', (event) => {
-        if (event.cid === channel.cid) {
-          setDeleted(true);
+        if (channel && thread && event.message?.id === thread.id) {
+          const updatedThread = channel.state.formatMessage(event.message);
+          setThread(updatedThread);
         }
-      }),
-    );
 
-    if (enableOfflineSupport) {
-      clientSubscriptions.push(DBSyncManager.onSyncStatusChange(connectionChangedHandler));
-    } else {
-      clientSubscriptions.push(
-        client.on('connection.changed', (event) => {
-          if (event.online) {
-            connectionChangedHandler();
-          }
-        }),
-      );
-    }
+        // only update channel state if the events are not the previously subscribed useEffect's subscription events
+        if (
+          channel &&
+          event.type !== 'message.new' &&
+          event.type !== 'message.read' &&
+          event.type !== 'typing.start' &&
+          event.type !== 'typing.stop'
+        ) {
+          copyChannelState();
+        }
+      }
+    };
+    const { unsubscribe } = channel.on(handleEvent);
+    return unsubscribe;
+  }, [channelId, thread?.id, shouldSyncChannel]);
 
-    channelSubscriptions.push(channel.on(handleEvent));
+  // subscribe to channel.deleted event
+  useEffect(() => {
+    const { unsubscribe } = client.on('channel.deleted', (event) => {
+      if (event.cid === channel?.cid) {
+        setDeleted(true);
+      }
+    });
 
-    return () => {
-      clientSubscriptions.forEach((s) => s.unsubscribe());
-      channelSubscriptions.forEach((s) => s.unsubscribe());
-    };
-  }, [channelId, connectionChangedHandler, handleEvent]);
+    return unsubscribe;
+  }, [channelId]);
 
   const channelQueryCallRef = useRef(
     async (
@@ -1076,6 +1067,32 @@ const ChannelWithContext = <
     setSyncingChannel(false);
   };
 
+  // resync channel is added to ref so that it can be used in useEffect without adding it as a dependency
+  const resyncChannelRef = useRef(resyncChannel);
+  resyncChannelRef.current = resyncChannel;
+
+  useEffect(() => {
+    const connectionChangedHandler = () => {
+      if (shouldSyncChannel) {
+        resyncChannelRef.current();
+      }
+    };
+    let connectionChangedSubscription: ReturnType<ChannelType['on']>;
+
+    if (enableOfflineSupport) {
+      connectionChangedSubscription = DBSyncManager.onSyncStatusChange(connectionChangedHandler);
+    } else {
+      connectionChangedSubscription = client.on('connection.changed', (event) => {
+        if (event.online) {
+          connectionChangedHandler();
+        }
+      });
+    }
+    return () => {
+      connectionChangedSubscription.unsubscribe();
+    };
+  }, [enableOfflineSupport, shouldSyncChannel]);
+
   const reloadChannel = () =>
     channelQueryCallRef.current(async () => {
       setLoading(true);

package/src/components/ChannelList/ChannelList.tsx

@@ -52,6 +52,7 @@ export type ChannelListProps<
     | 'onSelect'
     | 'PreviewAvatar'
     | 'PreviewMessage'
+    | 'PreviewMutedStatus'
     | 'PreviewStatus'
     | 'PreviewTitle'
     | 'PreviewUnreadCount'
@@ -270,6 +271,7 @@ export const ChannelList = <
     Preview = ChannelPreviewMessenger,
     PreviewAvatar,
     PreviewMessage,
+    PreviewMutedStatus,
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
@@ -391,6 +393,7 @@ export const ChannelList = <
     Preview,
     PreviewAvatar,
     PreviewMessage,
+    PreviewMutedStatus,
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,

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

@@ -28,6 +28,7 @@ export const useCreateChannelsContext = <
   Preview,
   PreviewAvatar,
   PreviewMessage,
+  PreviewMutedStatus,
   PreviewStatus,
   PreviewTitle,
   PreviewUnreadCount,
@@ -69,6 +70,7 @@ export const useCreateChannelsContext = <
       Preview,
       PreviewAvatar,
       PreviewMessage,
+      PreviewMutedStatus,
       PreviewStatus,
       PreviewTitle,
       PreviewUnreadCount,

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -156,7 +156,7 @@ const ChannelPreviewMessengerWithContext = <
         <View style={[styles.row, row]}>
           <PreviewTitle channel={channel} displayName={displayName} />
           <View style={[styles.statusContainer, row]}>
-            <PreviewMutedStatus channel={channel} muted={isChannelMuted} />
+            {isChannelMuted && <PreviewMutedStatus />}
             <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
           </View>
         </View>

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -2,11 +2,8 @@ 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 { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   iconStyle: {
@@ -14,22 +11,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ChannelPreviewMutedStatusProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
-  muted: boolean;
-};
-
 /**
  * This UI component displays an avatar for a particular channel.
  */
-export const ChannelPreviewMutedStatus = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewMutedStatusProps<StreamChatGenerics>,
-) => {
-  const { muted } = props;
-
+export const ChannelPreviewMutedStatus = () => {
   const {
     theme: {
       channelPreview: {
@@ -39,12 +24,12 @@ export const ChannelPreviewMutedStatus = <
     },
   } = useTheme();
 
-  return muted ? (
+  return (
     <Mute
       height={height}
       pathFill={grey_dark}
       style={[styles.iconStyle, iconStyle]}
       width={width}
     />
-  ) : null;
+  );
 };

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -3,8 +3,6 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { FlatListProps } from 'react-native';
 import type { FlatList } from 'react-native-gesture-handler';
 
-import type { ChannelPreviewMutedStatusProps } from 'src/components/ChannelPreview/ChannelPreviewMutedStatus';
-
 import type { Channel } from 'stream-chat';
 
 import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
@@ -189,7 +187,7 @@ export type ChannelsContextValue<
    *
    * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
    */
-  PreviewMutedStatus?: React.ComponentType<ChannelPreviewMutedStatusProps<StreamChatGenerics>>;
+  PreviewMutedStatus?: React.ComponentType;
   /**
    * Custom UI component to render preview avatar.
    *

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.15.0-beta.7"
+  "version": "5.15.1-beta.1"
 }