Avatar customization (#610)

* add Avatar as MessageList prop

* add avatar prop to virtualized message list

* avatar prop for different message types

* avatar prop for channel list, preview, and header

* miscellaneous avatar components

* add tests for custom avatars

* update Avatar React component type

* remove from virtualized list

Co-authored-by: Dan Carbonell <[email protected]>

Author: DanC5

src/components/ChannelHeader/ChannelHeader.js

@@ -1,15 +1,15 @@
 // @ts-check
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Avatar } from '../Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 import { ChannelContext, TranslationContext, ChatContext } from '../../context';
 
 /**
  * ChannelHeader - Render some basic information about this channel
  * @example ../../docs/ChannelHeader.md
  * @type {React.FC<import('types').ChannelHeaderProps>}
  */
-const ChannelHeader = ({ title, live }) => {
+const ChannelHeader = ({ Avatar = DefaultAvatar, title, live }) => {
   /** @type {import("types").TranslationContextValue} */
   const { t } = useContext(TranslationContext);
   /** @type {import("types").ChannelContextValue} */
@@ -62,6 +62,12 @@ const ChannelHeader = ({ title, live }) => {
 };
 
 ChannelHeader.propTypes = {
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
   /** Set title manually */
   title: PropTypes.string,
   /** Show a little indicator that the channel is live right now */

src/components/ChannelList/ChannelList.js

@@ -7,6 +7,7 @@ import { ChatContext } from '../../context';
 import { smartRender } from '../../utils';
 
 import ChannelListTeam from './ChannelListTeam';
+import { Avatar as DefaultAvatar } from '../Avatar';
 import { LoadMorePaginator } from '../LoadMore';
 import { LoadingChannels } from '../Loading';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
@@ -163,8 +164,14 @@ const ChannelList = (props) => {
   const renderChannel = (item) => {
     if (!item) return null;
 
-    const { Preview = ChannelPreviewLastMessage, watchers = {} } = props;
+    const {
+      Avatar = DefaultAvatar,
+      Preview = ChannelPreviewLastMessage,
+      watchers = {},
+    } = props;
+
     const previewProps = {
+      Avatar,
       channel: item,
       Preview,
       activeChannel: channel,
@@ -174,6 +181,7 @@ const ChannelList = (props) => {
       // To force the update of preview component upon channel update.
       channelUpdateCount,
     };
+
     return smartRender(ChannelPreview, { ...previewProps });
   };
 
@@ -187,6 +195,7 @@ const ChannelList = (props) => {
   // renders the list.
   const renderList = () => {
     const {
+      Avatar = DefaultAvatar,
       List = ChannelListTeam,
       Paginator = LoadMorePaginator,
       showSidebar,
@@ -199,6 +208,7 @@ const ChannelList = (props) => {
         loading={status.loadingChannels}
         error={status.error}
         showSidebar={showSidebar}
+        Avatar={Avatar}
         LoadingIndicator={LoadingIndicator}
         LoadingErrorIndicator={LoadingErrorIndicator}
       >
@@ -229,6 +239,12 @@ const ChannelList = (props) => {
 };
 
 ChannelList.propTypes = {
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
   /** Indicator for Empty State */
   EmptyStateIndicator: /** @type {PropTypes.Validator<React.ElementType<import('types').EmptyStateIndicatorProps>>} */ (PropTypes.elementType),
   /**

src/components/ChannelList/ChannelListTeam.js

@@ -3,7 +3,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import { Avatar } from '../Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 import { ChatDown } from '../ChatDown';
 import { LoadingChannels } from '../Loading';
 import { ChatContext } from '../../context';
@@ -20,6 +20,7 @@ const ChannelListTeam = ({
   loading,
   sidebarImage,
   showSidebar,
+  Avatar = DefaultAvatar,
   LoadingErrorIndicator = ChatDown,
   LoadingIndicator = LoadingChannels,
   children,
@@ -78,6 +79,12 @@ ChannelListTeam.propTypes = {
   showSidebar: PropTypes.bool,
   /** Url for sidebar logo image. */
   sidebarImage: PropTypes.string,
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
   /**
    * Loading indicator UI Component. It will be displayed if `loading` prop is true.
    *

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

@@ -36,6 +36,11 @@ import { v4 as uuidv4 } from 'uuid';
 import { ChatContext } from '../../../context';
 import { Chat } from '../../Chat';
 import ChannelList from '../ChannelList';
+import {
+  ChannelPreviewCompact,
+  ChannelPreviewLastMessage,
+  ChannelPreviewMessenger,
+} from '../../ChannelPreview';
 
 /**
  * We are gonna use following custom UI components for preview and list.
@@ -192,6 +197,52 @@ describe('ChannelList', () => {
     });
   });
 
+  it('ChannelPreview UI components should render `Avatar` when the custom prop is provided', async () => {
+    useMockedApis(chatClientUthred, [queryChannelsApi([testChannel1])]);
+
+    const { getByTestId, rerender } = render(
+      <Chat client={chatClientUthred}>
+        <ChannelList
+          Avatar={() => <div data-testid="custom-avatar-compact">Avatar</div>}
+          Preview={ChannelPreviewCompact}
+          List={ChannelListComponent}
+        />
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('custom-avatar-compact')).toBeInTheDocument();
+    });
+
+    rerender(
+      <Chat client={chatClientUthred}>
+        <ChannelList
+          Avatar={() => <div data-testid="custom-avatar-last">Avatar</div>}
+          Preview={ChannelPreviewLastMessage}
+          List={ChannelListComponent}
+        />
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('custom-avatar-last')).toBeInTheDocument();
+    });
+
+    rerender(
+      <Chat client={chatClientUthred}>
+        <ChannelList
+          Avatar={() => <div data-testid="custom-avatar-messenger">Avatar</div>}
+          Preview={ChannelPreviewMessenger}
+          List={ChannelListComponent}
+        />
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('custom-avatar-messenger')).toBeInTheDocument();
+    });
+  });
+
   it('when queryChannels api returns no channels, `EmptyStateIndicator` should be rendered', async () => {
     useMockedApis(chatClientUthred, [queryChannelsApi([])]);
 

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

@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/no-unused-collection */
 import React from 'react';
-import { cleanup } from '@testing-library/react';
+import { cleanup, render, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import renderer from 'react-test-renderer';
 import { getTestClientWithUser } from 'mock-builders';
@@ -11,13 +11,14 @@ import { ChatContext } from '../../../context';
 // Maybe better to find a better solution for it.
 console.warn = () => null;
 
-const Component = ({ client, loading = false, error = false }) => {
+const Component = ({ Avatar, client, loading = false, error = false }) => {
   return (
     <ChatContext.Provider value={{ client }}>
       <ChannelListTeam
         client={client}
         loading={loading}
         error={error}
+        Avatar={Avatar}
         LoadingIndicator={() => <div>Loading Indicator</div>}
         LoadingErrorIndicator={() => <div>Loading Error Indicator</div>}
       >
@@ -36,22 +37,38 @@ describe('ChannelListTeam', () => {
   beforeEach(async () => {
     chatClientVishal = await getTestClientWithUser({ id: 'vishal' });
   });
+
   it('by default, should render sidebar, userbar and children', () => {
     const tree = renderer
       .create(<Component client={chatClientVishal} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
   it('when `error` prop is true, `LoadingErrorIndicator` should be rendered', () => {
     const tree = renderer
       .create(<Component client={chatClientVishal} error />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
   it('when `loading` prop is true, `LoadingIndicator` should be rendered', () => {
     const tree = renderer
       .create(<Component client={chatClientVishal} loading />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('when `Avatar` prop is provided, custom avatar component should render', async () => {
+    const { getByTestId } = render(
+      <Component
+        client={chatClientVishal}
+        Avatar={() => <div data-testid="custom-avatar">Avatar</div>}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('custom-avatar')).toBeInTheDocument();
+    });
+  });
 });

src/components/ChannelPreview/ChannelPreview.js

@@ -83,6 +83,12 @@ ChannelPreview.propTypes = {
     .object.isRequired),
   /** Current selected channel object */
   activeChannel: /** @type {PropTypes.Validator<import('stream-chat').Channel | null | undefined>} */ (PropTypes.object),
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
   /**
    * Available built-in options (also accepts the same props as):
    *

src/components/ChannelPreview/ChannelPreviewCompact.js

@@ -4,14 +4,15 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Channel } from 'stream-chat';
 
-import { Avatar } from '../Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 
 /**
  *
  * @example ../../docs/ChannelPreviewCompact.md
  * @type {import('types').ChannelPreviewCompact}
  */
 const ChannelPreviewCompact = (props) => {
+  const { Avatar = DefaultAvatar } = props;
   /**
    * @type {React.MutableRefObject<HTMLButtonElement | null>} Typescript syntax
    */
@@ -55,6 +56,12 @@ ChannelPreviewCompact.propTypes = {
   channel: PropTypes.instanceOf(Channel).isRequired,
   /** Current selected channel object */
   activeChannel: PropTypes.instanceOf(Channel),
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
   /** Setter for selected channel */
   setActiveChannel: PropTypes.func.isRequired,
   /**

src/components/ChannelPreview/ChannelPreviewLastMessage.js

@@ -4,7 +4,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { truncate } from '../../utils';
 
-import { Avatar } from '../Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 
 /**
  * Used as preview component for channel item in [ChannelList](#channellist) component.
@@ -13,6 +13,7 @@ import { Avatar } from '../Avatar';
  * @type {import('types').ChannelPreviewLastMessage}
  */
 const ChannelPreviewLastMessage = (props) => {
+  const { Avatar = DefaultAvatar } = props;
   /** @type {React.MutableRefObject<HTMLButtonElement | null>} Typescript syntax */
   const channelPreviewButton = useRef(null);
   const onSelectChannel = () => {
@@ -60,6 +61,12 @@ ChannelPreviewLastMessage.propTypes = {
   channel: PropTypes.object.isRequired,
   /** Current selected channel object */
   activeChannel: PropTypes.object,
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
   /** Setter for selected channel */
   setActiveChannel: PropTypes.func.isRequired,
   /**

src/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -4,7 +4,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { truncate } from '../../utils';
 
-import { Avatar } from '../Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 
 /**
  * Used as preview component for channel item in [ChannelList](#channellist) component.
@@ -14,6 +14,7 @@ import { Avatar } from '../Avatar';
  * @type {import('types').ChannelPreviewMessenger}
  */
 const ChannelPreviewMessenger = (props) => {
+  const { Avatar = DefaultAvatar } = props;
   /** @type {React.MutableRefObject<HTMLButtonElement | null>} Typescript syntax */
   const channelPreviewButton = useRef(null);
   const unreadClass =
@@ -61,6 +62,12 @@ ChannelPreviewMessenger.propTypes = {
   channel: PropTypes.object.isRequired,
   /** Current selected channel object */
   activeChannel: PropTypes.object,
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
   /** Setter for selected channel */
   setActiveChannel: PropTypes.func.isRequired,
   /**

src/components/EventComponent/EventComponent.js

@@ -2,14 +2,14 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import { Avatar } from '../Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 import { TranslationContext } from '../../context';
 
 /**
  * EventComponent - Custom render component for system and channel event messages
  * @type {React.FC<import('types').EventComponentProps>}
  */
-const EventComponent = ({ message }) => {
+const EventComponent = ({ Avatar = DefaultAvatar, message }) => {
   const { tDateTimeParser } = useContext(TranslationContext);
   const { type, text, event, created_at = '' } = message;
 
@@ -62,6 +62,12 @@ EventComponent.propTypes = {
   /** Message object */
   // @ts-ignore
   message: PropTypes.object.isRequired,
+  /**
+   * Custom UI component to display user avatar
+   *
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.js)
+   * */
+  Avatar: /** @type {PropTypes.Validator<React.ElementType<import('types').AvatarProps>>} */ (PropTypes.elementType),
 };
 
 export default React.memo(EventComponent);