From a911fecad48f2eebfdbd3105349443fd91929839 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Tue, 22 Feb 2022 14:44:30 +0800 Subject: [PATCH] =?UTF-8?q?perf(web):=20=E4=BC=98=E5=8C=96=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E6=89=B9=E9=87=8F=E7=94=A8=E6=88=B7=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E7=9A=84=E7=AD=96=E7=95=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shared/index.tsx | 9 ++++++-- shared/redux/hooks/useGroup.ts | 22 +++++++++++++------ shared/redux/hooks/useUserInfo.ts | 13 +++++++++++ .../ChatBox/ChatMessageList/Item.tsx | 12 +++------- web/src/components/UserListItem.tsx | 11 ---------- 5 files changed, 38 insertions(+), 29 deletions(-) diff --git a/shared/index.tsx b/shared/index.tsx index 15f8c6b9..5f2250d6 100644 --- a/shared/index.tsx +++ b/shared/index.tsx @@ -150,13 +150,18 @@ export { useConverseMessage } from './redux/hooks/useConverseMessage'; export { useDMConverseName } from './redux/hooks/useDMConverseName'; export { useGroupInfo, - useGroupMemberUUIDs, + useGroupMemberIds, + useGroupMemberInfos, useGroupPanel, useIsGroupOwner, useGroupUnread, useGroupTextPanelUnread, } from './redux/hooks/useGroup'; -export { useUserInfo, useUserId } from './redux/hooks/useUserInfo'; +export { + useUserInfo, + useUserId, + useUserInfoList, +} from './redux/hooks/useUserInfo'; export { userActions, groupActions, uiActions } from './redux/slices'; export type { ChatConverseState } from './redux/slices/chat'; export { setupRedux } from './redux/setup'; diff --git a/shared/redux/hooks/useGroup.ts b/shared/redux/hooks/useGroup.ts index e2c4388b..34daf1ea 100644 --- a/shared/redux/hooks/useGroup.ts +++ b/shared/redux/hooks/useGroup.ts @@ -1,9 +1,10 @@ import { useMemo } from 'react'; import { GroupInfo, GroupPanel, GroupPanelType } from '../../model/group'; +import type { UserBaseInfo } from '../../model/user'; import { isValidStr } from '../../utils/string-helper'; import { useAppSelector } from './useAppSelector'; import { useUnread } from './useUnread'; -import { useUserId } from './useUserInfo'; +import { useUserId, useUserInfoList } from './useUserInfo'; /** * 获取群组信息 @@ -15,15 +16,22 @@ export function useGroupInfo(groupId: string): GroupInfo | null { /** * 获取群组中所有成员的uuid列表 */ -export function useGroupMemberUUIDs(groupId: string): string[] { +export function useGroupMemberIds(groupId: string): string[] { const groupInfo = useGroupInfo(groupId); const members = groupInfo?.members ?? []; - const groupMemberUUIDs = useMemo( - () => members.map((m) => m.userId), - [members] - ); + const groupMemberIds = useMemo(() => members.map((m) => m.userId), [members]); + + return groupMemberIds; +} + +/** + * 获取群组中成员信息的详细列表 + */ +export function useGroupMemberInfos(groupId: string): UserBaseInfo[] { + const groupMemberIds = useGroupMemberIds(groupId); + const userInfos = useUserInfoList(groupMemberIds); - return groupMemberUUIDs; + return userInfos; } /** diff --git a/shared/redux/hooks/useUserInfo.ts b/shared/redux/hooks/useUserInfo.ts index 77f72db8..5ad3c7f5 100644 --- a/shared/redux/hooks/useUserInfo.ts +++ b/shared/redux/hooks/useUserInfo.ts @@ -1,3 +1,5 @@ +import { getCachedUserInfo } from '../../cache/cache'; +import { useAsync } from '../../hooks/useAsync'; import type { UserLoginInfo } from '../../model/user'; import { useAppSelector } from './useAppSelector'; @@ -14,3 +16,14 @@ export function useUserInfo(): UserLoginInfo | null { export function useUserId(): string | undefined { return useUserInfo()?._id; } + +/** + * 根据用户id获取用户信息列表 + */ +export function useUserInfoList(userIds: string[]) { + const { value: userInfos = [] } = useAsync(() => { + return Promise.all(userIds.map((userId) => getCachedUserInfo(userId))); + }, [userIds.join(',')]); + + return userInfos; +} diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx index 3052de26..9062f698 100644 --- a/web/src/components/ChatBox/ChatMessageList/Item.tsx +++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx @@ -8,8 +8,6 @@ import { t, useCachedUserInfo, MessageHelper, - useAsync, - getCachedUserInfo, } from 'tailchat-shared'; import { Avatar } from '@/components/Avatar'; import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInterpreter'; @@ -23,6 +21,7 @@ import { useChatMessageReactionAction } from './useChatMessageReaction'; import { TcPopover } from '@/components/TcPopover'; import { useMessageReactions } from './useMessageReactions'; import { stopPropagation } from '@/utils/dom-helper'; +import { useUserInfoList } from 'tailchat-shared/hooks/model/useUserInfoList'; import './Item.less'; /** @@ -189,13 +188,8 @@ const SystemMessageWithNickname: React.FC< overwritePayload: (nicknameList: string[]) => ChatMessage; } > = React.memo((props) => { - const { value: nicknameList = [] } = useAsync(() => { - return Promise.all( - props.userIds.map((userId) => - getCachedUserInfo(userId).then((u) => u.nickname) - ) - ); - }, [props.userIds.join(',')]); + const userInfos = useUserInfoList(props.userIds); + const nicknameList = userInfos.map((user) => user.nickname); return ( diff --git a/web/src/components/UserListItem.tsx b/web/src/components/UserListItem.tsx index 02c9ccd0..a9492fa0 100644 --- a/web/src/components/UserListItem.tsx +++ b/web/src/components/UserListItem.tsx @@ -2,19 +2,8 @@ import React, { useCallback } from 'react'; import { Avatar } from './Avatar'; import _isEmpty from 'lodash/isEmpty'; import { Skeleton, Space } from 'antd'; -// import { openUserProfile } from './modals/UserProfile'; import { useCachedUserInfo, useCachedOnlineStatus } from 'tailchat-shared'; -// const UserAvatar = styled(Avatar)` -// cursor: pointer !important; -// margin-right: 10px !important; -// `; - -// const UserNameText = styled(Typography)` -// flex: 1; -// color: ${(props) => props.theme.color.headerPrimary} !important; -// `; - interface UserListItemProps { userId: string; actions?: React.ReactElement[];