chore: optimization code

bs32g1038 · Feb 17, 2023 · 0c395a9 · 0c395a9
1 parent e2f9e60
commit 0c395a9
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 32 deletions.
diff --git a/client/admin/components/ActionCard/style.module.scss b/client/admin/components/ActionCard/style.module.scss
@@ -1,10 +1,11 @@
 .wrap {
     &:global(.ant-card) {
         background-color: transparent;
+        box-shadow: none !important;
     }
     :global {
         .ant-card-head {
-            padding-left: 0;
+            padding-left: 0 !important;
             border: none;
         }
         .ant-card-body {

diff --git a/client/admin/components/UploadImageButton/index.tsx b/client/admin/components/UploadImageButton/index.tsx
@@ -119,8 +119,8 @@ export default function UploadButton(props: Props) {
             {open.visible && (
                 <ImageEditor
                     src={open.src}
-                    onSave={async (_, designState) => {
-                        const res: Response = await fetch(designState.imgSrc);
+                    onSave={async (_) => {
+                        const res: Response = await fetch(_.imageBase64);
                         const blob: Blob = await res.blob();
                         if (!blob) return;
                         const { type, name, uid } = open;

diff --git a/client/admin/pages/ArticleEdit/Drawer/index.tsx b/client/admin/pages/ArticleEdit/Drawer/index.tsx
@@ -1,38 +1,25 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { Form, Input, Select, Button, Drawer } from 'antd';
-import axios from '@blog/client/admin/axios';
 import EditableTagGroup from '@blog/client/admin/components/EditableTagGroup';
 import { DeleteFilled, SendOutlined } from '@ant-design/icons';
 import style from './style.module.scss';
 import UploadImageButton from '@blog/client/admin/components/UploadImageButton';
+import { useFetchCategoriesMutation } from '../../Categories/service';
 
 const Option = Select.Option;
 const { TextArea } = Input;
 
 export default function Index({ visible, onCancel, formData }) {
-    const [categories, setCategories] = useState([]);
+    const [fetchCategories, { data: categories = [], isLoading }] = useFetchCategoriesMutation();
     const [form] = Form.useForm();
 
-    const prevVisibleRef = useRef();
     useEffect(() => {
-        prevVisibleRef.current = visible;
-    }, [visible]);
-    const prevVisible = prevVisibleRef.current;
+        form.setFieldsValue(formData);
+    }, [form, formData]);
 
     useEffect(() => {
-        if (!visible && prevVisible) {
-            form.resetFields();
-        } else {
-            form.setFieldsValue(formData);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
-
-    useEffect(() => {
-        axios.get('/categories/').then((res) => {
-            setCategories(res.data);
-        });
-    }, []);
+        fetchCategories({ page: 1, limit: 100 });
+    }, [fetchCategories]);
 
     const categoryOptions =
         categories &&
@@ -66,7 +53,9 @@ export default function Index({ visible, onCancel, formData }) {
                         <UploadImageButton></UploadImageButton>
                     </Form.Item>
                     <Form.Item name="category" label="文章分类" rules={[{ required: true, message: '分类不能为空!' }]}>
-                        <Select placeholder="请选择一个分类">{categoryOptions}</Select>
+                        <Select loading={isLoading} placeholder="请选择一个分类">
+                            {categoryOptions}
+                        </Select>
                     </Form.Item>
                     <Form.Item name="tags" label="文章标签">
                         <EditableTagGroup />

diff --git a/client/admin/pages/Categories/index.tsx b/client/admin/pages/Categories/index.tsx
@@ -5,13 +5,13 @@ import Router from 'next/router';
 import { PlusOutlined, DeleteFilled, EditFilled } from '@ant-design/icons';
 import BasicLayout from '@blog/client/admin/layouts';
 import ActionCard from '@blog/client/admin/components/ActionCard';
-import { useDeleteCategoriesMutation, useDeleteCategoryMutation, useLazyFetchCategoriesQuery } from './service';
+import { useDeleteCategoriesMutation, useDeleteCategoryMutation, useFetchCategoriesMutation } from './service';
 import CTable from '@blog/client/admin/components/CTable';
 
 export default function Index() {
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [visible, setVisible] = useState(false);
-    const [fetchCategories, { data = [], isLoading }] = useLazyFetchCategoriesQuery();
+    const [fetchCategories, { data = [], isLoading }] = useFetchCategoriesMutation();
     const fetchData = useCallback(() => {
         const query = {
             page: 1,

diff --git a/client/admin/pages/Categories/service.ts b/client/admin/pages/Categories/service.ts
@@ -2,13 +2,13 @@ import { adminApi } from '@blog/client/admin/api';
 
 export const indexApi = adminApi.injectEndpoints({
     endpoints: (build) => ({
-        fetchCategories: build.query<any, { limit: number; page: number }>({
+        fetchCategories: build.mutation<any, { limit: number; page: number }>({
             query: () => ({
                 url: '/categories',
                 method: 'get',
             }),
         }),
-        fetchCategory: build.query<any, { id: string }>({
+        fetchCategory: build.mutation<any, { id: string }>({
             query: (params) => ({
                 url: '/categories/' + params.id,
                 method: 'get',
@@ -46,8 +46,8 @@ export const indexApi = adminApi.injectEndpoints({
 });
 
 export const {
-    useLazyFetchCategoryQuery,
-    useLazyFetchCategoriesQuery,
+    useFetchCategoriesMutation,
+    useFetchCategoryMutation,
     useDeleteCategoryMutation,
     useDeleteCategoriesMutation,
     useCreateCategoryMutation,

diff --git a/client/admin/pages/CategoryEdit/index.tsx b/client/admin/pages/CategoryEdit/index.tsx
@@ -2,12 +2,12 @@ import React, { useEffect } from 'react';
 import { Form, Input, Button, message } from 'antd';
 import Router, { useRouter } from 'next/router';
 import BasicLayout from '@blog/client/admin/layouts';
-import { useCreateCategoryMutation, useLazyFetchCategoryQuery, useUpdateCategoryMutation } from '../Categories/service';
+import { useCreateCategoryMutation, useFetchCategoryMutation, useUpdateCategoryMutation } from '../Categories/service';
 
 export default function Index() {
     const router = useRouter();
     const [form] = Form.useForm();
-    const [fetchCategory] = useLazyFetchCategoryQuery();
+    const [fetchCategory] = useFetchCategoryMutation();
     useEffect(() => {
         const { id } = router.query;
         if (id) {