fix: rename onUserProfileMessage to onStartDirectMessage (#1192)

[CLNP-4601](https://sendbird.atlassian.net/browse/CLNP-4601)

### Fix
* Made `useUserProfileContext` hook and applied it

### Changelog
* Renamed the prop `onUserProfileMessage` to `onStartDirectMessage`
* Deprecated `onUserProfileMessage` prop in `SendbirdProvider` and
`UserProfileProvider`
* Deprecated `onUserProfileMessage` interface in `SendbirdStateContext`
and `UserProfileContext`
  * Use a `onStartDirectMessage` instead.

[CLNP-4601]:
https://sendbird.atlassian.net/browse/CLNP-4601?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/lib/Sendbird.tsx

@@ -104,13 +104,18 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps, React.Pro
   breakpoint?: string | boolean;
   htmlTextDirection?: HTMLTextDirection;
   forceLeftToRightMessageLayout?: boolean;
-  renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
-  onUserProfileMessage?: (channel: GroupChannel) => void;
   uikitOptions?: UIKitOptions;
   isUserIdUsedForNickname?: boolean;
   sdkInitParams?: SendbirdChatInitParams;
   customExtensionParams?: CustomExtensionParams;
   isMultipleFilesMessageEnabled?: boolean;
+  // UserProfile
+  renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
+  onStartDirectMessage?: (channel: GroupChannel) => void;
+  /**
+   * @deprecated Please use `onStartDirectMessage` instead. It's renamed.
+   */
+  onUserProfileMessage?: (channel: GroupChannel) => void;
 
   // Customer provided callbacks
   eventHandlers?: SBUEventHandlers;
@@ -171,7 +176,8 @@ const SendbirdSDK = ({
   allowProfileEdit = false,
   disableMarkAsDelivered = false,
   renderUserProfile,
-  onUserProfileMessage,
+  onUserProfileMessage: _onUserProfileMessage,
+  onStartDirectMessage: _onStartDirectMessage,
   breakpoint = false,
   isUserIdUsedForNickname = true,
   sdkInitParams,
@@ -181,6 +187,7 @@ const SendbirdSDK = ({
   htmlTextDirection = 'ltr',
   forceLeftToRightMessageLayout = false,
 }: SendbirdProviderProps): React.ReactElement => {
+  const onStartDirectMessage = _onStartDirectMessage ?? _onUserProfileMessage;
   const { logLevel = '', userMention = {}, isREMUnitEnabled = false, pubSub: customPubSub } = config;
   const { isMobile } = useMediaQueryContext();
   const [logger, setLogger] = useState(LoggerFactory(logLevel as LogLevel));
@@ -332,7 +339,8 @@ const SendbirdSDK = ({
         config: {
           disableMarkAsDelivered,
           renderUserProfile,
-          onUserProfileMessage,
+          onStartDirectMessage,
+          onUserProfileMessage: onStartDirectMessage, // legacy of onStartDirectMessage
           allowProfileEdit,
           isOnline,
           userId,

src/lib/UserProfileContext.tsx

@@ -1,49 +1,64 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { RenderUserProfileProps } from '../types';
+import { useSendbirdStateContext } from './Sendbird';
 
 interface UserProfileContextInterface {
-  disableUserProfile: boolean;
   isOpenChannel: boolean;
+  disableUserProfile: boolean;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
+  onStartDirectMessage?: (channel: GroupChannel) => void;
+
+  /**
+   * @deprecated This prop has been renamed to `onStartDirectMessage`.
+   */
   onUserProfileMessage?: (channel: GroupChannel) => void;
 }
 
 /**
  * user profile goes deep inside the component tree
  * use this context as a short circuit to send in values
  */
-const UserProfileContext = React.createContext<UserProfileContextInterface>({
+export const UserProfileContext = React.createContext<UserProfileContextInterface>({
   disableUserProfile: true,
   isOpenChannel: false,
 });
 
-export type UserProfileProviderProps = React.PropsWithChildren<{
-  disableUserProfile?: boolean;
-  isOpenChannel?: boolean;
-  renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
-  onUserProfileMessage?: (channel: GroupChannel) => void;
-}>;
+export type UserProfileProviderProps = React.PropsWithChildren<
+  Partial<UserProfileContextInterface>
+  & {
+    /** This prop is optional. It is no longer necessary to provide it because the value can be accessed through SendbirdStateContext. */
+    disableUserProfile?: boolean;
+    /** This prop is optional. It is no longer necessary to provide it because the value can be accessed through SendbirdStateContext. */
+    renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
+  }
+>;
+
+export const useUserProfileContext = () => useContext(UserProfileContext);
 
-const UserProfileProvider = ({
+export const UserProfileProvider = ({
   isOpenChannel = false,
-  disableUserProfile = false,
-  renderUserProfile,
-  onUserProfileMessage,
+  disableUserProfile: _disableUserProfile = false,
+  renderUserProfile: _renderUserProfile,
+  onUserProfileMessage: _onUserProfileMessage,
+  onStartDirectMessage: _onStartDirectMessage,
   children,
 }: UserProfileProviderProps) => {
+  const { config } = useSendbirdStateContext();
+  const onStartDirectMessage = _onStartDirectMessage ?? _onUserProfileMessage ?? config.onStartDirectMessage;
+
   return (
     <UserProfileContext.Provider
       value={{
         isOpenChannel,
-        disableUserProfile,
-        renderUserProfile,
-        onUserProfileMessage,
+        disableUserProfile: _disableUserProfile ?? !config.common.enableUsingDefaultUserProfile,
+        renderUserProfile: _renderUserProfile ?? config.renderUserProfile,
+        onStartDirectMessage,
+        /** legacy of onStartDirectMessage */
+        onUserProfileMessage: onStartDirectMessage,
       }}
     >
       {children}
     </UserProfileContext.Provider>
   );
 };
-
-export { UserProfileContext, UserProfileProvider };

src/lib/types.ts

@@ -65,7 +65,7 @@ export interface SBUEventHandlers {
 
 export interface SendBirdStateConfig {
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
-  onUserProfileMessage?: (props: GroupChannel) => void;
+  onStartDirectMessage?: (props: GroupChannel) => void;
   allowProfileEdit: boolean;
   isOnline: boolean;
   userId: string;
@@ -128,21 +128,29 @@ export interface SendBirdStateConfig {
     enableOgtag: SBUConfig['openChannel']['channel']['enableOgtag'];
     enableDocument: SBUConfig['openChannel']['channel']['input']['enableDocument'];
   },
-  /** @deprecated Please use `common.enableUsingDefaultUserProfile` instead * */
+  /**
+   * @deprecated Please use `onStartDirectMessage` instead. It's renamed.
+   */
+  onUserProfileMessage?: (props: GroupChannel) => void;
+  /**
+   * @deprecated Please use `!config.common.enableUsingDefaultUserProfile` instead.
+   * Note that you should use the negation of `config.common.enableUsingDefaultUserProfile`
+   * to replace `disableUserProfile`.
+   */
   disableUserProfile: boolean;
-  /** @deprecated Please use `groupChannel.enableReactions` instead * */
+  /** @deprecated Please use `config.groupChannel.enableReactions` instead * */
   isReactionEnabled: boolean;
-  /** @deprecated Please use `groupChannel.enableMention` instead * */
+  /** @deprecated Please use `config.groupChannel.enableMention` instead * */
   isMentionEnabled: boolean;
-  /** @deprecated Please use `groupChannel.enableVoiceMessage` instead * */
+  /** @deprecated Please use `config.groupChannel.enableVoiceMessage` instead * */
   isVoiceMessageEnabled?: boolean;
-  /** @deprecated Please use `groupChannel.replyType` instead * */
+  /** @deprecated Please use `config.groupChannel.replyType` instead * */
   replyType: ReplyType;
-  /** @deprecated Please use `groupChannelSettings.enableMessageSearch` instead * */
+  /** @deprecated Please use `config.groupChannelSettings.enableMessageSearch` instead * */
   showSearchIcon?: boolean;
-  /** @deprecated Please use `groupChannelList.enableTypingIndicator` instead * */
+  /** @deprecated Please use `config.groupChannelList.enableTypingIndicator` instead * */
   isTypingIndicatorEnabledOnChannelList?: boolean;
-  /** @deprecated Please use `groupChannelList.enableMessageReceiptStatus` instead * */
+  /** @deprecated Please use `config.groupChannelList.enableMessageReceiptStatus` instead * */
   isMessageReceiptStatusEnabledOnChannelList?: boolean;
   /** @deprecated Please use setCurrentTheme instead * */
   setCurrenttheme: (theme: 'light' | 'dark') => void;

src/modules/App/index.tsx

@@ -139,20 +139,16 @@ export default function App(props: AppProps) {
       imageCompression={imageCompression}
       isMultipleFilesMessageEnabled={isMultipleFilesMessageEnabled}
       voiceRecord={voiceRecord}
-      onUserProfileMessage={(channel) => {
+      onStartDirectMessage={(channel) => {
         setCurrentChannel(channel);
       }}
       uikitOptions={uikitOptions}
       isUserIdUsedForNickname={isUserIdUsedForNickname}
       sdkInitParams={sdkInitParams}
       customExtensionParams={customExtensionParams}
       eventHandlers={eventHandlers}
-      isTypingIndicatorEnabledOnChannelList={
-        isTypingIndicatorEnabledOnChannelList
-      }
-      isMessageReceiptStatusEnabledOnChannelList={
-        isMessageReceiptStatusEnabledOnChannelList
-      }
+      isTypingIndicatorEnabledOnChannelList={isTypingIndicatorEnabledOnChannelList}
+      isMessageReceiptStatusEnabledOnChannelList={isMessageReceiptStatusEnabledOnChannelList}
       replyType={replyType}
       showSearchIcon={showSearchIcon}
       disableUserProfile={disableUserProfile}

src/modules/Channel/context/ChannelProvider.tsx

@@ -19,8 +19,8 @@ import type {
 } from '@sendbird/chat/message';
 import type { EmojiContainer, SendbirdError, User } from '@sendbird/chat';
 
-import { ReplyType, RenderUserProfileProps, Nullable } from '../../../types';
-import { UserProfileProvider } from '../../../lib/UserProfileContext';
+import { ReplyType, Nullable } from '../../../types';
+import { UserProfileProvider, UserProfileProviderProps } from '../../../lib/UserProfileContext';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import { CoreMessageType, SendableMessageType } from '../../../utils';
 import { ThreadReplySelectType } from './const';
@@ -61,7 +61,8 @@ export type ChannelQueries = {
   messageListParams?: MessageListParams;
 };
 
-export type ChannelContextProps = {
+export interface ChannelContextProps extends
+  Pick<UserProfileProviderProps, 'disableUserProfile' | 'renderUserProfile'> {
   children?: React.ReactElement;
   channelUrl: string;
   isReactionEnabled?: boolean;
@@ -82,17 +83,15 @@ export type ChannelContextProps = {
   replyType?: ReplyType;
   threadReplySelectType?: ThreadReplySelectType;
   queries?: ChannelQueries;
-  renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   filterMessageList?(messages: BaseMessage): boolean;
-  disableUserProfile?: boolean;
   disableMarkAsRead?: boolean;
   onReplyInThread?: (props: { message: SendableMessageType }) => void;
   onQuoteMessageClick?: (props: { message: SendableMessageType }) => void;
   onMessageAnimated?: () => void;
   onMessageHighlighted?: () => void;
   scrollBehavior?: 'smooth' | 'auto';
   reconnectOnIdle?: boolean;
-};
+}
 
 interface MessageStoreInterface {
   allMessages: CoreMessageType[];
@@ -209,7 +208,6 @@ const ChannelProvider = (props: ChannelContextProps) => {
     userId,
     isOnline,
     imageCompression,
-    onUserProfileMessage,
     markAsReadScheduler,
     groupChannel,
     htmlTextDirection,
@@ -523,11 +521,7 @@ const ChannelProvider = (props: ChannelContextProps) => {
       isScrolled,
       setIsScrolled,
     }}>
-      <UserProfileProvider
-        disableUserProfile={props?.disableUserProfile ?? !config.common.enableUsingDefaultUserProfile}
-        renderUserProfile={props?.renderUserProfile}
-        onUserProfileMessage={onUserProfileMessage}
-      >
+      <UserProfileProvider {...props}>
         {children}
       </UserProfileProvider>
     </ChannelContext.Provider>

src/modules/ChannelList/context/ChannelListProvider.tsx

@@ -16,8 +16,6 @@ import {
   UnreadChannelFilter,
 } from '@sendbird/chat/groupChannel';
 
-import { RenderUserProfileProps } from '../../../types';
-
 import setupChannelList, { pubSubHandler, pubSubHandleRemover } from '../utils';
 import { uuidv4 } from '../../../utils/uuid';
 import { noop } from '../../../utils/utils';
@@ -26,7 +24,7 @@ import { DELIVERY_RECEIPT } from '../../../utils/consts';
 import * as channelListActions from '../dux/actionTypes';
 import { ChannelListActionTypes } from '../dux/actionTypes';
 
-import { UserProfileProvider } from '../../../lib/UserProfileContext';
+import { UserProfileProvider, UserProfileProviderProps } from '../../../lib/UserProfileContext';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import channelListReducers from '../dux/reducers';
 import channelListInitialState from '../dux/initialState';
@@ -75,7 +73,8 @@ type OverrideInviteUserType = {
   channelType: CHANNEL_TYPE;
 };
 
-export interface ChannelListProviderProps {
+export interface ChannelListProviderProps extends
+  Pick<UserProfileProviderProps, 'disableUserProfile' | 'renderUserProfile'> {
   allowProfileEdit?: boolean;
   onBeforeCreateChannel?(users: Array<string>): GroupChannelCreateParams;
   overrideInviteUser?(params: OverrideInviteUserType): void;
@@ -86,8 +85,6 @@ export interface ChannelListProviderProps {
   queries?: ChannelListQueries;
   children?: React.ReactElement;
   className?: string | string[];
-  renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
-  disableUserProfile?: boolean;
   disableAutoSelect?: boolean;
   activeChannelUrl?: string;
   typingChannels?: Array<GroupChannel>;
@@ -142,7 +139,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
   const globalStore = useSendbirdStateContext();
   const { config, stores } = globalStore;
   const { sdkStore } = stores;
-  const { pubSub, logger, onUserProfileMessage } = config;
+  const { pubSub, logger } = config;
   const {
     markAsDeliveredScheduler,
     disableMarkAsDelivered = false,
@@ -153,8 +150,6 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
 
   // derive some variables
   // enable if it is true at least once(both are false by default)
-  const userDefinedDisableUserProfile = disableUserProfile ?? !config.common.enableUsingDefaultUserProfile;
-  const userDefinedRenderProfile = config?.renderUserProfile;
   const enableEditProfile = allowProfileEdit || config.allowProfileEdit;
 
   const userFilledChannelListQuery = queries?.channelListQuery;
@@ -384,11 +379,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
         fetchChannelList,
       }}
     >
-      <UserProfileProvider
-        disableUserProfile={userDefinedDisableUserProfile ?? !config.common.enableUsingDefaultUserProfile}
-        renderUserProfile={userDefinedRenderProfile}
-        onUserProfileMessage={onUserProfileMessage}
-      >
+      <UserProfileProvider {...props}>
         <div className={`sendbird-channel-list ${className}`}>{children}</div>
       </UserProfileProvider>
     </ChannelListContext.Provider>