fix: improve channel message new event

Author: khushal87

examples/SampleApp/src/components/ChannelInfoOverlay.tsx

@@ -43,6 +43,7 @@ import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
 import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
 import { Archieve } from '../icons/Archieve';
+import { Pin } from '../icons/Pin';
 
 dayjs.extend(relativeTime);
 
@@ -371,6 +372,37 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                           <Text style={[styles.rowText, { color: black }]}>View info</Text>
                         </View>
                       </TapGestureHandler>
+                      <Pressable
+                        onPress={async () => {
+                          try {
+                            if (membership?.pinned_at) {
+                              await channel.unpin();
+                            } else {
+                              await channel.pin();
+                            }
+                          } catch (error) {
+                            console.log('Error pinning/unpinning channel', error);
+                          }
+
+                          setOverlay('none');
+                        }}
+                      >
+                        <View
+                          style={[
+                            styles.row,
+                            {
+                              borderTopColor: border,
+                            },
+                          ]}
+                        >
+                          <View style={styles.rowInner}>
+                            <Pin height={24} width={24} />
+                          </View>
+                          <Text style={[styles.rowText, { color: black }]}>
+                            {membership?.pinned_at ? 'Unpin' : 'Pin'}
+                          </Text>
+                        </View>
+                      </Pressable>
                       <Pressable
                         onPress={async () => {
                           try {

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { RectButton } from 'react-native-gesture-handler';
-import Swipeable from 'react-native-gesture-handler/Swipeable';
+import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 import {
   ChannelPreviewMessenger,
   ChannelPreviewMessengerProps,
+  ChannelPreviewStatus,
+  ChannelPreviewStatusProps,
   Delete,
   MenuPointHorizontal,
   useChannelMembershipState,
@@ -20,6 +22,7 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 import type { StackNavigationProp } from '@react-navigation/stack';
 
 import type { StackNavigatorParamList, StreamChatGenerics } from '../types';
+import { Pin } from '../icons/Pin';
 
 const styles = StyleSheet.create({
   leftSwipeableButton: {
@@ -36,13 +39,35 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
   },
+  statusContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  pinIconContainer: {
+    marginLeft: 8,
+  },
 });
 
 type ChannelListScreenNavigationProp = StackNavigationProp<
   StackNavigatorParamList,
   'ChannelListScreen'
 >;
 
+const CustomChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
+  const membership = useChannelMembershipState(props.channel);
+
+  return (
+    <View style={styles.statusContainer}>
+      <ChannelPreviewStatus {...props} />
+      {membership.pinned_at && (
+        <View style={styles.pinIconContainer}>
+          <Pin height={20} width={20} />
+        </View>
+      )}
+    </View>
+  );
+};
+
 export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGenerics>> = (
   props,
 ) => {
@@ -107,7 +132,7 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGen
         </View>
       )}
     >
-      <ChannelPreviewMessenger {...props} />
+      <ChannelPreviewMessenger {...props} PreviewStatus={CustomChannelPreviewStatus} />
     </Swipeable>
   );
 };

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -44,8 +44,6 @@ export const useNewMessage = <
           const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
           const targetChannel = channels[targetChannelIndex];
 
-          const channelInList = targetChannelIndex >= 0;
-
           const isTargetChannelArchived = isChannelArchived(targetChannel);
           const isTargetChannelPinned = isChannelPinned(targetChannel);
           const isArchivedFilterTrue = filters && filters.archived === true;
@@ -63,34 +61,30 @@ export const useNewMessage = <
             return channels;
           }
 
-          if (!channelInList) {
-            if (event.channel_type && event.channel_id) {
-              // If channel doesn't exist in existing list, check in activeChannels as well.
-              // It may happen that channel was hidden using channel.hide(). In that case
-              // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
-              const channel = client.channel(event.channel_type, event.channel_id);
-              // While adding new channels, we need to consider whether they are archived or not.
-              if (
-                // When archived filter false, and channel is archived
-                (isChannelArchived(channel) && isArchivedFilterFalse) ||
-                // When archived filter true, and channel is not archived
-                (isArchivedFilterTrue && !isChannelArchived(channel))
-              )
-                return channels;
-              return [channel, ...channels];
-            }
-          } else {
-            if (event.cid) {
-              return moveChannelUp<StreamChatGenerics>({
-                channels,
-                channelToMove: targetChannel,
-                channelToMoveIndexWithinChannels: targetChannelIndex,
-                sort,
-              });
-            }
-          }
+          // If channel doesn't exist in existing list, check in activeChannels as well.
+          // It may happen that channel was hidden using channel.hide(). In that case
+          // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
+          const channelToMove =
+            targetChannel ??
+            (event.channel_type &&
+              event.channel_id &&
+              client.channel(event.channel_type, event.channel_id));
 
-          return [...channels];
+          // While adding new channels, we need to consider whether they are archived or not.
+          if (
+            // When archived filter false, and channel is archived
+            (isChannelArchived(channelToMove) && isArchivedFilterFalse) ||
+            // When archived filter true, and channel is not archived
+            (isArchivedFilterTrue && !isChannelArchived(channelToMove))
+          ) {
+            return channels;
+          }
+          return moveChannelUp<StreamChatGenerics>({
+            channels,
+            channelToMove: channelToMove,
+            channelToMoveIndexWithinChannels: targetChannelIndex,
+            sort,
+          });
         });
       }
     };