使用新的组件EditableAvatarGroup

dashboard-v4/dashboard/src/components/like/LikeAvatar.tsx

@@ -1,11 +1,16 @@
 import { useEffect, useState } from "react";
 
-import { ILikeData, ILikeListResponse, TLikeType } from "../api/like";
-import { get } from "../../request";
-import User from "../auth/User";
-import { Popover, Space } from "antd";
-import WatchList from "./WatchList";
-import { WatchAddButton } from "./WatchAdd";
+import {
+  ILikeListResponse,
+  ILikeRequest,
+  ILikeResponse,
+  TLikeType,
+} from "../api/like";
+import { get, post } from "../../request";
+import { IUser } from "../auth/User";
+
+import { IDataType } from "./WatchAdd";
+import EditableAvatarGroup from "./EditableAvatarGroup";
 
 interface IWidget {
   resId?: string;
@@ -13,7 +18,7 @@ interface IWidget {
   type?: TLikeType;
 }
 const LikeAvatar = ({ resId, resType, type }: IWidget) => {
-  const [data, setData] = useState<ILikeData[]>();
+  const [data, setData] = useState<IUser[]>();
   useEffect(() => {
     if (!resId) {
       return;
@@ -23,41 +28,39 @@ const LikeAvatar = ({ resId, resType, type }: IWidget) => {
     get<ILikeListResponse>(url).then((json) => {
       console.info("api response", json);
       if (json.ok) {
-        setData(json.data.rows);
+        setData(json.data.rows.map((item) => item.user));
       }
     });
   }, [resId, type]);
   return (
-    <Space>
-      <Popover trigger={"click"} content={<WatchList data={data} />}>
-        <div>
-          {data?.map((item, id) => {
-            return (
-              <span
-                key={id}
-                style={{ display: "inline-block", marginRight: -8 }}
-              >
-                <User {...item.user} showName={false} hidePopover />
-              </span>
-            );
-          })}
-        </div>
-      </Popover>
-      <WatchAddButton
-        resId={resId}
-        resType={resType}
-        data={data}
-        onAdd={(user: ILikeData) => {
+    <>
+      <EditableAvatarGroup
+        users={data}
+        onFinish={async (values: IDataType) => {
+          if (!resId || !resType) {
+            console.error("no resId or resType", resId, resType);
+            return;
+          }
+          const update: ILikeRequest = {
+            type: "watch",
+            target_id: resId,
+            target_type: resType,
+            user_id: values.user_id,
+          };
+          const url = `/v2/like`;
+          console.info("watch add api request", url, values);
+          const add = await post<ILikeRequest, ILikeResponse>(url, update);
+          console.debug("watch add api response", add);
           setData((origin) => {
             if (origin) {
-              return [...origin, user];
+              return [...origin, add.data.user];
             } else {
-              return [user];
+              return [add.data.user];
             }
           });
         }}
       />
-    </Space>
+    </>
   );
 };
 

dashboard-v4/dashboard/src/components/like/WatchAdd.tsx

@@ -2,54 +2,35 @@ import { useRef } from "react";
 import { ProForm, ProFormInstance } from "@ant-design/pro-components";
 import { PlusOutlined } from "@ant-design/icons";
 
-import { ILikeData, ILikeRequest, ILikeResponse } from "../api/like";
 import UserSelect from "../template/UserSelect";
-import { post } from "../../request";
 import { Button, Divider, Popover } from "antd";
 import WatchList from "./WatchList";
+import { IUser } from "../auth/User";
+
+export interface IDataType {
+  user_id?: string;
+}
 
 interface IWidget {
-  resId?: string;
-  resType?: string;
-  data?: ILikeData[];
-  onAdd?: (user: ILikeData) => void;
+  data?: IUser[];
+  onFinish?: ((formData: IDataType) => Promise<boolean | void>) | undefined;
 }
 
-export const WatchAddButton = ({ resId, resType, data, onAdd }: IWidget) => {
+export const WatchAddButton = ({ data, onFinish }: IWidget) => {
   return (
     <Popover
       trigger={"click"}
-      content={
-        <WatchAdd resId={resId} resType={resType} data={data} onAdd={onAdd} />
-      }
+      content={<WatchAdd data={data} onFinish={onFinish} />}
     >
       <Button type="text" icon={<PlusOutlined />} />
     </Popover>
   );
 };
-const WatchAdd = ({ resId, resType, data, onAdd }: IWidget) => {
+const WatchAdd = ({ data, onFinish }: IWidget) => {
   const formRef = useRef<ProFormInstance>();
   return (
     <div>
-      <ProForm<ILikeRequest>
-        formRef={formRef}
-        onFinish={async (values: ILikeRequest) => {
-          if (!resId || !resType) {
-            console.error("no resId or resType", resId, resType);
-            return;
-          }
-          values.type = "watch";
-          values.target_id = resId;
-          values.target_type = resType;
-          const url = `/v2/like`;
-          console.info("watch add api request", url, values);
-          const add = await post<ILikeRequest, ILikeResponse>(url, values);
-          console.debug("watch add api response", add);
-          if (add.ok) {
-            onAdd && onAdd(add.data);
-          }
-        }}
-      >
+      <ProForm<IDataType> formRef={formRef} onFinish={onFinish}>
         <ProForm.Group>
           <UserSelect name="user_id" multiple={false} />
         </ProForm.Group>

dashboard-v4/dashboard/src/components/like/WatchList.tsx

@@ -1,11 +1,10 @@
 import { Button, List } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
 
-import User from "../auth/User";
-import { ILikeData } from "../api/like";
+import User, { IUser } from "../auth/User";
 
 interface IWidget {
-  data?: ILikeData[];
+  data?: IUser[];
 }
 const WatchList = ({ data }: IWidget) => {
   return (
@@ -15,7 +14,7 @@ const WatchList = ({ data }: IWidget) => {
         <List.Item
           extra={[<Button type="text" danger icon={<DeleteOutlined />} />]}
         >
-          <User {...item.user} />
+          <User {...item} />
         </List.Item>
       )}
     />