add page create modal

src/client/js/bootstrap.jsx

@@ -12,6 +12,7 @@ import StaffCredit from './components/StaffCredit/StaffCredit';
 import AppContainer from './services/AppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import PageCreateButton from './components/Navbar/PageCreateButton';
+import PageCreateModal from './components/PageCreateModal';
 
 const logger = loggerFactory('growi:app');
 
@@ -46,6 +47,7 @@ const componentMappings = {
   'personal-dropdown': <PersonalDropdown />,
 
   'create-page-button': <PageCreateButton />,
+  'page-create-modal': <PageCreateModal />,
 
   'grw-sidebar-wrapper': <Sidebar />,
 

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

@@ -7,10 +7,10 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
 const PageCreateButton = (props) => {
-  const { t } = props;
+  const { t, appContainer } = props;
 
   return (
-    <a className="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
+    <a className="nav-link create-page" onClick={appContainer.showPageCreateModal}>
       <i className="icon-pencil mr-2"></i>
       <span>{ t('New') }</span>
     </a>

src/client/js/components/PageCreateModal.jsx

@@ -0,0 +1,33 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from './UnstatedUtils';
+import AppContainer from '../services/AppContainer';
+
+const PageCreateModal = (props) => {
+  const { appContainer } = props;
+
+  return (
+    <p className="text-center" href="#" data-target="#create-page" data-toggle="modal">
+      {appContainer.state.isPageCreateModalShown && 'true'}
+    </p>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const ModalControlWrapper = (props) => {
+  return createSubscribedElement(PageCreateModal, props, [AppContainer]);
+};
+
+
+PageCreateModal.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(ModalControlWrapper);

src/client/js/services/AppContainer.js

@@ -34,6 +34,7 @@ export default class AppContainer extends Container {
       preferDarkModeByMediaQuery: false,
       preferDarkModeByUser: null,
       isDrawerOpened: false,
+      isPageCreateModalShown: false,
     };
 
     const body = document.querySelector('body');
@@ -91,6 +92,8 @@ export default class AppContainer extends Container {
       put: this.apiv3Put.bind(this),
       delete: this.apiv3Delete.bind(this),
     };
+
+    this.showPageCreateModal = this.showPageCreateModal.bind(this);
   }
 
   /**
@@ -458,4 +461,8 @@ export default class AppContainer extends Container {
     return this.apiv3Request('delete', path, { params });
   }
 
+  showPageCreateModal() {
+    this.setState({ isPageCreateModalShown: true });
+  }
+
 }

src/server/views/layout/layout.html

@@ -152,6 +152,7 @@
 <!-- /#staff-credit -->
 <div id="staff-credit"></div>
 
+<div id="page-create-modal"></div>
 {% include '../modal/shortcuts.html' %}
 
 {% block body_end %}