optimize code

frontend/src/pages/markdown-editor/rich-markdown-editor/comment-panel.js

@@ -0,0 +1,243 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Button } from 'reactstrap';
+import { MentionsInput, Mention } from 'react-mentions';
+import { EditorBuilder } from '@seafile/seafile-editor';
+import { gettext } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import toaster from '../../../components/toast';
+import ParticipantsList from '../../../components/file-view/participants-list';
+import CommentItem from './comment-item';
+
+import { defaultStyle, defaultMentionStyle } from '../../../css/react-mentions-default-style';
+
+import '../css/comments-list.css';
+
+const { repoID, filePath } = window.app.pageOptions;
+const userInfo = window.app.userInfo;
+const username = userInfo.username;
+
+const CommentPanelPropTypes = {
+  relistComment: PropTypes.number,
+  participants: PropTypes.array,
+  onParticipantsChange: PropTypes.func,
+};
+
+class CommentPanel extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      commentsList: [],
+      showResolvedComment: true,
+      participants: null,
+      relatedUsers: null,
+      comment: '',
+    };
+    this.toBeAddedParticipant = [];
+  }
+
+  listComments = (isScroll) => {
+    seafileAPI.listComments(repoID, filePath).then((res) => {
+      this.setState({commentsList: res.data.comments});
+      if (isScroll) {
+        let that = this;
+        setTimeout(() => {
+          that.commentsListRef.scrollTo(0, 10000);
+        }, 100);
+      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  listRepoRelatedUsers = () => {
+    seafileAPI.listRepoRelatedUsers(repoID).then((res) => {
+      let users = res.data.user_list.map((item) => {
+        return { id: item.email, display: item.name};
+      });
+      this.setState({ relatedUsers: users });
+    });
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({ comment: event.target.value });
+  }
+
+  addComment = () => {
+    if (!this.state.comment.trim()) return;
+    console.log(filePath, repoID);
+    seafileAPI.postComment(repoID, filePath, this.state.comment.trim()).then(() => {
+      this.listComments(true);
+    }).catch(err => {
+      toaster.danger(Utils.getErrorMsg(err));
+    });
+    this.setState({ comment: '' });
+  }
+
+  onSubmit = () => {
+    this.addParticipant(username);
+    console.log(username);
+    if (this.toBeAddedParticipant.length === 0) {
+      this.addComment();
+    } else {
+      seafileAPI.addFileParticipants(repoID, filePath, this.toBeAddedParticipant).then((res) => {
+        this.onParticipantsChange(repoID, filePath);
+        this.toBeAddedParticipant = [];
+        this.addComment();
+      }).catch((err) => {
+        toaster.danger(Utils.getErrorMsg(err));
+      });
+    }
+  }
+
+  resolveComment = (event) => {
+    seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
+      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteComment = (event) => {
+    seafileAPI.deleteComment(repoID, event.target.id).then(() => {
+      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  editComment = (commentID, newComment) => {
+    seafileAPI.updateComment(repoID, commentID, null, null, newComment).then((res) => {
+      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onParticipantsChange = () => {
+    if (this.props.onParticipantsChange) {
+      this.props.onParticipantsChange();
+    } else {
+      this.getParticipants();
+    }
+  }
+
+  getParticipants = () => {
+    if (this.props.participants) {
+      this.setState({ participants: this.props.participants });
+    } else {
+      seafileAPI.listFileParticipants(repoID, filePath).then((res) => {
+        this.setState({ participants: res.data.participant_list });
+      });
+    }
+  }
+
+  checkParticipant = (email) => {
+    return this.state.participants.map((participant) => {return participant.email;}).includes(email);
+  }
+
+  addParticipant = (email) => {
+    if (this.checkParticipant(email)) return;
+    this.toBeAddedParticipant.push(email);
+  }
+
+  renderUserSuggestion = (entry, search, highlightedDisplay, index, focused) => {
+    return <div className={`user ${focused ? 'focused' : ''}`}>{highlightedDisplay}</div>;
+  }
+
+  componentDidMount() {
+    this.listComments();
+    this.getParticipants();
+    this.listRepoRelatedUsers();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.relistComment !== nextProps.relistComment) {
+      this.listComments(true);
+    }
+    if (this.props.participants !== nextProps.participants) {
+      this.setState({ participants: nextProps.participants });
+    }
+  }
+
+  scrollToQuote = (path) => {
+    const editorRef = EditorBuilder.getEditorRef();
+    editorRef.scrollToQuote(path);
+  }
+
+  setCommentsListRef = (ref) => {
+    this.commentsListRef = ref;
+  }
+
+  render() {
+    const { participants, commentsList } = this.state;
+    return (
+      <div className="seafile-comment">
+        <div className="flex-fill o-auto" ref={this.setCommentsListRef}>
+          {commentsList.length > 0 ? (
+            <ul className="seafile-comment-list">
+              {commentsList.map((item, index = 0, arr) => {
+                let oldTime = (new Date(item.created_at)).getTime();
+                let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
+                return (
+                  <CommentItem
+                    key={item.id}
+                    item={item} 
+                    time={time}
+                    deleteComment={this.deleteComment}
+                    resolveComment={this.resolveComment}
+                    editComment={this.editComment}
+                    showResolvedComment={this.state.showResolvedComment}
+                    scrollToQuote={this.scrollToQuote}
+                  />
+                );
+              })}
+            </ul>) :
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
+          }
+        </div>
+        <div className="seafile-comment-footer flex-shrink-0">
+          {participants &&
+            <ParticipantsList
+              onParticipantsChange={this.onParticipantsChange}
+              participants={participants}
+              repoID={repoID}
+              filePath={filePath}
+              showIconTip={true}
+            />
+          }
+          <MentionsInput
+            value={this.state.comment}
+            onChange={this.handleCommentChange}
+            placeholder={gettext('Add a comment...')}
+            style={defaultStyle}
+          >
+            <Mention
+              trigger="@"
+              displayTransform={(username, display) => `@${display}`}
+              data={this.state.relatedUsers}
+              renderSuggestion={this.renderUserSuggestion}
+              style={defaultMentionStyle}
+              onAdd={(id, display) => {this.addParticipant(id);}}
+              appendSpaceOnAdd={true}
+            />
+          </MentionsInput>
+          <div className="comment-submit-container">
+            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+CommentPanel.propTypes = CommentPanelPropTypes;
+
+export default CommentPanel;