WIP: impl PageComments component

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

@@ -5,6 +5,7 @@
     <h4><i class="fa fa-comments"></i> Comments</h4>
 
     <div class="page-comments-list" id="page-comments-list">
+      {# transplanted to PageComments React component -- 2017.06.02 Yuki Takei
       <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>
 
       <a class="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer"><i class="fa fa-angle-double-up"></i> Comments for Newer Revision <i class="fa fa-angle-double-up"></i></a>
@@ -14,6 +15,7 @@
       <a class="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older"><i class="fa fa-angle-double-down"></i> Comments for Older Revision <i class="fa fa-angle-double-down"></i></a>
 
       <div class="page-comments-list-older collapse in" id="page-comments-list-older"></div>
+      #}
     </div>
 
     {% if page and not page.isDeleted() %}

resource/js/app.js

@@ -8,6 +8,7 @@ import HeaderSearchBox  from './components/HeaderSearchBox';
 import SearchPage       from './components/SearchPage';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
+import PageComments     from './components/PageComments';
 import PageAttachment   from './components/PageAttachment';
 import SeenUserList     from './components/SeenUserList';
 import RevisionPath     from './components/Page/RevisionPath';
@@ -21,10 +22,14 @@ if (!window) {
 
 const mainContent = document.querySelector('#content-main');
 let pageId = null;
+let pageRevisionId = null;
+let pageRevisionCreatedAt = null;
 let pagePath;
 let pageContent = null;
 if (mainContent !== null) {
   pageId = mainContent.attributes['data-page-id'].value;
+  pageRevisionId = mainContent.attributes['data-page-revision-id'].value;
+  pageRevisionCreatedAt = +mainContent.attributes['data-page-revision-created'].value;
   pagePath = mainContent.attributes['data-path'].value;
   const rawText = document.getElementById('raw-text-original');
   if (rawText) {
@@ -55,6 +60,7 @@ const componentMappings = {
   'search-top': <HeaderSearchBox crowi={crowi} />,
   'search-page': <SearchPage crowi={crowi} />,
   'page-list-search': <PageListSearch crowi={crowi} />,
+  'page-comments-list': <PageComments pageId={pageId} revisionId={pageRevisionId} revisionCreatedAt= {pageRevisionCreatedAt} crowi={crowi} />,
   'page-attachment': <PageAttachment pageId={pageId} pageContent={pageContent} crowi={crowi} />,
 
   //'revision-history': <PageHistory pageId={pageId} />,

resource/js/components/PageComments.js

@@ -73,9 +73,21 @@ export default class PageComments extends React.Component {
 
     return (
       <div>
-        <div>{currentElements}</div>
-        <div>{newerElements}</div>
-        <div>{olderElements}</div>
+        <div className="page-comments-list-newer collapse" id="page-comments-list-newer">
+          {newerElements}
+        </div>
+        <a className="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer">
+          <i className="fa fa-angle-double-up"></i> Comments for Newer Revision <i className="fa fa-angle-double-up"></i>
+        </a>
+        <div className="page-comments-list-current" id="page-comments-list-current">
+          {currentElements}
+        </div>
+        <a className="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older">
+          <i className="fa fa-angle-double-down"></i> Comments for Older Revision <i className="fa fa-angle-double-down"></i>
+        </a>
+        <div className="page-comments-list-older collapse in" id="page-comments-list-older">
+          {olderElements}
+        </div>
       </div>
     );
   }

resource/js/legacy/crowi.js

@@ -528,6 +528,9 @@ $(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');
@@ -562,6 +565,7 @@ $(function() {
         $('.page-comments-list-toggle-older').hide();
       }
     });
+    */
 
     // post comment event
     $('#page-comment-form').on('submit', function() {