chore: rename ChannelListMessenger

Author: isekovanic

examples/SampleApp/src/screens/SharedGroupsScreen.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { NavigationProp, RouteProp, useNavigation } from '@react-navigation/native';
 import {
   ChannelList,
-  ChannelListMessenger,
-  ChannelListMessengerProps,
+  ChannelListView,
+  ChannelListViewProps,
   ChannelPreviewMessengerProps,
   getChannelPreviewDisplayAvatar,
   GroupAvatar,
@@ -150,7 +150,7 @@ const EmptyListComponent = () => {
   );
 };
 
-type ListComponentProps = ChannelListMessengerProps;
+type ListComponentProps = ChannelListViewProps;
 
 // If the length of channels is 1, which means we only got 1:1-distinct channel,
 // And we don't want to show 1:1-distinct channel in this list.
@@ -161,7 +161,7 @@ const ListComponent: React.FC<ListComponentProps> = (props) => {
     return <EmptyListComponent />;
   }
 
-  return <ChannelListMessenger {...props} />;
+  return <ChannelListView {...props} />;
 };
 
 type SharedGroupsScreenRouteProp = RouteProp<StackNavigatorParamList, 'SharedGroupsScreen'>;

package/src/components/ChannelList/ChannelList.tsx

@@ -15,7 +15,7 @@ import { ChannelListFooterLoadingIndicator } from './ChannelListFooterLoadingInd
 import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicator';
 import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetworkDownIndicator';
 import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
-import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
+import { ChannelListView, ChannelListViewProps } from './ChannelListView';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
@@ -78,9 +78,9 @@ export type ChannelListProps = Partial<
   /**
    * Custom UI component to display the list of channels
    *
-   * Default: [ChannelListMessenger](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-list-messenger/)
+   * Default: [ChannelListView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-list-view/)
    */
-  List?: React.ComponentType<ChannelListMessengerProps>;
+  List?: React.ComponentType<ChannelListViewProps>;
   /**
    * If set to true, channels won't dynamically sort by most recent message, defaults to false
    */
@@ -248,7 +248,7 @@ const DEFAULT_SORT = {};
 /**
  * This component fetches a list of channels, allowing you to select the channel you want to open.
  * The ChannelList doesn't provide any UI for the underlying React Native FlatList. UI is determined by the `List` component which is
- * provided to the ChannelList component as a prop. By default, the ChannelListMessenger component is used as the list UI.
+ * provided to the ChannelList component as a prop. By default, the ChannelListView component is used as the list UI.
  *
  * @example ./ChannelList.md
  */
@@ -261,7 +261,7 @@ export const ChannelList = (props: ChannelListProps) => {
     FooterLoadingIndicator = ChannelListFooterLoadingIndicator,
     HeaderErrorIndicator = ChannelListHeaderErrorIndicator,
     HeaderNetworkDownIndicator = ChannelListHeaderNetworkDownIndicator,
-    List = ChannelListMessenger,
+    List = ChannelListView,
     ListHeaderComponent,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = ChannelListLoadingIndicator,

…nts/ChannelList/ChannelListMessenger.tsx …mponents/ChannelList/ChannelListView.tsxpackage/src/components/ChannelList/ChannelListMessenger.tsx renamed to package/src/components/ChannelList/ChannelListView.tsx package/src/components/ChannelList/ChannelListMessenger.tsx renamed to package/src/components/ChannelList/ChannelListView.tsx

@@ -16,7 +16,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 
-export type ChannelListMessengerPropsWithContext = Omit<
+export type ChannelListViewPropsWithContext = Omit<
   ChannelsContextValue,
   | 'HeaderErrorIndicator'
   | 'HeaderNetworkDownIndicator'
@@ -61,7 +61,7 @@ const renderItem = ({ item }: { item: Channel }) => <ChannelPreview channel={ite
 
 const keyExtractor = (item: Channel) => item.cid;
 
-const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithContext) => {
+const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
   const onEndReachedCalledDuringCurrentScrollRef = useRef<boolean>(false);
   const {
     additionalFlatListProps,
@@ -159,23 +159,23 @@ const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithCon
         refreshing={refreshing}
         renderItem={renderItem}
         style={styles.flatList}
-        testID='channel-list-messenger'
+        testID='channel-list-view'
         {...additionalFlatListProps}
       />
       <StatusIndicator />
     </>
   );
 };
 
-export type ChannelListMessengerProps = Partial<ChannelListMessengerPropsWithContext>;
+export type ChannelListViewProps = Partial<ChannelListViewPropsWithContext>;
 
 /**
  * This UI component displays the preview list of channels and handles Channel navigation. It
  * receives all props from the ChannelList component.
  *
- * @example ./ChannelListMessenger.md
+ * @example ./ChannelListView.md
  */
-export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
+export const ChannelListView = (props: ChannelListViewProps) => {
   const {
     additionalFlatListProps,
     channelListInitialized,
@@ -199,7 +199,7 @@ export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
   } = useChannelsContext();
 
   return (
-    <ChannelListMessengerWithContext
+    <ChannelListViewWithContext
       {...{
         additionalFlatListProps,
         channelListInitialized,
@@ -226,12 +226,12 @@ export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
   );
 };
 
-ChannelListMessenger.displayName = 'ChannelListMessenger{channelListMessenger}';
+ChannelListView.displayName = 'ChannelListView{channelListView}';
 
 const useStyles = () => {
   const {
     theme: {
-      channelListMessenger: { flatList, flatListContent },
+      channelListView: { flatList, flatListContent },
     },
   } = useTheme();
   return useMemo(() => {

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -427,7 +427,7 @@ describe('ChannelList', () => {
         );
 
         await waitFor(() => {
-          expect(screen.getByTestId('channel-list-messenger')).toBeTruthy();
+          expect(screen.getByTestId('channel-list-view')).toBeTruthy();
         });
 
         const newMessage = sendNewMessageOnChannel3();

…t/__tests__/ChannelListMessenger.test.js …elList/__tests__/ChannelListView.test.jspackage/src/components/ChannelList/__tests__/ChannelListMessenger.test.js renamed to package/src/components/ChannelList/__tests__/ChannelListView.test.js package/src/components/ChannelList/__tests__/ChannelListMessenger.test.js renamed to package/src/components/ChannelList/__tests__/ChannelListView.test.js

@@ -14,7 +14,7 @@ import { generateChannelResponse } from '../../../mock-builders/generator/channe
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { ChannelList } from '../ChannelList';
-import { ChannelListMessenger } from '../ChannelListMessenger';
+import { ChannelListView } from '../ChannelListView';
 
 let mockChannels;
 let chatClient;
@@ -24,7 +24,7 @@ const ListMessenger = ({ error, loadingChannels, ...props }) => {
 
   return (
     <ChannelsProvider value={{ ...channelsContext, error, loadingChannels }}>
-      <ChannelListMessenger {...props} />
+      <ChannelListView {...props} />
     </ChannelsProvider>
   );
 };
@@ -54,7 +54,7 @@ const Component = ({ error = false, loadingChannels = false }) => {
   );
 };
 
-describe('ChannelListMessenger', () => {
+describe('ChannelListView', () => {
   beforeAll(async () => {
     chatClient = await getTestClientWithUser({ id: 'vishal' });
     const c1 = generateChannelResponse();
@@ -71,7 +71,7 @@ describe('ChannelListMessenger', () => {
   it('renders without crashing', async () => {
     const { getByTestId } = render(<Component />);
     await waitFor(() => {
-      expect(getByTestId('channel-list-messenger')).toBeTruthy();
+      expect(getByTestId('channel-list-view')).toBeTruthy();
     });
   });
 

package/src/components/index.ts

@@ -38,7 +38,7 @@ export * from './ChannelList/ChannelListFooterLoadingIndicator';
 export * from './ChannelList/ChannelListHeaderErrorIndicator';
 export * from './ChannelList/ChannelListHeaderNetworkDownIndicator';
 export * from './ChannelList/ChannelListLoadingIndicator';
-export * from './ChannelList/ChannelListMessenger';
+export * from './ChannelList/ChannelListView';
 export * from './ChannelList/Skeleton';
 export * from './ChannelList/hooks';
 

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -28,15 +28,15 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelsContextValue = {
   /**
-   * Besides the existing default behavior of the ChannelListMessenger component, you can attach
+   * Besides the existing default behavior of the ChannelListView component, you can attach
    * additional props to the underlying React Native FlatList.
    *
    * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
    *
    * **EXAMPLE:**
    *
    * ```
-   * <ChannelListMessenger
+   * <ChannelListView
    *  channels={channels}
    *  additionalFlatListProps={{ bounces: true }}
    * />
@@ -152,7 +152,7 @@ export type ChannelsContextValue = {
    * **Example:**
    *
    * ```
-   * <ChannelListMessenger
+   * <ChannelListView
    *  setFlatListRef={(ref) => {
    *    // Use ref for your own good
    *  }}

package/src/contexts/themeContext/utils/theme.ts

@@ -164,7 +164,7 @@ export type Theme = {
   channelListLoadingIndicator: {
     container: ViewStyle;
   };
-  channelListMessenger: {
+  channelListView: {
     flatList: ViewStyle;
     flatListContent: ViewStyle;
   };
@@ -1095,7 +1095,7 @@ export const defaultTheme: Theme = {
   channelListLoadingIndicator: {
     container: {},
   },
-  channelListMessenger: {
+  channelListView: {
     flatList: {},
     flatListContent: {},
   },