update

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

@@ -28,16 +28,12 @@ class AddReviewerDialog extends React.Component {
 
   listReviewers = () => {
     seafileAPI.listDraftReviewers(this.props.draftID).then((res) => {
-      this.setState({
-        reviewers: res.data.reviewers
-      });
+      this.setState({ reviewers: res.data.reviewers });
     });
   }
 
   handleSelectChange = (option) => {
-    this.setState({
-      selectedOption: option,
-    });
+    this.setState({ selectedOption: option });
     this.Options = [];
   }
 
@@ -58,9 +54,7 @@ class AddReviewerDialog extends React.Component {
           for (let i = 0 ; i < res.data.failed.length ; i++) {
             errorMsg[i] = res.data.failed[i];
           }
-          this.setState({
-            errorMsg: errorMsg
-          });
+          this.setState({ errorMsg: errorMsg });
         }
         this.setState({
           selectedOption: null,
@@ -83,18 +77,18 @@ class AddReviewerDialog extends React.Component {
             newReviewers.push(this.state.reviewers[i]);
           }
         }
-        this.setState({
-          reviewers: newReviewers
-        });
+        this.setState({ reviewers: newReviewers });
       }
     });
   }
 
   render() {
+    const toggleDialog = this.props.toggleAddReviewerDialog;
+    const { reviewers, errorMsg } = this.state;
     return (
-      <Modal isOpen={true} toggle={this.props.toggleAddReviewerDialog}>
-        <ModalHeader>{gettext('Request a review')}</ModalHeader>
-        <ModalBody >
+      <Modal isOpen={true} toggle={toggleDialog}>
+        <ModalHeader toggle={toggleDialog}>{gettext('Request a review')}</ModalHeader>
+        <ModalBody>
           <p>{gettext('Add new reviewer')}</p>
           <div className='add-reviewer'>
             <UserSelect
@@ -109,16 +103,16 @@ class AddReviewerDialog extends React.Component {
               <Button color="secondary" disabled>{gettext('Submit')}</Button>
             }
           </div>
-          {this.state.errorMsg.length > 0 &&
-            this.state.errorMsg.map((item, index = 0, arr) => {
+          {errorMsg.length > 0 &&
+            errorMsg.map((item, index = 0, arr) => {
               return (
-                <p className="reviewer-select-error error" key={index}>{this.state.errorMsg[index].email}
-                  {': '}{this.state.errorMsg[index].error_msg}</p>
+                <p className="reviewer-select-error error" key={index}>{errorMsg[index].email}
+                  {': '}{errorMsg[index].error_msg}</p>
               );
             })
           }
-          { this.state.reviewers.length > 0 &&
-            this.state.reviewers.map((item, index = 0, arr) => {
+          {reviewers.length > 0 &&
+            reviewers.map((item, index = 0, arr) => {
               return (
                 <div className="reviewer-select-info" key={index}>
                   <div>
@@ -132,8 +126,7 @@ class AddReviewerDialog extends React.Component {
           }
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggleAddReviewerDialog}>
-            {gettext('Close')}</Button>
+          <Button color="secondary" onClick={toggleDialog}>{gettext('Close')}</Button>
         </ModalFooter>
       </Modal>
     );

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

@@ -13,7 +13,6 @@ const commentDialogPropTypes = {
   quote: PropTypes.string,
   newIndex: PropTypes.number,
   oldIndex: PropTypes.number,
-  draftID: PropTypes.string,
 };
 
 class ReviewCommentDialog extends React.Component {
@@ -28,43 +27,35 @@ class ReviewCommentDialog extends React.Component {
 
   handleCommentChange = (event) => {
     let comment = event.target.value;
-    this.setState({
-      comment: comment
-    });
+    this.setState({ comment: comment });
   }
 
   submitComment = () => {    
-    let comment = this.state.comment.trim();
-    if (comment.length > 0) {
-      if (this.props.quote.length > 0) {
+    const { quote, newIndex, oldIndex } = this.props;
+    const comment = this.state.comment.trim();
+    if (comment.length === 0) return;
+    if (quote.length > 0) {
       let detail = {
-          quote: this.props.quote,
-          newIndex: this.props.newIndex,
-          oldIndex: this.props.oldIndex
+        quote: quote,
+        newIndex: newIndex,
+        oldIndex: oldIndex
       };
-        let detailJSON = JSON.stringify(detail);
-        seafileAPI.postComment(draftRepoID, draftFilePath, comment, detailJSON).then((response) => {
+      seafileAPI.postComment(draftRepoID, draftFilePath, comment, JSON.stringify(detail)).then(() => {
+        this.props.onCommentAdded();
+      });
+    } else {
+      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
         this.props.onCommentAdded();
       });
     }
-      else {
-        seafileAPI.postComment(draftRepoID, draftFilePath, comment).then((response) => {
-          this.props.onCommentAdded();
-        });
-      }
-      this.setState({
-        comment: ''
-      });
-    }
+    this.setState({ comment: '' });
   }
 
   setQuoteText = (mdQuote) => {
     processor.process(mdQuote).then(
       (result) => {
         let quote = String(result);
-        this.setState({
-          quote: quote
-        });
+        this.setState({ quote: quote });
       }
     );
   }

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

@@ -37,9 +37,7 @@ class ReviewComments extends React.Component {
         let commentItem = new reviewComment(item);
         commentList.push(commentItem);
       });
-      this.setState({
-        commentsList: commentList
-      });
+      this.setState({ commentsList: commentList });
       if (scroll) {
         let that = this;
         setTimeout(() => {
@@ -50,21 +48,17 @@ class ReviewComments extends React.Component {
   }
 
   handleCommentChange = (event) => {
-    this.setState({
-      comment: event.target.value,
-    });
+    this.setState({ comment: event.target.value });
   }
 
   submitComment = () => {
     let comment = this.state.comment.trim();
     if (comment.length > 0) {
-      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then((response) => {
+      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
         this.listComments(true);
         this.props.getCommentsNumber();
       });
-      this.setState({
-        comment: ''
-      });
+      this.setState({ comment: '' });
     }
   }
 
@@ -83,9 +77,7 @@ class ReviewComments extends React.Component {
   }
 
   toggleResolvedComment = () => {
-    this.setState({
-      showResolvedComment: !this.state.showResolvedComment
-    });
+    this.setState({ showResolvedComment: !this.state.showResolvedComment });
   }
 
   deleteComment = (event) => {
@@ -97,46 +89,32 @@ class ReviewComments extends React.Component {
 
   onResizeMouseUp = () => {
     if (this.state.inResizing) {
-      this.setState({
-        inResizing: false
-      });
+      this.setState({ inResizing: false });
     }
   }
 
   onResizeMouseDown = () => {
-    this.setState({
-      inResizing: true
-    });
+    this.setState({ inResizing: true });
   };
 
   onResizeMouseMove = (event) => {
     let rate = 100 - (event.nativeEvent.clientY - 120 ) / this.refs.comment.clientHeight * 100;
     if (rate < 20 || rate > 70) {
       if (rate < 20) {
-        this.setState({
-          commentFooterHeight: 25
-        });
+        this.setState({ commentFooterHeight: 25 });
       }
       if (rate > 70) {
-        this.setState({
-          commentFooterHeight: 65
-        });
+        this.setState({ commentFooterHeight: 65 });
       }
-      this.setState({
-        inResizing: false
-      });
+      this.setState({ inResizing: false });
       return null;
     }
-    this.setState({
-      commentFooterHeight: rate
-    });
+    this.setState({ commentFooterHeight: rate });
   };
   
   scrollToQuote = (newIndex, oldIndex, quote) => {
     this.props.scrollToQuote(newIndex, oldIndex, quote);
-    this.setState({
-      comment: ''
-    });
+    this.setState({ comment: '' });
   }
 
   componentWillMount() {
@@ -151,6 +129,8 @@ class ReviewComments extends React.Component {
 
   render() {
     const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
+    const { commentsNumber } = this.props;
+    const { commentsList } = this.state;
     return (
       <div className={(this.state.inResizing || this.props.inResizing)?
         'seafile-comment seafile-comment-resizing' : 'seafile-comment'}
@@ -167,23 +147,29 @@ class ReviewComments extends React.Component {
             </label>
           </div>
         </div>
-        <div style={{height:(100-this.state.commentFooterHeight)+'%'}}>
-          { this.props.commentsNumber == 0 &&
-            <div className={'seafile-comment-list'}>
+        <div style={{height:(100 - this.state.commentFooterHeight)+'%'}}>
+          {commentsNumber == 0 &&
+            <div className="seafile-comment-list">
               <div className="comment-vacant">{gettext('No comment yet.')}</div>
             </div>
           }
-          { (this.state.commentsList.length === 0 && this.props.commentsNumber > 0) &&
+          {(commentsList.length === 0 && commentsNumber > 0) &&
             <div className={'seafile-comment-list'}><Loading/></div>
           }
-          { this.state.commentsList.length > 0 &&
-            <ul className={'seafile-comment-list'} ref='commentsList'>
-              { (this.state.commentsList.length > 0 && this.props.commentsNumber > 0) &&
-                this.state.commentsList.map((item, index) => {
+          {commentsList.length > 0 &&
+            <ul className="seafile-comment-list" ref='commentsList'>
+              {(commentsList.length > 0 && commentsNumber > 0) &&
+                commentsList.map((item, index) => {
                   return (
-                    <CommentItem item={item} showResolvedComment={this.state.showResolvedComment}
-                      resolveComment={this.resolveComment} key={index} editComment={this.editComment}
-                      scrollToQuote={this.scrollToQuote} deleteComment={this.deleteComment}/>
+                    <CommentItem
+                      item={item}
+                      key={index}
+                      showResolvedComment={this.state.showResolvedComment}
+                      resolveComment={this.resolveComment}
+                      editComment={this.editComment}
+                      scrollToQuote={this.scrollToQuote}
+                      deleteComment={this.deleteComment}
+                    />
                   );
                 })
               }
@@ -193,9 +179,13 @@ class ReviewComments extends React.Component {
         <div className="seafile-comment-footer" style={{height:this.state.commentFooterHeight+'%'}}>
           <div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div>
           <div className="seafile-add-comment">
-            <textarea className="add-comment-input" value={this.state.comment}
-              placeholder={gettext('Add a comment.')} onChange={this.handleCommentChange}
-              clos="100" rows="3" warp="virtual"></textarea>
+            <textarea
+              className="add-comment-input"
+              value={this.state.comment}
+              placeholder={gettext('Add a comment.')}
+              onChange={this.handleCommentChange}
+              clos="100" rows="3" warp="virtual"
+            ></textarea>
             <Button className="comment-btn" color="success"
               size="sm" onClick={this.submitComment}>
               {gettext('Submit')}</Button>
@@ -231,29 +221,19 @@ class CommentItem extends React.Component {
   }
 
   toggleDropDownMenu = () => {
-    this.setState({
-      dropdownOpen: !this.state.dropdownOpen,
-    });
+    this.setState({ dropdownOpen: !this.state.dropdownOpen });
   }
 
   convertComment = (item) => {
-    processor.process(item.comment).then(
-      (result) => {
+    processor.process(item.comment).then((result) => {
       let comment = String(result);
-        this.setState({
-          comment: comment
+      this.setState({ comment: comment });
     });
-      }
-    );
-    processor.process(item.quote).then(
-      (result) => {
+    processor.process(item.quote).then((result) => {
       let quote = String(result);
-        this.setState({
-          quote: quote
+      this.setState({ quote: quote });
     });
   }
-    );
-  }
 
   scrollToQuote = () => {
     const item = this.props.item;
@@ -261,9 +241,7 @@ class CommentItem extends React.Component {
   }
 
   toggleEditComment = () => {
-    this.setState({
-      editable: !this.state.editable
-    });
+    this.setState({ editable: !this.state.editable });
   }
 
   updateComment = (event) => {
@@ -275,9 +253,7 @@ class CommentItem extends React.Component {
   }
 
   handleCommentChange = (event) => {
-    this.setState({
-      newComment: event.target.value,
-    });
+    this.setState({ newComment: event.target.value });
   }
 
   componentWillMount() {
@@ -290,9 +266,7 @@ class CommentItem extends React.Component {
 
   render() {
     const item = this.props.item;
-    if (item.resolved && !this.props.showResolvedComment) {
-      return null;
-    }
+    if (item.resolved && !this.props.showResolvedComment) return null;
     if (this.state.editable) {
       return(
         <li className="seafile-comment-item" id={item.id}>
@@ -304,9 +278,16 @@ class CommentItem extends React.Component {
             </div>
           </div>
           <div className="seafile-edit-comment">
-            <textarea className="edit-comment-input" value={this.state.newComment} onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"></textarea>
-            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
-            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}> {gettext('Cancel')}</Button>
+            <textarea
+              className="edit-comment-input"
+              value={this.state.newComment}
+              onChange={this.handleCommentChange}
+              clos="100" rows="3" warp="virtual"
+            ></textarea>
+            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>
+              {gettext('Update')}</Button>{' '}
+            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}>
+              {gettext('Cancel')}</Button>
           </div>
         </li>
       );
@@ -320,17 +301,17 @@ class CommentItem extends React.Component {
             <div className="reviewer-name">{item.name}</div>
             <div className="review-time">{item.time}</div>
           </div>
-          { !item.resolved &&
+          {!item.resolved &&
             <Dropdown isOpen={this.state.dropdownOpen} size="sm"
               className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
               <DropdownToggle className="seafile-comment-dropdown-btn">
                 <i className="fas fa-ellipsis-v"></i>
               </DropdownToggle>
               <DropdownMenu>
-                { (item.userEmail === username) &&
+                {(item.userEmail === username) &&
                   <DropdownItem onClick={this.props.deleteComment}
                     className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>}
-                { (item.userEmail === username) &&
+                {(item.userEmail === username) &&
                   <DropdownItem onClick={this.toggleEditComment}
                     className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>}
                 <DropdownItem onClick={this.props.resolveComment}
@@ -339,7 +320,7 @@ class CommentItem extends React.Component {
             </Dropdown>
           }
         </div>
-        { (item.newIndex >= -1 && item.oldIndex >= -1) &&
+        {(item.newIndex >= -1 && item.oldIndex >= -1) &&
           <blockquote className="seafile-comment-content">
             <div onClick={this.scrollToQuote} dangerouslySetInnerHTML={{ __html: this.state.quote }}></div>
           </blockquote>

frontend/src/draft.js

@@ -221,12 +221,8 @@ class Draft extends React.Component {
   addComment = (e) => {
     e.stopPropagation();
     this.getQuote();
-    if (!this.quote) {
-      return;
-    }
-    this.setState({
-      isShowCommentDialog: true
-    });
+    if (!this.quote) return;
+    this.setState({ isShowCommentDialog: true });
   }
 
   onCommentAdded = () => {
@@ -482,8 +478,7 @@ class Draft extends React.Component {
       }
       if (tab == 'reviewInfo') { 
         this.initialContent();
-      }
-      else if (tab == 'history') {
+      } else if (tab == 'history') {
         this.initialDiffViewerContent();
       }
       this.setState({
@@ -553,8 +548,7 @@ class Draft extends React.Component {
         newNativeRange.setStartBefore(startNode);
         newNativeRange.setEndAfter(startNode);
         this.range =  findRange(newNativeRange, this.refs.diffViewer);
-      }
-      else {
+      } else {
         this.range = findRange(nativeRange, this.refs.diffViewer);
       }
       if (!this.range) {
@@ -588,9 +582,7 @@ class Draft extends React.Component {
 
   getQuote = () => {
     let range = this.range;
-    if (!range) {
-      return;
-    }
+    if (!range) return;
     this.quote = '';
     const { document } = this.refs.diffViewer.value;
     let { anchor, focus } = range;
@@ -633,15 +625,11 @@ class Draft extends React.Component {
   removeNullNode = (oldNodes) => {
     let newNodes = [];
     oldNodes.map((node) => {
-      const text = node.text.trim();
+      if (!node.text.trim()) return;
       const childNodes = node.nodes;
-      if (!text) {
-        return;
-      }
       if ((childNodes && childNodes.size === 1) || (!childNodes)) {
         newNodes.push(node);
-      }
-      else if (childNodes.size > 1) {
+      } else if (childNodes.size > 1) {
         let nodes = this.removeNullNode(childNodes);
         let newNode = Block.create({
           nodes: nodes,
@@ -657,29 +645,21 @@ class Draft extends React.Component {
 
   onResizeMouseUp = () => {
     if (this.state.inResizing) {
-      this.setState({
-        inResizing: false
-      });
+      this.setState({ inResizing: false });
     }
   }
 
   onResizeMouseDown = () => {
-    this.setState({
-      inResizing: true
-    });
+    this.setState({ inResizing: true });
   };
 
   onResizeMouseMove = (e) => {
     let rate = 100 - e.nativeEvent.clientX / this.refs.main.clientWidth * 100;
     if (rate < 20 || rate > 60) {
-      this.setState({
-        inResizing: false
-      });
+      this.setState({ inResizing: false });
       return null;
     }
-    this.setState({
-      rightPartWidth: rate
-    });
+    this.setState({ rightPartWidth: rate });
   };
 
   componentWillMount() {
@@ -701,20 +681,14 @@ class Draft extends React.Component {
   renderDiffButton = () => {
     switch(draftStatus) {
       case 'open':
-        if (!draftFileExists) {
+        if (!draftFileExists || !originFileExists) {
           return;
         }
-
-        if (!originFileExists) {
-          return;
-        }
-
         return this.showDiffButton();
       case 'published':
         if (!originFileExists) {
           return;
         }
-
         return this.showDiffButton();
     }
   }
@@ -879,7 +853,7 @@ class Draft extends React.Component {
             </div>
           </div>
         </div>
-        { this.state.showReviewerDialog &&
+        {this.state.showReviewerDialog &&
           <ModalPortal>
             <AddReviewerDialog
               showReviewerDialog={this.state.showReviewerDialog}
@@ -895,7 +869,6 @@ class Draft extends React.Component {
               toggleCommentDialog={this.toggleCommentDialog}
               onCommentAdded={this.onCommentAdded}
               quote={this.quote}
-              draftID={draftID}
               newIndex={this.newIndex}
               oldIndex={this.oldIndex}
             />
@@ -914,13 +887,14 @@ class SidePanelReviewers extends React.Component {
   }
 
   render() {
+    const { reviewers } = this.props;
     return (
       <div className="review-side-panel-item">
         <div className="review-side-panel-header">{gettext('Reviewers')}
           <i className="fa fa-cog" onClick={this.props.toggleAddReviewerDialog}></i>
         </div>
-        { this.props.reviewers.length > 0 ?
-          this.props.reviewers.map((item, index = 0, arr) => {
+        {reviewers.length > 0 ?
+          reviewers.map((item, index = 0, arr) => {
             return (
               <div className="reviewer-info" key={index}>
                 <img className="avatar review-side-panel-avatar" src={item.avatar_url} alt=""/>
@@ -1023,7 +997,7 @@ class SidePanelChanges extends React.Component {
         <div className="review-side-panel-header">{gettext('Changes')}</div>
         <div className="changes-info">
           <span>{gettext('Number of changes:')}{' '}{this.props.changedNumber}</span>
-          { this.props.changedNumber > 0 &&
+          {this.props.changedNumber > 0 &&
             <div>
               <i className="fa fa-arrow-circle-up" onClick={() => { this.props.scrollToChangedNode('down');}}></i>
               <i className="fa fa-arrow-circle-down" onClick={() => { this.props.scrollToChangedNode('up');}}></i>