inject path to PageList with props

packages/app/src/components/PageAccessoriesModal.jsx

@@ -13,6 +13,7 @@ import AttachmentIcon from './Icons/AttachmentIcon';
 import ShareLinkIcon from './Icons/ShareLinkIcon';
 
 import { withUnstatedContainers } from './UnstatedUtils';
+import PageContainer from '~/client/services/PageContainer';
 import PageAccessoriesContainer from '~/client/services/PageAccessoriesContainer';
 import PageAttachment from './PageAttachment';
 import PageTimeline from './PageTimeline';
@@ -24,7 +25,7 @@ import ExpandOrContractButton from './ExpandOrContractButton';
 
 const PageAccessoriesModal = (props) => {
   const {
-    t, pageAccessoriesContainer, onClose, isGuestUser, isSharedUser,
+    t, pageContainer, pageAccessoriesContainer, onClose, isGuestUser, isSharedUser,
   } = props;
   const isLinkSharingDisabled = pageAccessoriesContainer.appContainer.config.disableLinkSharing;
   const { switchActiveTab } = pageAccessoriesContainer;
@@ -115,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 />}
+              {activeComponents.has('pagelist') && <PageList path={pageContainer.state.path} />}
             </TabPane>
             <TabPane tabId="timeline">
               {activeComponents.has('timeline') && <PageTimeline /> }
@@ -143,11 +144,13 @@ const PageAccessoriesModal = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [PageAccessoriesContainer]);
+const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [PageContainer, PageAccessoriesContainer]);
 
 PageAccessoriesModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   pageAccessoriesContainer: PropTypes.instanceOf(PageAccessoriesContainer).isRequired,
+
   isGuestUser: PropTypes.bool.isRequired,
   isSharedUser: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,

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

@@ -1,20 +1,21 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
 import Page from './PageList/Page';
-import { withUnstatedContainers } from './UnstatedUtils';
-
-import PageContainer from '~/client/services/PageContainer';
 
 import { useSWRxPageList } from '~/stores/page';
 
 import PaginationWrapper from './PaginationWrapper';
 
 
-const PageList = (props) => {
+type Props = {
+  path: string,
+  liClasses?: string[],
+}
+
+const PageList = (props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { path } = pageContainer.state;
+  const { path, liClasses } = props;
 
   const [activePage, setActivePage] = useState(1);
 
@@ -43,12 +44,14 @@ const PageList = (props) => {
     );
   }
 
-  const liClasses = props.liClasses.join(' ');
+  const liClassesStr = (liClasses ?? ['mb-3']).join(' ');
+
   const pageList = pagesListData.items.map(page => (
-    <li key={page._id} className={liClasses}>
+    <li key={page._id} className={liClassesStr}>
       <Page page={page} />
     </li>
   ));
+
   if (pageList.length === 0) {
     return (
       <div className="mt-2">
@@ -73,11 +76,4 @@ const PageList = (props) => {
   );
 };
 
-PageList.propTypes = {
-  liClasses: PropTypes.arrayOf(PropTypes.string),
-};
-PageList.defaultProps = {
-  liClasses: ['mb-3'],
-};
-
 export default PageList;