WIP: apply unstated containers to PageEditorByHackmd

src/client/js/app.js

@@ -314,6 +314,7 @@ let componentMappings = {
 // additional definitions if data exists
 if (pageId) {
   componentMappings = Object.assign({
+    'page-editor-with-hackmd': <PageEditorByHackmd onSaveWithShortcut={saveWithShortcut} />,
     'page-comments-list': <PageComments revisionCreatedAt={pageRevisionCreatedAt} slackChannels={slackChannels} crowiOriginRenderer={crowiRenderer} />,
     'page-attachment':  <PageAttachment pageId={pageId} markdown={markdown} crowi={crowi} />,
     'page-comment-write':  <CommentEditorLazyRenderer crowi={crowi} crowiOriginRenderer={crowiRenderer} slackChannels={slackChannels} />,
@@ -410,29 +411,6 @@ if (myDraftControlsElem) {
   );
 }
 
-/*
- * HackMD Editor
- */
-// render PageEditorWithHackmd
-const pageEditorWithHackmdElem = document.getElementById('page-editor-with-hackmd');
-if (pageEditorWithHackmdElem) {
-  ReactDOM.render(
-    <Provider inject={[appContainer]}>
-      <PageEditorByHackmd
-        crowi={crowi}
-        pageId={pageId}
-        revisionId={pageRevisionId}
-        pageIdOnHackmd={pageIdOnHackmd}
-        revisionIdHackmdSynced={pageRevisionIdHackmdSynced}
-        hasDraftOnHackmd={hasDraftOnHackmd}
-        markdown={markdown}
-        onSaveWithShortcut={saveWithShortcut}
-      />,
-    </Provider>,
-    pageEditorWithHackmdElem,
-  );
-}
-
 // render for admin
 const customCssEditorElem = document.getElementById('custom-css-editor');
 if (customCssEditorElem != null) {

src/client/js/components/PageComments.jsx

@@ -252,4 +252,4 @@ PageComments.propTypes = {
   slackChannels: PropTypes.string,
 };
 
-export default withTranslation(null, { withRef: true })(PageCommentsWrapper);
+export default withTranslation()(PageCommentsWrapper);

src/client/js/components/PageEditorByHackmd.jsx

@@ -7,6 +7,7 @@ import MenuItem from 'react-bootstrap/es/MenuItem';
 import * as toastr from 'toastr';
 
 import AppContainer from '../services/AppContainer';
+import PageContainer from '../services/PageContainer';
 
 import { createSubscribedElement } from './UnstatedUtils';
 import HackmdEditor from './PageEditorByHackmd/HackmdEditor';
@@ -17,12 +18,9 @@ class PageEditorByHackmd extends React.PureComponent {
     super(props);
 
     this.state = {
-      markdown: this.props.markdown,
+      markdown: this.props.pageContainer.state.markdown,
       isInitialized: false,
       isInitializing: false,
-      revisionIdHackmdSynced: this.props.revisionIdHackmdSynced,
-      pageIdOnHackmd: this.props.pageIdOnHackmd,
-      hasDraftOnHackmd: this.props.hasDraftOnHackmd,
     };
 
     this.getHackmdUri = this.getHackmdUri.bind(this);
@@ -60,29 +58,8 @@ class PageEditorByHackmd extends React.PureComponent {
     this.setState({ isInitialized: false });
   }
 
-  /**
-   * update revisionId of state
-   * @param {string} revisionId
-   * @param {string} revisionIdHackmdSynced
-   */
-  setRevisionId(revisionId, revisionIdHackmdSynced) {
-    this.setState({ revisionId, revisionIdHackmdSynced });
-  }
-
-  getRevisionIdHackmdSynced() {
-    return this.state.revisionIdHackmdSynced;
-  }
-
-  /**
-   * update hasDraftOnHackmd of state
-   * @param {bool} hasDraftOnHackmd
-   */
-  setHasDraftOnHackmd(hasDraftOnHackmd) {
-    this.setState({ hasDraftOnHackmd });
-  }
-
   getHackmdUri() {
-    const envVars = this.props.crowi.config.env;
+    const envVars = this.props.appContainer.getConfig().env;
     return envVars.HACKMD_URI;
   }
 
@@ -90,6 +67,7 @@ class PageEditorByHackmd extends React.PureComponent {
    * Start integration with HackMD
    */
   startToEdit() {
+    const { pageContainer } = this.props;
     const hackmdUri = this.getHackmdUri();
 
     if (hackmdUri == null) {
@@ -103,9 +81,9 @@ class PageEditorByHackmd extends React.PureComponent {
     });
 
     const params = {
-      pageId: this.props.pageId,
+      pageId: pageContainer.state.pageId,
     };
-    this.props.crowi.apiPost('/hackmd.integrate', params)
+    this.props.appContainer.apiPost('/hackmd.integrate', params)
       .then((res) => {
         if (!res.ok) {
           throw new Error(res.error);
@@ -113,6 +91,8 @@ class PageEditorByHackmd extends React.PureComponent {
 
         this.setState({
           isInitialized: true,
+        });
+        pageContainer.setState({
           pageIdOnHackmd: res.pageIdOnHackmd,
           revisionIdHackmdSynced: res.revisionIdHackmdSynced,
         });
@@ -134,7 +114,7 @@ class PageEditorByHackmd extends React.PureComponent {
    * Reset draft
    */
   discardChanges() {
-    this.setState({ hasDraftOnHackmd: false });
+    this.props.pageContainer.setState({ hasDraftOnHackmd: false });
   }
 
   /**
@@ -142,6 +122,7 @@ class PageEditorByHackmd extends React.PureComponent {
    */
   hackmdEditorChangeHandler(body) {
     const hackmdUri = this.getHackmdUri();
+    const { pageContainer } = this.props;
 
     if (hackmdUri == null) {
       // do nothing
@@ -149,14 +130,14 @@ class PageEditorByHackmd extends React.PureComponent {
     }
 
     // do nothing if contents are same
-    if (this.props.markdown === body) {
+    if (pageContainer.state.markdown === body) {
       return;
     }
 
     const params = {
-      pageId: this.props.pageId,
+      pageId: pageContainer.state.pageId,
     };
-    this.props.crowi.apiPost('/hackmd.saveOnHackmd', params)
+    this.props.appContainer.apiPost('/hackmd.saveOnHackmd', params)
       .then((res) => {
         // do nothing
       })
@@ -178,16 +159,20 @@ class PageEditorByHackmd extends React.PureComponent {
 
   render() {
     const hackmdUri = this.getHackmdUri();
+    const { pageContainer } = this.props;
+    const {
+      pageIdOnHackmd, revisionId, revisionIdHackmdSynced, remoteRevisionId, hasDraftOnHackmd,
+    } = pageContainer.state;
 
-    const isPageExistsOnHackmd = (this.state.pageIdOnHackmd != null);
-    const isResume = isPageExistsOnHackmd && this.state.hasDraftOnHackmd;
+    const isPageExistsOnHackmd = (pageIdOnHackmd != null);
+    const isResume = isPageExistsOnHackmd && hasDraftOnHackmd;
 
     if (this.state.isInitialized) {
       return (
         <HackmdEditor
           ref={(c) => { this.hackmdEditor = c }}
           hackmdUri={hackmdUri}
-          pageIdOnHackmd={this.state.pageIdOnHackmd}
+          pageIdOnHackmd={pageIdOnHackmd}
           initializationMarkdown={isResume ? null : this.state.markdown}
           onChange={this.hackmdEditorChangeHandler}
           onSaveWithShortcut={(document) => {
@@ -198,8 +183,8 @@ class PageEditorByHackmd extends React.PureComponent {
       );
     }
 
-    const isRevisionOutdated = this.state.initialRevisionId !== this.state.revisionId;
-    const isHackmdDocumentOutdated = this.state.revisionId !== this.state.revisionIdHackmdSynced;
+    const isRevisionOutdated = revisionId !== remoteRevisionId;
+    const isHackmdDocumentOutdated = revisionIdHackmdSynced !== remoteRevisionId;
 
     let content;
     /*
@@ -216,7 +201,6 @@ class PageEditorByHackmd extends React.PureComponent {
      * Resume to edit or discard changes
      */
     else if (isResume) {
-      const revisionIdHackmdSynced = this.state.revisionIdHackmdSynced;
       const title = (
         <React.Fragment>
           <span className="btn-label"><i className="icon-control-end"></i></span>
@@ -308,20 +292,14 @@ class PageEditorByHackmd extends React.PureComponent {
  * Wrapper component for using unstated
  */
 const PageEditorByHackmdWrapper = (props) => {
-  return createSubscribedElement(PageEditorByHackmd, props, [AppContainer]);
+  return createSubscribedElement(PageEditorByHackmd, props, [AppContainer, PageContainer]);
 };
 
 PageEditorByHackmd.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
-  crowi: PropTypes.object.isRequired,
-  markdown: PropTypes.string.isRequired,
   onSaveWithShortcut: PropTypes.func.isRequired,
-  pageId: PropTypes.string,
-  revisionId: PropTypes.string,
-  pageIdOnHackmd: PropTypes.string,
-  revisionIdHackmdSynced: PropTypes.string,
-  hasDraftOnHackmd: PropTypes.bool,
 };
 
 export default PageEditorByHackmdWrapper;

src/client/js/components/PageStatusAlert.jsx

@@ -129,4 +129,4 @@ PageStatusAlert.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
-export default withTranslation(null, { withRef: true })(PageStatusAlertWrapper);
+export default withTranslation()(PageStatusAlertWrapper);

src/client/js/components/SavePageControls.jsx

@@ -108,4 +108,4 @@ SavePageControls.propTypes = {
   onSubmit: PropTypes.func.isRequired,
 };
 
-export default withTranslation(null, { withRef: true })(SavePageControlsWrapper);
+export default withTranslation()(SavePageControlsWrapper);

src/client/js/components/SavePageControls/GrantSelector.jsx

@@ -9,9 +9,10 @@ import ListGroup from 'react-bootstrap/es/ListGroup';
 import ListGroupItem from 'react-bootstrap/es/ListGroupItem';
 import Modal from 'react-bootstrap/es/Modal';
 
-import { createSubscribedElement } from '../UnstatedUtils';
-import PageContainer from '../../services/PageContainer';
 import AppContainer from '../../services/AppContainer';
+import PageContainer from '../../services/PageContainer';
+
+import { createSubscribedElement } from '../UnstatedUtils';
 
 const SPECIFIED_GROUP_VALUE = 'specifiedGroup';
 
@@ -295,4 +296,4 @@ GrantSelector.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
-export default withTranslation(null, { withRef: true })(GrantSelectorWrapper);
+export default withTranslation()(GrantSelectorWrapper);