From 3ecb93365a287bc5bea1933864c82f2baa07ce3b Mon Sep 17 00:00:00 2001 From: David Jay Date: Fri, 3 Mar 2017 12:50:39 -0500 Subject: [PATCH 1/7] Correcting bug in keyboard shortcut next and previous. --- .../src/containers/ModerationQueue/ModerationContainer.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 25a7a9511..a82c052d5 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -32,8 +32,12 @@ class ModerationContainer extends Component { key('s', () => singleView()); key('shift+/', () => toggleModal(true)); key('esc', () => toggleModal(false)); - key('j', () => this.setState({selectedIndex: selectedIndex + 1})); - key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex})); + key('j', () => this.setState(prevState => + ({...prevState, selectedIndex: prevState.selectedIndex + 1})) + ); + key('k', () => this.setState(prevState => + ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex + 1 : selectedIndex})) + ); key('r', () => this.moderate(false)); key('t', () => this.moderate(true)); } From 45208b096fa13658aa284dcbbfcb6908b55f74c7 Mon Sep 17 00:00:00 2001 From: David Jay Date: Fri, 3 Mar 2017 12:52:20 -0500 Subject: [PATCH 2/7] Correcting bug in prev keyboard shortcut. --- .../src/containers/ModerationQueue/ModerationContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index a82c052d5..d503335b8 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -36,7 +36,7 @@ class ModerationContainer extends Component { ({...prevState, selectedIndex: prevState.selectedIndex + 1})) ); key('k', () => this.setState(prevState => - ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex + 1 : selectedIndex})) + ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex - 1 : selectedIndex})) ); key('r', () => this.moderate(false)); key('t', () => this.moderate(true)); From d9d086c61ec3bfa235238f7c56f18e7fb63e09f1 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Mon, 6 Mar 2017 13:53:56 -0700 Subject: [PATCH 3/7] remove a banned comment after it's confirmed as rejected --- client/coral-framework/graphql/mutations/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js index a874f8f0c..40469a18e 100644 --- a/client/coral-framework/graphql/mutations/index.js +++ b/client/coral-framework/graphql/mutations/index.js @@ -42,6 +42,10 @@ export const postComment = graphql(POST_COMMENT, { updateQueries: { AssetQuery: (oldData, {mutationResult:{data:{createComment:{comment}}}}) => { + if (comment.status === 'REJECTED') { + return oldData; + } + if (oldData.asset.settings.moderation === 'PRE') { return oldData; } From 3a31ca8d3892074382d4558f218fd80671291311 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 7 Mar 2017 10:06:03 -0700 Subject: [PATCH 4/7] blur the comment until it's ready --- client/coral-embed-stream/src/Comment.css | 7 ++++++- client/coral-embed-stream/src/Comment.js | 1 + client/coral-framework/graphql/mutations/index.js | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css index 7bc1a21f4..6966d82ab 100644 --- a/client/coral-embed-stream/src/Comment.css +++ b/client/coral-embed-stream/src/Comment.css @@ -3,5 +3,10 @@ } .Comment { - + +} + +.pendingComment { + filter: blur(2px); + pointer-events: none; } diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 72449c906..059c366ff 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -116,6 +116,7 @@ class Comment extends React.Component { const dontagree = getActionSummary('DontAgreeActionSummary', comment); let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`; commentClass += highlighted === comment.id ? ' highlighted-comment' : ''; + commentClass += comment.id === 'pending' ? ' pendingComment' : ''; // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar) const notifyOnError = (fn, errorToMessage) => async () => { diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js index 40469a18e..d319c2f8f 100644 --- a/client/coral-framework/graphql/mutations/index.js +++ b/client/coral-framework/graphql/mutations/index.js @@ -35,7 +35,7 @@ export const postComment = graphql(POST_COMMENT, { action_summaries: [], tags: [], status: null, - id: `${Date.now()}_temp_id` + id: 'pending' } } }, From 5e4c251e835e82a24fab61dc0f2373f902a7a673 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 7 Mar 2017 10:47:51 -0700 Subject: [PATCH 5/7] style the pending comment correctly --- client/coral-embed-stream/src/Comment.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 059c366ff..0a3cdb78b 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -116,7 +116,7 @@ class Comment extends React.Component { const dontagree = getActionSummary('DontAgreeActionSummary', comment); let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`; commentClass += highlighted === comment.id ? ' highlighted-comment' : ''; - commentClass += comment.id === 'pending' ? ' pendingComment' : ''; + commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : ''; // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar) const notifyOnError = (fn, errorToMessage) => async () => { From 0863ca26ff357b5d0309578e0ceb494b04ae5383 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 8 Mar 2017 09:56:36 -0700 Subject: [PATCH 6/7] update dashboard links --- .../src/containers/Dashboard/FlagWidget.js | 13 +++++++------ .../src/containers/Dashboard/LikeWidget.js | 13 +++++++------ .../src/containers/Dashboard/Widget.css | 15 +++++++++++++++ 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index da71ac04a..4b86ec7d7 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -16,7 +16,7 @@ const FlagWidget = (props) => { {lang.t('streams.article')} - {lang.t('dashboard.flags')} + {lang.t('dashboard.flags')} @@ -27,20 +27,21 @@ const FlagWidget = (props) => { return ( - +

{asset.title}

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

- -

{flagSummary ? flagSummary.actionCount : 0}

- +

{flagSummary ? flagSummary.actionCount : 0}

+ + + Moderate ); }) - : {lang.t('dashboard.no_flags')} + : {lang.t('dashboard.no_flags')} } { /* rows in a table with a fixed height will expand and ignore height. this extra row will expand to fill the extra space. */ diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 25e851966..d52676ae4 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -17,7 +17,7 @@ const LikeWidget = (props) => { {lang.t('streams.article')} - {lang.t('modqueue.likes')} + {lang.t('modqueue.likes')} @@ -28,20 +28,21 @@ const LikeWidget = (props) => { return ( - +

{asset.title}

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

- -

{likeSummary ? likeSummary.actionCount : 0}

- +

{likeSummary ? likeSummary.actionCount : 0}

+ + + Moderate ); }) - : {lang.t('dashboard.no_likes')} + : {lang.t('dashboard.no_likes')} } { /* rows in a table with a fixed height will expand and ignore height. this extra row will expand to fill the extra space. */ diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css index cb764d9cc..3170cf332 100644 --- a/client/coral-admin/src/containers/Dashboard/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -55,11 +55,26 @@ padding: 10px; } +.widgetTable tbody td:last-child { + padding-top: 0; +} + .linkToAsset { display: block; text-decoration: none; } +.linkToModerate { + background-color: #e0e0e0; + padding: 10px 14px; + text-decoration: none; + color: black; +} + +.linkToModerate:hover { + background-color: #ccc; +} + .lede { font-size: 0.9em; color: #aaa; From 15193e97a88def11eb147638957b2c158caa785b Mon Sep 17 00:00:00 2001 From: David Jay Date: Wed, 8 Mar 2017 13:01:37 -0500 Subject: [PATCH 7/7] Preventing keys from scrolling past the end of the comment queue. --- .../ModerationQueue/ModerationContainer.js | 45 +++++++++++++------ 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index d503335b8..2f43911b1 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -26,27 +26,21 @@ class ModerationContainer extends Component { componentWillMount() { const {toggleModal, singleView} = this.props; - const {selectedIndex} = this.state; - + this.props.fetchSettings(); key('s', () => singleView()); key('shift+/', () => toggleModal(true)); key('esc', () => toggleModal(false)); - key('j', () => this.setState(prevState => - ({...prevState, selectedIndex: prevState.selectedIndex + 1})) - ); - key('k', () => this.setState(prevState => - ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex - 1 : selectedIndex})) - ); - key('r', () => this.moderate(false)); - key('t', () => this.moderate(true)); + key('j', this.select(true)); + key('k', this.select(false)); + key('r', this.moderate(false)); + key('t', this.moderate(true)); } - moderate = (accept) => { - const {data, route, acceptComment, rejectComment} = this.props; + moderate = (accept) => () => { + const {acceptComment, rejectComment} = this.props; const {selectedIndex} = this.state; - const activeTab = route.path === ':id' ? 'premod' : route.path; - const comments = data[activeTab]; + const comments = this.getComments(); const commentId = {commentId: comments[selectedIndex].id}; if (accept) { @@ -54,7 +48,30 @@ class ModerationContainer extends Component { } else { rejectComment(commentId); } + } + getComments = () => { + const {data, route} = this.props; + const activeTab = route.path === ':id' ? 'premod' : route.path; + return data[activeTab]; + } + + select = (next) => () => { + if (next) { + this.setState(prevState => + ({ + ...prevState, + selectedIndex: prevState.selectedIndex < this.getComments().length - 1 + ? prevState.selectedIndex + 1 : prevState.selectedIndex + })); + } else { + this.setState(prevState => + ({ + ...prevState, + selectedIndex: prevState.selectedIndex > 0 ? + prevState.selectedIndex - 1 : prevState.selectedIndex + })); + } } componentWillUnmount() {