@tencentcloud/chat-uikit-react 2.1.3 → 2.2.2

package/src/components/TUIKit/TUIKit.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useState, useEffect } from 'react';
 import { ChatSDK, Conversation } from '@tencentcloud/chat';
-import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { TUIStore, StoreName, IConversationModel, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import { TUILogin } from '@tencentcloud/tui-core';
 import { useTranslation } from 'react-i18next';
 import { isH5, isPC } from '../../utils/env';
 import { useTUIKit, UseContactParams } from './hooks/useTUIKit';
@@ -80,7 +81,7 @@ function RenderForPC({ moduleValue, tabbarRender, setModuleValue } : RenderPCPro
       {moduleValue === TUIKIT_TABBAR.CONTACTS && (
       <TUIContact>
         <TUIContactInfo
-          showChat={() => {
+          showChats={() => {
             setModuleValue(TUIKIT_TABBAR.CHATS);
           }}
         />
@@ -112,7 +113,7 @@ function RenderForH5({
       { moduleValue === TUIKIT_TABBAR.CONTACTS && contactData && (
         <TUIContact>
           <TUIContactInfo
-            showChat={() => {
+            showChats={() => {
               setModuleValue(TUIKIT_TABBAR.CHATS);
             }}
           />
@@ -126,13 +127,16 @@ export function TUIKit<
   >(
   props:PropsWithChildren<T>,
 ):React.ReactElement {
-  const [currentConversationID, setCurrentConversationID] = useState<string>('');
   const [moduleValue, setModuleValue] = useState('chats');
   const { t } = useTranslation();
-
   const {
-    children, chat, customClasses, activeConversation, language = 'en',
+    children,
+    chat = TUILogin.getContext().chat,
+    customClasses,
+    activeConversation,
+    language = 'en',
   } = props;
+
   (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
   const {
     conversation,
@@ -161,20 +165,21 @@ export function TUIKit<
   });
   useEffect(() => {
     TUIStore.watch(StoreName.CONV, {
-      currentConversationID: onCurrentConversationID,
+      currentConversation: onCurrentConversation,
     });
     return () => {
       TUIStore.unwatch(StoreName.CONV, {
-        currentConversationID: onCurrentConversationID,
+        currentConversation: onCurrentConversation,
       });
     };
   }, []);
 
-  const onCurrentConversationID = (id: string) => {
-    setCurrentConversationID(id);
-  };
   const switchTabbar = (value: string) => {
     setModuleValue(value);
+    TUIConversationService.switchConversation('');
+  };
+  const onCurrentConversation = (conversationModel: IConversationModel) => {
+    setActiveConversation(conversationModel?.getConversation());
   };
 
   const tabbarRender = (
@@ -200,8 +205,23 @@ export function TUIKit<
   return (
     <TUIKitProvider value={chatContextValue}>
       <div className="tui-kit">
-        {children || (isPC && <RenderForPC moduleValue={moduleValue} tabbarRender={tabbarRender} setModuleValue={setModuleValue} />)
-        || (isH5 && <RenderForH5 contactData={contactData} moduleValue={moduleValue} tabbarRender={tabbarRender} currentConversationID={currentConversationID} setModuleValue={setModuleValue} />)}
+        {children ||
+          (isPC && (
+            <RenderForPC
+              moduleValue={moduleValue}
+              tabbarRender={tabbarRender}
+              setModuleValue={setModuleValue}
+            />
+          )) ||
+          (isH5 && (
+            <RenderForH5
+              contactData={contactData}
+              moduleValue={moduleValue}
+              tabbarRender={tabbarRender}
+              currentConversationID={conversation?.conversationID || ''}
+              setModuleValue={setModuleValue}
+            />
+          ))}
       </div>
     </TUIKitProvider>
   );

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -1,4 +1,9 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import {
+  TUIStore,
+  StoreName,
+  IGroupModel
+} from '@tencentcloud/chat-uikit-engine';
 import { useTranslation } from 'react-i18next';
 import {
   ChatSDK,
@@ -28,8 +33,13 @@ interface addFriendData {
   data: Profile
 }
 
+interface GroupData {
+  type: 'group',
+  data: IGroupModel
+}
+
 export type UseContactParams = blockData | friendData |
-friendApplicationData | addFriendData| undefined;
+friendApplicationData | addFriendData| GroupData | undefined;
 
 export interface UseChatParams{
   chat: ChatSDK,
@@ -50,12 +60,12 @@ export const useTUIKit = ({
 
   useEffect(() => {
     i18n.changeLanguage(language);
-    const getMyProfile = async () => {
-      const res = await chat?.getMyProfile();
-      setMyProfile(res?.data);
-    };
-    getMyProfile();
-  }, [chat, language]);
+    TUIStore.watch(StoreName.USER, {
+      userProfile: (userProfileData: any) => {
+        setMyProfile(userProfileData);
+      },
+    });
+  }, [language]);
   const setActiveConversation = useCallback(
     (activeConversation?: Conversation) => {
       if (activeConversation) {
@@ -64,11 +74,11 @@ export const useTUIKit = ({
       if (conversation && (activeConversation?.conversationID !== conversation.conversationID)) {
         setTUIManageShow(false);
       }
-      activeConversation && setConversation(activeConversation);
+      setConversation(activeConversation);
     },
     [chat],
   );
-  const setActiveContact = (actionContactData: UseContactParams) => {
+  const setActiveContact = (actionContactData?: UseContactParams) => {
     setContactData(actionContactData);
   };
 

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-date-picker';
 import TencentCloudChat, { Profile } from '@tencentcloud/chat';
+import { UpdateMyProfileParams } from "@tencentcloud/chat-uikit-engine";
 import { isH5 } from '../../utils/env';
 import { useTUIKitContext } from '../../context';
 
@@ -9,7 +10,6 @@ import { Avatar } from '../Avatar';
 import { DivWithEdit } from '../DivWithEdit';
 import { Icon, IconTypes } from '../Icon';
 import { handleDisplayAvatar } from '../untils';
-import { ProfileParams } from './hooks';
 
 const gender: any = {
   [TencentCloudChat.TYPES.GENDER_UNKNOWN]: 'unknow',
@@ -59,7 +59,7 @@ const allowTypeList = [
 
 export interface TUIProfileDefaultProps {
   userInfo?: Profile,
-  update?: (option: ProfileParams) => void,
+  update?: (option: UpdateMyProfileParams) => void,
   className?: string,
 }
 

package/src/components/TUIProfile/hooks/useMyProfile.tsx

@@ -1,7 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
-import TencentCloudChat, { Profile } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
-
+import { useEffect, useState } from 'react';
+import { Profile } from '@tencentcloud/chat';
+import {
+  TUIUserService,
+  TUIStore,
+  StoreName,
+  UpdateMyProfileParams,
+} from "@tencentcloud/chat-uikit-engine";
 export interface ProfileParams {
   nick?: string,
   avatar?: string,
@@ -19,43 +23,21 @@ export interface ProfileParams {
 }
 
 export function useMyProfile() {
-  const [myProfile, setMyPofile] = useState<Profile>();
-  const { chat, myProfile: contextProfile } = useTUIKitContext('useMyProfile');
-
-  const getMyProfile = useCallback(async () => {
-    if (contextProfile) {
-      setMyPofile(contextProfile);
-    } else {
-      const res = await chat?.getMyProfile();
-      setMyPofile(res?.data);
-    }
-  }, [chat]);
+  const [myProfile, setMyProfile] = useState<Profile>();
 
-  const updateMyProfile = useCallback(async (options: any) => {
-    const res = await chat?.updateMyProfile(options);
+  const updateMyProfile = (options: UpdateMyProfileParams) => {
+    TUIUserService.updateMyProfile(options);
     const userInfo: any = { ...myProfile };
-    const keys = Object.keys(res.data);
-    keys.map((name) => {
-      userInfo[name] = res.data[name];
-      return name;
-    });
-    setMyPofile(userInfo);
-    return res;
-  }, [chat]);
-
-  const onProfileUpdated = (event: any) => {
-    console.log('onProfileUpdated', event.data);
+    setMyProfile(userInfo);
   };
 
   useEffect(() => {
-    (async () => {
-      await getMyProfile();
-    })();
-    chat?.on(TencentCloudChat.EVENT.PROFILE_UPDATED, onProfileUpdated);
-    return () => {
-      chat?.off(TencentCloudChat.EVENT.PROFILE_UPDATED, onProfileUpdated);
-    };
-  }, [chat]);
+    TUIStore.watch(StoreName.USER, {
+      userProfile: (userProfileData: any) => {
+        setMyProfile(userProfileData);
+      },
+    });
+  }, []);
 
   return {
     myProfile,

package/src/locales/en/TUIContact.ts

@@ -12,6 +12,7 @@ const TUIContact = {
   'Signature': 'Signature',
   'New Contacts': 'New Contacts',
   'Blocked List': 'Blocked List',
+  'Group List': 'Group List',
   'No Result': 'No Result',
   'ID': 'ID',
   'User': 'User',

package/src/locales/zh_cn/TUIContact.ts

@@ -13,6 +13,7 @@ const TUIContact = {
   'Successful application, waiting for the administrator to agree to join the group application': '等待管理员同意',
   'New Contacts': '新的联系人',
   'Blocked List': '黑名单',
+  'Group List': '我的群聊',
   'No Result': '无搜索结果',
   'ID': 'ID',
   'User': '联系人',

package/dist/cjs/components/TUIProfile/hooks/useMyProfile.d.ts

@@ -1,17 +0,0 @@
-interface ProfileParams {
-    nick?: string;
-    avatar?: string;
-    gender?: string;
-    selfSignature?: string;
-    allowType?: string;
-    birthday?: number;
-    location?: string;
-    language?: string;
-    messageSettings?: number;
-    adminForbidType?: string;
-    level?: number;
-    role?: number;
-    profileCustomField?: Array<any>;
-}
-
-export { ProfileParams };

package/dist/esm/components/TUIProfile/hooks/useMyProfile.d.ts

@@ -1,17 +0,0 @@
-interface ProfileParams {
-    nick?: string;
-    avatar?: string;
-    gender?: string;
-    selfSignature?: string;
-    allowType?: string;
-    birthday?: number;
-    location?: string;
-    language?: string;
-    messageSettings?: number;
-    adminForbidType?: string;
-    level?: number;
-    role?: number;
-    profileCustomField?: Array<any>;
-}
-
-export { ProfileParams };

package/src/components/Profile/hooks/useProfile.tsx

@@ -1,28 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ChatSDK, Profile } from '@tencentcloud/chat';
-
-export function useProfile(chat: ChatSDK, profileHandler?: (
-  profile: Profile,
-  setProfile?: React.Dispatch<React.SetStateAction<Profile>>,
-) => void) {
-  const [myProfile, setMyProfile] = useState<Profile>();
-
-  const getProfile = async (userIDList: Array<string>) => {
-    const res = await chat?.getUserProfile({
-      userIDList,
-    });
-    return res.data;
-  };
-  const getMyProfile = async () => {
-    const res = await chat?.getMyProfile();
-    setMyProfile(res?.data);
-  };
-  useEffect(() => {
-    getMyProfile();
-  }, [chat]);
-  return {
-    myProfile,
-    setMyProfile,
-    getProfile,
-  };
-}