feat(ui): add a query string for pagination (#636)

tchiotludo · Mar 18, 2021 · 17c541f · 17c541f
1 parent 9d3455d
commit 17c541f
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 103 deletions.
diff --git a/client/src/containers/Connect/ConnectList/ConnectList.jsx b/client/src/containers/Connect/ConnectList/ConnectList.jsx
@@ -14,6 +14,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import Root from "../../../components/Root";
 import SearchBar from "../../../components/SearchBar";
 import Pagination from "../../../components/Pagination";
+import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
 
 class ConnectList extends Root {
   state = {
@@ -44,9 +45,12 @@ class ConnectList extends Root {
   }
 
   componentDidMount() {
-    const { searchData } = this.state;
+    const { searchData, pageNumber } = this.state;
     const query =  new URLSearchParams(this.props.location.search);
-    this.setState({ searchData: { search: (query.get('search'))? query.get('search') : searchData.search }}, () => {
+    this.setState({
+      searchData: { search: (query.get('search'))? query.get('search') : searchData.search },
+      pageNumber: (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)
+    }, () => {
       this.getConnectDefinitions();
     });
   }
@@ -58,9 +62,15 @@ class ConnectList extends Root {
     this.setState({ loading: true });
 
     let response = await this.getApi(uriConnectDefinitions(clusterId, connectId, search, pageNumber));
-    if (response.data.results) {
-      this.handleData(response.data.results);
-      this.setState({ clusterId, totalPageNumber: response.data.page });
+    let data = response.data;
+    if (data.results) {
+      this.handleData(data);
+      this.setState({ selectedCluster: clusterId, totalPageNumber: data.page }, () => {
+        this.props.history.push({
+          pathname: `/ui/${this.state.clusterId}/connect/${this.state.connectId}`,
+          search: `search=${this.state.searchData.search}&page=${pageNumber}`
+        })
+      });
     } else {
       this.setState({ clusterId, tableData: [], totalPageNumber: 0, loading: false });
     }
@@ -70,20 +80,20 @@ class ConnectList extends Root {
     const { clusterId, connectId, definitionToDelete: definition } = this.state;
 
     this.removeApi(uriDeleteDefinition(clusterId, connectId, definition))
-      .then(() => {
-        toast.success(`Definition '${definition}' is deleted`);
-        this.setState({ showDeleteModal: false, definitionToDelete: '' }, () => {
-          this.getConnectDefinitions();
+        .then(() => {
+          toast.success(`Definition '${definition}' is deleted`);
+          this.setState({ showDeleteModal: false, definitionToDelete: '' }, () => {
+            this.getConnectDefinitions();
+          });
+        })
+        .catch(() => {
+          this.setState({ showDeleteModal: false, topicToDelete: {} });
         });
-      })
-      .catch(() => {
-        this.setState({ showDeleteModal: false, topicToDelete: {} });
-      });
   };
 
   handleData = data => {
     let tableData = [];
-    tableData = data.map(connectDefinition => {
+    tableData = data.results.map(connectDefinition => {
       return {
         id: connectDefinition.name || '',
         config: JSON.stringify(connectDefinition.configs) || '',
@@ -96,7 +106,7 @@ class ConnectList extends Root {
       };
     });
 
-    this.setState({ tableData, loading: false });
+    this.setState({ tableData, loading: false, totalPageNumber: data.page });
   };
 
   showDeleteModal = deleteMessage => {
@@ -131,30 +141,16 @@ class ConnectList extends Root {
     });
   }
 
-  handlePageChange = ({ currentTarget: input }) => {
-    const { value } = input;
-    this.setState({ pageNumber: value });
-  };
-
   handleSearch = data => {
     const { searchData } = data;
     this.setState({ pageNumber: 1, searchData }, () => {
       this.getConnectDefinitions();
-      this.props.history.push({
-        pathname: `/ui/${this.state.clusterId}/connect/${this.state.connectId}`,
-        search: `search=${searchData.search}`
-      });
     });
   };
 
   handlePageChangeSubmission = value => {
-    const { totalPageNumber } = this.state;
-    if (value <= 0) {
-      value = 1;
-    } else if (value > totalPageNumber) {
-      value = totalPageNumber;
-    }
-    this.setState({ pageNumber: value }, () => {
+    let pageNumber = getPageNumber(value, this.state.totalPageNumber);
+    this.setState({ pageNumber: pageNumber }, () => {
       this.getConnectDefinitions();
     });
   };
@@ -213,7 +209,7 @@ class ConnectList extends Root {
           <Pagination
               pageNumber={pageNumber}
               totalPageNumber={totalPageNumber}
-              onChange={this.handlePageChange}
+              onChange={handlePageChange}
               onSubmit={this.handlePageChangeSubmission}
           />
         </nav>

diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
@@ -11,6 +11,7 @@ import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Root from "../../../components/Root";
 import {Link} from "react-router-dom";
+import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
 
 class ConsumerGroupList extends Root {
   state = {
@@ -30,40 +31,30 @@ class ConsumerGroupList extends Root {
 
   componentDidMount() {
     const { clusterId } = this.props.match.params;
-    const { search } = this.state;
+    const { search, pageNumber} = this.state;
     const query =  new URLSearchParams(this.props.location.search);
 
-    this.setState({ selectedCluster: clusterId, search: (query.get('search'))? query.get('search') : search }, () => {
+    this.setState({ selectedCluster: clusterId,
+      search: (query.get('search'))? query.get('search') : search,
+      pageNumber: (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)
+    }, () => {
       this.getConsumerGroup();
     });
   }
 
   handleSearch = data => {
     this.setState({ pageNumber: 1, search: data.searchData.search }, () => {
       this.getConsumerGroup();
-      this.props.history.push({
-        pathname: `/ui/${this.state.selectedCluster}/group`,
-        search: `search=${data.searchData.search}`
-      });
     });
   };
 
   handlePageChangeSubmission = value => {
-    const { totalPageNumber } = this.state;
-    if (value <= 0) {
-      value = 1;
-    } else if (value > totalPageNumber) {
-      value = totalPageNumber;
-    }
-    this.setState({ pageNumber: value }, () => {
+    let pageNumber = getPageNumber(value, this.state.totalPageNumber);
+    this.setState({ pageNumber: pageNumber }, () => {
       this.getConsumerGroup();
     });
   };
 
-  handlePageChange = ({ currentTarget: input }) => {
-    const { value } = input;
-    this.setState({ pageNumber: value });
-  };
 
   async getConsumerGroup() {
     const { selectedCluster, pageNumber, search } = this.state;
@@ -73,7 +64,12 @@ class ConsumerGroupList extends Root {
     response = response.data;
     if (response.results) {
       this.handleConsumerGroup(response.results);
-      this.setState({ selectedCluster, totalPageNumber: response.page });
+      this.setState({ selectedCluster, totalPageNumber: response.page }, () =>
+          this.props.history.push({
+            pathname: `/ui/${this.state.selectedCluster}/group`,
+            search: `search=${this.state.search}&page=${pageNumber}`
+          })
+      );
     } else {
       this.setState({ selectedCluster, consumerGroups: [], totalPageNumber: 0, loading: false });
     }
@@ -193,7 +189,7 @@ class ConsumerGroupList extends Root {
           <Pagination
             pageNumber={pageNumber}
             totalPageNumber={totalPageNumber}
-            onChange={this.handlePageChange}
+            onChange={handlePageChange}
             onSubmit={this.handlePageChangeSubmission}
           />
         </nav>

diff --git a/client/src/containers/Schema/SchemaList/SchemaList.jsx b/client/src/containers/Schema/SchemaList/SchemaList.jsx
@@ -15,6 +15,8 @@ import 'ace-builds/src-noconflict/theme-merbivore_soft';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Root from "../../../components/Root";
+import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
+
 
 class SchemaList extends Root {
   state = {
@@ -41,10 +43,14 @@ class SchemaList extends Root {
 
   componentDidMount() {
     let { clusterId } = this.props.match.params;
-    const { searchData } = this.state;
+    const { searchData, pageNumber } = this.state;
     const query =  new URLSearchParams(this.props.location.search);
 
-    this.setState({ selectedCluster: clusterId, searchData: { search: (query.get('search'))? query.get('search') : searchData.search }}, () => {
+    this.setState({
+      selectedCluster: clusterId,
+      searchData: { search: (query.get('search'))? query.get('search') : searchData.search },
+      pageNumber: (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)
+    }, () => {
       this.getSchemaRegistry();
     });
   }
@@ -53,31 +59,18 @@ class SchemaList extends Root {
     const { searchData } = data;
     this.setState({ pageNumber: 1, searchData }, () => {
       this.getSchemaRegistry();
-      this.props.history.push({
-        pathname: `/ui/${this.state.selectedCluster}/schema`,
-        search: `search=${searchData.search}`
-      });
     });
   };
 
   handlePageChangeSubmission = value => {
-    const { totalPageNumber } = this.state;
-    if (value <= 0) {
-      value = 1;
-    } else if (value > totalPageNumber) {
-      value = totalPageNumber;
-    }
-    this.setState({ pageNumber: value }, () => {
+    let pageNumber = parseInt(getPageNumber(value, this.state.totalPageNumber));
+    this.setState({pageNumber: pageNumber}, () => {
       this.getSchemaRegistry();
-    });
-  };
-
-  handlePageChange = ({ currentTarget: input }) => {
-    const { value } = input;
-    this.setState({ pageNumber: value });
-  };
+    })
+  }
 
   async getSchemaRegistry() {
+
     const { selectedCluster, pageNumber } = this.state;
     const { search } = this.state.searchData;
 
@@ -87,12 +80,19 @@ class SchemaList extends Root {
       endpoints.uriSchemaRegistry(selectedCluster, search, pageNumber)
     );
 
-    if (response.data.results) {
-      this.handleSchemaRegistry(response.data.results);
-      this.setState({ selectedCluster, totalPageNumber: response.data.page });
+    let data = response.data;
+    if (data.results) {
+      this.handleSchemaRegistry(data.results);
+      this.setState({ selectedCluster, totalPageNumber: data.page }, () => {
+        this.props.history.push({
+          pathname: `/ui/${this.state.selectedCluster}/schema`,
+          search: `search=${this.state.searchData.search}&page=${pageNumber}`
+        })
+      });
     } else {
       this.setState({ selectedCluster, schemasRegistry: [], totalPageNumber: 0, loading: false });
     }
+
   }
 
   handleSchemaRegistry(schemas) {
@@ -180,7 +180,7 @@ class SchemaList extends Root {
           <Pagination
             pageNumber={pageNumber}
             totalPageNumber={totalPageNumber}
-            onChange={this.handlePageChange}
+            onChange={handlePageChange}
             onSubmit={this.handlePageChangeSubmission}
           />
         </nav>

diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -14,6 +14,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import {Collapse} from 'react-bootstrap';
 import Root from '../../../components/Root';
 import {getClusterUIOptions} from "../../../utils/functions";
+import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
 
 class TopicList extends Root {
   state = {
@@ -68,10 +69,11 @@ class TopicList extends Root {
     const { clusterId } = this.props.match.params;
     const query =  new URLSearchParams(this.props.location.search);
     const {searchData, keepSearch} = this.state;
+    let { pageNumber } = this.state;
     const uiOptions = await getClusterUIOptions(clusterId)
+
     let searchDataTmp;
     let keepSearchTmp = keepSearch;
-
     const topicListSearch = localStorage.getItem('topicListSearch');
     if(topicListSearch) {
       searchDataTmp = JSON.parse(topicListSearch);
@@ -82,9 +84,10 @@ class TopicList extends Root {
         topicListView: (query.get('topicListView'))? query.get('topicListView') :
             (uiOptions && uiOptions.topic && uiOptions.topic.defaultView)? uiOptions.topic.defaultView : searchData.topicListView,
       }
+      pageNumber = (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)
     }
-    this.setState({selectedCluster: clusterId, searchData: searchDataTmp, keepSearch: keepSearchTmp, uiOptions: (uiOptions)? uiOptions.topic : {}}, callBackFunction);
 
+    this.setState({selectedCluster: clusterId, searchData: searchDataTmp, keepSearch: keepSearchTmp, uiOptions: (uiOptions)? uiOptions.topic : {}, pageNumber: pageNumber}, callBackFunction);
   }
 
   showDeleteModal = deleteMessage => {
@@ -124,36 +127,31 @@ class TopicList extends Root {
       this.handleKeepSearchChange(data.keepSearch);
       this.props.history.push({
         pathname: `/ui/${this.state.selectedCluster}/topic`,
-        search: `search=${searchData.search}&topicListView=${searchData.topicListView}`
+        search: `search=${searchData.search}&topicListView=${this.state.searchData.topicListView}&page=${this.state.pageNumber}`
       });
+
     });
   };
 
   handlePageChangeSubmission = value => {
-    const { totalPageNumber } = this.state;
-    if (value <= 0) {
-      value = 1;
-    } else if (value > totalPageNumber) {
-      value = totalPageNumber;
-    }
+    let pageNumber = getPageNumber(value, this.state.totalPageNumber);
 
-    this.setState({ pageNumber: value }, () => {
+    this.setState({ pageNumber: pageNumber }, () => {
       this.getTopics();
+      this.props.history.push({
+        pathname: `/ui/${this.state.selectedCluster}/topic`,
+        search: `search=${this.state.searchData.search}&topicListView=${this.state.searchData.topicListView}&page=${pageNumber}`
+      });
     });
   };
 
-  handlePageChange = ({ currentTarget: input }) => {
-    const { value } = input;
-    this.setState({ pageNumber: value });
-  };
-
   async getTopics() {
     const { selectedCluster, pageNumber } = this.state;
     const { search, topicListView } = this.state.searchData;
     this.setState({ loading: true } );
 
-    let data = await this.getApi(uriTopics(selectedCluster, search, topicListView, pageNumber));
-    data = data.data;
+    let response = await this.getApi(uriTopics(selectedCluster, search, topicListView, pageNumber));
+    let data = response.data;
 
     if (data) {
       if (data.results) {
@@ -421,13 +419,13 @@ class TopicList extends Root {
             }}
             onKeepSearchChange={value => {
                 this.handleKeepSearchChange(value);
-            }}
-            doSubmit={this.handleSearch}
+              }}
+              doSubmit={this.handleSearch}
           />
           <Pagination
             pageNumber={pageNumber}
             totalPageNumber={totalPageNumber}
-            onChange={this.handlePageChange}
+            onChange={handlePageChange}
             onSubmit={this.handlePageChangeSubmission}
           />
         </nav>