From 4c20e47399a7f969657cb812ce5c925cae758a9a Mon Sep 17 00:00:00 2001
From: suyiiyii <suyiiyii@gmail.com>
Date: Sun, 22 Sep 2024 13:52:51 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=B7=BB=E5=8A=A0=20Cookie=20?=
 =?UTF-8?q?=E5=A2=9E=E5=88=A0=E6=9F=A5=20=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/cookieManager/CookieModal.tsx    | 18 +++++-
 .../cookieManager/cookieConfigSlice.ts        |  4 +-
 .../features/cookieManager/cookieManager.tsx  | 56 ++++++++++++-------
 admin-frontend/src/utils/type.ts              |  1 -
 4 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/admin-frontend/src/features/cookieManager/CookieModal.tsx b/admin-frontend/src/features/cookieManager/CookieModal.tsx
index f55081f..a0eff15 100644
--- a/admin-frontend/src/features/cookieManager/CookieModal.tsx
+++ b/admin-frontend/src/features/cookieManager/CookieModal.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Form, Input, Modal } from '@arco-design/web-react';
+import { useNewCookieMutation } from './cookieConfigSlice';
 
 interface CookieModalProps {
   visible: boolean;
@@ -10,15 +11,26 @@ interface CookieModalProps {
 function CookieModal({ visible, setVisible, siteName }: CookieModalProps) {
   const FormItem = Form.Item;
   const [content, setContent] = useState<string>('');
-  // const [confirmLoading, setConfirmLoading] = useState(false);
-  const [confirmLoading] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [newCoookie] = useNewCookieMutation();
+
+  const onSubmit = () => {
+    const postPromise: ReturnType<typeof newCoookie> = newCoookie({ siteName, content });
+    setConfirmLoading(true);
+    postPromise.then(() => {
+      setConfirmLoading(false);
+      setVisible(false);
+      setContent('');
+    });
+  };
+
   return (
     <Modal
       title="添加 Cookie"
       visible={visible}
       onCancel={() => setVisible(false)}
       confirmLoading={confirmLoading}
-      onOk={() => setVisible(false)}
+      onOk={onSubmit}
       style={{ maxWidth: '90vw' }}
     >
 
diff --git a/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts b/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts
index 79c9ea2..0b76164 100644
--- a/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts
+++ b/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts
@@ -21,9 +21,9 @@ export const cookieApi = createApi({
       invalidatesTags: ['Cookie'],
     }),
     deleteCookie: builder.mutation<StatusResp, DelCookieParam>({
-      query: ({ siteName, cookieId }) => ({
+      query: ({ cookieId }) => ({
         method: 'DELETE',
-        url: `/cookie/${cookieId}?site_name=${siteName}`,
+        url: `/cookie/${cookieId}`,
       }),
       invalidatesTags: ['Cookie'],
     }),
diff --git a/admin-frontend/src/features/cookieManager/cookieManager.tsx b/admin-frontend/src/features/cookieManager/cookieManager.tsx
index 9d2ce85..2ceb413 100644
--- a/admin-frontend/src/features/cookieManager/cookieManager.tsx
+++ b/admin-frontend/src/features/cookieManager/cookieManager.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import {
   Button,
-  Card, Descriptions, Grid, List, Popover, Typography,
+  Card, Descriptions, Grid, List, Popconfirm, Popover, Typography,
 } from '@arco-design/web-react';
 import { selectSiteConf } from '../globalConf/globalConfSlice';
 import { useAppSelector } from '../../app/hooks';
 import { Cookie, SiteConfig } from '../../utils/type';
-import { useGetCookiesQuery } from './cookieConfigSlice';
+import { useGetCookiesQuery, useDeleteCookieMutation } from './cookieConfigSlice';
 import CookieModal from './CookieModal';
 
 interface CookieSite {
@@ -25,12 +25,19 @@ export default function CookieManager() {
   }));
   const [showModal, setShowModal] = useState(false);
   const [siteName, setSiteName] = useState('');
+  const [deleteCookie] = useDeleteCookieMutation();
 
   const handleAddCookie = (newSiteName: string) => () => {
     console.log(newSiteName);
     setSiteName(newSiteName);
     setShowModal(true);
   };
+  const handleDelCookie = (cookieId: string) => () => {
+    console.log(cookieId);
+    deleteCookie({
+      cookieId,
+    });
+  };
   return (
     <>
       <Typography.Title heading={4} style={{ margin: '15px' }}>Cookie 管理</Typography.Title>
@@ -53,27 +60,34 @@ export default function CookieManager() {
               {cookies.map((cookie) => (
                 <List>
 
-                  <Popover
-                    key={cookie.id}
-                    title={cookie.friendly_name}
-                    content={(
-                      <Descriptions
-                        column={1}
-                        title="Cookie 详情"
-                        data={Object.entries(cookie).map((entry) => ({
-                          label: entry[0].toString(),
-                          value: entry[1].toString(),
-                        }))}
-                      />
-                                        )}
-                  >
-                    <List.Item key={cookie.id}>
-                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <List.Item key={cookie.id}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+
+                      <Popover
+                        key={cookie.id}
+                        title={cookie.friendly_name}
+                        content={(
+                          <Descriptions
+                            column={1}
+                            title="Cookie 详情"
+                            data={Object.entries(cookie).map((entry) => ({
+                              label: entry[0].toString(),
+                              value: typeof (entry[1]) === 'object' ? JSON.stringify(entry[1]) : entry[1].toString(),
+                            }))}
+                          />
+                                                )}
+                      >
                         {cookie.friendly_name}
+                      </Popover>
+                      <Popconfirm
+                        title={`确定删除 Cookie ${cookie.friendly_name} ？`}
+                        onOk={handleDelCookie(cookie.id.toString())}
+                      >
+
                         <Button type="primary" status="danger">删除</Button>
-                      </div>
-                    </List.Item>
-                  </Popover>
+                      </Popconfirm>
+                    </div>
+                  </List.Item>
                 </List>
               ))}
             </Card>
diff --git a/admin-frontend/src/utils/type.ts b/admin-frontend/src/utils/type.ts
index cf7b184..e67e781 100644
--- a/admin-frontend/src/utils/type.ts
+++ b/admin-frontend/src/utils/type.ts
@@ -109,6 +109,5 @@ export interface NewCookieParam {
 }
 
 export interface DelCookieParam {
-  siteName: string
   cookieId: string
 }