From 0f5dc6aec6d8e3ca7ee85ee7ea63fc196cf5652d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 24 Jan 2023 22:36:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E7=BE=A4=E7=BB=84=E8=AE=BE=E7=BD=AE=E7=9A=84=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BA=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/shared/index.tsx                       |  1 +
 client/shared/model/group.ts                  | 17 ++++++++++++++
 .../components/Panel/group/MembersPanel.tsx   | 22 +++++--------------
 .../components/popover/GroupUserPopover.tsx   | 13 +++++++----
 4 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/client/shared/index.tsx b/client/shared/index.tsx
index 88d6e70a..a2cc80a0 100644
--- a/client/shared/index.tsx
+++ b/client/shared/index.tsx
@@ -132,6 +132,7 @@ export {
   deleteGroupRole,
   updateGroupRoleName,
   updateGroupRolePermission,
+  getGroupConfigWithInfo,
 } from './model/group';
 export type {
   GroupPanel,
diff --git a/client/shared/model/group.ts b/client/shared/model/group.ts
index 118251a2..7790b578 100644
--- a/client/shared/model/group.ts
+++ b/client/shared/model/group.ts
@@ -87,6 +87,23 @@ export interface GroupInvite {
   expiredAt?: string;
 }
 
+/**
+ * 获取群组设置信息
+ */
+export function getGroupConfigWithInfo(
+  groupInfo: GroupInfo | null | undefined
+): {
+  hideGroupMemberDiscriminator: boolean;
+  [key: string]: unknown;
+} {
+  const config = groupInfo?.config ?? {};
+
+  return {
+    ...config,
+    hideGroupMemberDiscriminator: config.hideGroupMemberDiscriminator ?? false,
+  };
+}
+
 /**
  * 创建群组
  * @param name 群组名
diff --git a/client/web/src/components/Panel/group/MembersPanel.tsx b/client/web/src/components/Panel/group/MembersPanel.tsx
index 0da25b1c..305605a8 100644
--- a/client/web/src/components/Panel/group/MembersPanel.tsx
+++ b/client/web/src/components/Panel/group/MembersPanel.tsx
@@ -1,11 +1,12 @@
 import { Icon } from 'tailchat-design';
-import { openReconfirmModal, openReconfirmModalP } from '@/components/Modal';
+import { openReconfirmModalP } from '@/components/Modal';
 import { GroupUserPopover } from '@/components/popover/GroupUserPopover';
 import { UserListItem } from '@/components/UserListItem';
 import { Divider, Dropdown, Input, MenuProps, Skeleton } from 'antd';
 import React, { useMemo } from 'react';
 import {
   formatFullTime,
+  getGroupConfigWithInfo,
   GroupMember,
   humanizeMsDuration,
   model,
@@ -101,6 +102,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
   const [allowManageUser] = useHasGroupPermission(groupId, [
     PERMISSION.core.manageUser,
   ]);
+  const { hideGroupMemberDiscriminator } = getGroupConfigWithInfo(groupInfo);
 
   const {
     searchText,
@@ -151,10 +153,6 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
     [groupId]
   );
 
-  const config = groupInfo?.config ?? {};
-  const hideGroupMemberDiscriminator =
-    config.hideGroupMemberDiscriminator ?? false;
-
   if (!groupInfo) {
     return <Problem />;
   }
@@ -240,11 +238,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
             <UserListItem
               userId={member._id}
               popover={
-                <GroupUserPopover
-                  userInfo={member}
-                  groupInfo={groupInfo}
-                  hideDiscriminator={hideGroupMemberDiscriminator}
-                />
+                <GroupUserPopover userInfo={member} groupInfo={groupInfo} />
               }
               hideDiscriminator={hideGroupMemberDiscriminator}
             />
@@ -256,13 +250,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
         <UserListItem
           key={member._id}
           userId={member._id}
-          popover={
-            <GroupUserPopover
-              userInfo={member}
-              groupInfo={groupInfo}
-              hideDiscriminator={hideGroupMemberDiscriminator}
-            />
-          }
+          popover={<GroupUserPopover userInfo={member} groupInfo={groupInfo} />}
           hideDiscriminator={hideGroupMemberDiscriminator}
         />
       );
diff --git a/client/web/src/components/popover/GroupUserPopover.tsx b/client/web/src/components/popover/GroupUserPopover.tsx
index 300be117..b5f978f2 100644
--- a/client/web/src/components/popover/GroupUserPopover.tsx
+++ b/client/web/src/components/popover/GroupUserPopover.tsx
@@ -3,17 +3,22 @@ import { fetchImagePrimaryColor } from '@/utils/image-helper';
 import { Space, Tag } from 'antd';
 import React, { useEffect } from 'react';
 import { getTextColorHex } from 'tailchat-design';
-import { GroupInfo, t, UserBaseInfo } from 'tailchat-shared';
+import {
+  getGroupConfigWithInfo,
+  GroupInfo,
+  t,
+  UserBaseInfo,
+} from 'tailchat-shared';
 import { UserProfileContainer } from '../UserProfileContainer';
 
 export const GroupUserPopover: React.FC<{
   userInfo: UserBaseInfo;
   groupInfo: GroupInfo;
-  hideDiscriminator?: boolean;
 }> = React.memo((props) => {
-  const { userInfo, groupInfo, hideDiscriminator = false } = props;
+  const { userInfo, groupInfo } = props;
   const userExtra = userInfo.extra ?? {};
   const roleNames = getUserRoleNames(userInfo._id, groupInfo);
+  const { hideGroupMemberDiscriminator } = getGroupConfigWithInfo(groupInfo);
 
   useEffect(() => {
     if (userInfo.avatar) {
@@ -28,7 +33,7 @@ export const GroupUserPopover: React.FC<{
       <UserProfileContainer userInfo={userInfo}>
         <div className="text-xl">
           <span className="font-semibold">{userInfo.nickname}</span>
-          {!hideDiscriminator && (
+          {!hideGroupMemberDiscriminator && (
             <span className="opacity-60 ml-1">#{userInfo.discriminator}</span>
           )}
         </div>