refactoring

src/client/js/app.js

@@ -29,7 +29,6 @@ import Page from './components/Page';
 import PageHistory from './components/PageHistory';
 import PageComments from './components/PageComments';
 import CommentForm from './components/PageComment/CommentForm';
-import CommentFormBase from './components/PageComment/CommentFormBase';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
 import RevisionPath from './components/Page/RevisionPath';
@@ -310,30 +309,31 @@ const componentMappings = {
   'duplicate-page-name-input': <PagePathAutoComplete crowi={crowi} initializedPath={pagePath} />,
 
 };
+
+const data = {
+  pageId,
+  pagePath,
+  editorOptions: pageEditorOptions,
+  slackChannels,
+  crowi,
+  crowiOriginRenderer: crowiRenderer,
+  revisionId: pageRevisionId,
+};
+
 // additional definitions if data exists
 let pageComments = null;
 if (pageId) {
   componentMappings['page-comments-list'] = (
     <I18nextProvider i18n={i18n}>
-      <CommentFormBase
-        pageId={pageId}
-        pagePath={pagePath}
-        onPostComplete={null}
-        revisionId={pageRevisionId}
+      <PageComments
+        ref={(elem) => {
+          if (pageComments == null) {
+            pageComments = elem;
+          }
+        }}
         revisionCreatedAt={pageRevisionCreatedAt}
-        editorOptions={pageEditorOptions}
-        slackChannels={slackChannels}
-      >
-        <PageComments
-          ref={(elem) => {
-            if (pageComments == null) {
-              pageComments = elem;
-            }
-          }}
-          crowi={crowi}
-          crowiOriginRenderer={crowiRenderer}
-        />
-      </CommentFormBase>
+        data={data}
+      />
     </I18nextProvider>
   );
   componentMappings['page-attachment'] = <PageAttachment pageId={pageId} markdown={markdown} crowi={crowi} />;
@@ -507,32 +507,23 @@ if (pageEditorElem) {
   crowi.setPageEditor(pageEditor);
 }
 
+const pageCommentsElem = componentMappings['page-comments-list'];
+const postCompleteHandler = (comment) => {
+  if (pageCommentsElem != null) {
+    pageComments.retrieveData();
+  }
+};
+
 // render comment form
 const writeCommentElem = document.getElementById('page-comment-write');
 if (writeCommentElem) {
-  const pageCommentsElem = componentMappings['page-comments-list'];
-  const postCompleteHandler = (comment) => {
-    if (pageCommentsElem != null) {
-      pageComments.retrieveData();
-    }
-  };
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <CommentFormBase
-        pageId={pageId}
-        pagePath={pagePath}
+      <CommentForm
         onPostComplete={postCompleteHandler}
-        revisionId={pageRevisionId}
-        revisionCreatedAt={pageRevisionCreatedAt}
-        editorOptions={pageEditorOptions}
-        slackChannels={slackChannels}
         replyTo={undefined}
-      >
-        <CommentForm
-          crowi={crowi}
-          crowiOriginRenderer={crowiRenderer}
-        />
-      </CommentFormBase>
+        data={data}
+      />
     </I18nextProvider>,
     writeCommentElem,
   );

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

@@ -10,7 +10,6 @@ import RevisionBody from '../Page/RevisionBody';
 import ReactUtils from '../ReactUtils';
 import UserPicture from '../User/UserPicture';
 import Username from '../User/Username';
-import CommentFormBase from './CommentFormBase';
 
 /**
  *
@@ -61,7 +60,7 @@ export default class Comment extends React.Component {
   }
 
   isCurrentUserEqualsToAuthor() {
-    return this.props.comment.creator.username === this.props.crowi.me;
+    return this.props.comment.creator.username === this.props.data.crowi.me;
   }
 
   isCurrentRevision() {
@@ -83,7 +82,7 @@ export default class Comment extends React.Component {
   }
 
   renderRevisionBody() {
-    const config = this.props.crowi.getConfig();
+    const config = this.props.data.crowi.getConfig();
     const isMathJaxEnabled = !!config.env.MATHJAX;
     return (
       <RevisionBody
@@ -101,7 +100,7 @@ export default class Comment extends React.Component {
     };
 
     const crowiRenderer = this.props.crowiRenderer;
-    const interceptorManager = this.props.crowi.interceptorManager;
+    const interceptorManager = this.props.data.crowi.interceptorManager;
     interceptorManager.process('preRenderComment', context)
       .then(() => { return interceptorManager.process('prePreProcess', context) })
       .then(() => {
@@ -175,15 +174,11 @@ export default class Comment extends React.Component {
         {
           this.state.showCommentForm
           && (
-          <CommentFormBase
+          <CommentForm
+            onPostComplete={this.props.onPostComplete}
             data={this.props.data}
-          >
-            <CommentForm
-              crowi={this.props.crowi}
-              crowiOriginRenderer={this.props.crowiRenderer}
-              replyTo={comment._id.toString()}
-            />
-          </CommentFormBase>
+            replyTo={comment._id.toString()}
+          />
         )
         }
       </div>
@@ -194,11 +189,9 @@ export default class Comment extends React.Component {
 
 Comment.propTypes = {
   comment: PropTypes.object.isRequired,
-  crowi: PropTypes.object.isRequired,
-  crowiOriginRenderer: PropTypes.object.isRequired,
   crowiRenderer: PropTypes.object.isRequired,
-  onPostComplete: PropTypes.func,
   deleteBtnClicked: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
   replyTo: PropTypes.string,
-  data: PropTypes.object,
+  onPostComplete: PropTypes.func.isRequired,
 };

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

@@ -28,7 +28,7 @@ export default class CommentForm extends React.Component {
   constructor(props) {
     super(props);
 
-    const config = this.props.crowi.getConfig();
+    const config = this.props.data.crowi.getConfig();
     const isUploadable = config.upload.image || config.upload.file;
     const isUploadableFile = config.upload.file;
 
@@ -44,10 +44,10 @@ export default class CommentForm extends React.Component {
       errorMessage: undefined,
       hasSlackConfig: config.hasSlackConfig,
       isSlackEnabled: false,
-      slackChannels: this.props.slackChannels,
+      slackChannels: this.props.data.slackChannels,
     };
 
-    this.growiRenderer = new GrowiRenderer(this.props.crowi, this.props.crowiOriginRenderer, { mode: 'comment' });
+    this.growiRenderer = new GrowiRenderer(this.props.data.crowi, this.props.data.crowiOriginRenderer, { mode: 'comment' });
 
     this.updateState = this.updateState.bind(this);
     this.updateStateCheckbox = this.updateStateCheckbox.bind(this);
@@ -66,11 +66,11 @@ export default class CommentForm extends React.Component {
   }
 
   init() {
-    if (!this.props.pageId) {
+    if (!this.props.data.pageId) {
       return;
     }
 
-    const layoutType = this.props.crowi.getConfig().layoutType;
+    const layoutType = this.props.data.crowi.getConfig().layoutType;
     this.setState({ isLayoutTypeGrowi: layoutType === 'crowi-plus' || layoutType === 'growi' });
   }
 
@@ -106,12 +106,12 @@ export default class CommentForm extends React.Component {
       event.preventDefault();
     }
 
-    this.props.crowi.apiPost('/comments.add', {
+    this.props.data.crowi.apiPost('/comments.add', {
       commentForm: {
         comment: this.state.comment,
-        _csrf: this.props.crowi.csrfToken,
-        page_id: this.props.pageId,
-        revision_id: this.props.revisionId,
+        _csrf: this.props.data.crowi.csrfToken,
+        page_id: this.props.data.pageId,
+        revision_id: this.props.data.revisionId,
         is_markdown: this.state.isMarkdown,
         replyTo: this.props.replyTo,
       },
@@ -156,7 +156,7 @@ export default class CommentForm extends React.Component {
     };
 
     const growiRenderer = this.growiRenderer;
-    const interceptorManager = this.props.crowi.interceptorManager;
+    const interceptorManager = this.props.data.crowi.interceptorManager;
     interceptorManager.process('preRenderCommnetPreview', context)
       .then(() => { return interceptorManager.process('prePreProcess', context) })
       .then(() => {
@@ -189,13 +189,13 @@ export default class CommentForm extends React.Component {
 
     // create a FromData instance
     const formData = new FormData();
-    formData.append('_csrf', this.props.crowi.csrfToken);
+    formData.append('_csrf', this.props.data.crowi.csrfToken);
     formData.append('file', file);
-    formData.append('path', this.props.pagePath);
-    formData.append('page_id', this.props.pageId || 0);
+    formData.append('path', this.props.data.pagePath);
+    formData.append('page_id', this.props.data.pageId || 0);
 
     // post
-    this.props.crowi.apiPost(endpoint, formData)
+    this.props.data.crowi.apiPost(endpoint, formData)
       .then((res) => {
         const attachment = res.attachment;
         const fileName = attachment.originalName;
@@ -235,12 +235,12 @@ export default class CommentForm extends React.Component {
   }
 
   render() {
-    const crowi = this.props.crowi;
+    const crowi = this.props.data.crowi;
     const username = crowi.me;
     const user = crowi.findUser(username);
     const comment = this.state.comment;
     const commentPreview = this.state.isMarkdown ? this.getCommentHtml() : ReactUtils.nl2br(comment);
-    const emojiStrategy = this.props.crowi.getEmojiStrategy();
+    const emojiStrategy = this.props.data.crowi.getEmojiStrategy();
 
     const isLayoutTypeGrowi = this.state.isLayoutTypeGrowi;
 
@@ -289,9 +289,9 @@ export default class CommentForm extends React.Component {
                             ref={(c) => { this.editor = c }}
                             value={this.state.comment}
                             isGfmMode={this.state.isMarkdown}
-                            editorOptions={this.props.editorOptions}
+                            editorOptions={this.props.data.editorOptions}
                             lineNumbers={false}
-                            isMobile={this.props.crowi.isMobile}
+                            isMobile={this.props.data.crowi.isMobile}
                             isUploadable={this.state.isUploadable && this.state.isLayoutTypeGrowi} // enable only when GROWI layout
                             isUploadableFile={this.state.isUploadableFile}
                             emojiStrategy={emojiStrategy}
@@ -368,17 +368,7 @@ export default class CommentForm extends React.Component {
 }
 
 CommentForm.propTypes = {
-  crowi: PropTypes.object.isRequired,
-  crowiOriginRenderer: PropTypes.object.isRequired,
-  pageId: PropTypes.string,
-  pagePath: PropTypes.string,
   onPostComplete: PropTypes.func,
-  editorOptions: PropTypes.object,
-  slackChannels: PropTypes.string,
-  revisionId: PropTypes.string,
-  revisionCreatedAt: PropTypes.number,
   replyTo: PropTypes.string,
-};
-CommentForm.defaultProps = {
-  editorOptions: {},
+  data: PropTypes.object.isRequired,
 };

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// import { withTranslation } from 'react-i18next';
-
-/**
- * @author Shin Oka <okas@weseek.co.jp>
- *
- * @export
- * @class CommentFormBase
- * @extends {React.Component}
- */
-
-export default class CommentFormBase extends React.Component {
-
-  render() {
-    let childrenWithProps;
-    if (this.props.data !== undefined) {
-      childrenWithProps = React.Children.map(this.props.children, (child) => {
-        return React.cloneElement(child, this.props.data);
-      });
-    }
-    else {
-      const data = {
-        pageId: this.props.pageId,
-        pagePath: this.props.pagePath,
-        onPostComplete: this.props.onPostComplete,
-        revisionId: this.props.revisionId,
-        revisionCreatedAt: this.props.revisionCreatedAt,
-        editorOptions: this.props.editorOptions,
-        slackChannels: this.props.slackChannels,
-      };
-
-      childrenWithProps = React.Children.map(this.props.children, (child) => {
-        return React.cloneElement(child, data);
-      });
-    }
-
-    return <div>{childrenWithProps}</div>;
-  }
-
-}
-
-CommentFormBase.propTypes = {
-  children: PropTypes.node,
-  pageId: PropTypes.string,
-  pagePath: PropTypes.string,
-  onPostComplete: PropTypes.func,
-  editorOptions: PropTypes.object,
-  slackChannels: PropTypes.string,
-  revisionId: PropTypes.string,
-  revisionCreatedAt: PropTypes.number,
-  data: PropTypes.object,
-};

src/client/js/components/PageComments.js

@@ -34,7 +34,7 @@ class PageComments extends React.Component {
       errorMessageForDeleting: undefined,
     };
 
-    this.growiRenderer = new GrowiRenderer(this.props.crowi, this.props.crowiOriginRenderer, { mode: 'comment' });
+    this.growiRenderer = new GrowiRenderer(this.props.data.crowi, this.props.data.crowiOriginRenderer, { mode: 'comment' });
 
     this.init = this.init.bind(this);
     this.confirmToDeleteComment = this.confirmToDeleteComment.bind(this);
@@ -49,11 +49,11 @@ class PageComments extends React.Component {
   }
 
   init() {
-    if (!this.props.pageId) {
+    if (!this.props.data.pageId) {
       return;
     }
 
-    const layoutType = this.props.crowi.getConfig().layoutType;
+    const layoutType = this.props.data.crowi.getConfig().layoutType;
     this.setState({ isLayoutTypeGrowi: layoutType === 'crowi-plus' || layoutType === 'growi' });
 
     this.retrieveData();
@@ -64,7 +64,7 @@ class PageComments extends React.Component {
    */
   retrieveData() {
     // get data (desc order array)
-    this.props.crowi.apiGet('/comments.get', { page_id: this.props.pageId })
+    this.props.data.crowi.apiGet('/comments.get', { page_id: this.props.data.pageId })
       .then((res) => {
         if (res.ok) {
           this.setState({ comments: res.comments });
@@ -80,7 +80,7 @@ class PageComments extends React.Component {
   deleteComment() {
     const comment = this.state.commentToDelete;
 
-    this.props.crowi.apiPost('/comments.remove', { comment_id: comment._id })
+    this.props.data.crowi.apiPost('/comments.remove', { comment_id: comment._id })
       .then((res) => {
         if (res.ok) {
           this.findAndSplice(comment);
@@ -140,27 +140,16 @@ class PageComments extends React.Component {
    */
   generateCommentElements(comments, replies) {
     const commentsWithReplies = this.reorderBasedOnReplies(comments, replies);
-    const tempData = {
-      pageId: this.props.pageId,
-      pagePath: this.props.pagePath,
-      onPostComplete: this.props.onPostComplete,
-      revisionId: this.props.revisionId,
-      revisionCreatedAt: this.props.revisionCreatedAt,
-      editorOptions: this.props.editorOptions,
-      slackChannels: this.props.slackChannels,
-    };
     return commentsWithReplies.map((comment) => {
       return (
         <Comment
           key={comment._id}
           comment={comment}
-          crowi={this.props.crowi}
-          crowiOriginRenderer={this.props.crowiOriginRenderer}
-          onPostComplete={this.retrieveData}
           deleteBtnClicked={this.confirmToDeleteComment}
           crowiRenderer={this.growiRenderer}
+          onPostComplete={this.retrieveData}
+          data={this.props.data}
           replyTo={comment.replyTo}
-          data={tempData}
         />
       );
     });
@@ -181,7 +170,7 @@ class PageComments extends React.Component {
     }
 
     // divide by revisionId and createdAt
-    const revisionId = this.props.revisionId;
+    const revisionId = this.props.data.revisionId;
     const revisionCreatedAt = this.props.revisionCreatedAt;
     comments.forEach((comment) => {
       // comparing ObjectId
@@ -293,15 +282,8 @@ class PageComments extends React.Component {
 }
 
 PageComments.propTypes = {
-  pageId: PropTypes.string,
-  pagePath: PropTypes.string,
-  onPostComplete: PropTypes.func,
-  editorOptions: PropTypes.object,
-  slackChannels: PropTypes.string,
-  revisionId: PropTypes.string,
+  data: PropTypes.object.isRequired,
   revisionCreatedAt: PropTypes.number,
-  crowi: PropTypes.object.isRequired,
-  crowiOriginRenderer: PropTypes.object.isRequired,
 };
 
 export default withTranslation(null, { withRef: true })(PageComments);