@tencentcloud/chat-uikit-react 2.1.4 → 2.2.3

package/src/components/TUIContact/TUIContactList/TUIContactList.tsx

@@ -4,13 +4,20 @@ import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
 import { useTUIKitContext, useTUIContactContext } from '../../../context';
 import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
-
+import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 import rightArrow from '../../Icon/images/right-arrow.svg';
 import downArrow from '../../Icon/images/down-arrow.png';
-
 import './index.scss';
 
+interface RenderContactListProps {
+  type: 'group' | 'block' | 'friend' ,
+  isShow: boolean,
+  title: string,
+  list: Array<any> | undefined,
+  setShow: (value: boolean) => void
+}
+
 function UnMemoizedTUIContactList<T>(): React.ReactElement {
   const { setActiveContact } = useTUIKitContext();
   const { t } = useTranslation();
@@ -20,16 +27,56 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
   const {
     acceptFriendApplication,
   } = useContactInfo();
-
+  const { groupList } = useTUIContact();
   const [iShowFriendApplication, setShowFriendApplication] = useState(false);
   const [iShowFriends, setShowFriends] = useState(false);
   const [isShowBlocklist, setShowBlocklist] = useState(false);
+  const [isShowGrouplist, setShowGrouplist] = useState(false);
 
   const acceptFriendApplicationHandle = (e: any, userID: string) => {
     e.stopPropagation();
     acceptFriendApplication(userID);
     setActiveContact();
   };
+
+const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContactListProps) => {
+  return (
+    <>
+      <div
+        className="tui-contacts-title"
+        role="button"
+        tabIndex={0}
+        onClick={() => setShow(!isShow)}
+      >
+        <div className="tui-contacts-list-title">{title}</div>
+        <div className="tui-contacts-list-icon">
+          <img src={isShow ? downArrow : rightArrow} alt="" />
+        </div>
+      </div>
+      {isShow
+        && list?.map((item: any) => {
+          const { userID, groupID, avatar, name, nick } = item.profile || item;
+          const showName = item.remark || nick || userID || name || groupID;
+          return (
+            <div
+              role="button"
+              tabIndex={0}
+              className="tui-contacts-list-item"
+              key={userID || groupID}
+              onClick={() => {
+                setActiveContact({ type, data: item });
+              }}
+            >
+              <Avatar size={30} image={avatar || defaultUserAvatar} />
+              <div className="tui-contacts-list-item-container">
+                <p className="tui-contacts-list-item-name">{ showName }</p>
+              </div>
+            </div>
+          );
+        })}
+    </>
+  );
+}
   // eslint-disable-next-line
   // @ts-ignore
   return (
@@ -96,68 +143,27 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
               </div>
             );
           })}
-        <div
-          className="tui-contacts-title"
-          role="button"
-          tabIndex={0}
-          onClick={() => setShowBlocklist(!isShowBlocklist)}
-        >
-          <div className="tui-contacts-list-title">{t('TUIContact.Blocked List')}</div>
-          <div className="tui-contacts-list-icon">
-            <img src={isShowBlocklist ? downArrow : rightArrow} alt="" />
-          </div>
-        </div>
-        {isShowBlocklist
-          && blocklistProfile?.map((item, index) => {
-            const { userID, avatar, nick } = item;
-            return (
-              <div
-                role="button"
-                tabIndex={0}
-                className="tui-contacts-list-item"
-                key={userID}
-                onClick={() => {
-                  setActiveContact({ type: 'block', data: item });
-                }}
-              >
-                <Avatar size={30} image={avatar || defaultUserAvatar} />
-                <div className="tui-contacts-list-item-container">
-                  <p className="tui-contacts-list-item-name">{ nick || userID}</p>
-                </div>
-              </div>
-            );
-          })}
-        <div
-          className="tui-contacts-title"
-          role="button"
-          tabIndex={0}
-          onClick={() => setShowFriends(!iShowFriends)}
-        >
-          <div className="tui-contacts-list-title">{t('TUIContact.Friends')}</div>
-          <div className="tui-contacts-list-icon">
-            <img src={iShowFriends ? downArrow : rightArrow} alt="" />
-          </div>
-        </div>
-        {iShowFriends
-          && friendList?.map((item, index) => {
-            const { userID, avatar, nick } = item.profile;
-            return (
-              <div
-                className="tui-contacts-list-item"
-                key={userID}
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  setActiveContact({ type: 'friend', data: item });
-                }}
-              >
-                <Avatar size={30} image={avatar || defaultUserAvatar} />
-                <div className="tui-contacts-list-item-container">
-                  <p className="tui-contacts-list-item-name">{item.remark || nick || userID}</p>
-                </div>
-              </div>
-            );
-          })}
+        <RenderContactList 
+          type={'block'}
+          title={t('TUIContact.Blocked List')}
+          isShow={isShowBlocklist}
+          setShow={setShowBlocklist}
+          list={blocklistProfile}
+        />
+        <RenderContactList 
+          type={'group'}
+          title={t('TUIContact.Group List')}
+          setShow={setShowGrouplist}
+          isShow={isShowGrouplist}
+          list={groupList}
+        />
+        <RenderContactList 
+          type={'friend'}
+          title={t('TUIContact.Friends')}
+          setShow={setShowFriends}
+          isShow={iShowFriends}
+          list={friendList}
+        />
       </div>
     )
   );

package/src/components/TUIContact/hooks/useTUIContact.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
+import {
+  TUIStore,
+  StoreName,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine';
 import { useTUIKitContext } from '../../../context';
 
 function useTUIContact() {
@@ -8,14 +13,22 @@ function useTUIContact() {
   const [blockList, setBlockList] = useState([]);
   const [friendApplicationList, setFriendApplicationList] = useState([]);
   const [blocklistProfile, setBlocklistProfile] = useState([]);
+  const [groupList, setGroupList] = useState<IGroupModel[]>();
+
   const [isShowContactList, setShowContactList] = useState(true);
 
   useEffect(() => {
+    TUIStore.watch(StoreName.GRP, {
+      groupList: onGroupListUpdated,
+    });
     getFriendList();
     getBlocklist();
     getFriendApplicationList();
   }, [chat]);
 
+  const onGroupListUpdated = (list: IGroupModel[]) => {
+    setGroupList(list);
+  };
   useEffect(() => {
     chat?.on(TencentCloudChat.EVENT.BLACKLIST_UPDATED, onBlocklistUpdated);
     chat?.on(TencentCloudChat.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);
@@ -64,6 +77,7 @@ function useTUIContact() {
 
   return {
     friendList,
+    groupList,
     blocklistProfile,
     friendApplicationList,
     blockList,

package/src/components/TUIKit/TUIKit.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useState, useEffect } from 'react';
 import { ChatSDK, Conversation } from '@tencentcloud/chat';
-import { TUIStore, StoreName, IConversationModel } 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';
@@ -81,7 +81,7 @@ function RenderForPC({ moduleValue, tabbarRender, setModuleValue } : RenderPCPro
       {moduleValue === TUIKIT_TABBAR.CONTACTS && (
       <TUIContact>
         <TUIContactInfo
-          showChat={() => {
+          showChats={() => {
             setModuleValue(TUIKIT_TABBAR.CHATS);
           }}
         />
@@ -95,7 +95,7 @@ function RenderForH5({
   moduleValue, contactData, tabbarRender, currentConversationID, setModuleValue,
 }: RenderH5Props) {
   return (
-    <>
+    <div className='sample-chat-h5'>
       {!currentConversationID && !contactData && (
       <div className="sample-chat-h5-container">
         <TUIProfile className="sample-profile" />
@@ -113,13 +113,13 @@ function RenderForH5({
       { moduleValue === TUIKIT_TABBAR.CONTACTS && contactData && (
         <TUIContact>
           <TUIContactInfo
-            showChat={() => {
+            showChats={() => {
               setModuleValue(TUIKIT_TABBAR.CHATS);
             }}
           />
         </TUIContact>
       )}
-    </>
+    </div>
   );
 }
 export function TUIKit<
@@ -176,6 +176,7 @@ export function TUIKit<
 
   const switchTabbar = (value: string) => {
     setModuleValue(value);
+    TUIConversationService.switchConversation('');
   };
   const onCurrentConversation = (conversationModel: IConversationModel) => {
     setActiveConversation(conversationModel?.getConversation());

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

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import {
   TUIStore,
   StoreName,
+  IGroupModel
 } from '@tencentcloud/chat-uikit-engine';
 import { useTranslation } from 'react-i18next';
 import {
@@ -32,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,
@@ -68,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/index.ts

@@ -5,3 +5,4 @@ export * from './components';
 export * from './context';
 export * from './hooks';
 export * from './locales';
+export * from './utils/env';

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/en/index.ts

@@ -4,6 +4,8 @@ import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
+  'chats': 'Messages',
+  'contacts': 'Contacts',
   TUIChat,
   TUIConversation,
   TUIContact,

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/src/locales/zh_cn/index.ts

@@ -4,6 +4,8 @@ import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
+  'chats': '消息',
+  'contacts': '通讯录',
   TUIChat,
   TUIConversation,
   TUIContact,

package/src/server.ts

@@ -12,8 +12,7 @@ export default class TUIChatKit {
   }
 
   /**
-   * 监听 TUILogin.login 的成功通知
-   * @param { TUIInitParam } params 初始化参数
+   * @param { TUIInitParam } params
    */
   public onNotifyEvent(eventName: string, subKey: string) {
     if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
@@ -28,7 +27,7 @@ export default class TUIChatKit {
   }
 
   /**
-   * login 登录
+   * login
    */
   private login() {
     const {