chore: Extract paging related functions into standalone hook (#2334)

Author: oil-oil

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 };
+}

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>[] = [
     {

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' }),

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);

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[]) => {

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>[] = [
     {

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>[] = [
     {

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' }),