apply unstated containers

src/client/js/app.js

@@ -160,6 +160,7 @@ const saveWithShortcutSuccessHandler = function(page) {
   const newState = {
     pageId: page._id,
     revisionId: page.revision._id,
+    revisionCreatedAt: new Date(page.revision.createdAt).getTime() / 1000,
     remoteRevisionId: page.revision._id,
     revisionIdHackmdSynced: page.revisionHackmdSynced,
     hasDraftOnHackmd: page.hasDraftOnHackmd,
@@ -316,13 +317,8 @@ let componentMappings = {
 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} />,
-    'bookmark-button':  <BookmarkButton pageId={pageId} crowi={crowi} />,
-    'bookmark-button-lg':  <BookmarkButton pageId={pageId} crowi={crowi} size="lg" />,
-    'rename-page-name-input':  <PagePathAutoComplete crowi={crowi} initializedPath={pagePath} />,
-    'duplicate-page-name-input':  <PagePathAutoComplete crowi={crowi} initializedPath={pagePath} />,
+    'page-comments-list': <PageComments crowiOriginRenderer={crowiRenderer} />,
+    'page-comment-write':  <CommentEditorLazyRenderer crowiOriginRenderer={crowiRenderer} />,
   }, componentMappings);
 }
 if (pagePath) {

src/client/js/components/PageComment/Comment.jsx

@@ -141,7 +141,6 @@ class Comment extends React.Component {
             deleteBtnClicked={this.props.deleteBtnClicked}
             crowiRenderer={this.props.crowiRenderer}
             replyList={[]}
-            revisionCreatedAt={this.props.revisionCreatedAt}
           />
         </div>
       );
@@ -160,8 +159,8 @@ class Comment extends React.Component {
     const revFirst8Letters = comment.revision.substr(-8);
     const revisionLavelClassName = this.getRevisionLabelClassName();
 
-    const revisionId = this.props.pageContainer.state.revisionId;
-    const revisionCreatedAt = this.props.revisionCreatedAt;
+    const { revisionId, revisionCreatedAt } = this.props.pageContainer.state;
+
     let isNewer;
     if (comment.revision === revisionId) {
       isNewer = 'page-comments-list-current';
@@ -222,7 +221,6 @@ Comment.propTypes = {
   crowiRenderer: PropTypes.object.isRequired,
   deleteBtnClicked: PropTypes.func.isRequired,
   replyList: PropTypes.array,
-  revisionCreatedAt: PropTypes.number,
 };
 
 export default CommentWrapper;

src/client/js/components/PageComment/CommentEditor.jsx

@@ -7,6 +7,7 @@ import Tabs from 'react-bootstrap/es/Tabs';
 import * as toastr from 'toastr';
 
 import AppContainer from '../../services/AppContainer';
+import PageContainer from '../../services/PageContainer';
 import CommentContainer from '../../services/CommentContainer';
 import GrowiRenderer from '../../util/GrowiRenderer';
 
@@ -44,7 +45,7 @@ class CommentEditor extends React.Component {
       errorMessage: undefined,
       hasSlackConfig: config.hasSlackConfig,
       isSlackEnabled: false,
-      slackChannels: this.props.slackChannels,
+      slackChannels: this.props.pageContainer.state.slackChannels,
     };
 
     this.growiRenderer = new GrowiRenderer(window.crowi, this.props.crowiOriginRenderer, { mode: 'comment' });
@@ -289,8 +290,6 @@ class CommentEditor extends React.Component {
                     && (
                     <div className="form-inline align-self-center mr-md-2">
                       <SlackNotification
-                        isSlackEnabled={this.state.isSlackEnabled}
-                        slackChannels={this.state.slackChannels}
                         onEnabledFlagChange={this.onSlackEnabledFlagChange}
                         onChannelChange={this.onSlackChannelsChange}
                       />
@@ -321,15 +320,15 @@ class CommentEditor extends React.Component {
  * Wrapper component for using unstated
  */
 const CommentEditorWrapper = (props) => {
-  return createSubscribedElement(CommentEditor, props, [AppContainer, CommentContainer]);
+  return createSubscribedElement(CommentEditor, props, [AppContainer, PageContainer, CommentContainer]);
 };
 
 CommentEditor.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   commentContainer: PropTypes.instanceOf(CommentContainer).isRequired,
 
   crowiOriginRenderer: PropTypes.object.isRequired,
-  slackChannels: PropTypes.string,
   replyTo: PropTypes.string,
   commentButtonClickedHandler: PropTypes.func.isRequired,
 };

src/client/js/components/PageComment/CommentEditorLazyRenderer.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CommentEditor from './CommentEditor';
 
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
 import UserPicture from '../User/UserPicture';
 
-export default class CommentEditorLazyRenderer extends React.Component {
+import CommentEditor from './CommentEditor';
+
+class CommentEditorLazyRenderer extends React.Component {
 
   constructor(props) {
     super(props);
@@ -22,7 +25,7 @@ export default class CommentEditorLazyRenderer extends React.Component {
   }
 
   init() {
-    const layoutType = this.props.crowi.getConfig().layoutType;
+    const layoutType = this.props.appContainer.getConfig().layoutType;
     this.setState({ isLayoutTypeGrowi: layoutType === 'crowi-plus' || layoutType === 'growi' });
   }
 
@@ -31,9 +34,9 @@ export default class CommentEditorLazyRenderer extends React.Component {
   }
 
   render() {
-    const crowi = this.props.crowi;
-    const username = crowi.me;
-    const user = crowi.findUser(username);
+    const { appContainer } = this.props;
+    const username = appContainer.me;
+    const user = appContainer.findUser(username);
     const isLayoutTypeGrowi = this.state.isLayoutTypeGrowi;
     return (
       <React.Fragment>
@@ -81,8 +84,17 @@ export default class CommentEditorLazyRenderer extends React.Component {
 
 }
 
+/**
+ * Wrapper component for using unstated
+ */
+const CommentEditorLazyRendererWrapper = (props) => {
+  return createSubscribedElement(CommentEditorLazyRenderer, props, [AppContainer]);
+};
+
 CommentEditorLazyRenderer.propTypes = {
-  crowi: PropTypes.object.isRequired,
   crowiOriginRenderer: PropTypes.object.isRequired,
-  slackChannels: PropTypes.string,
+
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
+
+export default CommentEditorLazyRendererWrapper;

src/client/js/components/PageComments.jsx

@@ -145,7 +145,6 @@ class PageComments extends React.Component {
             deleteBtnClicked={this.confirmToDeleteComment}
             crowiRenderer={this.growiRenderer}
             replyList={replyList}
-            revisionCreatedAt={this.props.revisionCreatedAt}
           />
           <div className="container-fluid">
             <div className="row">
@@ -170,7 +169,6 @@ class PageComments extends React.Component {
                 { showEditor && (
                   <CommentEditor
                     crowiOriginRenderer={this.props.crowiOriginRenderer}
-                    slackChannels={this.props.slackChannels}
                     replyTo={commentId}
                     commentButtonClickedHandler={this.commentButtonClickedHandler}
                   />
@@ -248,8 +246,6 @@ PageComments.propTypes = {
   commentContainer: PropTypes.instanceOf(CommentContainer).isRequired,
 
   crowiOriginRenderer: PropTypes.object.isRequired,
-  revisionCreatedAt: PropTypes.number,
-  slackChannels: PropTypes.string,
 };
 
 export default withTranslation()(PageCommentsWrapper);