Review comment (#2459)

frontend/src/draft-review.js

@@ -3,12 +3,13 @@ import ReactDOM from 'react-dom';
 /* eslint-disable */
 import Prism from 'prismjs';
 /* eslint-enable */
-import { siteRoot, gettext, reviewID, draftOriginFilePath, draftFilePath, draftOriginRepoID, draftFileName, opStatus, publishFileVersion, originFileVersion } from './utils/constants'; 
+import { siteRoot, gettext, reviewID, draftOriginFilePath, draftFilePath, draftOriginRepoID, draftFileName, opStatus, publishFileVersion, originFileVersion } from './utils/constants';
 import { seafileAPI } from './utils/seafile-api';
 import axios from 'axios';
 import DiffViewer from '@seafile/seafile-editor/dist/viewer/diff-viewer';
 import Loading from './components/loading';
 import Toast from './components/toast';
+import ReviewComments from './components/review-list-view/review-comments';
 
 import 'seafile-ui';
 import './assets/css/fa-solid.css';
@@ -17,6 +18,7 @@ import './assets/css/fontawesome.css';
 import './css/layout.css';
 import './css/initial-style.css';
 import './css/toolbar.css';
+import './css/draft-review.css';
 
 require('@seafile/seafile-editor/dist/editor/code-hight-package');
 
@@ -28,6 +30,8 @@ class DraftReview extends React.Component {
       draftOriginContent: '',
       reviewStatus: opStatus,
       isLoading: true,
+      commentsNumber: null,
+      isShowComments: false,
     };
   }
 
@@ -82,6 +86,25 @@ class DraftReview extends React.Component {
     });
   }
 
+  toggleCommentList = () => {
+    this.setState({
+      isShowComments: !this.state.isShowComments
+    });
+  }
+
+  getCommentsNumber = () => {
+    seafileAPI.listReviewComments(reviewID).then((res) => {
+      let number = res.data.total_count;
+      this.setState({
+        commentsNumber: number,
+      });
+    });
+  }
+
+  componentWillMount() {
+    this.getCommentsNumber();
+  }
+
   render() {
     return(
       <div className="wrapper">
@@ -95,25 +118,35 @@ class DraftReview extends React.Component {
               <span className="file-copywriting">{gettext('review')}</span>
             </div>
           </div>
-          {
-            this.state.reviewStatus === 'open' &&
-            <div className="cur-file-operation">
-              <button className="btn btn-secondary file-operation-btn" title={gettext('Close Review')} onClick={this.onCloseReview}>{gettext('Close')}</button>
-              <button className="btn btn-success file-operation-btn" title={gettext('Publish Review')} onClick={this.onPublishReview}>{gettext('Publish')}</button>
-            </div>
-          }
-          {
-            this.state.reviewStatus === 'finished' &&
-            <div className="review-state review-state-finished">{gettext('Finished')}</div>
-          }
-          {
-            this.state.reviewStatus === 'closed' && 
-            <div className="review-state review-state-closed">{gettext('Closed')}</div>
-          }
+          <div className="button-group">
+            <button className="btn btn-icon btn-secondary btn-active common-list-btn"
+              id="commentsNumber" type="button" data-active="false"
+              onMouseDown={this.toggleCommentList}>
+              <i className="fa fa-comments"></i>
+              { this.state.commentsNumber > 0 &&
+                <span>&nbsp;{this.state.commentsNumber}</span>
+              }
+            </button>
+            {
+              this.state.reviewStatus === 'open' &&
+              <div className="cur-file-operation">
+                <button className="btn btn-secondary file-operation-btn" title={gettext('Close Review')} onClick={this.onCloseReview}>{gettext("Close")}</button>
+                <button className="btn btn-success file-operation-btn" title={gettext('Publish Review')} onClick={this.onPublishReview}>{gettext("Publish")}</button>
+              </div>
+            }
+            {
+              this.state.reviewStatus === 'finished' &&
+              <div className="review-state review-state-finished">{gettext('Finished')}</div>
+            }
+            {
+              this.state.reviewStatus === 'closed' && 
+              <div className="review-state review-state-closed">{gettext('Closed')}</div>
+            }
+          </div>
         </div>
         <div id="main" className="main">
           <div className="cur-view-container content-container">
-            <div className="cur-view-content">
+            <div className={!this.state.isShowComments ? "cur-view-content" : "cur-view-content cur-view-content-commenton"}>
               <div className="markdown-viewer-render-content article">
                 {this.state.isLoading ? 
                   <Loading /> :
@@ -121,6 +154,13 @@ class DraftReview extends React.Component {
                 }
               </div>
             </div>
+            { this.state.isShowComments &&
+              <ReviewComments
+                toggleCommentList={this.toggleCommentList}
+                commentsNumber={this.state.commentsNumber}
+                getCommentsNumber={this.getCommentsNumber}
+              />
+            }
           </div>
         </div>
       </div>
@@ -131,4 +171,4 @@ class DraftReview extends React.Component {
 ReactDOM.render (
   <DraftReview />,
   document.getElementById('wrapper')
-);
+);