feat: add channel archiving

Author: khushal87

examples/SampleApp/src/ChatUsers.ts

@@ -2,6 +2,8 @@ import { UserResponse } from 'stream-chat';
 import { StreamChatGenerics } from './types';
 
 export const USER_TOKENS: Record<string, string> = {
+  luke_skywalker:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoibHVrZV9za3l3YWxrZXIifQ.kFSLHRB5X62t0Zlc7nwczWUfsQMwfkpylC6jCUZ6Mc0',
   e2etest1:
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZTJldGVzdDEifQ.XlQOw8nl7fFzHoBkEiTcYGkNo5r7EBYA40LABGOk4hc',
   e2etest2:
@@ -28,6 +30,9 @@ export const USER_TOKENS: Record<string, string> = {
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9kb2xwaGUifQ.tLl-I8ADBhTKB-x5FB9jK4-am0dELLXgydM6VN9rTL8',
 };
 export const USERS: Record<string, UserResponse<StreamChatGenerics>> = {
+  luke_skywalker: {
+    id: 'luke_skywalker',
+  },
   neil: {
     id: 'neil',
     image: 'https://ca.slack-edge.com/T02RM6X6B-U01173D1D5J-0dead6eea6ea-512',

examples/SampleApp/src/components/ChannelInfoOverlay.tsx

@@ -1,5 +1,14 @@
 import React, { useEffect } from 'react';
-import { FlatList, Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import {
+  FlatList,
+  Keyboard,
+  Pressable,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import {
@@ -33,6 +42,7 @@ import {
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
 import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
+import { Archieve } from '../icons/Archieve';
 
 dayjs.extend(relativeTime);
 
@@ -111,7 +121,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
   const halfScreenHeight = vh(50);
   const width = vw(100) - 60;
 
-  const { channel, clientId, navigation } = data || {};
+  const { channel, clientId, membership, navigation } = data || {};
 
   const {
     theme: {
@@ -361,6 +371,37 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                           <Text style={[styles.rowText, { color: black }]}>View info</Text>
                         </View>
                       </TapGestureHandler>
+                      <Pressable
+                        onPress={async () => {
+                          try {
+                            if (membership?.archived_at) {
+                              await channel.unarchive();
+                            } else {
+                              await channel.archive();
+                            }
+                          } catch (error) {
+                            console.log('Error archiving/unarchiving channel', error);
+                          }
+
+                          setOverlay('none');
+                        }}
+                      >
+                        <View
+                          style={[
+                            styles.row,
+                            {
+                              borderTopColor: border,
+                            },
+                          ]}
+                        >
+                          <View style={styles.rowInner}>
+                            <Archieve height={24} width={24} />
+                          </View>
+                          <Text style={[styles.rowText, { color: black }]}>
+                            {membership?.archived_at ? 'Unarchieve' : 'Archieve'}
+                          </Text>
+                        </View>
+                      </Pressable>
                       {otherMembers.length > 1 && (
                         <TapGestureHandler
                           onHandlerStateChange={({ nativeEvent: { state } }) => {

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -8,6 +8,7 @@ import {
   ChannelPreviewMessengerProps,
   Delete,
   MenuPointHorizontal,
+  useChannelMembershipState,
   useChatContext,
   useTheme,
 } from 'stream-chat-react-native';
@@ -57,6 +58,8 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGen
 
   const navigation = useNavigation<ChannelListScreenNavigationProp>();
 
+  const membership = useChannelMembershipState(channel);
+
   const {
     theme: {
       colors: { accent_red, white_smoke },
@@ -75,7 +78,7 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGen
         <View style={[styles.swipeableContainer, { backgroundColor: white_smoke }]}>
           <RectButton
             onPress={() => {
-              setData({ channel, clientId: client.userID, navigation });
+              setData({ channel, clientId: client.userID, membership, navigation });
               setOverlay('channelInfo');
             }}
             style={[styles.leftSwipeableButton]}

examples/SampleApp/src/context/ChannelInfoOverlayContext.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from 'react';
 
+import { ChannelState } from 'stream-chat';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import type { ChannelContextValue } from 'stream-chat-react-native';
 
@@ -14,6 +15,7 @@ export type ChannelInfoOverlayData = Partial<
   Pick<ChannelContextValue<StreamChatGenerics>, 'channel'>
 > & {
   clientId?: string;
+  membership?: ChannelState<StreamChatGenerics>['membership'];
   navigation?: ChannelListScreenNavigationProp;
 };
 

examples/SampleApp/src/icons/Archieve.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { useTheme } from 'stream-chat-react-native';
+
+import { IconProps } from '../utils/base';
+
+export const Archieve: React.FC<IconProps> = ({ height = 512, width = 512 }) => {
+  const {
+    theme: {
+      colors: { grey },
+    },
+  } = useTheme();
+
+  return (
+    <Svg height={height} viewBox={'0 0 512 512'} width={width}>
+      <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'
+        fill={grey}
+      />
+    </Svg>
+  );
+};

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -51,7 +51,11 @@ const styles = StyleSheet.create({
 const baseFilters = {
   type: 'messaging',
 };
-const sort: ChannelSort<StreamChatGenerics> = { last_updated: -1 };
+const sort: ChannelSort<StreamChatGenerics> = [
+  { pinned_at: 1 },
+  { last_message_at: -1 },
+  { updated_at: -1 },
+];
 const options = {
   presence: true,
   state: true,
@@ -192,6 +196,9 @@ export const ChannelListScreen: React.FC = () => {
                   channel,
                 });
               }}
+              onNewMessage={(arg1, arg2, arg3, arg4) => {
+                console.log(arg1, arg2, arg3, arg4);
+              }}
               options={options}
               Preview={ChannelPreview}
               setFlatListRef={setScrollRef}

examples/TypeScriptMessaging/App.tsx

@@ -60,20 +60,16 @@ const options = {
 
 I18nManager.forceRTL(false);
 
-SqliteClient.logger = (level, message, extraData) => {
-  console.log(level, `SqliteClient: ${message}`, extraData);
-};
-
-const apiKey = 'q95x9hkbyd6p';
+const apiKey = '8br4watad788';
 const userToken =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c';
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoibHVrZV9za3l3YWxrZXIifQ.kFSLHRB5X62t0Zlc7nwczWUfsQMwfkpylC6jCUZ6Mc0';
 
 const user = {
-  id: 'ron',
+  id: 'luke_skywalker',
 };
 const filters = {
-  example: 'example-apps',
-  members: { $in: ['ron'] },
+  archived: true,
+  members: { $in: ['luke_skywalker'] },
   type: 'messaging',
 };
 const sort: ChannelSort<StreamChatGenerics> = { last_updated: -1 };

package/package.json

@@ -77,7 +77,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "8.46.0"
+    "stream-chat": "^8.47.1"
   },
   "peerDependencies": {
     "@op-engineering/op-sqlite": ">=9.3.0",

package/src/components/ChannelList/ChannelList.tsx

@@ -33,6 +33,8 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
+import { shouldConsiderArchivedChannels } from './hooks/utils';
+import { useChannelMemberUpdated } from './hooks/listeners/useMemberUpdated';
 
 export type ChannelListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -163,13 +165,14 @@ export type ChannelListProps<
    * @param lockChannelOrder If set to true, channels won't dynamically sort by most recent message, defaults to false
    * @param setChannels Setter for internal state property - `channels`. It's created from useState() hook.
    * @param event An [Event object](https://getstream.io/chat/docs/event_object) corresponding to `message.new` event
-   *
+   * @param considerArchivedChannels If set to true, archived channels will be considered while updating the list of channels
    * @overrideType Function
    * */
   onNewMessage?: (
     lockChannelOrder: boolean,
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
+    considerArchivedChannels?: boolean,
   ) => void;
   /**
    * Override the default listener/handler for event `notification.message_new`
@@ -183,6 +186,7 @@ export type ChannelListProps<
   onNewMessageNotification?: (
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
+    considerArchivedChannels?: boolean,
   ) => void;
   /**
    * Function that overrides default behavior when a user gets removed from a channel
@@ -286,6 +290,8 @@ export const ChannelList = <
     sort,
   });
 
+  const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+
   // Setup event listeners
   useAddedToChannelNotification({
     onAddedToChannel,
@@ -323,11 +329,13 @@ export const ChannelList = <
     lockChannelOrder,
     onNewMessage,
     setChannels,
+    considerArchivedChannels,
   });
 
   useNewMessageNotification({
     onNewMessageNotification,
     setChannels,
+    considerArchivedChannels,
   });
 
   useRemovedFromChannelNotification({
@@ -340,6 +348,10 @@ export const ChannelList = <
     setForceUpdate,
   });
 
+  useChannelMemberUpdated({
+    setChannels,
+  });
+
   const channelIdsStr = channels?.reduce((acc, channel) => `${acc}${channel.cid}`, '');
 
   useEffect(() => {

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

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+
+import type { Channel, Event } from 'stream-chat';
+
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  {
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
+    onChannelMemberUpdated?: (
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+      event: Event<StreamChatGenerics>,
+    ) => void;
+  };
+
+export const useChannelMemberUpdated = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  onChannelMemberUpdated,
+  setChannels,
+}: Parameters<StreamChatGenerics>) => {
+  const { client } = useChatContext<StreamChatGenerics>();
+
+  useEffect(() => {
+    const handleEvent = async (event: Event<StreamChatGenerics>) => {
+      if (typeof onChannelMemberUpdated === 'function') {
+        onChannelMemberUpdated(setChannels, event);
+      } else {
+        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;
+
+        setChannels((currentChannels) => {
+          if (!currentChannels) return currentChannels;
+
+          const targetChannel = client.channel(channelType, channelId);
+          // assumes that channel instances are not changing
+          const targetChannelIndex = currentChannels.indexOf(targetChannel);
+          const targetChannelExistsWithinList = targetChannelIndex >= 0;
+
+          const newChannels = [...currentChannels];
+
+          if (targetChannelExistsWithinList) {
+            newChannels.splice(targetChannelIndex, 1);
+          }
+
+          // handle archiving (remove channel)
+          if (typeof member.archived_at === 'string') {
+            return newChannels;
+          }
+          return currentChannels;
+        });
+      }
+    };
+
+    const listener = client?.on('member.updated', handleEvent);
+    return () => listener?.unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};