feat():brick-user-group改成使用useAvatar hook 实现 ref CD-6467

easyops-cn · Nov 2, 2023 · 266216c · 266216c
1 parent fc43614
commit 266216c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 53 deletions.
diff --git a/bricks/presentational-bricks/src/brick-user-group/BrickUserGroup.spec.tsx b/bricks/presentational-bricks/src/brick-user-group/BrickUserGroup.spec.tsx
@@ -3,15 +3,9 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { BrickUserGroup } from "./BrickUserGroup";
 import { UserAdminApi_searchAllUsersInfo } from "@next-sdk/user-service-sdk";
-import { getAvatar } from "@next-libs/hooks";
 import { shallow, mount } from "enzyme";
 
 jest.mock("@next-sdk/user-service-sdk");
-jest.mock("@next-libs/hooks");
-
-(getAvatar as jest.Mock).mockImplementation((user: any) => (
-  <span data-testid={user.name}>{user.name}</span>
-));
 
 const fakeUsers = [
   {
@@ -37,6 +31,7 @@ describe("BrickUserGroup", () => {
   });
   it("should render userNameOrIds", async () => {
     render(<BrickUserGroup userNameOrIds={["a", "b"]} />);
+    await jest.advanceTimersByTime(100);
     await (global as any).flushPromises();
     expect(screen.getByText("a")).toBeTruthy();
   });

diff --git a/bricks/presentational-bricks/src/brick-user-group/BrickUserGroup.tsx b/bricks/presentational-bricks/src/brick-user-group/BrickUserGroup.tsx
@@ -4,10 +4,35 @@ import { NS_PRESENTATIONAL_BRICKS, K } from "../i18n/constants";
 import { Avatar, Tooltip } from "antd";
 import { UserInfo } from "@next-core/brick-types";
 import { GroupProps } from "antd/lib/avatar";
-import { getAvatar } from "@next-libs/hooks";
+import { useAvatar } from "@next-libs/hooks";
 
-import { UserAdminApi_searchAllUsersInfo } from "@next-sdk/user-service-sdk";
+function BasicUser({
+  userNameOrId = "",
+  displayShowKey,
+}: {
+  userNameOrId: string;
+  displayShowKey: boolean;
+}) {
+  const { Avatar, user } = useAvatar(userNameOrId);
+
+  const [userTooltip, setUserTooltip] = useState<string>("");
+
+  useEffect(() => {
+    if (user) {
+      const [name, showKey] = (user as any)["#showKey"];
+      const userName = name || user.nickname || user.instanceId;
+      setUserTooltip(
+        displayShowKey && showKey ? `${userName}(${showKey})` : userName
+      );
+    }
+  }, [user, displayShowKey]);
 
+  return user ? (
+    <Tooltip title={userTooltip} placement="topLeft" key={user.instanceId}>
+      {Avatar}
+    </Tooltip>
+  ) : null;
+}
 interface BrickUserGroupProps {
   userNameOrIds: any;
   configProps?: GroupProps;
@@ -22,43 +47,10 @@ export function BrickUserGroup({
   displayShowKey,
 }: BrickUserGroupProps): React.ReactElement {
   const { t } = useTranslation(NS_PRESENTATIONAL_BRICKS);
-  const [userList, setUserList] = useState<UserInfoWithShowKey[]>([]);
   const [maxCount, setMaxCount] = useState<number>(0);
   const [singleSize, setSingleSize] = useState<number>(0);
   const groupRef = useRef(null);
 
-  const getUserList = async (userNameOrIds: string[]) => {
-    const resultList = (
-      await UserAdminApi_searchAllUsersInfo({
-        query: {
-          $or: [
-            {
-              name: {
-                $in: userNameOrIds,
-              },
-            },
-            {
-              instanceId: {
-                $in: userNameOrIds,
-              },
-            },
-          ],
-        },
-        fields: {
-          name: true,
-          nickname: true,
-          user_icon: true,
-          "#showKey": true,
-        },
-      })
-    ).list as UserInfoWithShowKey[];
-    setUserList(resultList);
-  };
-
-  useEffect(() => {
-    userNameOrIds.length && getUserList(userNameOrIds);
-  }, [userNameOrIds]);
-
   useEffect(() => {
     const groupParentElement = groupRef?.current?.parentElement?.parentElement;
     setTimeout(() => {
@@ -91,19 +83,13 @@ export function BrickUserGroup({
           }
         }
       >
-        {userList?.map((user) => {
-          const [name, showKey] = user["#showKey"];
-          const userName = name || user.nickname || user.instanceId;
-          const userTooltip =
-            displayShowKey && showKey ? `${userName}(${showKey})` : userName;
+        {userNameOrIds.map((userNameOrId: string, index: number) => {
           return (
-            <Tooltip
-              title={userTooltip}
-              placement="topLeft"
-              key={user.instanceId}
-            >
-              {getAvatar(user)}
-            </Tooltip>
+            <BasicUser
+              userNameOrId={userNameOrId}
+              displayShowKey={displayShowKey}
+              key={`${userNameOrId}${index}`}
+            ></BasicUser>
           );
         })}
       </Avatar.Group>