fix: do not prefer ChannelAvatar from component context in ChannelHeader

Author: MartinCupela

src/components/ChannelHeader/ChannelHeader.tsx

@@ -5,7 +5,6 @@ import { MenuIcon as DefaultMenuIcon } from './icons';
 import { ChannelAvatarProps, Avatar as DefaultAvatar } from '../Avatar';
 import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
 
-import { useComponentContext } from '../../context';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
@@ -34,7 +33,7 @@ export const ChannelHeader = <
   props: ChannelHeaderProps,
 ) => {
   const {
-    Avatar: PropAvatar = DefaultAvatar,
+    Avatar = DefaultAvatar,
     MenuIcon = DefaultMenuIcon,
     image: overrideImage,
     live,
@@ -50,9 +49,6 @@ export const ChannelHeader = <
     overrideTitle,
   });
 
-  const { ChannelAvatar } = useComponentContext();
-  const Avatar = ChannelAvatar ?? PropAvatar;
-
   const { member_count, subtitle } = channel?.data || {};
 
   return (

src/components/ChannelHeader/__tests__/ChannelHeader.test.js

@@ -21,7 +21,6 @@ import {
 import { toHaveNoViolations } from 'jest-axe';
 import { axe } from '../../../../axe-helper';
 import { ChannelAvatar } from '../../Avatar';
-import { ComponentProvider } from '../../../context';
 
 expect.extend(toHaveNoViolations);
 
@@ -39,33 +38,26 @@ const defaultChannelState = {
 
 const t = jest.fn((key) => key);
 
-const renderComponentBase = ({ channel, client, componentOverrides, props }) =>
+const renderComponentBase = ({ channel, client, props }) =>
   render(
     <ChatProvider value={{ channel, client }}>
-      <ComponentProvider value={componentOverrides ?? {}}>
-        <ChannelStateProvider value={{ channel }}>
-          <TranslationProvider value={{ t }}>
-            <ChannelHeader {...props} />
-          </TranslationProvider>
-        </ChannelStateProvider>
-      </ComponentProvider>
+      <ChannelStateProvider value={{ channel }}>
+        <TranslationProvider value={{ t }}>
+          <ChannelHeader {...props} />
+        </TranslationProvider>
+      </ChannelStateProvider>
     </ChatProvider>,
   );
 
-async function renderComponent({
-  channelData,
-  channelType = 'messaging',
-  componentOverrides,
-  props,
-} = {}) {
+async function renderComponent({ channelData, channelType = 'messaging', props } = {}) {
   client = await getTestClientWithUser(user1);
   testChannel1 = generateChannel({ ...defaultChannelState, channel: channelData });
   /* eslint-disable-next-line react-hooks/rules-of-hooks */
   useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
   const channel = client.channel(channelType, testChannel1.id, channelData);
   await channel.query();
 
-  return renderComponentBase({ channel, client, componentOverrides, props });
+  return renderComponentBase({ channel, client, props });
 }
 
 afterEach(cleanup); // eslint-disable-line
@@ -211,21 +203,6 @@ describe('ChannelHeader', () => {
     );
   });
 
-  it('prefers the ChannelAvatar provided over component context', async () => {
-    const channelAvatarTestID = 'custom-channel-avatar';
-    const propsAvatarTestID = 'props-avatar';
-    const ChannelAvatar = () => <div data-testid={channelAvatarTestID} />;
-    const PropsAvatar = () => <div data-testid={propsAvatarTestID} />;
-
-    await renderComponent({
-      componentOverrides: { ChannelAvatar },
-      props: { Avatar: PropsAvatar },
-    });
-
-    expect(screen.queryByTestId(propsAvatarTestID)).not.toBeInTheDocument();
-    expect(screen.getByTestId(channelAvatarTestID)).toBeInTheDocument();
-  });
-
   describe('group channel', () => {
     const props = {
       Avatar: ChannelAvatar,

src/components/ChannelList/ChannelList.tsx

@@ -217,7 +217,7 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
     theme,
     useImageFlagEmojisOnWindows,
   } = useChatContext<SCG>('ChannelList');
-  const { Search } = useComponentContext();
+  const { Search } = useComponentContext(); // 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);