chore: add menu option for pruning a well

Author: isekovanic

examples/SampleApp/App.tsx

@@ -62,6 +62,7 @@ import AsyncStore from './src/utils/AsyncStore.ts';
 import {
   MessageListImplementationConfigItem,
   MessageListModeConfigItem,
+  MessageListPruningConfigItem,
 } from './src/components/SecretMenu.tsx';
 
 init({ data });
@@ -101,6 +102,9 @@ const App = () => {
   const [messageListMode, setMessageListMode] = useState<
     MessageListModeConfigItem['mode'] | undefined
   >(undefined);
+  const [messageListPruning, setMessageListPruning] = useState<
+    MessageListPruningConfigItem['value'] | undefined
+  >(undefined);
   const colorScheme = useColorScheme();
   const streamChatTheme = useStreamChatTheme();
 
@@ -151,10 +155,15 @@ const App = () => {
         '@stream-rn-sampleapp-messagelist-mode',
         { mode: 'default' },
       );
+      const messageListPruningStoredValue = await AsyncStore.getItem(
+        '@stream-rn-sampleapp-messagelist-pruning',
+        { value: undefined },
+      );
       setMessageListImplementation(
         messageListImplementationStoredValue?.id as MessageListImplementationConfigItem['id'],
       );
       setMessageListMode(messageListModeStoredValue?.mode as MessageListModeConfigItem['mode']);
+      setMessageListPruning(messageListPruningStoredValue?.value as MessageListPruningConfigItem['value']);
     };
     getMessageListConfig();
     return () => {
@@ -218,6 +227,7 @@ const App = () => {
               switchUser,
               messageListImplementation,
               messageListMode,
+              messageListPruning,
             }}
           >
             {isConnecting && !chatClient ? (

examples/SampleApp/src/components/SecretMenu.tsx

@@ -14,12 +14,36 @@ import {
   StyleSheet,
   ScrollView,
 } from 'react-native';
-import { Close, Edit, Notification, Delete, Folder, useTheme } from 'stream-chat-react-native';
+import { Close, Edit, Notification, Delete, Folder, ZIP, useTheme } from 'stream-chat-react-native';
 import { styles as menuDrawerStyles } from './MenuDrawer.tsx';
 import AsyncStore from '../utils/AsyncStore.ts';
 import { StreamChat } from 'stream-chat';
 import { LabeledTextInput } from '../screens/AdvancedUserSelectorScreen.tsx';
 
+const isAndroid = Platform.OS === 'android';
+
+export type NotificationConfigItem = { label: string; name: string; id: string };
+export type MessageListImplementationConfigItem = { label: string; id: 'flatlist' | 'flashlist' };
+export type MessageListModeConfigItem = { label: string; mode: 'default' | 'livestream' };
+export type MessageListPruningConfigItem = { label: string; value: 100 | 500 | 1000 | undefined };
+
+const messageListImplementationConfigItems: MessageListImplementationConfigItem[] = [
+  { label: 'FlatList', id: 'flatlist' },
+  { label: 'FlashList', id: 'flashlist' },
+];
+
+const messageListModeConfigItems: MessageListModeConfigItem[] = [
+  { label: 'Default', mode: 'default' },
+  { label: 'Livestreaming', mode: 'livestream' },
+];
+
+const messageListPruningConfigItems: MessageListPruningConfigItem[] = [
+  { label: 'None', value: undefined },
+  { label: '100 Messages', value: 100 },
+  { label: '500 Messages', value: 500 },
+  { label: '1000 Messages', value: 1000 },
+];
+
 export const SlideInView = ({
   visible,
   children,
@@ -56,12 +80,6 @@ export const SlideInView = ({
   );
 };
 
-const isAndroid = Platform.OS === 'android';
-
-export type NotificationConfigItem = { label: string; name: string; id: string };
-export type MessageListImplementationConfigItem = { label: string; id: 'flatlist' | 'flashlist' };
-export type MessageListModeConfigItem = { label: string; mode: 'default' | 'livestream' };
-
 const SecretMenuNotificationConfigItem = ({
   notificationConfigItem,
   storeProvider,
@@ -160,6 +178,23 @@ const SecretMenuMessageListModeConfigItem = ({
   </TouchableOpacity>
 );
 
+const SecretMenuMessageListPruningConfigItem = ({
+  messageListPruningConfigItem,
+  storeMessageListPruning,
+  isSelected,
+}: {
+  messageListPruningConfigItem: MessageListPruningConfigItem;
+  storeMessageListPruning: (item: MessageListPruningConfigItem) => void;
+  isSelected: boolean;
+}) => (
+  <TouchableOpacity
+    style={[styles.notificationItemContainer, { borderColor: isSelected ? 'green' : 'gray' }]}
+    onPress={() => storeMessageListPruning(messageListPruningConfigItem)}
+  >
+    <Text style={styles.notificationItem}>{messageListPruningConfigItem.label}</Text>
+  </TouchableOpacity>
+);
+
 /*
  * TODO: Please rewrite this entire component.
  */
@@ -177,7 +212,12 @@ export const SecretMenu = ({
   const [selectedMessageListImplementation, setSelectedMessageListImplementation] = useState<
     MessageListImplementationConfigItem['id'] | null
   >(null);
-  const [selectedMessageListMode, setSelectedMessageListMode] = useState<string | null>(null);
+  const [selectedMessageListMode, setSelectedMessageListMode] = useState<
+    MessageListModeConfigItem['mode'] | null
+  >(null);
+  const [selectedMessageListPruning, setSelectedMessageListPruning] = useState<
+    MessageListPruningConfigItem['value'] | null
+  >(null);
   const {
     theme: {
       colors: { black, grey },
@@ -192,22 +232,6 @@ export const SecretMenu = ({
     [],
   );
 
-  const messageListImplementationConfigItems = useMemo<MessageListImplementationConfigItem[]>(
-    () => [
-      { label: 'FlatList', id: 'flatlist' },
-      { label: 'FlashList', id: 'flashlist' },
-    ],
-    [],
-  );
-
-  const messageListModeConfigItems = useMemo<MessageListModeConfigItem[]>(
-    () => [
-      { label: 'Default', mode: 'default' },
-      { label: 'Livestreaming', mode: 'livestream' },
-    ],
-    [],
-  );
-
   useEffect(() => {
     const getSelectedConfig = async () => {
       const notificationProvider = await AsyncStore.getItem(
@@ -222,14 +246,19 @@ export const SecretMenu = ({
         '@stream-rn-sampleapp-messagelist-mode',
         messageListModeConfigItems[0],
       );
+      const messageListPruning = await AsyncStore.getItem(
+        '@stream-rn-sampleapp-messagelist-pruning',
+        messageListPruningConfigItems[0],
+      );
       setSelectedProvider(notificationProvider?.id ?? notificationConfigItems[0].id);
       setSelectedMessageListImplementation(
         messageListImplementation?.id ?? messageListImplementationConfigItems[0].id,
       );
       setSelectedMessageListMode(messageListMode?.mode ?? messageListModeConfigItems[0].mode);
+      setSelectedMessageListPruning(messageListPruning?.value);
     };
     getSelectedConfig();
-  }, [messageListModeConfigItems, notificationConfigItems, messageListImplementationConfigItems]);
+  }, [notificationConfigItems]);
 
   const storeProvider = useCallback(async (item: NotificationConfigItem) => {
     await AsyncStore.setItem('@stream-rn-sampleapp-push-provider', item);
@@ -249,6 +278,11 @@ export const SecretMenu = ({
     setSelectedMessageListMode(item.mode);
   }, []);
 
+  const storeMessageListPruning = useCallback(async (item: MessageListPruningConfigItem) => {
+    await AsyncStore.setItem('@stream-rn-sampleapp-messagelist-pruning', item);
+    setSelectedMessageListPruning(item.value);
+  }, []);
+
   const removeAllDevices = useCallback(async () => {
     const { devices } = await chatClient.getDevices(chatClient.userID);
     for (const device of devices ?? []) {
@@ -317,6 +351,22 @@ export const SecretMenu = ({
             </View>
           </View>
         </View>
+        <View style={[menuDrawerStyles.menuItem, { alignItems: 'flex-start' }]}>
+          <ZIP height={20} pathFill={grey} width={20} />
+          <View>
+            <Text style={[menuDrawerStyles.menuTitle]}>Message List pruning</Text>
+            <View style={{ marginLeft: 16 }}>
+              {messageListPruningConfigItems.map((item) => (
+                <SecretMenuMessageListPruningConfigItem
+                  key={item.value ?? 0}
+                  messageListPruningConfigItem={item}
+                  storeMessageListPruning={storeMessageListPruning}
+                  isSelected={item.value === selectedMessageListPruning}
+                />
+              ))}
+            </View>
+          </View>
+        </View>
         <TouchableOpacity onPress={removeAllDevices} style={menuDrawerStyles.menuItem}>
           <Delete height={24} size={24} pathFill={grey} width={24} />
           <Text

examples/SampleApp/src/context/AppContext.ts

@@ -3,7 +3,11 @@ import React from 'react';
 import type { StreamChat } from 'stream-chat';
 
 import type { LoginConfig } from '../types';
-import { MessageListImplementationConfigItem, MessageListModeConfigItem } from '../components/SecretMenu.tsx';
+import {
+  MessageListImplementationConfigItem,
+  MessageListModeConfigItem,
+  MessageListPruningConfigItem,
+} from '../components/SecretMenu.tsx';
 
 type AppContextType = {
   chatClient: StreamChat | null;
@@ -12,6 +16,7 @@ type AppContextType = {
   switchUser: (userId?: string) => void;
   messageListImplementation: MessageListImplementationConfigItem['id'];
   messageListMode: MessageListModeConfigItem['mode'];
+  messageListPruning: MessageListPruningConfigItem['value'];
 };
 
 export const AppContext = React.createContext({} as AppContextType);

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -119,7 +119,8 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     params: { channel: channelFromProp, channelId, messageId },
   },
 }) => {
-  const { chatClient, messageListImplementation, messageListMode } = useAppContext();
+  const { chatClient, messageListImplementation, messageListMode, messageListPruning } =
+    useAppContext();
   const navigation = useNavigation();
   const { bottom } = useSafeAreaInsets();
   const {
@@ -215,6 +216,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         messageId={messageId}
         NetworkDownIndicator={() => null}
         thread={selectedThread}
+        maximumMessageLimit={messageListPruning}
       >
         <ChannelHeader channel={channel} />
         {messageListImplementation === 'flashlist' ? (