diff --git a/frontend/src/components/file-view/comment-panel.js b/frontend/src/components/file-view/comment-panel.js index f0192f3833..9bf0aec521 100644 --- a/frontend/src/components/file-view/comment-panel.js +++ b/frontend/src/components/file-view/comment-panel.js @@ -32,6 +32,12 @@ class CommentPanel extends React.Component { this.toBeAddedParticipant = []; } + forceUpdate = () => { + this.listComments(); + this.getParticipants(); + this.listRepoRelatedUsers(); + }; + listComments = () => { seafileAPI.listComments(repoID, fileUuid).then((res) => { this.setState({ diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js index 905a6cb3a5..1de5476f38 100644 --- a/frontend/src/components/file-view/file-toolbar.js +++ b/frontend/src/components/file-view/file-toolbar.js @@ -22,7 +22,8 @@ const propTypes = { toggleCommentPanel: PropTypes.func.isRequired, toggleDetailsPanel: PropTypes.func.isRequired, setImageScale: PropTypes.func, - rotateImage: PropTypes.func + rotateImage: PropTypes.func, + isCommentUpdated: PropTypes.bool, }; const { @@ -103,7 +104,7 @@ class FileToolbar extends React.Component { const { moreDropdownOpen } = this.state; - const { isLocked, lockedByMe } = this.props; + const { isLocked, lockedByMe, isCommentUpdated } = this.props; let showLockUnlockBtn = false; let lockUnlockText; let lockUnlockIcon; if (canLockUnlockFile) { @@ -214,6 +215,7 @@ class FileToolbar extends React.Component { aria-label={gettext('Comment')} > + {isCommentUpdated && } {showShareBtn && ( { + const { type, content } = data; + if (type === 'comment-update') { + const { repo_id, file_uuid } = content; + if (repoID === repo_id && file_uuid === fileUuid) { + if (!this.state.isCommentPanelOpen) { + this.setState({ isCommentUpdated: true }); + } else { + this.commentPanelRef.forceUpdate(); + } + } + } + }; + toggleCommentPanel = () => { this.setState({ isCommentPanelOpen: !this.state.isCommentPanelOpen, isDetailsPanelOpen: false, + isCommentUpdated: false, }); }; @@ -121,6 +140,10 @@ class FileView extends React.Component { }); }; + setCommentPanelRef = (ref) => { + this.commentPanelRef = ref; + }; + render() { const { isOnlyofficeFile = false } = this.props; const { isDetailsPanelOpen, isHeaderShown } = this.state; @@ -142,6 +165,7 @@ class FileView extends React.Component { /> {isOnlyofficeFile ? @@ -54,6 +56,7 @@ class OnlyofficeFileToolbar extends React.Component { aria-label={gettext('Comment')} > + {isCommentUpdated && }