Update draft page (#3036)

* draft-update

* test

* update draft reviewer api

* update draft page

* add file path

frontend/src/components/dialog/add-reviewer-dialog.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import AsyncSelect from 'react-select/lib/Async';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import UserSelect from '../user-select.js';
 import '../../css/add-reviewer-dialog.css';
 
 const propTypes = {
   showReviewerDialog: PropTypes.bool.isRequired,
-  reviewID: PropTypes.string.isRequired,
+  draftID: PropTypes.string.isRequired,
   toggleAddReviewerDialog: PropTypes.func.isRequired,
   reviewers: PropTypes.array.isRequired
 };
@@ -27,7 +27,7 @@ class AddReviewerDialog extends React.Component {
   }
 
   listReviewers = () => {
-    seafileAPI.listReviewers(this.props.reviewID).then((res) => {
+    seafileAPI.listDraftReviewers(this.props.draftID).then((res) => {
       this.setState({
         reviewers: res.data.reviewers
       });
@@ -41,29 +41,9 @@ class AddReviewerDialog extends React.Component {
     this.Options = [];
   }
 
-  loadOptions = (value, callback) => {
-    if (value.trim().length > 0) {
-      seafileAPI.searchUsers(value.trim()).then((res) => {
-        this.Options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          let obj = {};
-          obj.value = res.data.users[i].name;
-          obj.email = res.data.users[i].email;
-          obj.label =
-            <React.Fragment>
-              <img src={res.data.users[i].avatar_url} className="avatar reviewer-select-avatar" alt=""/>
-              <span className='reviewer-select-name'>{res.data.users[i].name}</span>
-            </React.Fragment>;
-          this.Options.push(obj);
-        }
-        callback(this.Options);
-      });
-    }
-  }
-
   addReviewers = () => {
     if (this.state.selectedOption.length > 0 ) {
-      this.refs.reviewSelect.select.onChange([], { action: 'clear' });
+      this.refs.reviewSelect.clearSelect();
       let reviewers = [];
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
         reviewers[i] = this.state.selectedOption[i].email;
@@ -72,7 +52,7 @@ class AddReviewerDialog extends React.Component {
         loading: true,
         errorMsg: [],
       });
-      seafileAPI.addReviewers(this.props.reviewID, reviewers).then((res) => {
+      seafileAPI.addDraftReviewers(this.props.draftID, reviewers).then((res) => {
         if (res.data.failed.length > 0) {
           let errorMsg = [];
           for (let i = 0 ; i < res.data.failed.length ; i++) {
@@ -95,7 +75,7 @@ class AddReviewerDialog extends React.Component {
 
   deleteReviewer = (event) => {
     let reviewer = event.target.getAttribute('name');
-    seafileAPI.deleteReviewer(this.props.reviewID, reviewer).then((res) => {
+    seafileAPI.deleteDraftReviewer(this.props.draftID, reviewer).then((res) => {
       if (res.data === 200) {
         let newReviewers = [];
         for (let i = 0; i < this.state.reviewers.length; i ++) {
@@ -116,12 +96,12 @@ class AddReviewerDialog extends React.Component {
         <ModalHeader>{gettext('Request a review')}</ModalHeader>
         <ModalBody >
           <p>{gettext('Add new reviewer')}</p>
-          <AsyncSelect
-            className='reviewer-select' isMulti isFocused
-            loadOptions={this.loadOptions}
+          <UserSelect
             placeholder={gettext('Please enter 1 or more character')}
-            onChange={this.handleSelectChange}
-            ref="reviewSelect" isClearable classNamePrefix
+            onSelectChange={this.handleSelectChange}
+            ref="reviewSelect"
+            isMulti={true}
+            className='reviewer-select'
           />
           {this.state.errorMsg.length > 0 &&
             this.state.errorMsg.map((item, index = 0, arr) => {

frontend/src/components/review-list-view/review-comment-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
-import { reviewID, gettext, name } from '../../utils/constants';
+import { gettext, name, draftRepoID, draftFilePath } from '../../utils/constants';
 import { processor } from '../../utils/seafile-markdown2html';
 
 import '../../css/review-comment-dialog.css';
@@ -13,6 +13,7 @@ const commentDialogPropTypes = {
   quote: PropTypes.string,
   newIndex: PropTypes.number,
   oldIndex: PropTypes.number,
+  draftID: PropTypes.string,
 };
 
 class ReviewCommentDialog extends React.Component {
@@ -42,12 +43,12 @@ class ReviewCommentDialog extends React.Component {
           oldIndex: this.props.oldIndex
         };
         let detailJSON = JSON.stringify(detail);
-        seafileAPI.addReviewComment(reviewID, comment, detailJSON).then((response) => {
+        seafileAPI.postComment(draftRepoID, draftFilePath, comment, detailJSON).then((response) => {
           this.props.onCommentAdded();
         });
       }
       else {
-        seafileAPI.addReviewComment(reviewID, comment).then((response) => {
+        seafileAPI.postComment(draftRepoID, draftFilePath, comment).then((response) => {
           this.props.onCommentAdded();
         });
       }

frontend/src/components/review-list-view/review-comments.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { processor } from '../../utils/seafile-markdown2html';
 import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
-import { reviewID, gettext } from '../../utils/constants';
+import { gettext, draftFilePath, draftRepoID } from '../../utils/constants';
 import Loading from '../../components/loading.js';
 import reviewComment from '../../models/review-comment.js';
 import { username } from '../../utils/constants.js';
@@ -24,14 +24,14 @@ class ReviewComments extends React.Component {
     this.state = {
       commentsList: [],
       inResizing: false,
-      commentFooterHeight: 30,
+      commentFooterHeight: 25,
       showResolvedComment: true,
       comment: '',
     };
   }
 
   listComments = (scroll) => {
-    seafileAPI.listReviewComments(reviewID).then((response) => {
+    seafileAPI.listComments(draftRepoID, draftFilePath).then((response) => {
       response.data.comments.reverse();
       let commentList = [];
       response.data.comments.forEach(item => {
@@ -56,7 +56,7 @@ class ReviewComments extends React.Component {
   submitComment = () => {
     let comment = this.state.comment.trim();
     if (comment.length > 0) {
-      seafileAPI.addReviewComment(reviewID, comment).then((response) => {
+      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then((response) => {
         this.listComments(true);
         this.props.getCommentsNumber();
       });
@@ -67,7 +67,7 @@ class ReviewComments extends React.Component {
   }
 
   resolveComment = (event) => {
-    seafileAPI.updateReviewComment(reviewID, event.target.id, 'true').then((res) => {
+    seafileAPI.updateComment(draftRepoID, event.target.id, 'true').then((res) => {
       this.props.getCommentsNumber();
       this.listComments();
     });
@@ -80,7 +80,7 @@ class ReviewComments extends React.Component {
   }
 
   deleteComment = (event) => {
-    seafileAPI.deleteReviewComment(reviewID, event.target.id).then((res) => {
+    seafileAPI.deleteComment(draftRepoID, event.target.id).then((res) => {
       this.props.getCommentsNumber();
       this.listComments();
     });