refactor: remove component context from Chat component

Author: MartinCupela

src/components/ChannelList/ChannelList.tsx

@@ -215,7 +215,7 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
     theme,
     useImageFlagEmojisOnWindows,
   } = useChatContext<SCG>('ChannelList');
-  const { Search } = useComponentContext(); // FIXME: us component context to retrieve ChannelPreview UI components too
+  const { Search } = useComponentContext<SCG>(); // FIXME: us component context to retrieve ChannelPreview UI components too
   const channelListRef = useRef<HTMLDivElement>(null);
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
   const [searchActive, setSearchActive] = useState(false);

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

@@ -24,6 +24,8 @@ import {
   generateUser,
   getOrCreateChannelApi,
   getTestClientWithUser,
+  initClientWithChannels,
+  mockTranslationContext,
   queryChannelsApi,
   queryUsersApi,
   useMockedApis,
@@ -42,9 +44,9 @@ import {
   TranslationContext,
   useChannelListContext,
   useChatContext,
+  WithComponents,
 } from '../../../context';
 import { ChannelListMessenger } from '../ChannelListMessenger';
-import { initClientWithChannels, mockTranslationContext } from '../../../mock-builders';
 
 expect.extend(toHaveNoViolations);
 
@@ -311,8 +313,10 @@ describe('ChannelList', () => {
     const client = await getTestClientWithUser({ id: 'userId' });
 
     render(
-      <Chat client={client} Search={Search} searchController={searchController}>
-        <ChannelList showChannelSearch />
+      <Chat client={client} searchController={searchController}>
+        <WithComponents overrides={{ Search }}>
+          <ChannelList showChannelSearch />
+        </WithComponents>
       </Chat>,
     );
     await act(() => {

src/components/Chat/Chat.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useMemo } from 'react';
+import type { StreamChat } from 'stream-chat';
 import {
   ChannelSearchSource,
   MessageSearchSource,
@@ -12,73 +13,47 @@ import { useChannelsQueryState } from './hooks/useChannelsQueryState';
 
 import { ChatProvider, CustomClasses } from '../../context/ChatContext';
 import { TranslationProvider } from '../../context/TranslationContext';
-import { WithComponents } from '../../context';
 
-import type { StreamChat } from 'stream-chat';
-import type { ChannelPropsForwardedToComponentContext } from '../Channel';
-import type { ComponentContextValue } from '../../context';
+import type { MessageContextValue } from '../../context';
 import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
-import type { MessageContextValue } from '../../context';
-
-export type ChatPropsForwardedToComponentContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
-> = Pick<
-  ComponentContextValue<StreamChatGenerics, V>,
-  | 'ChannelAvatar'
-  | 'Search'
-  | 'SearchBar'
-  | 'SearchResults'
-  | 'SearchResultsHeader'
-  | 'SearchResultsPresearch'
-  | 'SearchSourceResultList'
-  | 'SearchSourceResultListFooter'
-  | 'SearchSourceResults'
-  | 'SearchSourceResultsEmpty'
-  | 'SearchSourceResultsHeader'
-  | 'SearchSourceResultsLoadingIndicator'
->;
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChatProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
-> = ChatPropsForwardedToComponentContext<StreamChatGenerics, V> &
-  ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
-    /** The StreamChat client object */
-    client: StreamChat<StreamChatGenerics>;
-    /** Object containing custom CSS classnames to override the library's default container CSS */
-    customClasses?: CustomClasses;
-    /** Sets the default fallback language for UI component translation, defaults to 'en' for English */
-    defaultLanguage?: SupportedTranslations;
-    /** Instance of Stream i18n */
-    i18nInstance?: Streami18n;
-    /** Initial status of mobile navigation */
-    initialNavOpen?: boolean;
-    /** Instance of SearchController class that allows to control all the search operations. */
-    searchController?: SearchController<StreamChatGenerics>;
-    /** Used for injecting className/s to the Channel and ChannelList components */
-    theme?: string;
-    /**
-     * Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead. Stream
-     * Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending on the platform).
-     * Set this prop to true if you want to use these custom emojis for Windows users.
-     *
-     * Note: requires importing `stream-chat-react/css/v2/emoji-replacement.css` style sheet
-     */
-    useImageFlagEmojisOnWindows?: boolean;
-  } & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'isMessageAIGenerated'>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = {
+  /** The StreamChat client object */
+  client: StreamChat<StreamChatGenerics>;
+  /** Object containing custom CSS classnames to override the library's default container CSS */
+  customClasses?: CustomClasses;
+  /** Sets the default fallback language for UI component translation, defaults to 'en' for English */
+  defaultLanguage?: SupportedTranslations;
+  /** Instance of Stream i18n */
+  i18nInstance?: Streami18n;
+  /** Initial status of mobile navigation */
+  initialNavOpen?: boolean;
+  /** Instance of SearchController class that allows to control all the search operations. */
+  searchController?: SearchController<StreamChatGenerics>;
+  /** Used for injecting className/s to the Channel and ChannelList components */
+  theme?: string;
+  /**
+   * Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead. Stream
+   * Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending on the platform).
+   * Set this prop to true if you want to use these custom emojis for Windows users.
+   *
+   * Note: requires importing `stream-chat-react/css/v2/emoji-replacement.css` style sheet
+   */
+  useImageFlagEmojisOnWindows?: boolean;
+} & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'isMessageAIGenerated'>>;
 
 /**
  * Wrapper component for a StreamChat application. Chat needs to be placed around any other chat components
  * as it provides the ChatContext.
  */
 export const Chat = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
-  props: PropsWithChildren<ChatProps<StreamChatGenerics, V>>,
+  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
   const {
     children,
@@ -138,159 +113,11 @@ export const Chat = <
     useImageFlagEmojisOnWindows,
   });
 
-  // @ts-expect-error
-  const componentContextValue: Partial<ComponentContextValue> = useMemo(
-    () => ({
-      Attachment: props.Attachment,
-      AttachmentPreviewList: props.AttachmentPreviewList,
-      AttachmentSelector: props.AttachmentSelector,
-      AttachmentSelectorInitiationButtonContents: props.AttachmentSelectorInitiationButtonContents,
-      AudioRecorder: props.AudioRecorder,
-      AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
-      AutocompleteSuggestionList: props.AutocompleteSuggestionList,
-      Avatar: props.Avatar,
-      BaseImage: props.BaseImage,
-      ChannelAvatar: props.ChannelAvatar,
-      CooldownTimer: props.CooldownTimer,
-      CustomMessageActionsList: props.CustomMessageActionsList,
-      DateSeparator: props.DateSeparator,
-      EditMessageInput: props.EditMessageInput,
-      EmojiPicker: props.EmojiPicker,
-      emojiSearchIndex: props.emojiSearchIndex,
-      EmptyStateIndicator: props.EmptyStateIndicator,
-      FileUploadIcon: props.FileUploadIcon,
-      GiphyPreviewMessage: props.GiphyPreviewMessage,
-      HeaderComponent: props.HeaderComponent,
-      Input: props.Input,
-      LinkPreviewList: props.LinkPreviewList,
-      LoadingIndicator: props.LoadingIndicator,
-      Message: props.Message,
-      MessageActions: props.MessageActions,
-      MessageBouncePrompt: props.MessageBouncePrompt,
-      MessageDeleted: props.MessageDeleted,
-      MessageListNotifications: props.MessageListNotifications,
-      MessageNotification: props.MessageNotification,
-      MessageOptions: props.MessageOptions,
-      MessageRepliesCountButton: props.MessageRepliesCountButton,
-      MessageStatus: props.MessageStatus,
-      MessageSystem: props.MessageSystem,
-      MessageTimestamp: props.MessageTimestamp,
-      ModalGallery: props.ModalGallery,
-      PinIndicator: props.PinIndicator,
-      PollActions: props.PollActions,
-      PollContent: props.PollContent,
-      PollCreationDialog: props.PollCreationDialog,
-      PollHeader: props.PollHeader,
-      PollOptionSelector: props.PollOptionSelector,
-      QuotedMessage: props.QuotedMessage,
-      QuotedMessagePreview: props.QuotedMessagePreview,
-      QuotedPoll: props.QuotedPoll,
-      reactionOptions: props.reactionOptions,
-      ReactionSelector: props.ReactionSelector,
-      ReactionsList: props.ReactionsList,
-      Search: props.Search,
-      SearchBar: props.SearchBar,
-      SearchResults: props.SearchResults,
-      SearchResultsHeader: props.SearchResultsHeader,
-      SearchResultsPresearch: props.SearchResultsPresearch,
-      SearchSourceResultList: props.SearchSourceResultList,
-      SearchSourceResultListFooter: props.SearchSourceResultListFooter,
-      SearchSourceResults: props.SearchSourceResults,
-      SearchSourceResultsEmpty: props.SearchSourceResultsEmpty,
-      SearchSourceResultsHeader: props.SearchSourceResultsHeader,
-      SearchSourceResultsLoadingIndicator: props.SearchSourceResultsLoadingIndicator,
-      SendButton: props.SendButton,
-      StartRecordingAudioButton: props.StartRecordingAudioButton,
-      ThreadHead: props.ThreadHead,
-      ThreadHeader: props.ThreadHeader,
-      ThreadStart: props.ThreadStart,
-      Timestamp: props.Timestamp,
-      TriggerProvider: props.TriggerProvider,
-      TypingIndicator: props.TypingIndicator,
-      UnreadMessagesNotification: props.UnreadMessagesNotification,
-      UnreadMessagesSeparator: props.UnreadMessagesSeparator,
-      VirtualMessage: props.VirtualMessage,
-    }),
-    [
-      props.Attachment,
-      props.AttachmentPreviewList,
-      props.AttachmentSelector,
-      props.AttachmentSelectorInitiationButtonContents,
-      props.AudioRecorder,
-      props.AutocompleteSuggestionItem,
-      props.AutocompleteSuggestionList,
-      props.Avatar,
-      props.BaseImage,
-      props.ChannelAvatar,
-      props.CooldownTimer,
-      props.CustomMessageActionsList,
-      props.DateSeparator,
-      props.EditMessageInput,
-      props.EmojiPicker,
-      props.EmptyStateIndicator,
-      props.FileUploadIcon,
-      props.GiphyPreviewMessage,
-      props.HeaderComponent,
-      props.Input,
-      props.LinkPreviewList,
-      props.LoadingIndicator,
-      props.Message,
-      props.MessageActions,
-      props.MessageBouncePrompt,
-      props.MessageDeleted,
-      props.MessageListNotifications,
-      props.MessageNotification,
-      props.MessageOptions,
-      props.MessageRepliesCountButton,
-      props.MessageStatus,
-      props.MessageSystem,
-      props.MessageTimestamp,
-      props.ModalGallery,
-      props.PinIndicator,
-      props.PollActions,
-      props.PollContent,
-      props.PollCreationDialog,
-      props.PollHeader,
-      props.PollOptionSelector,
-      props.QuotedMessage,
-      props.QuotedMessagePreview,
-      props.QuotedPoll,
-      props.ReactionSelector,
-      props.ReactionsList,
-      props.Search,
-      props.SearchBar,
-      props.SearchResults,
-      props.SearchResultsHeader,
-      props.SearchResultsPresearch,
-      props.SearchSourceResultList,
-      props.SearchSourceResultListFooter,
-      props.SearchSourceResults,
-      props.SearchSourceResultsEmpty,
-      props.SearchSourceResultsHeader,
-      props.SearchSourceResultsLoadingIndicator,
-      props.SendButton,
-      props.StartRecordingAudioButton,
-      props.ThreadHead,
-      props.ThreadHeader,
-      props.ThreadStart,
-      props.Timestamp,
-      props.TriggerProvider,
-      props.TypingIndicator,
-      props.UnreadMessagesNotification,
-      props.UnreadMessagesSeparator,
-      props.VirtualMessage,
-      props.emojiSearchIndex,
-      props.reactionOptions,
-    ],
-  );
-
   if (!translators.t) return null;
 
   return (
     <ChatProvider value={chatContextValue}>
-      <TranslationProvider value={translators}>
-        <WithComponents overrides={componentContextValue}>{children}</WithComponents>
-      </TranslationProvider>
+      <TranslationProvider value={translators}>{children}</TranslationProvider>
     </ChatProvider>
   );
 };