diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js index 1039c9913..898991aad 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js +++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js @@ -207,23 +207,24 @@ class ModerationQueue extends React.Component { componentDidUpdate(prev) { const {commentCount, selectedCommentId} = this.props; - // If the user just moderated the last (visible) comment - // AND there are more comments available on the server, - // go ahead and load more comments - if ( - prev.comments.length > 0 && - this.getCommentCountWithoutDagling() === 0 && - commentCount > 0 - ) { - this.props.loadMore(); + const switchedToMultiMode = prev.singleView && !this.props.singleView; + const switchedMode = prev.singleView !== this.props.singleView; + const selectedDifferentComment = prev.selectedCommentId !== selectedCommentId && selectedCommentId; + const moderatedLastComment = prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0; + const hasMoreComment = commentCount > 0; + + if (switchedToMultiMode) { + + // Reflow virtual list. + this.reflowList(); } - // Scroll to selected comment. - if (prev.selectedCommentId !== selectedCommentId && this.listRef) { - const view = this.state.view; - const index = view.findIndex(({id}) => id === selectedCommentId); + if (switchedMode || selectedDifferentComment) { + this.scrollToSelectedComment(); + } - this.listRef.scrollToRow(index); + if (moderatedLastComment && hasMoreComment) { + this.props.loadMore(); } } @@ -267,6 +268,17 @@ class ModerationQueue extends React.Component { this.listRef = list; }; + scrollToSelectedComment = (props = this.props, state = this.state) => { + if (props.singleMode) { + document.querySelector(`#comment_${props.selectedCommentId}`).scrollIntoView(); + } + else if(this.listRef) { + const view = state.view; + const index = view.findIndex(({id}) => id === props.selectedCommentId); + this.listRef.scrollToRow(index); + } + } + viewNewComments = (callback) => { this.setState(resetCursors, () => { this.reflowList(); @@ -394,6 +406,7 @@ class ModerationQueue extends React.Component { rejectComment={props.rejectComment} currentAsset={props.currentAsset} currentUserId={this.props.currentUserId} + dangling={!this.props.commentBelongToQueue(this.props.activeTab, comment)} />; );