fix: improve channel message new event

khushal87 · khushal87 · commit 64387d0a5584 · 2024-12-30T18:55:53.000+05:30
diff --git a/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx b/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { NavigationProp, useNavigation } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 import { Avatar, Spinner, useTheme, useViewport } from 'stream-chat-react-native';
-
-import { MESSAGE_SEARCH_LIMIT } from '../../hooks/usePaginatedSearchedMessages';
+import { DEFAULT_PAGINATION_LIMIT } from '../../utils/constants';
 
 import type { MessageResponse } from 'stream-chat';
 
-import type { StreamChatGenerics } from '../../types';
+import type { StackNavigatorParamList, StreamChatGenerics } from '../../types';
 
 dayjs.extend(calendar);
 
@@ -46,6 +45,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
   },
   title: { fontSize: 14, fontWeight: '700' },
+  titleContainer: {},
 });
 
 export type MessageSearchListProps = {
@@ -74,7 +74,8 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
       },
     } = useTheme();
     const { vw } = useViewport();
-    const navigation = useNavigation();
+    const navigation =
+      useNavigation<NavigationProp<StackNavigatorParamList, 'ChannelListScreen'>>();
 
     if (!messages && !refreshing) {
       return null;
@@ -92,8 +93,10 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
           >
             <Text style={{ color: grey }}>
               {`${
-                messages.length >= MESSAGE_SEARCH_LIMIT ? MESSAGE_SEARCH_LIMIT : messages.length
-              }${messages.length >= MESSAGE_SEARCH_LIMIT ? '+ ' : ' '} result${
+                messages.length >= DEFAULT_PAGINATION_LIMIT
+                  ? DEFAULT_PAGINATION_LIMIT
+                  : messages.length
+              }${messages.length >= DEFAULT_PAGINATION_LIMIT ? '+ ' : ' '} result${
                 messages.length === 1 ? '' : 's'
               }`}
             </Text>
@@ -129,8 +132,6 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
               testID='channel-preview-button'
             >
               <Avatar
-                channelId={item.channel?.id}
-                id={item.user?.id}
                 image={item.user?.image}
                 name={item.user?.name}
                 online={item?.user?.online}
diff --git a/examples/SampleApp/src/screens/ChannelListScreen.tsx b/examples/SampleApp/src/screens/ChannelListScreen.tsx
@@ -52,10 +52,11 @@ const baseFilters = {
   type: 'messaging',
 };
 const sort: ChannelSort<StreamChatGenerics> = [
-  { pinned_at: 1 },
+  { pinned_at: -1 },
   { last_message_at: -1 },
   { updated_at: -1 },
 ];
+
 const options = {
   presence: true,
   state: true,
@@ -79,7 +80,7 @@ export const ChannelListScreen: React.FC = () => {
   const { loading, loadMore, messages, refreshing, refreshList, reset } =
     usePaginatedSearchedMessages(searchQuery);
 
-  const chatClientUserId = chatClient?.user?.id;
+  const chatClientUserId = chatClient?.user?.id || '';
   const filters = useMemo(
     () => ({
       ...baseFilters,
@@ -102,7 +103,7 @@ export const ChannelListScreen: React.FC = () => {
     </View>
   );
 
-  const setScrollRef = (ref: React.RefObject<FlatList<Channel<StreamChatGenerics>> | null>) => {
+  const setScrollRef = (ref: FlatList<Channel<StreamChatGenerics>> | null) => {
     scrollRef.current = ref;
   };
 
diff --git a/package/src/components/ChannelList/hooks/listeners/useNewMessage.ts b/package/src/components/ChannelList/hooks/listeners/useNewMessage.ts
@@ -42,11 +42,10 @@ export const useNewMessage = <
         setChannels((channels) => {
           if (!channels) return channels;
           const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
+          const targetChannel = channels[targetChannelIndex];
 
           const channelInList = targetChannelIndex >= 0;
 
-          const targetChannel = channels[targetChannelIndex];
-
           const isTargetChannelArchived = isChannelArchived(targetChannel);
           const isTargetChannelPinned = isChannelPinned(targetChannel);
           const isArchivedFilterTrue = filters && filters.archived === true;
@@ -64,28 +63,33 @@ export const useNewMessage = <
             return channels;
           }
 
-          if (!channelInList && 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];
+          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 (!lockChannelOrder && event.cid)
-            return moveChannelUp<StreamChatGenerics>({
-              channels,
-              cid: event.cid,
-            });
-
           return [...channels];
         });
       }
diff --git a/package/src/components/ChannelList/hooks/useChannelMembershipState.ts b/package/src/components/ChannelList/hooks/useChannelMembershipState.ts
@@ -17,8 +17,6 @@ export const useChannelMembershipState = <
   useEffect(() => {
     if (!channel) return;
 
-    setMembership(channel.state.membership);
-
     const handleMembershipUpdate = () => {
       setMembership(channel.state.membership);
     };
diff --git a/package/src/components/ChannelList/utils.ts b/package/src/components/ChannelList/utils.ts
@@ -1,31 +1,66 @@
-import uniqBy from 'lodash/uniqBy';
-import type { Channel, StreamChat } from 'stream-chat';
+import type { Channel, ChannelSort, StreamChat } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { findLastPinnedChannelIndex, shouldConsiderPinnedChannels } from './hooks/utils';
 
 type MoveParameters<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  channels: Channel<StreamChatGenerics>[];
-  cid: string;
+  channels: Array<Channel<StreamChatGenerics>>;
+  channelToMove: Channel<StreamChatGenerics>;
+  /**
+   * If the index of the channel within `channels` list which is being moved upwards
+   * (`channelToMove`) is known, you can supply it to skip extra calculation.
+   */
+  channelToMoveIndexWithinChannels?: number;
+  sort?: ChannelSort<StreamChatGenerics>;
 };
 
 export const moveChannelUp = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  channels = [],
-  cid,
+  channels,
+  channelToMove,
+  channelToMoveIndexWithinChannels,
+  sort,
 }: MoveParameters<StreamChatGenerics>) => {
-  // get channel from channels
-  const index = channels.findIndex((c) => c.cid === cid);
-  if (index <= 0) return channels;
-  const channel = channels[index];
+  // get index of channel to move up
+  const targetChannelIndex =
+    channelToMoveIndexWithinChannels ??
+    channels.findIndex((channel) => channel.cid === channelToMove.cid);
 
-  // remove channel from current position and add to start
-  channels.splice(index, 1);
-  channels.unshift(channel);
+  const targetChannelExistsWithinList = targetChannelIndex >= 0;
+  const targetChannelAlreadyAtTheTop = targetChannelIndex === 0;
 
-  return uniqBy([channel, ...channels], 'cid');
+  // pinned channels should not move within the list based on recent activity, channels which
+  // receive messages and are not pinned should move upwards but only under the last pinned channel
+  // in the list
+  const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+
+  if (targetChannelAlreadyAtTheTop) return channels;
+
+  const newChannels = [...channels];
+
+  // target channel index is known, remove it from the list
+  if (targetChannelExistsWithinList) {
+    newChannels.splice(targetChannelIndex, 1);
+  }
+
+  // as position of pinned channels has to stay unchanged, we need to
+  // find last pinned channel in the list to move the target channel after
+  let lastPinnedChannelIndex: number | null = null;
+  if (considerPinnedChannels) {
+    lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
+  }
+
+  // re-insert it at the new place (to specific index if pinned channels are considered)
+  newChannels.splice(
+    typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0,
+    0,
+    channelToMove,
+  );
+
+  return newChannels;
 };
 
 type GetParameters<
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { ChannelAvatar } from './ChannelAvatar';
 import type { ChannelPreviewProps } from './ChannelPreview';
@@ -19,7 +19,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { useChannelMembershipState } from '../ChannelList/hooks/useChannelMembershipState';
 
 const styles = StyleSheet.create({
   container: {
@@ -111,6 +110,7 @@ const ChannelPreviewMessengerWithContext = <
     latestMessagePreview,
     maxUnreadCount,
     muted,
+    onSelect,
     PreviewAvatar = ChannelAvatar,
     PreviewMessage = ChannelPreviewMessage,
     PreviewMutedStatus = ChannelPreviewMutedStatus,
@@ -135,10 +135,13 @@ const ChannelPreviewMessengerWithContext = <
     Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),
   );
 
-  const membership = useChannelMembershipState(channel);
-
   return (
-    <View
+    <TouchableOpacity
+      onPress={() => {
+        if (onSelect) {
+          onSelect(channel);
+        }
+      }}
       style={[
         styles.container,
         { backgroundColor: white_snow, borderBottomColor: border },
@@ -165,33 +168,9 @@ const ChannelPreviewMessengerWithContext = <
             formatLatestMessageDate={formatLatestMessageDate}
             latestMessagePreview={latestMessagePreview}
           />
-          {membership && (
-            <>
-              <Button
-                title={membership.archived_at ? 'Unarchieve' : 'Archieve'}
-                onPress={async () => {
-                  if (membership.archived_at) {
-                    await channel.unarchive();
-                  } else {
-                    await channel.archive();
-                  }
-                }}
-              />
-              <Button
-                title={membership.pinned_at ? 'Unpin' : 'Pin'}
-                onPress={async () => {
-                  if (membership.pinned_at) {
-                    await channel.unpin();
-                  } else {
-                    await channel.pin();
-                  }
-                }}
-              />
-            </>
-          )}
         </View>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 };
 
diff --git a/package/src/icons/Archieve.tsx b/package/src/icons/Archieve.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Archieve: React.FC<IconProps> = ({ height = 512, width = 512, ...rest }) => {
+  return (
+    <Svg height={height} viewBox={'0 0 512 512'} width={width} {...rest}>
+      <Path d='M32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64C0 46.3 14.3 32 32 32zm0 128l448 0 0 256c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-256zm128 80c0 8.8 7.2 16 16 16l160 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-160 0c-8.8 0-16 7.2-16 16z' />
+    </Svg>
+  );
+};
diff --git a/package/src/icons/index.ts b/package/src/icons/index.ts
@@ -1,5 +1,6 @@
 export * from './utils/base';
 
+export * from './Archieve';
 export * from './ArrowRight';
 export * from './ArrowLeft';
 export * from './ArrowUp';
