fix: forward error object to LoadingErrorIndicator in ChannelList (#2768)

Author: MartinCupela

src/components/ChannelList/ChannelList.tsx

@@ -42,6 +42,7 @@ import type { ChatContextValue } from '../../context';
 import type { ChannelAvatarProps } from '../Avatar';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { PaginatorProps } from '../../types/types';
+import type { LoadingErrorIndicatorProps } from '../Loading';
 
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
@@ -86,7 +87,7 @@ export type ChannelListProps = {
   /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) */
   List?: React.ComponentType<ChannelListMessengerProps>;
   /** Custom UI component to display the loading error indicator, defaults to component that renders null */
-  LoadingErrorIndicator?: React.ComponentType;
+  LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
   /** Custom UI component to display the loading state, defaults to and accepts same props as: [LoadingChannels](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx) */
   LoadingIndicator?: React.ComponentType;
   /** When true, channels won't dynamically sort by most recent message */

src/components/ChannelList/ChannelListMessenger.tsx

@@ -5,6 +5,7 @@ import type { APIErrorResponse, Channel, ErrorFromResponse } from 'stream-chat';
 import { LoadingChannels } from '../Loading/LoadingChannels';
 import { NullComponent } from '../UtilityComponents';
 import { useTranslationContext } from '../../context';
+import type { LoadingErrorIndicatorProps } from '../Loading';
 
 export type ChannelListMessengerProps = {
   /** Whether the channel query request returned an errored response */
@@ -14,7 +15,7 @@ export type ChannelListMessengerProps = {
   /** Whether the channels are currently loading */
   loading?: boolean;
   /** Custom UI component to display the loading error indicator, defaults to component that renders null */
-  LoadingErrorIndicator?: React.ComponentType;
+  LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
   /** Custom UI component to display a loading indicator, defaults to and accepts same props as: [LoadingChannels](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx) */
   LoadingIndicator?: React.ComponentType;
   /** Local state hook that resets the currently loaded channels */
@@ -37,7 +38,7 @@ export const ChannelListMessenger = (
   const { t } = useTranslationContext('ChannelListMessenger');
 
   if (error) {
-    return <LoadingErrorIndicator />;
+    return <LoadingErrorIndicator error={error} />;
   }
 
   if (loading) {

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

@@ -354,6 +354,28 @@ describe('ChannelList', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('provides the error object to LoadingErrorIndicator', async () => {
+    useMockedApis(chatClient, [erroredPostApi()]);
+    jest.spyOn(console, 'warn').mockImplementationOnce(() => null);
+
+    const LoadingErrorIndicator = (props) => <div>{props.error.message}</div>;
+
+    await act(async () => {
+      await render(
+        <Chat client={chatClient}>
+          <ChannelList
+            filters={{}}
+            LoadingErrorIndicator={LoadingErrorIndicator}
+            options={{ presence: true, state: true, watch: true }}
+            Preview={ChannelPreviewComponent}
+          />
+        </Chat>,
+      );
+    });
+
+    expect(screen.getByText('StreamChat error HTTP code: 500')).toBeInTheDocument();
+  });
+
   it('should render loading indicator before the first channel list load and on reload', async () => {
     const channelsQueryStatesHistory = [];
     const channelListMessengerLoadingHistory = [];

src/components/Loading/LoadingErrorIndicator.tsx

@@ -4,7 +4,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 
 export type LoadingErrorIndicatorProps = {
   /** Error object */
-  error?: Error;
+  error?: Error | null;
 };
 
 /**