From 2d6a05433a626386e7a211c7478b6978d7c14016 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 21 Dec 2017 15:55:18 +0100 Subject: [PATCH 1/4] Mark single dangling comments, reflow issues and scroll enhancement --- .../Moderation/components/ModerationQueue.js | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js index fbb116cd7..59c3b8b7e 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js +++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js @@ -190,6 +190,29 @@ class ModerationQueue extends React.Component { componentDidUpdate (prev) { const {commentCount, selectedCommentId} = this.props; + // Switching to multi mode. + if (prev.singleView && !this.props.singleView) { + + // Reflow virtual list. + this.reflowList(); + + // Scroll to selected comment. + if (this.props.selectedCommentId) { + const view = this.state.view; + const index = view.findIndex(({id}) => id === selectedCommentId); + this.listRef.scrollToRow(index); + } + } + + // Switching to single mode. + if (!prev.singleView && this.props.singleView) { + + // Scroll to comment. + if (this.props.selectedCommentId) { + document.querySelector(`#comment_${this.props.selectedCommentId}`).scrollIntoView(); + } + } + // If the user just moderated the last (visible) comment // AND there are more comments available on the server, // go ahead and load more comments @@ -197,7 +220,7 @@ class ModerationQueue extends React.Component { this.props.loadMore(); } - // Scroll to selected comment. + // Scroll to new selected comment. if (prev.selectedCommentId !== selectedCommentId && this.listRef) { const view = this.state.view; @@ -372,6 +395,7 @@ class ModerationQueue extends React.Component { rejectComment={props.rejectComment} currentAsset={props.currentAsset} currentUserId={this.props.currentUserId} + dangling={!this.props.commentBelongToQueue(this.props.activeTab, comment)} />; ); From f9e289561e4ed3335b2d12fc75047b866f85af02 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 21 Dec 2017 18:29:18 +0100 Subject: [PATCH 2/4] Refactor --- .../Moderation/components/ModerationQueue.js | 41 +++++++++---------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js index 59c3b8b7e..72df10682 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js +++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js @@ -195,22 +195,17 @@ class ModerationQueue extends React.Component { // Reflow virtual list. this.reflowList(); - - // Scroll to selected comment. - if (this.props.selectedCommentId) { - const view = this.state.view; - const index = view.findIndex(({id}) => id === selectedCommentId); - this.listRef.scrollToRow(index); - } } - // Switching to single mode. - if (!prev.singleView && this.props.singleView) { + if ( - // Scroll to comment. - if (this.props.selectedCommentId) { - document.querySelector(`#comment_${this.props.selectedCommentId}`).scrollIntoView(); - } + // Switching mode. + prev.singleView !== this.props.singleView || + + // Select different comment. + prev.selectedCommentId !== selectedCommentId && selectedCommentId + ) { + this.scrollToSelectedComment(); } // If the user just moderated the last (visible) comment @@ -219,15 +214,6 @@ class ModerationQueue extends React.Component { if (prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0 && commentCount > 0) { this.props.loadMore(); } - - // Scroll to new selected comment. - if (prev.selectedCommentId !== selectedCommentId && this.listRef) { - - const view = this.state.view; - const index = view.findIndex(({id}) => id === selectedCommentId); - - this.listRef.scrollToRow(index); - } } // Returns comment counts without dangling comments. @@ -265,6 +251,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(); From e34f96832a6115c8238a8bb6f6418a60b1d821c6 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 21 Dec 2017 18:36:15 +0100 Subject: [PATCH 3/4] Refactor --- .../Moderation/components/ModerationQueue.js | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js index 72df10682..77851d568 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js +++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js @@ -190,28 +190,22 @@ class ModerationQueue extends React.Component { componentDidUpdate (prev) { const {commentCount, selectedCommentId} = this.props; - // Switching to multi mode. - if (prev.singleView && !this.props.singleView) { + 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; + + if (switchedToMultiMode) { // Reflow virtual list. this.reflowList(); } - if ( - - // Switching mode. - prev.singleView !== this.props.singleView || - - // Select different comment. - prev.selectedCommentId !== selectedCommentId && selectedCommentId - ) { + if (switchedMode || selectedDifferentComment) { this.scrollToSelectedComment(); } - // 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) { + if (moderatedLastComment && commentCount > 0) { this.props.loadMore(); } } From 111af0acf86b58fa1fd01397577282b1fae5efa4 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 21 Dec 2017 18:43:39 +0100 Subject: [PATCH 4/4] More refactor --- .../src/routes/Moderation/components/ModerationQueue.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js index 77851d568..83678a4c1 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js +++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js @@ -194,6 +194,7 @@ class ModerationQueue extends React.Component { 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) { @@ -205,7 +206,7 @@ class ModerationQueue extends React.Component { this.scrollToSelectedComment(); } - if (moderatedLastComment && commentCount > 0) { + if (moderatedLastComment && hasMoreComment) { this.props.loadMore(); } }