refactor duplicate

src/client/js/app.jsx

@@ -22,7 +22,6 @@ import PageComments from './components/PageComments';
 import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageManagement from './components/Page/PageManagement';
-import PageDuplicateModal from './components/PageDuplicateModal';
 import TrashPageAlert from './components/Page/TrashPageAlert';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
@@ -92,7 +91,6 @@ if (pageContainer.state.pageId != null) {
     'page-attachment': <PageAttachment />,
     'page-comment-write': <CommentEditorLazyRenderer />,
     'page-management': <PageManagement />,
-    'page-duplicate-modal': <PageDuplicateModal />,
 
     'revision-toc': <TableOfContents />,
     'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,

src/client/js/components/Page/PageManagement.jsx

@@ -8,6 +8,7 @@ import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import PageDeleteModal from '../PageDeleteModal';
 import PageRenameModal from '../PageRenameModal';
+import PageDuplicateModal from '../PageDuplicateModal';
 
 
 const PageManagement = (props) => {
@@ -18,6 +19,7 @@ const PageManagement = (props) => {
   const isTopPagePath = isTopPage(path);
 
   const [isPageRenameModalShown, setIsPageRenameModalShown] = useState(false);
+  const [isPageDuplicateModalShown, setIsPageDuplicateModalShown] = useState(false);
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
 
   function openPageRenameModalHandler() {
@@ -28,6 +30,14 @@ const PageManagement = (props) => {
     setIsPageRenameModalShown(false);
   }
 
+  function openPageDuplicateModalHandler() {
+    setIsPageDuplicateModalShown(true);
+  }
+
+  function closePageDuplicateModalHandler() {
+    setIsPageDuplicateModalShown(false);
+  }
+
   function openPageDeleteModalHandler() {
     setIsPageDeleteModalShown(true);
   }
@@ -43,7 +53,7 @@ const PageManagement = (props) => {
         <a className="dropdown-item" type="button" onClick={openPageRenameModalHandler}>
           <i className="icon-fw icon-action-redo"></i> { t('Move/Rename') }
         </a>
-        <a className="dropdown-item" type="button" onClick={pageContainer.openPageDuplicateModal}>
+        <a className="dropdown-item" type="button" onClick={openPageDuplicateModalHandler}>
           <i className="icon-fw icon-docs"></i> { t('Duplicate') }
         </a>
         <div className="dropdown-divider"></div>
@@ -87,6 +97,10 @@ const PageManagement = (props) => {
         onClose={closePageRenameModalHandler}
         path={path}
       />
+      <PageDuplicateModal
+        isOpen={isPageDuplicateModalShown}
+        onClose={closePageDuplicateModalHandler}
+      />
       <PageDeleteModal
         isOpen={isPageDeleteModalShown}
         onClose={closePageDeleteModalHandler}

src/client/js/components/PageDuplicateModal.jsx

@@ -61,8 +61,8 @@ const PageDuplicateModal = (props) => {
   }
 
   return (
-    <Modal isOpen={pageContainer.state.isPageDuplicateModalShown} toggle={pageContainer.closePageDuplicateModal} className="grw-duplicate-page">
-      <ModalHeader tag="h4" toggle={pageContainer.closePageDuplicateModal} className="bg-primary text-light">
+    <Modal isOpen={props.isOpen} toggle={props.onClose} className="grw-duplicate-page">
+      <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">
         { t('modal_duplicate.label.Duplicate page') }
       </ModalHeader>
       <ModalBody>
@@ -122,6 +122,9 @@ PageDuplicateModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(PageDuplicateModallWrapper);

src/client/js/services/PageContainer.js

@@ -63,7 +63,6 @@ export default class PageContainer extends Container {
       hasDraftOnHackmd: !!mainContent.getAttribute('data-page-has-draft-on-hackmd'),
       isHackmdDraftUpdatingInRealtime: false,
 
-      isPageDuplicateModalShown: false,
       isCreateTemplatePageModalShown: false,
 
       isHeaderSticky: false,
@@ -105,8 +104,6 @@ export default class PageContainer extends Container {
       });
     }
 
-    this.openPageDuplicateModal = this.openPageDuplicateModal.bind(this);
-    this.closePageDuplicateModal = this.closePageDuplicateModal.bind(this);
     this.openCreateTemplatePageModal = this.openCreateTemplatePageModal.bind(this);
     this.closeCreateTemplatePageModal = this.closeCreateTemplatePageModal.bind(this);
   }
@@ -455,14 +452,6 @@ export default class PageContainer extends Container {
 
   }
 
-  openPageDuplicateModal() {
-    this.setState({ isPageDuplicateModalShown: true });
-  }
-
-  closePageDuplicateModal() {
-    this.setState({ isPageDuplicateModalShown: false });
-  }
-
   openCreateTemplatePageModal() {
     this.setState({ isCreateTemplatePageModalShown: true });
   }