refactor DescendantsPageList

packages/app/src/components/DescendantsPageList.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 
-import PageList from './PageList/PageList';
-
 import { useSWRxPageList } from '~/stores/page';
 
+import PageList from './PageList/PageList';
+import PaginationWrapper from './PaginationWrapper';
 
 type Props = {
   path: string,
@@ -39,7 +39,17 @@ const DescendantsPageList = (props: Props): JSX.Element => {
   }
 
   return (
-    <PageList pages={data} />
+    <>
+      <PageList pages={data} />
+
+      <PaginationWrapper
+        activePage={activePage}
+        changePage={setPageNumber}
+        totalItemsCount={data.totalCount}
+        pagingLimit={data.limit}
+        align="center"
+      />
+    </>
   );
 };
 

packages/app/src/components/PageList/PageList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { IPageHasId } from '~/interfaces/page';
@@ -10,18 +10,11 @@ import PaginationWrapper from '../PaginationWrapper';
 
 type Props = {
   pages: IPagingResult<IPageHasId>,
-  liClasses?: string[],
 }
 
 const PageList = (props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { pages, liClasses } = props;
-
-  const [activePage, setActivePage] = useState(1);
-
-  function setPageNumber(selectedPageNumber) {
-    setActivePage(selectedPageNumber);
-  }
+  const { pages } = props;
 
   if (pages == null) {
     return (
@@ -33,8 +26,6 @@ const PageList = (props: Props): JSX.Element => {
     );
   }
 
-  const liClassesStr = (liClasses ?? ['mb-3']).join(' ');
-
   const pageList = pages.items.map(page => (
     <li key={page._id} className={liClassesStr}>
       <PageListItemS page={page} />
@@ -54,13 +45,6 @@ const PageList = (props: Props): JSX.Element => {
       <ul className="page-list-ul page-list-ul-flat">
         {pageList}
       </ul>
-      <PaginationWrapper
-        activePage={activePage}
-        changePage={setPageNumber}
-        totalItemsCount={pages.totalCount}
-        pagingLimit={pages.limit}
-        align="center"
-      />
     </div>
   );
 };