devide PageList to DescendantsPageList

packages/app/src/components/DescendantsPageList.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+import PageList from './PageList/PageList';
+
+import { useSWRxPageList } from '~/stores/page';
+
+
+type Props = {
+  path: string,
+}
+
+const DescendantsPageList = (props: Props): JSX.Element => {
+  const { path } = props;
+
+  const [activePage, setActivePage] = useState(1);
+
+  const { data, error: error } = useSWRxPageList(path, activePage);
+
+  function setPageNumber(selectedPageNumber) {
+    setActivePage(selectedPageNumber);
+  }
+
+  if (error != null) {
+    return (
+      <div className="my-5">
+        <div className="text-danger">{error.message}</div>
+      </div>
+    );
+  }
+
+  if (data === undefined) {
+    return (
+      <div className="wiki">
+        <div className="text-muted text-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <PageList pages={data} />
+  );
+};
+
+export default DescendantsPageList;

packages/app/src/components/ForbiddenPage.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import PageListIcon from './Icons/PageListIcon';
 import CustomNavAndContents from './CustomNavigation/CustomNavAndContents';
-import PageList from './PageList';
+import DescendantsPageList from './DescendantsPageList';
 
 
 type Props = {
@@ -17,7 +17,7 @@ const ForbiddenPage = React.memo((props: Props): JSX.Element => {
     return {
       pagelist: {
         Icon: PageListIcon,
-        Content: PageList,
+        Content: DescendantsPageList,
         i18n: t('page_list'),
         index: 0,
       },

packages/app/src/components/NotFoundPage.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import PageListIcon from './Icons/PageListIcon';
 import TimeLineIcon from './Icons/TimeLineIcon';
 import CustomNavAndContents from './CustomNavigation/CustomNavAndContents';
-import PageList from './PageList';
+import DescendantsPageList from './DescendantsPageList';
 import PageTimeline from './PageTimeline';
 
 const NotFoundPage = (): JSX.Element => {
@@ -14,7 +14,7 @@ const NotFoundPage = (): JSX.Element => {
     return {
       pagelist: {
         Icon: PageListIcon,
-        Content: PageList,
+        Content: DescendantsPageList,
         i18n: t('page_list'),
         index: 0,
       },

packages/app/src/components/PageAccessoriesModal.jsx

@@ -17,7 +17,7 @@ import PageContainer from '~/client/services/PageContainer';
 import PageAccessoriesContainer from '~/client/services/PageAccessoriesContainer';
 import PageAttachment from './PageAttachment';
 import PageTimeline from './PageTimeline';
-import PageList from './PageList';
+import DescendantsPageList from './DescendantsPageList';
 import PageHistory from './PageHistory';
 import ShareLink from './ShareLink/ShareLink';
 import { CustomNavTab } from './CustomNavigation/CustomNav';
@@ -116,7 +116,7 @@ const PageAccessoriesModal = (props) => {
               the 'navTabMapping[tabId].Content' for PageAccessoriesModal depends on activeComponents */}
           <TabContent activeTab={activeTab}>
             <TabPane tabId="pagelist">
-              {activeComponents.has('pagelist') && <PageList path={pageContainer.state.path} />}
+              {activeComponents.has('pagelist') && <DescendantsPageList path={pageContainer.state.path} />}
             </TabPane>
             <TabPane tabId="timeline">
               {activeComponents.has('timeline') && <PageTimeline /> }

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

@@ -1,40 +1,29 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Page from './PageList/Page';
+import { IPageHasId } from '~/interfaces/page';
+import { IPagingResult } from '~/interfaces/paging-result';
 
-import { useSWRxPageList } from '~/stores/page';
-
-import PaginationWrapper from './PaginationWrapper';
+import Page from './Page';
+import PaginationWrapper from '../PaginationWrapper';
 
 
 type Props = {
-  path: string,
+  pages: IPagingResult<IPageHasId>,
   liClasses?: string[],
 }
 
 const PageList = (props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { path, liClasses } = props;
+  const { pages, liClasses } = props;
 
   const [activePage, setActivePage] = useState(1);
 
-  const { data: pagesListData, error: errors } = useSWRxPageList(path, activePage);
-
   function setPageNumber(selectedPageNumber) {
     setActivePage(selectedPageNumber);
   }
 
-  if (errors != null) {
-    return (
-      <div className="my-5">
-        {/* eslint-disable-next-line react/no-array-index-key */}
-        {errors.map((error, index) => <div key={index} className="text-danger">{error.message}</div>)}
-      </div>
-    );
-  }
-
-  if (pagesListData == null) {
+  if (pages == null) {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
@@ -46,7 +35,7 @@ const PageList = (props: Props): JSX.Element => {
 
   const liClassesStr = (liClasses ?? ['mb-3']).join(' ');
 
-  const pageList = pagesListData.items.map(page => (
+  const pageList = pages.items.map(page => (
     <li key={page._id} className={liClassesStr}>
       <Page page={page} />
     </li>
@@ -68,8 +57,8 @@ const PageList = (props: Props): JSX.Element => {
       <PaginationWrapper
         activePage={activePage}
         changePage={setPageNumber}
-        totalItemsCount={pagesListData.totalCount}
-        pagingLimit={pagesListData.limit}
+        totalItemsCount={pages.totalCount}
+        pagingLimit={pages.limit}
         align="center"
       />
     </div>

packages/app/src/components/TrashPageList.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import PageListIcon from './Icons/PageListIcon';
 import CustomNavAndContents from './CustomNavigation/CustomNavAndContents';
-import PageList from './PageList';
+import DescendantsPageList from './DescendantsPageList';
 
 
 const TrashPageList = (props) => {
@@ -13,7 +13,7 @@ const TrashPageList = (props) => {
     return {
       pagelist: {
         Icon: PageListIcon,
-        Content: PageList,
+        Content: DescendantsPageList,
         i18n: t('page_list'),
         index: 0,
       },