82578 render showing page count infomation

packages/app/src/components/SearchPage.jsx

@@ -33,7 +33,7 @@ class SearchPage extends React.Component {
       selectedPages: new Set(),
       searchResultCount: 0,
       activePage: 1,
-      pagingLimit: this.props.appContainer.config.pageLimitationL,
+      pagingLimit: this.props.appContainer.config.pageLimitationL || 50,
       excludeUserPages: true,
       excludeTrashPages: true,
     };
@@ -248,7 +248,8 @@ class SearchPage extends React.Component {
           searchResultMeta={this.state.searchResultMeta}
           searchingKeyword={this.state.searchedKeyword}
           onPagingLimitChanged={this.onPagingLimitChanged}
-          initialPagingLimit={this.props.appContainer.config.pageLimitationL || 50}
+          pagingLimit={this.state.pagingLimit}
+          activePage={this.state.activePage}
         >
         </SearchPageLayout>
       </div>

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

@@ -13,16 +13,24 @@ type Props = {
   SearchResultContent: React.FunctionComponent,
   searchResultMeta: SearchResultMeta,
   searchingKeyword: string,
-  initialPagingLimit: number,
+  pagingLimit: number,
+  activePage: number,
   onPagingLimitChanged: (limit: number) => void
 }
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
   const { t } = useTranslation('');
   const {
-    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword,
+    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword, pagingLimit, activePage,
   } = props;
 
+  const renderShowingPageCountInfo = () => {
+    if (searchResultMeta == null || searchResultMeta.total == null || searchResultMeta.total === 0) return (<span className="ml-3">0 / 0</span>);
+    const leftNum = pagingLimit * (activePage - 1) + 1;
+    const rightNum = (leftNum - 1) + searchResultMeta.results;
+    return <span className="ml-3">{`${leftNum}-${rightNum}`} / {searchResultMeta.total || 0}</span>;
+  };
+
   return (
     <div className="content-main">
       <div className="search-result d-flex" id="search-result">
@@ -34,7 +42,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
               <span className="font-weight-light">{t('search_result.result_meta')} </span>
               <span className="h5">{`"${searchingKeyword}"`}</span>
               {/* Todo: replace "1-10" to the appropriate value */}
-              <span className="ml-3">1-10 / {searchResultMeta.total || 0}</span>
+              {renderShowingPageCountInfo()}
             </div>
             <div className="input-group search-result-select-group">
               <div className="input-group-prepend">
@@ -42,7 +50,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
               </div>
               <select className="custom-select" id="inputGroupSelect01" onChange={(e) => { props.onPagingLimitChanged(Number(e.target.value)) }}>
                 {[20, 50, 100, 200].map((limit) => {
-                  return <option selected={limit === props.initialPagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
+                  return <option selected={limit === props.pagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
                 })}
               </select>
             </div>