feat: add customExtensionParams for sdk.addSendbirdExtensions (#698)

Addresses https://sendbird.atlassian.net/browse/AC-264

Added the 3rd parameter; customData in the `sdk.addSendbirdExtension` so it can be delivered from the outside of UIKit React.

Author: AhyoungRyu

scripts/index_d_ts

@@ -294,6 +294,7 @@ declare module "SendbirdUIKitGlobal" {
     isMessageReceiptStatusEnabledOnChannelList?: boolean;
     uikitOptions?: UIKitOptions;
     sdkInitParams?: SendbirdChatParams<Module[]>;
+    customExtensionParams?: Record<string, string>;
   }
 
   export interface SendBirdStateConfig {

src/lib/Sendbird.tsx

@@ -35,7 +35,7 @@ import { useMarkAsDeliveredScheduler } from './hooks/useMarkAsDeliveredScheduler
 import { getCaseResolvedReplyType, getCaseResolvedThreadReplySelectType } from './utils/resolvedReplyType';
 import { useUnmount } from '../hooks/useUnmount';
 import { disconnectSdk } from './hooks/useConnect/disconnectSdk';
-import { UIKitOptions, CommonUIKitConfigProps, SendbirdChatInitParams } from './types';
+import { UIKitOptions, CommonUIKitConfigProps, SendbirdChatInitParams, CustomExtensionParams } from './types';
 
 export type UserListQueryType = {
   hasNext?: boolean;
@@ -88,6 +88,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps {
   uikitOptions?: UIKitOptions;
   isUserIdUsedForNickname?: boolean;
   sdkInitParams?: SendbirdChatInitParams;
+  customExtensionParams?: CustomExtensionParams;
 }
 
 function Sendbird(props: SendbirdProviderProps) {
@@ -150,6 +151,7 @@ const SendbirdSDK = ({
   breakpoint = false,
   isUserIdUsedForNickname = true,
   sdkInitParams,
+  customExtensionParams,
 }: SendbirdProviderProps): React.ReactElement => {
   const {
     logLevel = '',
@@ -182,6 +184,7 @@ const SendbirdSDK = ({
     customApiHost,
     customWebSocketHost,
     sdkInitParams,
+    customExtensionParams,
     sdk,
     sdkDispatcher,
     userDispatcher,

src/lib/hooks/useConnect/__test__/setupConnection.spec.ts

@@ -221,4 +221,23 @@ describe('useConnect/setupConnection/setUpParams', () => {
     });
     expect(newSdk).toEqual(mockSdk);
   });
+
+  it('should call init with customExtensionParams', async () => {
+    const setUpConnectionProps = generateSetUpConnectionParams();
+    const { appId, customExtensionParams } = setUpConnectionProps;
+    const newSdk = setUpParams({ appId, customExtensionParams });
+    // @ts-ignore
+    expect(require('@sendbird/chat').init).toBeCalledWith({
+      appId,
+      newInstance: true,
+      modules: [
+        // @ts-ignore
+        new (require('@sendbird/chat/groupChannel').GroupChannelModule)(),
+        // @ts-ignore
+        new (require('@sendbird/chat/openChannel').OpenChannelModule)(),
+      ],
+      customExtensionParams,
+    });
+    expect(newSdk).toEqual(mockSdk);
+  });
 });

src/lib/hooks/useConnect/connect.ts

@@ -17,6 +17,7 @@ export async function connect({
   accessToken,
   sdk,
   sdkInitParams,
+  customExtensionParams,
   isMobile,
 }: ConnectTypes): Promise<void> {
   await disconnectSdk({
@@ -39,6 +40,7 @@ export async function connect({
     profileUrl,
     accessToken,
     sdkInitParams,
+    customExtensionParams,
     isMobile,
   });
 }

src/lib/hooks/useConnect/index.ts

@@ -17,6 +17,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
     userDispatcher,
     initDashboardConfigs,
     sdkInitParams,
+    customExtensionParams,
   } = staticTypes;
   logger?.info?.('SendbirdProvider | useConnect', { ...triggerTypes, ...staticTypes });
 
@@ -39,6 +40,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         initDashboardConfigs,
         isUserIdUsedForNickname,
         sdkInitParams,
+        customExtensionParams,
         isMobile,
       });
     } catch (error) {
@@ -65,6 +67,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         initDashboardConfigs,
         isUserIdUsedForNickname,
         sdkInitParams,
+        customExtensionParams,
         isMobile,
       });
     } catch (error) {

src/lib/hooks/useConnect/setupConnection.ts

@@ -8,7 +8,7 @@ import { USER_ACTIONS } from '../../dux/user/actionTypes';
 import { isTextuallyNull } from '../../../utils';
 
 import { SetupConnectionTypes } from './types';
-import { SendbirdChatInitParams } from '../../types';
+import { CustomExtensionParams, SendbirdChatInitParams } from '../../types';
 
 const APP_VERSION_STRING = '__react_dev_mode__';
 
@@ -32,6 +32,7 @@ export function setUpParams({
   customApiHost?: string;
   customWebSocketHost?: string;
   sdkInitParams?: SendbirdChatInitParams;
+  customExtensionParams?: CustomExtensionParams;
 }): SendbirdChat {
   const params = {
     modules: [
@@ -80,6 +81,7 @@ export async function setUpConnection({
   accessToken,
   isUserIdUsedForNickname,
   sdkInitParams,
+  customExtensionParams,
   isMobile = false,
 }: SetupConnectionTypes): Promise<void> {
   return new Promise((resolve, reject) => {
@@ -116,6 +118,7 @@ export async function setUpConnection({
         isMobile
           ? (DeviceOsPlatform?.MOBILE_WEB ?? 'mobile_web')
           : (DeviceOsPlatform?.WEB ?? 'web'),
+        customExtensionParams,
       );
       newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
 

src/lib/hooks/useConnect/types.ts

@@ -7,7 +7,7 @@ import { UserActionTypes } from '../../dux/user/actionTypes';
 
 import { Logger } from '../../SendbirdState';
 
-import { SendbirdChatInitParams } from '../../types';
+import { SendbirdChatInitParams, CustomExtensionParams } from '../../types';
 
 type SdkDispatcher = React.Dispatch<SdkActionTypes>;
 type UserDispatcher = React.Dispatch<UserActionTypes>;
@@ -35,6 +35,7 @@ export type StaticTypes = {
   userDispatcher: UserDispatcher;
   initDashboardConfigs: (sdk: SendbirdChat) => Promise<void>;
   sdkInitParams?: SendbirdChatInitParams;
+  customExtensionParams?: CustomExtensionParams;
 };
 
 export type ConnectTypes = TriggerTypes & StaticTypes;

src/lib/types.ts

@@ -248,3 +248,4 @@ export type UIKitOptions = PartialDeep<{
 }>;
 
 export type SendbirdChatInitParams = Omit<SendbirdChatParams<Module[]>, 'appId'>;
+export type CustomExtensionParams = Record<string, string>;

src/modules/App/index.jsx

@@ -48,6 +48,7 @@ export default function App(props) {
     uikitOptions,
     isUserIdUsedForNickname,
     sdkInitParams,
+    customExtensionParams,
   } = props;
   const [currentChannel, setCurrentChannel] = useState(null);
   return (
@@ -84,6 +85,7 @@ export default function App(props) {
       uikitOptions={uikitOptions}
       isUserIdUsedForNickname={isUserIdUsedForNickname}
       sdkInitParams={sdkInitParams}
+      customExtensionParams={customExtensionParams}
     >
       <AppLayout
         isReactionEnabled={isReactionEnabled}
@@ -157,6 +159,7 @@ App.propTypes = {
   isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
   isUserIdUsedForNickname: PropTypes.bool,
   sdkInitParams: PropTypes.shape({}),
+  customExtensionParams: PropTypes.shape({}),
 };
 
 App.defaultProps = {
@@ -198,4 +201,5 @@ App.defaultProps = {
   isMessageReceiptStatusEnabledOnChannelList: undefined,
   isUserIdUsedForNickname: true,
   sdkInitParams: undefined,
+  customExtensionParams: undefined,
 };

src/modules/App/types.ts

@@ -11,7 +11,7 @@ import {
   SendBirdProviderConfig,
 } from '../../types';
 
-import { SendbirdChatInitParams } from '../../lib/types';
+import { CustomExtensionParams, SendbirdChatInitParams } from '../../lib/types';
 
 export interface AppLayoutProps {
   isReactionEnabled?: boolean;
@@ -78,4 +78,5 @@ export default interface AppProps {
   isTypingIndicatorEnabledOnChannelList?: boolean;
   isMessageReceiptStatusEnabledOnChannelList?: boolean;
   sdkInitParams?: SendbirdChatInitParams;
+  customExtensionParams?: CustomExtensionParams;
 }