79903 use componentDidUpdate instead of passing activePage to search method

packages/app/src/components/SearchPage.jsx

@@ -45,7 +45,7 @@ class SearchPage extends React.Component {
     this.toggleCheckBox = this.toggleCheckBox.bind(this);
     this.onExcludeUsersHome = this.onExcludeUsersHome.bind(this);
     this.onExcludeTrash = this.onExcludeTrash.bind(this);
-    this.onPageChagned = this.onPageChagned.bind(this);
+    this.onPagingNumberChanged = this.onPagingNumberChanged.bind(this);
   }
 
   componentDidMount() {
@@ -55,6 +55,12 @@ class SearchPage extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.activePage !== prevState.activePage) {
+      this.search({ keyword: this.state.searchedKeyword });
+    }
+  }
+
   static getQueryByLocation(location) {
     const search = location.search || '';
     const query = {};
@@ -100,13 +106,11 @@ class SearchPage extends React.Component {
     return query;
   }
 
-  onPageChagned = (activePage) => {
+  async onPagingNumberChanged(activePage) {
     this.setState({ activePage });
-    // pass the activePage to the search method as the above setState does not immediately change the state
-    this.search({ keyword: this.state.searchedKeyword, activePage });
   }
 
-  search(data) {
+  async search(data) {
     const keyword = data.keyword;
     if (keyword === '') {
       this.setState({
@@ -125,37 +129,37 @@ class SearchPage extends React.Component {
       searchingKeyword: keyword,
     });
     const pagingLimit = this.state.pagingLimit;
-    const activePage = data.activePage || 1; // has activePage only when pagination number clicked
-    const offset = (activePage * pagingLimit) - pagingLimit;
-    this.props.appContainer.apiGet('/search', {
-      q: this.createSearchQuery(keyword),
-      limit: pagingLimit,
-      offset,
-    })
-      .then((res) => {
-        this.changeURL(keyword);
-        if (res.data.length > 0) {
-          this.setState({
-            searchedKeyword: keyword,
-            searchedPages: res.data,
-            searchResultMeta: res.meta,
-            searchResultCount: res.meta.total,
-            selectedPage: res.data[0],
-          });
-        }
-        else {
-          this.setState({
-            searchedKeyword: keyword,
-            searchedPages: [],
-            searchResultMeta: {},
-            searchResultCount: 0,
-            selectedPage: {},
-          });
-        }
-      })
-      .catch((err) => {
-        toastError(err);
+    const offset = (this.state.activePage * pagingLimit) - pagingLimit;
+    try {
+      const res = await this.props.appContainer.apiGet('/search', {
+        q: this.createSearchQuery(keyword),
+        limit: pagingLimit,
+        offset,
       });
+      this.changeURL(keyword);
+      if (res.data.length > 0) {
+        this.setState({
+          searchedKeyword: keyword,
+          searchedPages: res.data,
+          searchResultMeta: res.meta,
+          searchResultCount: res.meta.total,
+          selectedPage: res.data[0],
+        });
+      }
+      else {
+        this.setState({
+          searchedKeyword: keyword,
+          searchedPages: [],
+          searchResultMeta: {},
+          searchResultCount: 0,
+          selectedPage: {},
+          activePage: 1,
+        });
+      }
+    }
+    catch (err) {
+      toastError(err);
+    }
   }
 
   selectPage= (pageId) => {
@@ -197,7 +201,7 @@ class SearchPage extends React.Component {
         onClickInvoked={this.selectPage}
         onChangedInvoked={this.toggleCheckBox}
         activePage={this.state.activePage}
-        onPageChagned={this.onPageChagned}
+        onPagingNumberChanged={this.onPagingNumberChanged}
         searchResultCount={this.state.searchResultCount}
         pagingLimit={this.state.pagingLimit}
       />

packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { setupMaster } from 'cluster';
 import SearchResultListItem from './SearchResultListItem';
 import PaginationWrapper from '../PaginationWrapper';
 
@@ -21,14 +20,16 @@ class SearchResultList extends React.Component {
             />
           );
         })}
-        <div className="my-4 mx-auto">
-          <PaginationWrapper
-            activePage={this.props.activePage}
-            changePage={this.props.onPageChagned}
-            totalItemsCount={this.props.searchResultCount}
-            pagingLimit={this.props.pagingLimit}
-          />
-        </div>
+        {this.props.searchResultCount > 0 && (
+          <div className="my-4 mx-auto">
+            <PaginationWrapper
+              activePage={this.props.activePage}
+              changePage={this.props.onPagingNumberChanged}
+              totalItemsCount={this.props.searchResultCount}
+              pagingLimit={this.props.pagingLimit}
+            />
+          </div>
+        )}
       </>
     );
   }
@@ -42,7 +43,7 @@ SearchResultList.propTypes = {
   onClickInvoked: PropTypes.func,
   onChangeInvoked: PropTypes.func,
   activePage: PropTypes.number,
-  onPageChagned: PropTypes.func,
+  onPagingNumberChanged: PropTypes.func,
   searchResultCount: PropTypes.number,
   pagingLimit: PropTypes.number,
 };