add close function

src/client/js/components/Navbar/PageCreateButton.jsx

@@ -10,7 +10,7 @@ const PageCreateButton = (props) => {
   const { t, appContainer } = props;
 
   return (
-    <a className="nav-link create-page" onClick={appContainer.showPageCreateModal}>
+    <a className="nav-link create-page" type="button" onClick={appContainer.openPageCreateModal}>
       <i className="icon-pencil mr-2"></i>
       <span>{ t('New') }</span>
     </a>

src/client/js/components/PageCreateModal.jsx

@@ -2,6 +2,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
 import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from './UnstatedUtils';
@@ -11,9 +15,16 @@ const PageCreateModal = (props) => {
   const { appContainer } = props;
 
   return (
-    <p className="text-center" href="#" data-target="#create-page" data-toggle="modal">
-      {appContainer.state.isPageCreateModalShown && 'true'}
-    </p>
+    <Modal isOpen={appContainer.state.isPageCreateModalShown} toggle={appContainer.closePageCreateModal}>
+      <ModalHeader tag="h4" toggle={appContainer.closePageCreateModal} className="bg-primary text-light">
+        <span className="text-white">Edit Tags</span>
+      </ModalHeader>
+      <ModalBody>
+        hoge
+      </ModalBody>
+      <ModalFooter>
+      </ModalFooter>
+    </Modal>
   );
 };
 

src/client/js/services/AppContainer.js

@@ -93,7 +93,8 @@ export default class AppContainer extends Container {
       delete: this.apiv3Delete.bind(this),
     };
 
-    this.showPageCreateModal = this.showPageCreateModal.bind(this);
+    this.openPageCreateModal = this.openPageCreateModal.bind(this);
+    this.closePageCreateModal = this.closePageCreateModal.bind(this);
   }
 
   /**
@@ -461,8 +462,12 @@ export default class AppContainer extends Container {
     return this.apiv3Request('delete', path, { params });
   }
 
-  showPageCreateModal() {
+  openPageCreateModal() {
     this.setState({ isPageCreateModalShown: true });
   }
 
+  closePageCreateModal() {
+    this.setState({ isPageCreateModalShown: false });
+  }
+
 }