feat: remove custom hooks and add ahooks

web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js

@@ -92,6 +92,7 @@ context('Create PluginTemplate Binding To Route', () => {
   it('should delete the pluginTemplate failure', function () {
     cy.visit('plugin-template/list');
     cy.get(selector.refresh).click();
+
     cy.get(selector.descriptionSelector).type(data.pluginTemplateName);
     cy.contains('button', 'Search').click();
     cy.contains(data.pluginTemplateName).siblings().contains('Delete').click();
@@ -102,6 +103,7 @@ context('Create PluginTemplate Binding To Route', () => {
 
   it('should edit the route with pluginTemplate', function () {
     cy.visit('routes/list');
+
     cy.get(selector.nameSelector).type(data.routeName);
     cy.contains('Search').click();
     cy.contains(data.routeName).siblings().contains('Configure').click();

web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js

@@ -40,7 +40,6 @@ context('Create and Delete Upstream', () => {
   it('should create upstream with no nodes', function () {
     cy.visit('/');
     cy.contains('Upstream').click();
-
     cy.contains('Create').click();
 
     cy.get(selector.name).type(data.upstreamName);

web/package.json

@@ -60,6 +60,7 @@
     "@rjsf/antd": "2.2.0",
     "@rjsf/core": "2.2.0",
     "@types/js-yaml": "^4.0.0",
+    "ahooks": "^3.7.1",
     "ajv": "^7.0.3",
     "ajv-formats": "^1.5.1",
     "antd": "^4.4.0",

web/src/pages/Consumer/Create.tsx

@@ -25,7 +25,7 @@ import PluginPage from '@/components/Plugin';
 import Step1 from './components/Step1';
 import Preview from './components/Preview';
 import { fetchItem, create, update } from './service';
-import useRequest from '@/hooks/useRequest';
+import { useRequest } from 'ahooks';
 
 const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
@@ -44,7 +44,7 @@ const Page: React.FC = (props) => {
     }
   }, []);
 
-  const { fn: createConsumers, loading: submitLoading } = useRequest(create);
+  const { runAsync: createConsumers, loading: submitLoading } = useRequest(create);
 
   const onSubmit = () => {
     const data = { ...form1.getFieldsValue(), plugins } as ConsumerModule.Entity;

web/src/pages/Proto/components/ProtoDrawer/index.tsx

@@ -22,8 +22,7 @@ import { Input } from 'antd';
 
 import { create, update } from '../../service';
 import styles from './index.less';
-import useThrottle from '@/hooks/useThrottle';
-import useRequest from '@/hooks/useRequest';
+import { useRequest, useThrottleFn } from 'ahooks';
 
 const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
   protoData,
@@ -40,9 +39,9 @@ const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
     form.setFieldsValue(protoData);
   }, [visible]);
 
-  const { fn: createProto, loading: submitLoading } = useRequest(create);
+  const { runAsync: createProto, loading: submitLoading } = useRequest(create);
 
-  const { fn: submit } = useThrottle(async () => {
+  const { run: submit } = useThrottleFn(async () => {
     await form.validateFields();
     const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
     if (editMode === 'create') {

web/src/pages/Route/Create.tsx

@@ -32,7 +32,7 @@ import CreateStep4 from './components/CreateStep4';
 import { DEFAULT_STEP_1_DATA, DEFAULT_STEP_3_DATA } from './constants';
 import ResultView from './components/ResultView';
 import styles from './Create.less';
-import useRequest from '@/hooks/useRequest';
+import { useRequest } from 'ahooks';
 
 const { Step } = Steps;
 
@@ -227,7 +227,7 @@ const Page: React.FC<Props> = (props) => {
     return true;
   };
 
-  const { fn: createRoutes, loading: submitLoading } = useRequest(create);
+  const { runAsync: createRoutes, loading: submitLoading } = useRequest(create);
 
   const onStepChange = (nextStep: number) => {
     const onUpdateOrCreate = () => {
@@ -247,11 +247,9 @@ const Page: React.FC<Props> = (props) => {
         if (path.indexOf('duplicate') !== -1) {
           delete routeData.form1Data.id;
         }
-        createRoutes(routeData)
-          .then(() => {
-            setStep(5);
-          })
-          .catch(() => {});
+        createRoutes(routeData).then(() => {
+          setStep(5);
+        });
       }
     };
 

web/src/pages/Route/List.tsx

@@ -59,7 +59,7 @@ import { DebugDrawView } from './components/DebugViews';
 import { RawDataEditor } from '@/components/RawDataEditor';
 import { EXPORT_FILE_MIME_TYPE_SUPPORTED } from './constants';
 import DataLoaderImport from '@/pages/Route/components/DataLoader/Import';
-import useThrottle from '@/hooks/useThrottle';
+import { useThrottleFn } from 'ahooks';
 
 const { OptGroup, Option } = Select;
 
@@ -111,7 +111,7 @@ const Page: React.FC = () => {
 
   const [publishOfflineLoading, setPublishOfflineLoading] = useState<string>('');
 
-  const { fn: handlePublishOffline } = useThrottle(
+  const { run: handlePublishOffline } = useThrottleFn(
     (rid: string, status: RouteModule.RouteStatus) => {
       setPublishOfflineLoading(rid);
       updateRouteStatus(rid, status)

web/src/pages/SSL/Create.tsx

@@ -64,9 +64,8 @@ const Page: React.FC = (props) => {
     (id ? update(id, sslData) : create(sslData))
       .then(() => {
         history.replace('/ssl/list');
-        setSubmitLoading(false);
       })
-      .catch(() => {
+      .finally(() => {
         setSubmitLoading(false);
       });
   };

web/src/pages/Service/Create.tsx

@@ -90,10 +90,11 @@ const Page: React.FC = (props) => {
           })}`,
         });
         history.push('/service/list');
-        setSubmitLoading(false);
       })
       .catch(() => {
         setStep(3);
+      })
+      .finally(() => {
         setSubmitLoading(false);
       });
   };

web/src/pages/Upstream/Create.tsx

@@ -72,9 +72,8 @@ const Page: React.FC = (props) => {
             }`,
           });
           history.replace('/upstream/list');
-          setSubmitLoading(false);
         })
-        .catch(() => {
+        .finally(() => {
           setSubmitLoading(false);
         });
     });