impl PageCommentFormBehavior component

lib/views/crowi-plus/widget/comments.html

@@ -44,6 +44,7 @@
         </div>
       </div>
     </form>
+    <div id="page-comment-form-behavior"></div>
     {% endif %}
 
   </div>

lib/views/widget/page_side_content.html

@@ -28,6 +28,7 @@
       </div>
     </div>
   </form>
+  <div id="page-comment-form-behavior"></div>
 
   <div class="page-comments-list" id="page-comments-list">
     <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>

resource/js/app.js

@@ -9,6 +9,7 @@ import SearchPage       from './components/SearchPage';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
 import PageComments     from './components/PageComments';
+import PageCommentFormBehavior from './components/PageCommentFormBehavior';
 import PageAttachment   from './components/PageAttachment';
 import SeenUserList     from './components/SeenUserList';
 import RevisionPath     from './components/Page/RevisionPath';
@@ -55,6 +56,11 @@ if (isEnabledPlugins) {
   crowiPlugin.installAll(crowi, crowiRenderer);
 }
 
+/**
+ * define components
+ *  key: id of element
+ *  value: React Element
+ */
 const componentMappings = {
   'search-top': <HeaderSearchBox crowi={crowi} />,
   'search-page': <SearchPage crowi={crowi} />,
@@ -66,18 +72,26 @@ const componentMappings = {
   'seen-user-list': <SeenUserList pageId={pageId} crowi={crowi} />,
   'bookmark-button': <BookmarkButton pageId={pageId} crowi={crowi} />,
 };
+// additional definitions if pagePath exists
 if (pagePath) {
   componentMappings['revision-path'] = <RevisionPath pagePath={pagePath} />;
   componentMappings['revision-url'] = <RevisionUrl pageId={pageId} pagePath={pagePath} />;
 }
 
+let componentInstances = {};
 Object.keys(componentMappings).forEach((key) => {
   const elem = document.getElementById(key);
   if (elem) {
-    ReactDOM.render(componentMappings[key], elem);
+    componentInstances[key] = ReactDOM.render(componentMappings[key], elem);
   }
 });
 
+// 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);
+}
+
 // うわーもうー
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', function() {
   ReactDOM.render(<PageHistory pageId={pageId} crowi={crowi} />, document.getElementById('revision-history'));

resource/js/components/PageCommentFormBehavior.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PageComments from './PageComments';
+
+/**
+ * Set the behavior that post comments to #page-comment-form
+ *
+ * This is transplanted from legacy/crowi.js -- 2017.06.03 Yuki Takei
+ *
+ * @export
+ * @class PageCommentFormBehavior
+ * @extends {React.Component}
+ */
+export default class PageCommentFormBehavior extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentWillMount() {
+    const pageComments = this.props.pageComments;
+
+    if (pageComments === undefined) {
+      return;
+    }
+
+    $('#page-comment-form').on('submit', function() {
+      var $button = $('#comment-form-button');
+      $button.attr('disabled', 'disabled');
+      $.post('/_api/comments.add', $(this).serialize(), function(data) {
+        $button.prop('disabled', false);
+        if (data.ok) {
+
+          // reload comments
+          pageComments.init();
+
+          $('#comment-form-comment').val('');
+          $('#comment-form-message').text('');
+        } else {
+          $('#comment-form-message').text(data.error);
+        }
+      }).fail(function(data) {
+        if (data.status !== 200) {
+          $('#comment-form-message').text(data.statusText);
+        }
+      });
+
+      return false;
+    });
+  }
+
+  render() {
+    // render nothing
+    return <div></div>
+  }
+}
+
+PageCommentFormBehavior.propTypes = {
+  pageComments: React.PropTypes.instanceOf(PageComments),
+  crowi: PropTypes.object.isRequired,
+};

resource/js/legacy/crowi.js

@@ -482,6 +482,10 @@ $(function() {
       });
     }
 
+    /*
+     * transplanted to React components -- 2017.06.02 Yuki Takei
+     *
+
     // omg
     function createCommentHTML(revision, creator, comment, commentedAt) {
       var $comment = $('<div>');
@@ -528,9 +532,6 @@ $(function() {
 
     // get comments
     var $pageCommentList = $('.page-comments-list');
-    /*
-     * transplanted to PageComments React component -- 2017.06.02 Yuki Takei
-     *
     var $pageCommentListNewer =   $('#page-comments-list-newer');
     var $pageCommentListCurrent = $('#page-comments-list-current');
     var $pageCommentListOlder =   $('#page-comments-list-older');
@@ -565,7 +566,6 @@ $(function() {
         $('.page-comments-list-toggle-older').hide();
       }
     });
-    */
 
     // post comment event
     $('#page-comment-form').on('submit', function() {
@@ -591,6 +591,8 @@ $(function() {
       return false;
     });
 
+    */
+
     // Like
     var $likeButton = $('.like-button');
     var $likeCount = $('#like-count');