diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 937e205f1..4f95b06fd 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -18,7 +18,7 @@ import {getEditableUntilDate} from './util'; import {findCommentWithId} from '../graphql/utils'; import CommentContent from './CommentContent'; import Slot from 'coral-framework/components/Slot'; -import IgnoredCommentTombstone from './IgnoredCommentTombstone'; +import CommentTombstone from './CommentTombstone'; import InactiveCommentLabel from './InactiveCommentLabel'; import {EditableCommentContent} from './EditableCommentContent'; import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils'; @@ -209,6 +209,10 @@ export default class Comment extends React.Component { } } + commentIsRejected(comment) { + return comment.status === "REJECTED"; + } + commentIsIgnored(comment) { const me = this.props.root.me; return ( @@ -338,8 +342,14 @@ export default class Comment extends React.Component { commentClassNames = [] } = this.props; + console.log('STATUS', comment.status); + + if (this.commentIsRejected(comment)) { + return ; + } + if (this.commentIsIgnored(comment)) { - return ; + return ; } const view = this.getVisibileReplies(); diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/components/CommentTombstone.js new file mode 100644 index 000000000..0afa4a555 --- /dev/null +++ b/client/coral-embed-stream/src/components/CommentTombstone.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import t from 'coral-framework/services/i18n'; + +// Render in place of a Comment when the author of the comment is +class CommentTombstone extends React.Component { + getCopy() { + const {action} = this.props; + + switch (action) { + case 'ignored': + return t('framework.comment_is_ignored') + case 'rejected': + return t('framework.comment_is_rejected') + default : + return t('framework.comment_is_hidden'); + } + } + + render() { + return ( +
+
+

+ {this.getCopy()} +

+
+ ); + } +} + +export default CommentTombstone; diff --git a/client/coral-embed-stream/src/components/IgnoredCommentTombstone.js b/client/coral-embed-stream/src/components/IgnoredCommentTombstone.js deleted file mode 100644 index bbcc5d5f6..000000000 --- a/client/coral-embed-stream/src/components/IgnoredCommentTombstone.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import t from 'coral-framework/services/i18n'; - -// Render in place of a Comment when the author of the comment is ignored -class IgnoredCommentTombstone extends React.Component { - render() { - return ( -
-
-

- {t('framework.comment_is_ignored')} -

-
- ); - } -} - -export default IgnoredCommentTombstone; diff --git a/locales/en.yml b/locales/en.yml index 4d215fd06..703de4b28 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -221,6 +221,8 @@ en: banned_account_body: "This means that you cannot Like, Report, or write comments." comment: comment comment_is_ignored: "This comment is hidden because you ignored this user." + comment_is_rejected: "You have rejected this comment." + comment_is_hidden: "This comment is not available." comments: comments configure_stream: "Configure" content_not_available: "This content is not available" diff --git a/locales/es.yml b/locales/es.yml index f9b675a10..b9bcc9c2d 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -219,6 +219,8 @@ es: banned_account_body: "Esto significa que no puedes gustar, marcar o escribir comentarios." comment: "comentario" comment_is_ignored: "Este comentario está escondido porque has ignorado al usuario." + comment_is_rejected: "Haz rechazado este comentario." + comment_is_hidden: "Este comentario no está disponible." comments: "comentarios" configure_stream: "Configurar Hilo de Comentarios" content_not_available: "Este contenido no se encuentra disponible" diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index cfc11c441..ac745474a 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -4,10 +4,10 @@ import styles from './ModerationActions.css'; import Tooltip from './Tooltip'; import {t} from 'plugin-api/beta/client/services'; import {Icon} from 'plugin-api/beta/client/components/ui'; -import RejectCommentAction from '../containers/RejectCommentAction.js'; +import RejectCommentAction from '../containers/RejectCommentAction'; import ClickOutside from 'coral-framework/components/ClickOutside'; -export default class Tag extends React.Component { +export default class ModerationActions extends React.Component { constructor() { super(); @@ -31,7 +31,8 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; - console.log(this.props); + const {comment} = this.props; + return(
@@ -40,7 +41,7 @@ export default class Tag extends React.Component { {tooltip && ( - + )}
diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js index f455a1458..aa593f69e 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js @@ -5,9 +5,7 @@ import {Icon} from 'plugin-api/beta/client/components/ui'; import cn from 'classnames'; export default ({rejectComment}) => ( - diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js index ce5fde186..a8de1844d 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js @@ -1,6 +1,6 @@ import React from 'react'; import {gql, compose} from 'react-apollo'; -import {connect, excludeIf} from 'plugin-api/beta/client/hocs'; +import {connect, excludeIf, withFragments} from 'plugin-api/beta/client/hocs'; import ModerationActions from '../components/ModerationActions'; import {can} from 'plugin-api/beta/client/services'; @@ -10,6 +10,13 @@ const mapStateToProps = ({auth}) => ({ const enhance = compose( connect(mapStateToProps), + withFragments({ + comment: gql` + fragment TalkModerationActions_comment on Comment { + id + status + } + `}), excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')) ); diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js index 63ff535ef..06040fa06 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js @@ -1,5 +1,28 @@ import React from 'react'; import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; import RejectCommentAction from '../components/RejectCommentAction'; +import {notify} from 'plugin-api/beta/client/actions/notification'; +import {getErrorMessages} from 'plugin-api/beta/client/utils'; -export default withSetCommentStatus(RejectCommentAction); +class RejectCommentActionContainer extends React.Component { + + rejectComment = async () => { + const {setCommentStatus, comment} = this.props; + + try { + const result = await setCommentStatus({commentId: comment.id, status: 'REJECTED'}); + + if (result.data.setCommentStatus.errors) { + throw result.data.setCommentStatus.errors; + } + } catch (err) { + notify('error', getErrorMessages(err)); + } + } + + render() { + return + } +} + +export default withSetCommentStatus(RejectCommentActionContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js index 3343505f3..79f0b29c9 100644 --- a/plugins/talk-plugin-moderation-actions/client/index.js +++ b/plugins/talk-plugin-moderation-actions/client/index.js @@ -1,9 +1,40 @@ import ModerationActions from './containers/ModerationActions'; import translations from './translations.yml'; +import update from 'immutability-helper'; export default { slots: { commentInfoBar: [ModerationActions], }, - translations + translations, + mutations: { + SetCommentStatus: ({variables: {status, commentId}}) => ({ + updateQueries: { + CoralEmbedStream_Embed: (prev) => { + + if (status !== 'REJECTED') { + return prev; + } + + const updated = update(prev, { + asset: { + comments: { + nodes: { + $apply: (nodes) => nodes.map((node) => { + if (node.id === commentId) { + node.status = "REJECTED"; + } + + return node; + }) + } + } + } + }); + + return updated; + } + } + }), + }, };