From fc3acecf614fd83370829b252ee64ff97cd9958f Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 31 Jul 2017 20:09:16 +0700 Subject: [PATCH 1/3] Refactor isCommentActive logic --- client/coral-embed-stream/src/components/Comment.js | 4 ++-- client/coral-embed-stream/src/components/Stream.js | 3 ++- client/coral-framework/utils/index.js | 4 ++++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 8bece5dc5..96a93728c 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -21,7 +21,7 @@ import CommentContent from './CommentContent'; import Slot from 'coral-framework/components/Slot'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; import {EditableCommentContent} from './EditableCommentContent'; -import {getActionSummary, iPerformedThisAction, forEachError} from 'coral-framework/utils'; +import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive} from 'coral-framework/utils'; import t from 'coral-framework/services/i18n'; const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF'); @@ -317,7 +317,7 @@ export default class Comment extends React.Component { } = this.props; const view = this.getVisibileReplies(); - const isActive = ['NONE', 'ACCEPTED'].indexOf(comment.status) >= 0; + const isActive = isCommentActive(comment.status); const {loadingState} = this.state; const isPending = comment.id.indexOf('pending') >= 0; const isHighlighted = highlighted === comment.id; diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 66ffc0fc8..667b57a8a 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -13,6 +13,7 @@ import t, {timeago} from 'coral-framework/services/i18n'; import {getSlotComponents} from 'coral-framework/helpers/plugins'; import CommentBox from 'talk-plugin-commentbox/CommentBox'; import QuestionBox from 'talk-plugin-questionbox/QuestionBox'; +import {isCommentActive} from 'coral-framework/utils'; import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui'; import cn from 'classnames'; @@ -105,7 +106,7 @@ class Stream extends React.Component { // even though the permalinked comment is the highlighted one, we're displaying its parent + replies let highlightedComment = comment && getTopLevelParent(comment); if (highlightedComment) { - const isInactive = ['NONE', 'ACCEPTED'].indexOf(comment.status) === -1; + const isInactive = !isCommentActive(comment.status); if (comment.parent && isInactive) { // the highlighted comment is not active and as such not in the replies, so we diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js index 3768b3940..96d9ed629 100644 --- a/client/coral-framework/utils/index.js +++ b/client/coral-framework/utils/index.js @@ -187,3 +187,7 @@ export function buildUrl({protocol, hostname, port, pathname, search, hash} = wi export function getSlotFragmentSpreads(slots, resource) { return `...${slots.map((s) => `TalkSlot_${capitalize(s)}_${resource}`).join('\n...')}\n`; } + +export function isCommentActive(commentStatus) { + return ['NONE', 'ACCEPTED'].indexOf(commentStatus) >= 0; +} From 97c75be60439e876dc871ac33629ede1771abe57 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 31 Jul 2017 20:17:06 +0700 Subject: [PATCH 2/3] Comments explaining why we have inactive comments in the stream --- client/coral-embed-stream/src/components/Comment.js | 3 +++ client/coral-embed-stream/src/components/Stream.js | 2 ++ 2 files changed, 5 insertions(+) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 96a93728c..67fc8ee5a 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -317,7 +317,10 @@ export default class Comment extends React.Component { } = this.props; const view = this.getVisibileReplies(); + + // Inactive comments can be viewed by moderators and admins (e.g. using permalinks). const isActive = isCommentActive(comment.status); + const {loadingState} = this.state; const isPending = comment.id.indexOf('pending') >= 0; const isHighlighted = highlighted === comment.id; diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 667b57a8a..421a0cf7a 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -106,6 +106,8 @@ class Stream extends React.Component { // even though the permalinked comment is the highlighted one, we're displaying its parent + replies let highlightedComment = comment && getTopLevelParent(comment); if (highlightedComment) { + + // Inactive comments can be viewed by moderators and admins (e.g. using permalinks). const isInactive = !isCommentActive(comment.status); if (comment.parent && isInactive) { From 3954b7a268152e04d035ffb24dda1d4a8a25046e Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 31 Jul 2017 22:37:08 +0700 Subject: [PATCH 3/3] Label for inactive comments --- .../src/components/Comment.js | 6 +++- .../src/components/InactiveCommentLabel.css | 32 +++++++++++++++++ .../src/components/InactiveCommentLabel.js | 36 +++++++++++++++++++ 3 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 client/coral-embed-stream/src/components/InactiveCommentLabel.css create mode 100644 client/coral-embed-stream/src/components/InactiveCommentLabel.js diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 67fc8ee5a..34f672d8a 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -20,6 +20,7 @@ import {TopRightMenu} from './TopRightMenu'; import CommentContent from './CommentContent'; import Slot from 'coral-framework/components/Slot'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; +import InactiveCommentLabel from './InactiveCommentLabel'; import {EditableCommentContent} from './EditableCommentContent'; import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive} from 'coral-framework/utils'; import t from 'coral-framework/services/i18n'; @@ -438,7 +439,7 @@ export default class Comment extends React.Component { } } - { (currentUser && (comment.user.id !== currentUser.id)) && + { isActive && (currentUser && (comment.user.id !== currentUser.id)) && /* TopRightMenu allows currentUser to ignore other users' comments */ @@ -448,6 +449,9 @@ export default class Comment extends React.Component { addNotification={addNotification} /> } + { !isActive && + + }
{ diff --git a/client/coral-embed-stream/src/components/InactiveCommentLabel.css b/client/coral-embed-stream/src/components/InactiveCommentLabel.css new file mode 100644 index 000000000..01ba197b5 --- /dev/null +++ b/client/coral-embed-stream/src/components/InactiveCommentLabel.css @@ -0,0 +1,32 @@ +.root { + display: inline-block; + color: white; + background: grey; + height: 22px; + box-sizing: border-box; + line-height: 19px; + padding: 2px 6px 2px 4px; + border-radius: 2px; + font-size: 12px; + text-transform: capitalize; +} + +.icon { + font-size: 14px; + vertical-align: text-top; + margin: 0; + margin-right: 4px; +} + +.label { + display: inline-block; +} + +.premod { + background: #063B9A; +} + +.rejected { + background: #d03235; +} + diff --git a/client/coral-embed-stream/src/components/InactiveCommentLabel.js b/client/coral-embed-stream/src/components/InactiveCommentLabel.js new file mode 100644 index 000000000..824692558 --- /dev/null +++ b/client/coral-embed-stream/src/components/InactiveCommentLabel.js @@ -0,0 +1,36 @@ +import React, {PropTypes} from 'react'; +import t from 'coral-framework/services/i18n'; +import styles from './InactiveCommentLabel.css'; +import {Icon} from 'coral-ui'; +import cn from 'classnames'; + +const InactiveCommentLabel = ({status, className, ...rest}) => { + let label; + let icon; + + switch (status) { + case 'PREMOD': + label = t('modqueue.premod'); + icon = 'query_builder'; + break; + case 'REJECTED': + label = t('modqueue.rejected'); + icon = 'close'; + break; + default: + throw new Error(`Unknown inactive status ${status}`); + } + + return ( + + + {label} + + ); +}; + +InactiveCommentLabel.propTypes = { + status: PropTypes.string.isRequired, +}; + +export default InactiveCommentLabel;