This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 2aadeff chore: Extract paging related functions into standalone hook
(#2334)
2aadeff is described below
commit 2aadeff96d13290918fe5598210f943e77da6411
Author: oil欧呦 <[email protected]>
AuthorDate: Fri Mar 4 18:17:36 2022 +0800
chore: Extract paging related functions into standalone hook (#2334)
---
web/src/hooks/usePagination.ts | 34 ++++++++++++++++++++++++++++++++++
web/src/pages/Consumer/List.tsx | 15 +++------------
web/src/pages/Plugin/List.tsx | 13 ++-----------
web/src/pages/PluginTemplate/List.tsx | 13 ++-----------
web/src/pages/Route/List.tsx | 14 +++-----------
web/src/pages/SSL/List.tsx | 16 +++-------------
web/src/pages/Service/List.tsx | 15 +++------------
web/src/pages/Upstream/List.tsx | 18 ++++--------------
8 files changed, 54 insertions(+), 84 deletions(-)
diff --git a/web/src/hooks/usePagination.ts b/web/src/hooks/usePagination.ts
new file mode 100644
index 0000000..41938c7
--- /dev/null
+++ b/web/src/hooks/usePagination.ts
@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useState } from 'react';
+import { useLocation, history } from 'umi';
+import querystring from 'query-string';
+
+export default function usePagination() {
+ const location = useLocation();
+ const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
+ useEffect(() => {
+ const { page = 1, pageSize = 10 } = querystring.parse(location.search);
+ setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+ }, [location.search]);
+
+ const savePageList = (page = 1, pageSize = 10) => {
+ history.replace(`${location.pathname}?page=${page}&pageSize=${pageSize}`);
+ };
+
+ return { paginationConfig, savePageList };
+}
diff --git a/web/src/pages/Consumer/List.tsx b/web/src/pages/Consumer/List.tsx
index a0c9425..3326a33 100644
--- a/web/src/pages/Consumer/List.tsx
+++ b/web/src/pages/Consumer/List.tsx
@@ -14,14 +14,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { Popconfirm, Button, notification } from 'antd';
import { history, useIntl } from 'umi';
+import usePagination from '@/hooks/usePagination';
import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string';
import { omit } from 'lodash';
import { DELETE_FIELDS } from '@/constants';
@@ -37,16 +37,7 @@ const Page: React.FC = () => {
const [rawData, setRawData] = useState<Record<string, any>>({});
const [id, setId] = useState('');
const [editorMode, setEditorMode] = useState<'create' | 'update'>('create');
- const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
-
- const savePageList = (page = 1, pageSize = 10) => {
- history.replace(`/consumer/list?page=${page}&pageSize=${pageSize}`);
- };
-
- useEffect(() => {
- const { page = 1, pageSize = 10 } =
querystring.parse(window.location.search);
- setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
- }, [window.location.search]);
+ const { paginationConfig, savePageList } = usePagination();
const columns: ProColumns<ConsumerModule.ResEntity>[] = [
{
diff --git a/web/src/pages/Plugin/List.tsx b/web/src/pages/Plugin/List.tsx
index 3118f8f..c9b4a93 100644
--- a/web/src/pages/Plugin/List.tsx
+++ b/web/src/pages/Plugin/List.tsx
@@ -17,12 +17,12 @@
import React, { useEffect, useRef, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { history, useIntl } from 'umi';
+import usePagination from '@/hooks/usePagination';
import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, Popconfirm, Space, notification } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { omit } from 'lodash';
-import querystring from 'query-string';
import PluginDetail from '@/components/Plugin/PluginDetail';
@@ -35,11 +35,7 @@ const Page: React.FC = () => {
const [initialData, setInitialData] = useState({});
const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
const [name, setName] = useState('');
- const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
-
- const savePageList = (page = 1, pageSize = 10) => {
- history.replace(`/plugin/list?page=${page}&pageSize=${pageSize}`);
- };
+ const { paginationConfig, savePageList } = usePagination();
useEffect(() => {
fetchPluginList().then(setPluginList);
@@ -57,11 +53,6 @@ const Page: React.FC = () => {
}
}, [name]);
- useEffect(() => {
- const { page = 1, pageSize = 10 } =
querystring.parse(window.location.search);
- setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
- }, [window.location.search]);
-
const columns: ProColumns<PluginModule.TransformedPlugin>[] = [
{
title: formatMessage({ id: 'component.global.name' }),
diff --git a/web/src/pages/PluginTemplate/List.tsx
b/web/src/pages/PluginTemplate/List.tsx
index 14cc247..b96ea7c 100644
--- a/web/src/pages/PluginTemplate/List.tsx
+++ b/web/src/pages/PluginTemplate/List.tsx
@@ -21,24 +21,15 @@ import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, notification, Popconfirm, Select, Space, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string';
-
+import usePagination from '@/hooks/usePagination';
import { fetchList, remove, fetchLabelList } from './service';
const Page: React.FC = () => {
const ref = useRef<ActionType>();
const [labelList, setLabelList] = useState<LabelList>({});
- const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
const { formatMessage } = useIntl();
- const savePageList = (page = 1, pageSize = 10) => {
- history.replace(`/plugin-template/list?page=${page}&pageSize=${pageSize}`);
- };
-
- useEffect(() => {
- const { page = 1, pageSize = 10 } =
querystring.parse(window.location.search);
- setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
- }, [window.location.search]);
+ const { paginationConfig, savePageList } = usePagination();
useEffect(() => {
fetchLabelList().then(setLabelList);
diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index 89cda66..1e1760f 100755
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -36,17 +36,18 @@ import {
Tooltip,
} from 'antd';
import { history, useIntl } from 'umi';
+import usePagination from '@/hooks/usePagination';
import { PlusOutlined, ExportOutlined, ImportOutlined, DownOutlined } from
'@ant-design/icons';
import { js_beautify } from 'js-beautify';
import yaml from 'js-yaml';
import moment from 'moment';
import { saveAs } from 'file-saver';
-import querystring from 'query-string';
import { omit } from 'lodash';
import { DELETE_FIELDS } from '@/constants';
import { timestampToLocaleString } from '@/helpers';
import type { RcFile } from 'antd/lib/upload';
+
import {
update,
create,
@@ -86,22 +87,13 @@ const Page: React.FC = () => {
const [rawData, setRawData] = useState<Record<string, any>>({});
const [id, setId] = useState('');
const [editorMode, setEditorMode] = useState<'create' | 'update'>('create');
- const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
+ const { paginationConfig, savePageList } = usePagination();
const [debugDrawVisible, setDebugDrawVisible] = useState(false);
- const savePageList = (page = 1, pageSize = 10) => {
- history.replace(`/routes/list?page=${page}&pageSize=${pageSize}`);
- };
-
useEffect(() => {
fetchLabelList().then(setLabelList);
}, []);
- useEffect(() => {
- const { page = 1, pageSize = 10 } =
querystring.parse(window.location.search);
- setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
- }, [window.location.search]);
-
const rowSelection: any = {
selectedRowKeys,
onChange: (currentSelectKeys: string[]) => {
diff --git a/web/src/pages/SSL/List.tsx b/web/src/pages/SSL/List.tsx
index 7a9858f..145f56f 100644
--- a/web/src/pages/SSL/List.tsx
+++ b/web/src/pages/SSL/List.tsx
@@ -14,31 +14,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { Button, Popconfirm, notification, Tag } from 'antd';
import { useIntl, history } from 'umi';
+import usePagination from '@/hooks/usePagination';
import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string';
-
import { fetchList, remove as removeSSL } from '@/pages/SSL/service';
import { timestampToLocaleString } from '@/helpers';
const Page: React.FC = () => {
const tableRef = useRef<ActionType>();
const { formatMessage } = useIntl();
- const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
-
- const savePageList = (page = 1, pageSize = 10) => {
- history.replace(`/ssl/list?page=${page}&pageSize=${pageSize}`);
- };
-
- useEffect(() => {
- const { page = 1, pageSize = 10 } =
querystring.parse(window.location.search);
- setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
- }, [window.location.search]);
+ const { paginationConfig, savePageList } = usePagination();
const columns: ProColumns<SSLModule.ResponseBody>[] = [
{
diff --git a/web/src/pages/Service/List.tsx b/web/src/pages/Service/List.tsx
index acc7447..0946a4b 100644
--- a/web/src/pages/Service/List.tsx
+++ b/web/src/pages/Service/List.tsx
@@ -14,14 +14,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
import { history, useIntl } from 'umi';
+import usePagination from '@/hooks/usePagination';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import { Button, notification, Popconfirm, Space } from 'antd';
-import querystring from 'query-string';
import { omit } from 'lodash';
import { DELETE_FIELDS } from '@/constants';
@@ -35,16 +35,7 @@ const Page: React.FC = () => {
const [rawData, setRawData] = useState<Record<string, any>>({});
const [id, setId] = useState('');
const [editorMode, setEditorMode] = useState<'create' | 'update'>('create');
- const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
-
- const savePageList = (page = 1, pageSize = 10) => {
- history.replace(`/service/list?page=${page}&pageSize=${pageSize}`);
- };
-
- useEffect(() => {
- const { page = 1, pageSize = 10 } =
querystring.parse(window.location.search);
- setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
- }, [window.location.search]);
+ const { paginationConfig, savePageList } = usePagination();
const columns: ProColumns<ServiceModule.ResponseBody>[] = [
{
diff --git a/web/src/pages/Upstream/List.tsx b/web/src/pages/Upstream/List.tsx
index 52be85e..5d69313 100644
--- a/web/src/pages/Upstream/List.tsx
+++ b/web/src/pages/Upstream/List.tsx
@@ -14,16 +14,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { Popconfirm, Button, notification, Space } from 'antd';
import { history, useIntl } from 'umi';
+
import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string';
import { omit } from 'lodash';
-
+import usePagination from '@/hooks/usePagination';
import { DELETE_FIELDS } from '@/constants';
import { RawDataEditor } from '@/components/RawDataEditor';
@@ -37,19 +37,9 @@ const Page: React.FC = () => {
const [rawData, setRawData] = useState<Record<string, any>>({});
const [id, setId] = useState('');
const [editorMode, setEditorMode] = useState<'create' | 'update'>('create');
- const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10,
current: 1 });
-
+ const { paginationConfig, savePageList } = usePagination();
const { formatMessage } = useIntl();
- const savePageList = (page = 1, pageSize = 10) => {
- history.replace(`/upstream/list?page=${page}&pageSize=${pageSize}`);
- };
-
- useEffect(() => {
- const { page = 1, pageSize = 10 } =
querystring.parse(window.location.search);
- setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
- }, [window.location.search]);
-
const columns: ProColumns<UpstreamModule.ResponseBody>[] = [
{
title: formatMessage({ id: 'page.upstream.list.id' }),
