81405 use customizeParams for the default liimit number for pages to display

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 { apiv3Get } from '../client/util/apiv3-client';
 
 export const specificPathNames = {
   user: '/user',
@@ -34,9 +35,10 @@ class SearchPage extends React.Component {
       selectedPages: new Set(),
       searchResultCount: 0,
       activePage: 1,
-      pagingLimit: 10, // change to an appropriate limit number
+      pagingLimit: 0,
       excludeUsersHome: true,
       excludeTrash: true,
+      initialPagingLimit: 0,
     };
 
     this.changeURL = this.changeURL.bind(this);
@@ -47,6 +49,7 @@ class SearchPage extends React.Component {
     this.onExcludeUsersHome = this.onExcludeUsersHome.bind(this);
     this.onExcludeTrash = this.onExcludeTrash.bind(this);
     this.onPagingNumberChanged = this.onPagingNumberChanged.bind(this);
+    this.onPagingLimitChanged = this.onPagingLimitChanged.bind(this);
   }
 
   componentDidMount() {
@@ -54,6 +57,11 @@ class SearchPage extends React.Component {
     if (keyword !== '') {
       this.search({ keyword });
     }
+    if (this.state.initialPagingLimit === 0) {
+      apiv3Get('/customize-setting').then((res) => {
+        this.setState({ initialPagingLimit: res.data.customizeParams.pageLimitationL });
+      });
+    }
   }
 
   static getQueryByLocation(location) {
@@ -119,6 +127,13 @@ class SearchPage extends React.Component {
     this.setState({ activePage: 1 }, () => this.search(data));
   }
 
+  /**
+   * change number of pages to display per page and execute search method after.
+   */
+  async onPagingLimitChanged(limit) {
+    this.setState({ pagingLimit: limit }, () => this.search({ keyword: this.state.searchedKeyword }));
+  }
+
   async search(data) {
     const keyword = data.keyword;
     if (keyword === '') {
@@ -240,6 +255,8 @@ class SearchPage extends React.Component {
           SearchResultContent={this.renderSearchResultContent}
           searchResultMeta={this.state.searchResultMeta}
           searchingKeyword={this.state.searchedKeyword}
+          onPagingLimitChanged={this.onPagingLimitChanged}
+          initialPagingLimit={this.state.initialPagingLimit}
         >
         </SearchPageLayout>
       </div>

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -12,7 +12,9 @@ type Props = {
   SearchResultList: React.FunctionComponent,
   SearchResultContent: React.FunctionComponent,
   searchResultMeta: SearchResultMeta,
-  searchingKeyword: string
+  searchingKeyword: string,
+  initialPagingLimit: number,
+  onPagingLimitChanged: (limit: number) => void
 }
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
@@ -32,9 +34,9 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
               <div className="input-group-prepend">
                 <label className="input-group-text text-secondary" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
               </div>
-              <select className="custom-select" id="inputGroupSelect01">
+              <select className="custom-select" id="inputGroupSelect01" onChange={(e) => { props.onPagingLimitChanged(Number(e.target.value)) }}>
                 {[20, 50, 100, 200].map((limit) => {
-                  return <option selected={limit === 50} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
+                  return <option selected={limit === props.initialPagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
                 })}
               </select>
             </div>