✨ 支持删除 CookieTarget

admin-frontend/src/features/cookieTargetManager/CookieTargetManager.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-  Button, Empty, Space, Table, Typography,
+  Button, Space, Table, Typography,
 } from '@arco-design/web-react';
 import { useDeleteCookieTargetMutation, useGetCookieTargetsQuery } from '../cookieManager/cookieConfigSlice';
 import { CookieTarget } from '../../utils/type';
@@ -11,11 +11,12 @@ export default function () {
   const { cookieId } = useParams();
   const { data: cookieTargets } = useGetCookieTargetsQuery(cookieId);
 
-  console.log(cookieTargets);
   const [showModal, setShowModal] = useState(false);
   const [deleteCookieTarget] = useDeleteCookieTargetMutation();
   const handleAdd = () => {
+    console.log('before', showModal);
     setShowModal(true);
+    console.log('after', showModal);
   };
   const handleDelete = (record: CookieTarget) => () => {
     deleteCookieTarget({
@@ -49,31 +50,25 @@ export default function () {
 
     },
   ];
-  if (cookieId) {
-    return (
-      <>
-        <span>
-          <Typography.Title heading={3}>{`Cookie ${cookieId}`}</Typography.Title>
-        </span>
-        <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAdd}>添加</Button>
-        <Table
-          columns={columns}
-          data={cookieTargets}
-          rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`}
-          scroll={{ x: true }}
-        />
-        {
-          cookieTargets && cookieTargets.length > 0
-        && (
-        <CookieTargetModal
-          visible={showModal}
-          setVisible={setShowModal}
-          cookieId={cookieId}
-        />
-        )
-        }
-      </>
-    );
-  }
-  return <Empty />;
+
+  return (
+    <>
+      <span>
+        <Typography.Title heading={3}>{`Cookie ${cookieId}`}</Typography.Title>
+      </span>
+      <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAdd}>添加</Button>
+      <Table
+        columns={columns}
+        data={cookieTargets}
+        rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`}
+        scroll={{ x: true }}
+      />
+      <CookieTargetModal
+        key={cookieId}
+        visible={showModal}
+        setVisible={setShowModal}
+        cookieId={cookieId}
+      />
+    </>
+  );
 }

admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx

@@ -1,22 +1,25 @@
 import React
   from 'react';
 import { Modal, Select } from '@arco-design/web-react';
-import { SubscribeGroupDetail } from '../../utils/type';
+import { SubscribeConfig, SubscribeGroupDetail } from '../../utils/type';
 import { useNewCookieTargetMutation } from '../cookieManager/cookieConfigSlice';
 import { useGetSubsQuery } from '../subsribeConfigManager/subscribeConfigSlice';
 
 interface SubscribeModalProp {
+  cookieId: number;
   visible: boolean;
   setVisible: (arg0: boolean) => void;
-  cookieId: number;
 }
 
-export default function ({ visible, setVisible, cookieId }: SubscribeModalProp) {
+export default function ({ cookieId, visible, setVisible }: SubscribeModalProp) {
   const [newCookieTarget] = useNewCookieTargetMutation();
 
   const { data: subs } = useGetSubsQuery();
-  const pureSubs = subs ? Object.values(subs)
-    .reduce((pv:Array, cv:SubscribeGroupDetail) => pv.concat(cv.subscribes), []) : [];
+  const pureSubs:SubscribeConfig[] = subs ? Object.values(subs)
+    .reduce((
+      pv:Array<SubscribeConfig>,
+      cv:SubscribeGroupDetail,
+    ) => pv.concat(cv.subscribes), []) : [];
   const [index, setIndex] = React.useState(-1);
   const handleSubmit = (idx:number) => {
     const postPromise: ReturnType<typeof newCookieTarget> = newCookieTarget({
@@ -40,18 +43,16 @@ export default function ({ visible, setVisible, cookieId }: SubscribeModalProp)
         placeholder="选择要关联的 target"
         style={{ width: '100%' }}
         onChange={setIndex}
-
       >
-        {
-          pureSubs.map((sub, idx) => (
+        {pureSubs.length
+          && pureSubs.map((sub, idx) => (
             <Option
               key={JSON.stringify(sub)}
               value={idx}
             >
               {JSON.stringify(sub)}
             </Option>
-          ))
-        }
+          ))}
       </Select>
 
     </Modal>