Cache and Tombstoning rejected comment working

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 <CommentTombstone action="rejected" />;
+    }
+
     if (this.commentIsIgnored(comment)) {
-      return <IgnoredCommentTombstone />;
+      return <CommentTombstone action="ignored" />;
     }
 
     const view = this.getVisibileReplies();

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 <action>
+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 (
+      <div>
+        <hr aria-hidden={true} />
+        <p style={{
+          backgroundColor: '#F0F0F0',
+          textAlign: 'center',
+          padding: '1em',
+          color: '#3E4F71',
+        }}>
+          {this.getCopy()}
+        </p>
+      </div>
+    );
+  }
+}
+
+export default CommentTombstone;

client/coral-embed-stream/src/components/IgnoredCommentTombstone.js

@@ -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 (
-      <div>
-        <hr aria-hidden={true} />
-        <p style={{
-          backgroundColor: '#F0F0F0',
-          textAlign: 'center',
-          padding: '1em',
-          color: '#3E4F71',
-        }}>
-          {t('framework.comment_is_ignored')}
-        </p>
-      </div>
-    );
-  }
-}
-
-export default IgnoredCommentTombstone;

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"

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"

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(
       <ClickOutside onClickOutside={this.hideTooltip}>
         <div className={cn(styles.moderationActions, 'talk-plugin-moderation-actions')}>
@@ -40,7 +41,7 @@ export default class Tag extends React.Component {
           </span>
           {tooltip && (
             <Tooltip>
-              <RejectCommentAction />
+              <RejectCommentAction comment={comment} />
             </Tooltip>
           )}
         </div>

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}) => (
-  <button
-    className={cn(styles.button, 'talk-plugin-moderation-actions-reject')}
-    onClick={rejectComment}>
+  <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={rejectComment}>
     <Icon name="clear" className={styles.icon} />
     {t('talk-plugin-moderation-actions.reject_comment')}
   </button>

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'))
 );
 

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 <RejectCommentAction rejectComment={this.rejectComment}/>
+  }
+}
+
+export default withSetCommentStatus(RejectCommentActionContainer);

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;
+        }
+      }
+    }),
+  },
 };