move PaginationWrapper to SearchPage2

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

@@ -1,21 +1,16 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback } from 'react';
 import { IPageWithMeta, isIPageInfoForListing } from '~/interfaces/page';
 import { IPageSearchMeta } from '~/interfaces/search';
 import { useIsGuestUser } from '~/stores/context';
 import { useSWRxPageInfoForList } from '~/stores/page';
 
 import { PageListItemL } from '../PageList/PageListItemL';
-import PaginationWrapper from '../PaginationWrapper';
 
 
 type Props = {
   pages: IPageWithMeta<IPageSearchMeta>[],
   isCheckedAllItems?: boolean,
-  searchResultCount?: number,
   selectedPageId?: string,
-  activePage?: number,
-  pagingLimit?: number,
-  onPagingNumberChanged?: (activePage: number) => void,
   onPageSelected?: (page?: IPageWithMeta<IPageSearchMeta>) => void,
   onClickCheckbox?: (pageId: string) => void,
 }
@@ -81,17 +76,6 @@ const SearchResultList: FC<Props> = (props:Props) => {
           />
         );
       })}
-      {props.searchResultCount != null && props.searchResultCount > 0 && (
-        <div className="my-4 mx-auto">
-          <PaginationWrapper
-            activePage={props.activePage || 1}
-            changePage={props.onPagingNumberChanged}
-            totalItemsCount={props.searchResultCount || 0}
-            pagingLimit={props.pagingLimit}
-          />
-        </div>
-      )}
-
     </ul>
   );
 

packages/app/src/components/SearchPage2.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import { IFormattedSearchResult } from '~/interfaces/search';
 
 import { useSWRxFullTextSearch } from '~/stores/search';
+import PaginationWrapper from './PaginationWrapper';
 
 import SearchPageBase from './SearchPage2/SearchPageBase';
 
@@ -67,9 +68,13 @@ export const SearchPage = (props: Props): JSX.Element => {
   } = props;
 
   const { data, conditions } = useSWRxFullTextSearch('sand', {
-    limit: 20,
+    limit: 5,
   });
 
+  const pagingNumberChangedHandler = useCallback((activePage: number) => {
+    // TODO implement
+  }, []);
+
   return (
     <SearchPageBase
       appContainer={appContainer}
@@ -92,6 +97,24 @@ export const SearchPage = (props: Props): JSX.Element => {
           />
         );
       }}
+      SearchPager={() => {
+        // when pager is not needed
+        if (data == null || data.meta.hitsCount === data.meta.total) {
+          return <></>;
+        }
+
+        const { total } = data.meta;
+        const { offset, limit } = conditions;
+
+        return (
+          <PaginationWrapper
+            activePage={Math.floor(offset / limit) + 1}
+            totalItemsCount={total}
+            pagingLimit={limit}
+            changePage={pagingNumberChangedHandler}
+          />
+        );
+      }}
     />
   );
 };

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -14,13 +14,15 @@ type Props = {
 
   SearchControl: React.FunctionComponent,
   SearchResultListHead: React.FunctionComponent,
+  SearchPager: React.FunctionComponent,
+
 }
 
 const SearchPageBase: FC<Props> = (props: Props) => {
   const {
     appContainer,
     pages,
-    SearchControl, SearchResultListHead,
+    SearchControl, SearchResultListHead, SearchPager,
   } = props;
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -31,8 +33,6 @@ const SearchPageBase: FC<Props> = (props: Props) => {
   const [highlightKeywords, setHightlightKeywords] = useState<string[]>([]);
   const [selectedPageWithMeta, setSelectedPageWithMeta] = useState<IPageWithMeta<IPageSearchMeta> | undefined>();
 
-  const isLoading = pages == null;
-
   // select first item on load
   useEffect(() => {
     if (selectedPageWithMeta == null && pages != null && pages.length > 0) {
@@ -40,6 +40,9 @@ const SearchPageBase: FC<Props> = (props: Props) => {
     }
   }, [pages, selectedPageWithMeta]);
 
+  const isLoading = pages == null;
+
+
   return (
     <div className="content-main">
       <div className="search-result d-flex" id="search-result">
@@ -67,6 +70,9 @@ const SearchPageBase: FC<Props> = (props: Props) => {
                     onPageSelected={page => setSelectedPageWithMeta(page)}
                   />
                 </div>
+                <div className="my-4 d-flex justify-content-center">
+                  <SearchPager />
+                </div>
               </div>
 
             </div>