Merge pull request #2674 from weseek/display-pagelist-on-modal-body

Display pagelist on modal body

src/client/js/components/PageAccessoriesModal.jsx

@@ -15,6 +15,7 @@ import AttachmentIcon from './Icons/AttachmentIcon';
 import { withUnstatedContainers } from './UnstatedUtils';
 import PageAccessoriesContainer from '../services/PageAccessoriesContainer';
 import PageAttachment from './PageAttachment';
+import PageList from './PageList';
 
 const PageAccessoriesModal = (props) => {
   const { t, pageAccessoriesContainer } = props;
@@ -72,7 +73,9 @@ const PageAccessoriesModal = (props) => {
             </NavItem>
           </Nav>
           <TabContent activeTab={activeTab}>
-            <TabPane tabId="pagelist"></TabPane>
+            <TabPane tabId="pagelist">
+              {pageAccessoriesContainer.state.activeComponents.has('pagelist') && <PageList />}
+            </TabPane>
             <TabPane tabId="timeline"></TabPane>
             <TabPane tabId="recent-changes"></TabPane>
             <TabPane tabId="attachment" className="p-4">
@@ -96,7 +99,6 @@ PageAccessoriesModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   // pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   pageAccessoriesContainer: PropTypes.instanceOf(PageAccessoriesContainer).isRequired,
-
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func,
 };

src/client/js/components/PageList.jsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Page from './PageList/Page';
+import { withUnstatedContainers } from './UnstatedUtils';
+
+import AppContainer from '../services/AppContainer';
+import PageContainer from '../services/PageContainer';
+
+
+const PageList = (props) => {
+  const { appContainer, pageContainer } = props;
+  const { path } = pageContainer.state;
+  const [pages, setPages] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+
+  const getPageList = useCallback(async() => {
+    const res = await appContainer.apiv3Get('/pages/list', { path });
+
+    setPages(res.data.pages);
+    setIsLoading(true);
+  }, [appContainer, path]);
+
+  useEffect(() => {
+    getPageList();
+  }, [getPageList]);
+
+
+  if (isLoading === false) {
+    return (
+      <div className="wiki">
+        <div className="text-muted test-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      </div>
+    );
+  }
+
+  return pages.map(page => (
+    <li key={page._id}>
+      <Page page={page} />
+    </li>
+  ));
+};
+
+const PageListWrapper = withUnstatedContainers(PageList, [AppContainer, PageContainer]);
+
+
+PageList.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer),
+  pageContainer: PropTypes.instanceOf(PageContainer),
+};
+
+export default PageListWrapper;

src/server/routes/apiv3/pages.js

@@ -84,10 +84,7 @@ module.exports = (crowi) => {
   });
 
   router.get('/list', accessTokenParser, loginRequired, async(req, res) => {
-
-    // path は一時的なものです。クライアントを実装した際に渡します。GW-3297 or 3298
-    const path = '/hoge';
-
+    const { path } = req.query;
     try {
       const result = await Page.findListWithDescendants(path, req.user);
       return res.apiv3(result);