refactor template page

src/client/js/bootstrap.jsx

@@ -13,7 +13,6 @@ import AppContainer from './services/AppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import PageCreateButton from './components/Navbar/PageCreateButton';
 import PageCreateModal from './components/PageCreateModal';
-import CreateTemplateModal from './components/CreateTemplateModal';
 
 const logger = loggerFactory('growi:app');
 
@@ -50,7 +49,6 @@ const componentMappings = {
   'create-page-button': <PageCreateButton />,
   'create-page-button-icon': <PageCreateButton isIcon />,
   'page-create-modal': <PageCreateModal />,
-  'create-template-modal': <CreateTemplateModal />,
 
   'grw-sidebar-wrapper': <Sidebar />,
 

src/client/js/components/CreateTemplateModal.jsx

@@ -13,7 +13,7 @@ import PageContainer from '../services/PageContainer';
 const CreateTemplateModal = (props) => {
   const { t, pageContainer } = props;
 
-  const { path, isCreateTemplatePageModalShown } = pageContainer.state;
+  const { path } = pageContainer.state;
   const parentPath = pathUtils.addTrailingSlash(path);
 
   function generateUrl(label) {
@@ -45,8 +45,8 @@ const CreateTemplateModal = (props) => {
   }
 
   return (
-    <Modal isOpen={isCreateTemplatePageModalShown} toggle={pageContainer.closeCreateTemplatePageModal} className="grw-create-page">
-      <ModalHeader tag="h4" toggle={pageContainer.closeCreateTemplatePageModal} className="bg-primary text-light">
+    <Modal isOpen={props.isOpen} toggle={props.onClose} className="grw-create-page">
+      <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">
         {t('template.modal_label.Create/Edit Template Page')}
       </ModalHeader>
       <ModalBody>
@@ -82,6 +82,9 @@ const CreateTemplateModalWrapper = (props) => {
 CreateTemplateModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(CreateTemplateModalWrapper);

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

@@ -9,6 +9,7 @@ import PageContainer from '../../services/PageContainer';
 import PageDeleteModal from '../PageDeleteModal';
 import PageRenameModal from '../PageRenameModal';
 import PageDuplicateModal from '../PageDuplicateModal';
+import CreateTemplateModal from '../CreateTemplateModal';
 
 
 const PageManagement = (props) => {
@@ -20,6 +21,7 @@ const PageManagement = (props) => {
 
   const [isPageRenameModalShown, setIsPageRenameModalShown] = useState(false);
   const [isPageDuplicateModalShown, setIsPageDuplicateModalShown] = useState(false);
+  const [isPageTemplateModalShown, setIsPageTempleteModalShown] = useState(false);
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
 
   function openPageRenameModalHandler() {
@@ -38,6 +40,14 @@ const PageManagement = (props) => {
     setIsPageDuplicateModalShown(false);
   }
 
+  function openPageTemplateModalHandler() {
+    setIsPageTempleteModalShown(true);
+  }
+
+  function closePageTemplateModalHandler() {
+    setIsPageTempleteModalShown(false);
+  }
+
   function openPageDeleteModalHandler() {
     setIsPageDeleteModalShown(true);
   }
@@ -72,6 +82,32 @@ const PageManagement = (props) => {
     );
   }
 
+  function renderModals() {
+    return (
+      <>
+        <PageRenameModal
+          isOpen={isPageRenameModalShown}
+          onClose={closePageRenameModalHandler}
+          path={path}
+        />
+        <PageDuplicateModal
+          isOpen={isPageDuplicateModalShown}
+          onClose={closePageDuplicateModalHandler}
+        />
+        <CreateTemplateModal
+          isOpen={isPageTemplateModalShown}
+          onClose={closePageTemplateModalHandler}
+        />
+        <PageDeleteModal
+          isOpen={isPageDeleteModalShown}
+          onClose={closePageDeleteModalHandler}
+          path={path}
+          isAbleToDeleteCompletely={isAbleToDeleteCompletely}
+        />
+      </>
+    );
+  }
+
   return (
     <>
       <a
@@ -87,26 +123,12 @@ const PageManagement = (props) => {
       </a>
       <div className="dropdown-menu dropdown-menu-right">
         {!isTopPagePath && renderDropdownItemForNotTopPage()}
-        <a className="dropdown-item" onClick={pageContainer.openCreateTemplatePageModal}>
+        <a className="dropdown-item" onClick={openPageTemplateModalHandler}>
           <i className="icon-fw icon-magic-wand"></i> { t('template.option_label.create/edit') }
         </a>
         {(!isTopPagePath && isDeletable) && renderDropdownItemForDeletablePage()}
       </div>
-      <PageRenameModal
-        isOpen={isPageRenameModalShown}
-        onClose={closePageRenameModalHandler}
-        path={path}
-      />
-      <PageDuplicateModal
-        isOpen={isPageDuplicateModalShown}
-        onClose={closePageDuplicateModalHandler}
-      />
-      <PageDeleteModal
-        isOpen={isPageDeleteModalShown}
-        onClose={closePageDeleteModalHandler}
-        path={path}
-        isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-      />
+      {renderModals()}
     </>
   );
 };

src/client/js/services/PageContainer.js

@@ -63,8 +63,6 @@ export default class PageContainer extends Container {
       hasDraftOnHackmd: !!mainContent.getAttribute('data-page-has-draft-on-hackmd'),
       isHackmdDraftUpdatingInRealtime: false,
 
-      isCreateTemplatePageModalShown: false,
-
       isHeaderSticky: false,
       isSubnavCompact: false,
     };
@@ -104,8 +102,6 @@ export default class PageContainer extends Container {
       });
     }
 
-    this.openCreateTemplatePageModal = this.openCreateTemplatePageModal.bind(this);
-    this.closeCreateTemplatePageModal = this.closeCreateTemplatePageModal.bind(this);
   }
 
   /**
@@ -452,12 +448,4 @@ export default class PageContainer extends Container {
 
   }
 
-  openCreateTemplatePageModal() {
-    this.setState({ isCreateTemplatePageModalShown: true });
-  }
-
-  closeCreateTemplatePageModal() {
-    this.setState({ isCreateTemplatePageModalShown: false });
-  }
-
 }