fix: channel pinning and archiving condition fix

khushal87 · khushal87 · commit bb66a6329d78 · 2025-01-22T13:47:59.000+05:30
diff --git a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx
@@ -1,14 +1,5 @@
 import React, { useEffect } from 'react';
-import {
-  FlatList,
-  Keyboard,
-  Pressable,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { FlatList, Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import {
@@ -372,19 +363,21 @@ 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();
+                      <TapGestureHandler
+                        onHandlerStateChange={async ({ nativeEvent: { state } }) => {
+                          if (state === State.END) {
+                            try {
+                              if (membership?.pinned_at) {
+                                await channel.unpin();
+                              } else {
+                                await channel.pin();
+                              }
+                            } catch (error) {
+                              console.log('Error pinning/unpinning channel', error);
                             }
-                          } catch (error) {
-                            console.log('Error pinning/unpinning channel', error);
-                          }
 
-                          setOverlay('none');
+                            setOverlay('none');
+                          }
                         }}
                       >
                         <View
@@ -402,20 +395,22 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                             {membership?.pinned_at ? 'Unpin' : 'Pin'}
                           </Text>
                         </View>
-                      </Pressable>
-                      <Pressable
-                        onPress={async () => {
-                          try {
-                            if (membership?.archived_at) {
-                              await channel.unarchive();
-                            } else {
-                              await channel.archive();
+                      </TapGestureHandler>
+                      <TapGestureHandler
+                        onHandlerStateChange={async ({ nativeEvent: { state } }) => {
+                          if (state === State.END) {
+                            try {
+                              if (membership?.archived_at) {
+                                await channel.unarchive();
+                              } else {
+                                await channel.archive();
+                              }
+                            } catch (error) {
+                              console.log('Error archiving/unarchiving channel', error);
                             }
-                          } catch (error) {
-                            console.log('Error archiving/unarchiving channel', error);
-                          }
 
-                          setOverlay('none');
+                            setOverlay('none');
+                          }
                         }}
                       >
                         <View
@@ -433,7 +428,8 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                             {membership?.archived_at ? 'Unarchieve' : 'Archieve'}
                           </Text>
                         </View>
-                      </Pressable>
+                      </TapGestureHandler>
+
                       {otherMembers.length > 1 && (
                         <TapGestureHandler
                           onHandlerStateChange={({ nativeEvent: { state } }) => {
diff --git a/examples/SampleApp/src/components/ChannelPreview.tsx b/examples/SampleApp/src/components/ChannelPreview.tsx
@@ -10,6 +10,7 @@ import {
   ChannelPreviewStatusProps,
   Delete,
   MenuPointHorizontal,
+  Pin,
   useChannelMembershipState,
   useChatContext,
   useTheme,
@@ -22,7 +23,7 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 import type { StackNavigationProp } from '@react-navigation/stack';
 
 import type { StackNavigatorParamList, StreamChatGenerics } from '../types';
-import { Pin } from '../icons/Pin';
+import { ChannelState } from 'stream-chat';
 
 const styles = StyleSheet.create({
   leftSwipeableButton: {
@@ -53,15 +54,17 @@ type ChannelListScreenNavigationProp = StackNavigationProp<
   'ChannelListScreen'
 >;
 
-const CustomChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
-  const membership = useChannelMembershipState(props.channel);
+const CustomChannelPreviewStatus = (
+  props: ChannelPreviewStatusProps & { membership: ChannelState['membership'] },
+) => {
+  const { membership } = props;
 
   return (
     <View style={styles.statusContainer}>
       <ChannelPreviewStatus {...props} />
       {membership.pinned_at && (
         <View style={styles.pinIconContainer}>
-          <Pin height={20} width={20} />
+          <Pin size={24} />
         </View>
       )}
     </View>
@@ -132,7 +135,13 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGen
         </View>
       )}
     >
-      <ChannelPreviewMessenger {...props} PreviewStatus={CustomChannelPreviewStatus} />
+      <ChannelPreviewMessenger
+        {...props}
+        // eslint-disable-next-line react/no-unstable-nested-components
+        PreviewStatus={(statusProps) => (
+          <CustomChannelPreviewStatus {...statusProps} membership={membership} />
+        )}
+      />
     </Swipeable>
   );
 };
diff --git a/examples/SampleApp/src/screens/ChannelListScreen.tsx b/examples/SampleApp/src/screens/ChannelListScreen.tsx
@@ -49,8 +49,10 @@ const styles = StyleSheet.create({
 });
 
 const baseFilters = {
+  archived: false,
   type: 'messaging',
 };
+
 const sort: ChannelSort<StreamChatGenerics> = [
   { pinned_at: -1 },
   { last_message_at: -1 },
@@ -62,6 +64,7 @@ const options = {
   state: true,
   watch: true,
 };
+
 export const ChannelListScreen: React.FC = () => {
   const { chatClient } = useAppContext();
   const navigation = useNavigation();
diff --git a/examples/TypeScriptMessaging/App.tsx b/examples/TypeScriptMessaging/App.tsx
@@ -302,7 +302,7 @@ const App = () => {
       i18nInstance={streami18n}
       value={{ style: theme }}
     >
-      <Chat client={chatClient} i18nInstance={streami18n}>
+      <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport>
         <Stack.Navigator
           initialRouteName='ChannelList'
           screenOptions={{
diff --git a/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts b/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts
@@ -54,7 +54,6 @@ export const useAddedToChannelNotification = <
             let lastPinnedChannelIndex: number | null = null;
 
             const newChannels = [...channels];
-
             if (pinnedAtSort === 1 || pinnedAtSort === -1) {
               lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
               const newTargetChannelIndex =
diff --git a/package/src/components/ChannelList/hooks/listeners/useChannelMemberUpdated.ts b/package/src/components/ChannelList/hooks/listeners/useChannelMemberUpdated.ts
@@ -8,6 +8,9 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import {
   findLastPinnedChannelIndex,
   findPinnedAtSortOrder,
+  isChannelArchived,
+  isChannelPinned,
+  shouldConsiderArchivedChannels,
   shouldConsiderPinnedChannels,
 } from '../utils';
 
@@ -45,11 +48,11 @@ export const useChannelMemberUpdated = <
         if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
           return;
         }
-        const member = event.member;
         const channelType = event.channel_type;
         const channelId = event.channel_id;
 
         const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
         const pinnedAtSort = findPinnedAtSortOrder({ sort });
 
         setChannels((currentChannels) => {
@@ -60,6 +63,9 @@ export const useChannelMemberUpdated = <
           const targetChannelIndex = currentChannels.indexOf(targetChannel);
           const targetChannelExistsWithinList = targetChannelIndex >= 0;
 
+          const isTargetChannelPinned = isChannelPinned(targetChannel);
+          const isTargetChannelArchived = isChannelArchived(targetChannel);
+
           if (!considerPinnedChannels || lockChannelOrder) {
             return currentChannels;
           }
@@ -72,16 +78,18 @@ export const useChannelMemberUpdated = <
 
           // handle archiving (remove channel)
           if (
-            typeof member.archived_at === 'string' ||
-            (filters && filters.archived === true && member.archived_at === null)
+            // When archived filter true, and channel is not archived
+            (!considerArchivedChannels && !isTargetChannelArchived) ||
+            // When archived filter false, and channel is archived
+            (considerArchivedChannels && isTargetChannelArchived)
           ) {
             return newChannels;
           }
 
           // handle pinning
           let lastPinnedChannelIndex: number | null = null;
 
-          if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !member.pinned_at)) {
+          if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !isTargetChannelPinned)) {
             lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
           }
           const newTargetChannelIndex =
diff --git a/package/src/components/ChannelList/hooks/listeners/useNewMessage.ts b/package/src/components/ChannelList/hooks/listeners/useNewMessage.ts
@@ -6,7 +6,12 @@ import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { moveChannelUp } from '../../utils';
-import { isChannelArchived, isChannelPinned, shouldConsiderPinnedChannels } from '../utils';
+import {
+  isChannelArchived,
+  isChannelPinned,
+  shouldConsiderArchivedChannels,
+  shouldConsiderPinnedChannels,
+} from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
@@ -39,21 +44,19 @@ export const useNewMessage = <
       if (typeof onNewMessage === 'function') {
         onNewMessage(lockChannelOrder, setChannels, event, filters, sort);
       } else {
+        const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
         setChannels((channels) => {
           if (!channels) return channels;
           const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
           const targetChannel = channels[targetChannelIndex];
 
           const isTargetChannelArchived = isChannelArchived(targetChannel);
           const isTargetChannelPinned = isChannelPinned(targetChannel);
-          const isArchivedFilterTrue = filters && filters.archived === true;
-          const isArchivedFilterFalse = filters && filters.archived === false;
-
-          const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
 
           if (
             // If the channel is archived and we are not considering archived channels
-            (isTargetChannelArchived && isArchivedFilterFalse) ||
+            (isTargetChannelArchived && considerArchivedChannels) ||
             // If the channel is pinned and we are not considering pinned channels
             (isTargetChannelPinned && considerPinnedChannels) ||
             lockChannelOrder
@@ -73,9 +76,9 @@ export const useNewMessage = <
           // 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) ||
+            (considerArchivedChannels && isChannelArchived(channelToMove)) ||
             // When archived filter true, and channel is not archived
-            (isArchivedFilterTrue && !isChannelArchived(channelToMove))
+            (!considerArchivedChannels && !isChannelArchived(channelToMove))
           ) {
             return [...channels];
           }
diff --git a/package/src/components/ChannelList/hooks/useChannelMembershipState.ts b/package/src/components/ChannelList/hooks/useChannelMembershipState.ts
@@ -16,19 +16,25 @@ export const useChannelMembershipState = <
 
   const { client } = useChatContext<StreamChatGenerics>();
 
-  useEffect(() => {
-    if (!channel) return;
+  useEffect(
+    () => {
+      if (!channel) return;
 
-    const handleMembershipUpdate = () => {
       setMembership(channel.state.membership);
-    };
 
-    const subscriptions = ['member.updated'].map((event) =>
-      client.on(event, handleMembershipUpdate),
-    );
+      const handleMembershipUpdate = () => {
+        setMembership(channel.state.membership);
+      };
 
-    return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-  }, [channel?.state.membership, client]);
+      const subscriptions = ['member.updated'].map((event) =>
+        client.on(event, handleMembershipUpdate),
+      );
+
+      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [channel?.state.membership, client],
+  );
 
   return membership;
 };
diff --git a/package/src/components/ChannelList/hooks/utils/index.ts b/package/src/components/ChannelList/hooks/utils/index.ts

Original file line number	Diff line number	Diff line change
`@@ -302,7 +302,7 @@ const App = () => {`
`302`	`302`	`i18nInstance={streami18n}`
`303`	`303`	`value={{ style: theme }}`
`304`	`304`	`>`
`305`		`- <Chat client={chatClient} i18nInstance={streami18n}>`
	`305`	`+ <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport>`
`306`	`306`	`<Stack.Navigator`
`307`	`307`	`initialRouteName='ChannelList'`
`308`	`308`	`screenOptions={{`