chore: replace JSX.Element with ReactNode type (#2645)

Author: MartinCupela

src/components/ChannelList/ChannelList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
@@ -97,7 +97,7 @@ export type ChannelListProps<
     t: TranslationContextValue['t'],
     userLanguage: TranslationContextValue['userLanguage'],
     isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'],
-  ) => string | JSX.Element;
+  ) => ReactNode;
   /** 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<StreamChatGenerics>>;
   /** Custom UI component to display the loading error indicator, defaults to component that renders null */

src/components/ChannelPreview/ChannelPreview.tsx

@@ -1,5 +1,5 @@
 import throttle from 'lodash.throttle';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { ChannelPreviewMessenger } from './ChannelPreviewMessenger';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
@@ -33,9 +33,9 @@ export type ChannelPreviewUIComponentProps<
   /** The last message received in a channel */
   lastMessage?: StreamMessage<StreamChatGenerics>;
   /** @deprecated Use latestMessagePreview prop instead. */
-  latestMessage?: string | JSX.Element;
+  latestMessage?: ReactNode;
   /** Latest message preview to display, will be a string or JSX element supporting markdown. */
-  latestMessagePreview?: string | JSX.Element;
+  latestMessagePreview?: ReactNode;
   /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
   messageDeliveryStatus?: MessageDeliveryStatus;
   /** Number of unread Messages */
@@ -62,7 +62,7 @@ export type ChannelPreviewProps<
     channel: Channel<StreamChatGenerics>,
     t: TranslationContextValue['t'],
     userLanguage: TranslationContextValue['userLanguage'],
-  ) => string | JSX.Element;
+  ) => ReactNode;
   key?: string;
   /** Custom ChannelPreview click handler function */
   onSelect?: (event: React.MouseEvent) => void;

src/components/ChannelPreview/utils.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import ReactMarkdown from 'react-markdown';
 
@@ -37,7 +37,7 @@ export const getLatestMessagePreview = <
   t: TranslationContextValue['t'],
   userLanguage: TranslationContextValue['userLanguage'] = 'en',
   isMessageAIGenerated?: ChatContextValue<StreamChatGenerics>['isMessageAIGenerated'],
-): string | JSX.Element => {
+): ReactNode => {
   const latestMessage =
     channel.state.latestMessages[channel.state.latestMessages.length - 1];
 
@@ -47,11 +47,11 @@ export const getLatestMessagePreview = <
   const poll = latestMessage?.poll;
 
   if (!latestMessage) {
-    return t('Nothing yet...');
+    return t<string>('Nothing yet...');
   }
 
   if (latestMessage.deleted_at) {
-    return t('Message deleted');
+    return t<string>('Message deleted');
   }
 
   if (poll) {
@@ -94,10 +94,10 @@ export const getLatestMessagePreview = <
   }
 
   if (latestMessage.attachments?.length) {
-    return t('🏙 Attachment...');
+    return t<string>('🏙 Attachment...');
   }
 
-  return t('Empty message...');
+  return t<string>('Empty message...');
 };
 
 export type GroupChannelDisplayInfo = { image?: string; name?: string }[];

src/components/Message/types.ts

@@ -1,4 +1,5 @@
 import type { TFunction } from 'i18next';
+import type { ReactNode } from 'react';
 import type { ReactionSort, UserResponse } from 'stream-chat';
 
 import type { PinPermissions, UserEventHandler } from './hooks';
@@ -109,7 +110,7 @@ export type MessageProps<
     text?: string,
     mentioned_users?: UserResponse<StreamChatGenerics>[],
     options?: RenderTextOptions,
-  ) => JSX.Element | null;
+  ) => ReactNode;
   /** Custom retry send message handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
   retrySendMessage?: ChannelActionContextValue<StreamChatGenerics>['retrySendMessage'];
   /** Comparator function to sort the list of reacted users

src/context/MessageContext.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useContext } from 'react';
+import React, { PropsWithChildren, ReactNode, useContext } from 'react';
 
 import type { Mute, ReactionResponse, ReactionSort, UserResponse } from 'stream-chat';
 
@@ -130,7 +130,7 @@ export type MessageContextValue<
     text?: string,
     mentioned_users?: UserResponse<StreamChatGenerics>[],
     options?: RenderTextOptions,
-  ) => JSX.Element | null;
+  ) => ReactNode;
   /** Comparator function to sort the list of reacted users
    * @deprecated use `reactionDetailsSort` instead
    */