feat: Add a new props isUserIdUsedForNickname (#683)

* feat: Add isUserIdUsedForNickname to the public interface
* feat: Apply isUserIdUsedForNickname into the connection logic
* feat: Set userId to nickname when isUserIdUsedForNickname is true
* chore: Fix mockSdk methods to able to connect with any userId string
* chore: Add test cases for updating nickname with userId

[UIKIT-2537](https://sendbird.atlassian.net/browse/UIKIT-2537)

Author: HoonBaek

src/index.d.ts

@@ -125,6 +125,7 @@ interface SendBirdProviderProps {
   isTypingIndicatorEnabledOnChannelList?: boolean;
   isMessageReceiptStatusEnabledOnChannelList?: boolean;
   uikitOptions?: UIKitOptions;
+  isUserIdUsedForNickname?: boolean;
 }
 
 interface SendBirdStateConfig {
@@ -312,6 +313,7 @@ interface AppProps {
   isTypingIndicatorEnabledOnChannelList?: boolean;
   isMessageReceiptStatusEnabledOnChannelList?: boolean;
   uikitOptions?: UIKitOptions;
+  isUserIdUsedForNickname?: boolean;
 }
 
 interface ApplicationUserListQuery {

src/lib/Sendbird.tsx

@@ -86,6 +86,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps {
   renderUserProfile?: () => React.ReactElement;
   onUserProfileMessage?: () => void;
   uikitOptions?: UIKitOptions;
+  isUserIdUsedForNickname?: boolean;
 }
 
 function Sendbird(props: SendbirdProviderProps) {
@@ -146,6 +147,7 @@ const SendbirdSDK = ({
   renderUserProfile = null,
   onUserProfileMessage = null,
   breakpoint = false,
+  isUserIdUsedForNickname = true,
 }: SendbirdProviderProps): React.ReactElement => {
   const {
     logLevel = '',
@@ -167,6 +169,7 @@ const SendbirdSDK = ({
     appId,
     userId,
     accessToken,
+    isUserIdUsedForNickname,
   }, {
     logger,
     nickname,

src/lib/hooks/useConnect/__test__/data.mocks.ts

@@ -22,10 +22,13 @@ export const mockSdk = {
     if (userId === mockUser.userId) {
       return Promise.resolve(mockUser);
     }
+    if (userId?.length > 0) {
+      return Promise.resolve({ userId: userId });
+    }
     return Promise.reject();
   }),
   disconnect: jest.fn().mockImplementation(() => Promise.resolve(true)),
-  updateCurrentUserInfo: jest.fn().mockImplementation(() => Promise.resolve(mockUser)),
+  updateCurrentUserInfo: jest.fn().mockImplementation((user) => Promise.resolve(user)),
   setSessionHandler: jest.fn(),
   addExtension: jest.fn(),
   getUIKitConfiguration: jest.fn().mockImplementation(() => Promise.resolve({})),

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

@@ -2,7 +2,7 @@
 /* eslint-disable global-require */
 import { SDK_ACTIONS } from '../../../dux/sdk/actionTypes';
 import { USER_ACTIONS } from '../../../dux/user/actionTypes';
-import { getConnectSbError, getMissingParamError, setUpConnection, setUpParams } from '../setupConnection';
+import { getMissingParamError, setUpConnection, setUpParams } from '../setupConnection';
 import { SetupConnectionTypes } from '../types';
 import { generateSetUpConnectionParams, mockSdk, mockUser, mockUser2 } from './data.mocks';
 
@@ -44,6 +44,48 @@ describe('useConnect/setupConnection', () => {
     expect(setUpConnectionProps.sdkDispatcher).toBeCalledWith({ type: SDK_ACTIONS.SDK_ERROR });
   });
 
+  it('should replace nickname with userId when isUserIdUsedForNickname is true', async () => {
+    const newUser = {
+      userId: 'new-userid',
+      nickname: '',
+      profileUrl: 'new-user-profile-url',
+    };
+    const setUpConnectionProps = generateSetUpConnectionParams();
+    await setUpConnection({
+      ...setUpConnectionProps,
+      ...newUser,
+      isUserIdUsedForNickname: true,
+    });
+
+    const updatedUser = { nickname: newUser.userId, profileUrl: newUser.profileUrl };
+    expect(mockSdk.updateCurrentUserInfo).toHaveBeenCalledWith(updatedUser);
+    expect(setUpConnectionProps.userDispatcher).toHaveBeenCalledWith({
+      type: USER_ACTIONS.UPDATE_USER_INFO,
+      payload: updatedUser,
+    });
+  });
+
+  it('should not replace nickname with userId when isUserIdUsedForNickname is false', async () => {
+    const newUser = {
+      userId: 'new-userid',
+      nickname: '',
+      profileUrl: 'new-user-profile-url',
+    };
+    const setUpConnectionProps = generateSetUpConnectionParams();
+    await setUpConnection({
+      ...setUpConnectionProps,
+      ...newUser,
+      isUserIdUsedForNickname: false,
+    });
+
+    const updatedUser = { nickname: '', profileUrl: newUser.profileUrl };
+    expect(mockSdk.updateCurrentUserInfo).toHaveBeenCalledWith(updatedUser);
+    expect(setUpConnectionProps.userDispatcher).toHaveBeenCalledWith({
+      type: USER_ACTIONS.UPDATE_USER_INFO,
+      payload: updatedUser,
+    });
+  });
+
   it('should call setUpConnection when there is proper SDK', async () => {
     const setUpConnectionProps = generateSetUpConnectionParams();
     await setUpConnection(setUpConnectionProps);
@@ -107,8 +149,11 @@ describe('useConnect/setupConnection', () => {
 
   it('should call connectCbError if connection fails', async () => {
     const setUpConnectionProps = generateSetUpConnectionParams();
-    setUpConnectionProps.userId = 'unknown';
-    const errorMessage = getConnectSbError();
+    setUpConnectionProps.userId = '';
+    const errorMessage = getMissingParamError({
+      userId: '',
+      appId: setUpConnectionProps.appId,
+    });
 
     await expect(setUpConnection(setUpConnectionProps))
       .rejects.toMatch(errorMessage);

src/lib/hooks/useConnect/index.ts

@@ -4,7 +4,7 @@ import { ReconnectType, StaticTypes, TriggerTypes } from './types';
 import { connect } from './connect';
 
 export default function useConnect(triggerTypes: TriggerTypes, staticTypes: StaticTypes): ReconnectType {
-  const { userId, appId, accessToken } = triggerTypes;
+  const { userId, appId, accessToken, isUserIdUsedForNickname } = triggerTypes;
   const {
     logger,
     nickname,
@@ -36,6 +36,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         sdkDispatcher,
         userDispatcher,
         initDashboardConfigs,
+        isUserIdUsedForNickname,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/useEffect', error);
@@ -59,6 +60,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         sdkDispatcher,
         userDispatcher,
         initDashboardConfigs,
+        isUserIdUsedForNickname,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/reconnect/useCallback', error);

src/lib/hooks/useConnect/setupConnection.ts

@@ -73,6 +73,7 @@ export async function setUpConnection({
   nickname,
   profileUrl,
   accessToken,
+  isUserIdUsedForNickname,
 }: SetupConnectionTypes): Promise<void> {
   return new Promise((resolve, reject) => {
     logger?.info?.('SendbirdProvider | useConnect/setupConnection/init', { userId, appId });
@@ -121,7 +122,7 @@ export async function setUpConnection({
             profileUrl,
           });
           newSdk.updateCurrentUserInfo({
-            nickname: nickname || user.nickname,
+            nickname: nickname || user.nickname || (isUserIdUsedForNickname ? user.userId : ''),
             profileUrl: profileUrl || user.profileUrl,
           }).then((namedUser) => {
             logger?.info?.('SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {

src/lib/hooks/useConnect/types.ts

@@ -15,6 +15,7 @@ export type TriggerTypes = {
   appId: string;
   // todo: doulbe check this type before merge
   accessToken?: string;
+  isUserIdUsedForNickname?: boolean;
 };
 
 export type ConfigureSessionTypes = (sdk: SendbirdChat | SendbirdGroupChat | SendbirdOpenChat) => SessionHandler;

src/modules/App/index.jsx

@@ -46,6 +46,7 @@ export default function App(props) {
     isTypingIndicatorEnabledOnChannelList,
     isMessageReceiptStatusEnabledOnChannelList,
     uikitOptions,
+    isUserIdUsedForNickname,
   } = props;
   const [currentChannel, setCurrentChannel] = useState(null);
   return (
@@ -80,6 +81,7 @@ export default function App(props) {
       replyType={replyType}
       showSearchIcon={showSearchIcon}
       uikitOptions={uikitOptions}
+      isUserIdUsedForNickname={isUserIdUsedForNickname}
     >
       <AppLayout
         isReactionEnabled={isReactionEnabled}
@@ -151,6 +153,7 @@ App.propTypes = {
   }),
   isTypingIndicatorEnabledOnChannelList: PropTypes.bool,
   isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
+  isUserIdUsedForNickname: PropTypes.bool,
 };
 
 App.defaultProps = {
@@ -190,4 +193,5 @@ App.defaultProps = {
   isVoiceMessageEnabled: undefined,
   isTypingIndicatorEnabledOnChannelList: undefined,
   isMessageReceiptStatusEnabledOnChannelList: undefined,
+  isUserIdUsedForNickname: true,
 };