feat: remove custom hooks and add ahooks

apache · Oct 13, 2022 · bc4650c · bc4650c
1 parent 4b0cb0a
commit bc4650c
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 176 deletions.
diff --git a/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js b/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js
@@ -102,6 +102,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();

diff --git a/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js b/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);

diff --git a/web/package.json b/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",

diff --git a/web/src/hooks/useLatest.ts b/web/src/hooks/useLatest.ts
diff --git a/web/src/hooks/useRequest.ts b/web/src/hooks/useRequest.ts
diff --git a/web/src/hooks/useThrottle.ts b/web/src/hooks/useThrottle.ts
diff --git a/web/src/hooks/useUnmount.ts b/web/src/hooks/useUnmount.ts
diff --git a/web/src/pages/Consumer/Create.tsx b/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;

diff --git a/web/src/pages/Proto/components/ProtoDrawer/index.tsx b/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') {

diff --git a/web/src/pages/Route/Create.tsx b/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 = () => {

diff --git a/web/src/pages/Route/List.tsx b/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)

diff --git a/web/src/pages/SSL/Create.tsx b/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);
       });
   };

diff --git a/web/src/pages/Service/Create.tsx b/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);
       });
   };

diff --git a/web/src/pages/Upstream/Create.tsx b/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);
         });
     });

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -2539,6 +2539,11 @@
   resolved "https://registry.yarnpkg.com/@types/js-beautify/-/js-beautify-1.13.1.tgz#d4739266c5dcad561226cd1ec5407fa0542d863d"
   integrity sha512-F3YCoZS//n74Wu+hxoVrxX1H8qaWo+WAgQ+ObmFH4ZFwI0fIwiJTW7pvkCRShw8ST7+ej7sB68K+ZHAZgK4S4Q==
 
+"@types/js-cookie@^2.x.x":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
+  integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
+
 "@types/js-yaml@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.0.tgz#d1a11688112091f2c711674df3a65ea2f47b5dfb"
@@ -3843,6 +3848,25 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
+ahooks-v3-count@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz#ddeb392e009ad6e748905b3cbf63a9fd8262ca80"
+  integrity sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==
+
+ahooks@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/ahooks/-/ahooks-3.7.1.tgz#f0c51ed85c82144fb1356e89b995584ece1edaf2"
+  integrity sha512-9fooKjhScNyJaIPnlWd13LkY1gQYqv3BqwSA9ynHg1ZUtDqAICuCRoedV97ylrEL6QqI4zeq3bO3lQxkfWVNcg==
+  dependencies:
+    "@types/js-cookie" "^2.x.x"
+    ahooks-v3-count "^1.0.0"
+    dayjs "^1.9.1"
+    intersection-observer "^0.12.0"
+    js-cookie "^2.x.x"
+    lodash "^4.17.21"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.0.0"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -6193,6 +6217,11 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"
   integrity sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==
 
+dayjs@^1.9.1:
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
+  integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8933,6 +8962,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+intersection-observer@^0.12.0:
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
+  integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==
+
 intl-format-cache@^4.2.21:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.3.1.tgz#484d31a9872161e6c02139349b259a6229ade377"
@@ -10061,6 +10095,11 @@ js-beautify@^1.13.0:
     mkdirp "^1.0.4"
     nopt "^5.0.0"
 
+js-cookie@^2.x.x:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -14875,6 +14914,11 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+screenfull@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+
 scroll-into-view-if-needed@^2.2.25:
   version "2.2.27"
   resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.27.tgz#c696e439bb50128abc558317b39c929907bd0620"