79903 change paging number & lift up PaginationWrapper component

packages/app/src/components/SearchPage.jsx

@@ -12,6 +12,7 @@ import SearchPageLayout from './SearchPage/SearchPageLayout';
 import SearchResultContent from './SearchPage/SearchResultContent';
 import SearchResultList from './SearchPage/SearchResultList';
 import SearchControl from './SearchPage/SearchControl';
+import PaginationWrapper from './PaginationWrapper';
 
 export const specificPathNames = {
   user: '/user',
@@ -33,6 +34,8 @@ class SearchPage extends React.Component {
       selectedPage: {},
       selectedPages: new Set(),
       searchResultCount: 0,
+      activePage: 1,
+      pagingLimit: 2,
       excludeUsersHome: true,
       excludeTrash: true,
     };
@@ -43,6 +46,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);
   }
 
   componentDidMount() {
@@ -161,6 +165,12 @@ class SearchPage extends React.Component {
     }
   }
 
+   onPageChagned = (selectedPage) => {
+     this.setState({
+       activePage: selectedPage,
+     });
+   }
+
   renderSearchResultContent = () => {
     return (
       <SearchResultContent
@@ -174,16 +184,25 @@ class SearchPage extends React.Component {
 
   renderSearchResultList = () => {
     return (
-      <SearchResultList
-        pages={this.state.searchedPages}
-        deletionMode={false}
-        selectedPage={this.state.selectedPage}
-        selectedPages={this.state.selectedPages}
-        searchResultCount={this.state.searchResultCount}
-        onClickInvoked={this.selectPage}
-        onChangedInvoked={this.toggleCheckBox}
-      >
-      </SearchResultList>
+      <>
+        <SearchResultList
+          pages={this.state.searchedPages}
+          deletionMode={false}
+          selectedPage={this.state.selectedPage}
+          selectedPages={this.state.selectedPages}
+          onClickInvoked={this.selectPage}
+          onChangedInvoked={this.toggleCheckBox}
+        >
+        </SearchResultList>
+        <div className="my-4 mx-auto">
+          <PaginationWrapper
+            activePage={this.state.activePage}
+            changePage={this.onPageChagned}
+            totalItemsCount={this.state.searchResultCount}
+            pagingLimit={this.state.pagingLimit}
+          />
+        </div>
+      </>
     );
   }
 

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

@@ -1,33 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SearchResultListItem from './SearchResultListItem';
-import PaginationWrapper from '../PaginationWrapper';
 
 class SearchResultList extends React.Component {
 
   render() {
     return (
-      <>
-        {this.props.pages.map((page) => {
-          return (
-            <SearchResultListItem
-              page={page}
-              onClickInvoked={this.props.onClickInvoked}
-              noLink
-            />
-          );
-        })}
-        <div className="my-4 mx-auto">
-          <PaginationWrapper
-            activePage={1}
-            changePage={() => { console.log('page chagned') }} // Todo: replace this with a function to change state vars
-            // a total number of pages retrieved from elasticsearch on the current search condition
-            totalItemsCount={this.props.searchResultCount}
-            // a number of pages to show in one page
-            pagingLimit={5} // Todo: replace this with a state that dynamically changes its value
+      this.props.pages.map((page) => {
+        return (
+          <SearchResultListItem
+            page={page}
+            onClickInvoked={this.props.onClickInvoked}
+            noLink
           />
-        </div>
-      </>
+        );
+      })
     );
   }
 
@@ -37,7 +24,6 @@ SearchResultList.propTypes = {
   pages: PropTypes.array.isRequired,
   deletionMode: PropTypes.bool.isRequired,
   selectedPages: PropTypes.array.isRequired,
-  searchResultCount: PropTypes.number,
   onClickInvoked: PropTypes.func,
   onChangeInvoked: PropTypes.func,
 };