Cache and Tombstoning rejected comment working

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