post comment and reload page

lib/form/comment.js

@@ -4,9 +4,9 @@ var form = require('express-form')
   , field = form.field;
 
 module.exports = form(
-  field('page_id').trim().required(),
-  field('revision_id').trim().required(),
-  field('comment').trim().required(),
-  field('comment_position').trim().toInt(),
-  field('is_markdown').trim().toBooleanStrict()
+  field('commentForm.page_id').trim().required(),
+  field('commentForm.revision_id').trim().required(),
+  field('commentForm.comment').trim().required(),
+  field('commentForm.comment_position').trim().toInt(),
+  field('commentForm.is_markdown').trim().toBooleanStrict()
 );

resource/js/app.js

@@ -131,13 +131,7 @@ Object.keys(componentMappings).forEach((key) => {
 // render comment form
 const writeCommentElem = document.getElementById('page-comment-write');
 if (writeCommentElem) {
-  ReactDOM.render(<CommentForm crowi={crowi} pageId={pageId} revisionId={pageRevisionId} />, writeCommentElem);
-}
-
-// render components with refs to another component
-const elem = document.getElementById('page-comment-form-behavior');
-if (elem) {
-  ReactDOM.render(<PageCommentFormBehavior crowi={crowi} pageComments={componentInstances['page-comments-list']} />, elem);
+  ReactDOM.render(<CommentForm pageComments={componentInstances['page-comments-list']} crowi={crowi} pageId={pageId} revisionId={pageRevisionId} />, writeCommentElem);
 }
 
 /*

resource/js/components/PageComment/CommentForm.js

@@ -19,9 +19,9 @@ export default class CommentForm extends React.Component {
       isMarkdown: false,
     };
 
-    this.testComment = new Comment();
     this.handleChange = this.handleChange.bind(this);
     this.postComment = this.postComment.bind(this);
+    this.reload = this.reload.bind(this);
   }
 
   handleChange(event) {
@@ -36,12 +36,31 @@ export default class CommentForm extends React.Component {
 
   postComment(event) {
     event.preventDefault();
-    console.log(this.props.crowi.csrfToken);
-    this.props.crowi.apiPost('/comments.add', JSON.stringify({comment: this.state.comment, page_id: this.props.pageId, revision_id: this.props.revisionId}));
+    this.props.crowi.apiPost('/comments.add', {
+      commentForm: {
+        comment: this.state.comment,
+        _csrf: this.props.crowi.csrfToken,
+        page_id: this.props.pageId,
+        revision_id: this.props.revisionId,
+        is_markdown: this.state.isMarkdown,
+      }
+    })
+      .then(() => {
+        this.reload();
+      });
+  }
+
+  reload() {
+    this.props.pageComments.init();
+    this.setState({
+      comment: '',
+      isMarkdown: false,
+    });
   }
 
   render() {
     //{% if not user %}disabled{% endif %}をtextareaとbuttonに追加
+    // denounce/throttle
     return (
       <div>
         <form className="form page-comment-form" id="page-comment-form" onSubmit={this.postComment}>
@@ -52,8 +71,8 @@ export default class CommentForm extends React.Component {
             <div className="comment-form-main">
               <div className="comment-write" id="comment-write">
                 <textarea className="comment-form-comment form-control" id="comment-form-comment" name="comment"
-                  required placeholder="Write comments here..." onChange={this.handleChange}></textarea>
-                <input type="checkbox" id="comment-form-is-markdown" name="isMarkdown" value="1" onChange={this.handleChange} /> Markdown<br />
+                  required placeholder="Write comments here..." value={this.state.comment} onChange={this.handleChange}></textarea>
+                <input type="checkbox" id="comment-form-is-markdown" name="isMarkdown" checked={this.state.isMarkdown} value="1" onChange={this.handleChange} /> Markdown<br />
               </div>
               <div className="comment-submit">
                 <div className="pull-right">
@@ -73,6 +92,7 @@ export default class CommentForm extends React.Component {
 }
 
 CommentForm.propTypes = {
+  pageComments: PropTypes.object.isRequired,
   crowi: PropTypes.object.isRequired,
   pageId: PropTypes.string,
   revisionId: PropTypes.string,