Ban In-Stream

plugin-api/beta/client/hocs/index.js

@@ -7,6 +7,7 @@ export {default as connect} from 'coral-framework/hocs/connect';
 export {default as withEmit} from 'coral-framework/hocs/withEmit';
 export {
   withIgnoreUser,
+  withSetUserStatus,
   withStopIgnoringUser,
   withSetCommentStatus,
 } from 'coral-framework/graphql/mutations';

plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './styles.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+import cn from 'classnames';
+
+export default ({banUser, comment: {}}) => (
+  <button 
+    className={cn(styles.button, 'talk-plugin-moderation-actions-reject')}
+    onClick={banUser} >
+    Ban User
+  </button>
+);

plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js

@@ -6,6 +6,7 @@ import {Icon} from 'plugin-api/beta/client/components/ui';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import RejectCommentAction from '../containers/RejectCommentAction';
 import ApproveCommentAction from '../containers/ApproveCommentAction';
+import BanUserAction from '../containers/BanUserAction';
 import {Slot} from 'plugin-api/beta/client/components';
 
 export default class ModerationActions extends React.Component {
@@ -29,6 +30,7 @@ export default class ModerationActions extends React.Component {
               />
               <ApproveCommentAction comment={comment} hideMenu={hideMenu} />
               <RejectCommentAction comment={comment} hideMenu={hideMenu} />
+              <BanUserAction comment={comment} hideMenu={hideMenu} />
             </Menu>
           )}
         </div>

plugins/talk-plugin-moderation-actions/client/containers/BanUserAction.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
+import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import {notify} from 'plugin-api/beta/client/actions/notification';
+import BanUserAction from '../components/BanUserAction';
+import {connect, withSetCommentStatus, withSetUserStatus} from 'plugin-api/beta/client/hocs';
+
+class BanUserActionContainer extends React.Component {
+
+  banUser = async () => {
+    const {
+      notify,
+      comment,
+      hideMenu,
+      setCommentStatus,
+      setUserStatus
+    } = this.props;
+
+    try {
+      await setUserStatus({
+        userId: comment.user.id,
+        status: 'BANNED'
+      });
+
+      hideMenu();
+
+      if (comment.status !== 'REJECTED') {
+        await setCommentStatus({
+          commentId: comment.id,
+          status: 'REJECTED'
+        });
+      }
+    }
+    catch(err) {
+      notify('error', getErrorMessages(err));
+    }
+  }
+
+  render() {
+    return <BanUserAction 
+      comment={this.props.comment}
+      banUser={this.banUser}
+    />;
+  }
+}
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    notify
+  }, dispatch);
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withSetCommentStatus,
+  withSetUserStatus
+);
+
+export default enhance(BanUserActionContainer);

plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js

@@ -47,9 +47,9 @@ class ModerationActionsContainer extends React.Component {
       root={this.props.root}
       asset={this.props.asset}
       comment={this.props.comment}
-      menuVisible={this.props.showMenuForComment === this.props.comment.id}
       toogleMenu={this.toogleMenu}
       hideMenu={this.hideMenu}
+      menuVisible={this.props.showMenuForComment === this.props.comment.id}
     />;
   }
 }
@@ -77,6 +77,9 @@ const enhance = compose(
       fragment TalkModerationActions_comment on Comment {
         id
         status
+        user {
+          id
+        }
         tags {
           tag {
             name