open modal

src/client/js/components/CreateTemplateModal.jsx

@@ -12,7 +12,7 @@ import PageContainer from '../services/PageContainer';
 const CreateTemplateModal = (props) => {
   const { t, pageContainer } = props;
 
-  const { path } = pageContainer.state;
+  const { path, isCreateTemplatePageModalShown } = pageContainer.state;
   const parentPath = pathUtils.addTrailingSlash(path);
 
   /**
@@ -40,8 +40,8 @@ const CreateTemplateModal = (props) => {
   }
 
   return (
-    <Modal isOpen className="grw-create-page">
-      <ModalHeader tag="h4" className="bg-primary text-light">
+    <Modal isOpen={isCreateTemplatePageModalShown} toggle={pageContainer.closeCreateTemplatePageModal} className="grw-create-page">
+      <ModalHeader tag="h4" toggle={pageContainer.closeCreateTemplatePageModal} className="bg-primary text-light">
         {t('template.modal_label.Create/Edit Template Page')}
       </ModalHeader>
       <ModalBody>

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

@@ -55,7 +55,7 @@ const PageManagement = (props) => {
       </a>
       <div className="dropdown-menu dropdown-menu-right">
         {!isTopPagePath && renderDropdownItemForNotTopPage()}
-        <a className="dropdown-item" href="#" data-target="#create-template" data-toggle="modal">
+        <a className="dropdown-item" onClick={pageContainer.openCreateTemplatePageModal}>
           <i className="icon-fw icon-magic-wand"></i> { t('template.option_label.create/edit') }
         </a>
         {(!isTopPagePath && !isUserPagePath) && renderDropdownItemForDeletablePage()}

src/client/js/services/PageContainer.js

@@ -62,6 +62,7 @@ export default class PageContainer extends Container {
       isHackmdDraftUpdatingInRealtime: false,
 
       isPageDuplicateModalShown: false,
+      isCreateTemplatePageModalShown: false,
 
       isHeaderSticky: false,
       isSubnavCompact: false,
@@ -91,6 +92,8 @@ 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);
   }
 
   /**
@@ -400,4 +403,12 @@ export default class PageContainer extends Container {
     this.setState({ isPageDuplicateModalShown: false });
   }
 
+  openCreateTemplatePageModal() {
+    this.setState({ isCreateTemplatePageModalShown: true });
+  }
+
+  closeCreateTemplatePageModal() {
+    this.setState({ isCreateTemplatePageModalShown: false });
+  }
+
 }