Ban User confirmation box

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

@@ -9,8 +9,9 @@ export const closeMenu = () => ({
   type: CLOSE_MENU,
 });
 
-export const openDialog = () => ({
+export const openDialog = (comment) => ({
   type: OPEN_DIALOG,
+  comment
 });
 
 export const closeDialog = () => ({

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

@@ -4,10 +4,10 @@ import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
-export default ({openDialog}) => (
+export default ({onBanUser}) => (
   <button 
     className={cn(styles.button, 'talk-plugin-moderation-actions-reject')}
-    onClick={openDialog} >
+    onClick={onBanUser} >
     <Icon name="block" className={styles.icon} />
     {t('talk-plugin-moderation-actions.ban_user')}
   </button>

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

@@ -3,13 +3,16 @@ import {compose} from 'react-apollo';
 import {openDialog} from '../actions';
 import {bindActionCreators} from 'redux';
 import BanUserAction from '../components/BanUserAction';
-import {notify} from 'plugin-api/beta/client/actions/notification';
 import {connect, excludeIf} from 'plugin-api/beta/client/hocs';
 
 class BanUserActionContainer extends React.Component {
+  onBanUser = () => {
+    this.props.openDialog(this.props.comment);
+  }
+
   render() {
     return <BanUserAction 
-      openDialog={this.props.openDialog}
+      onBanUser={this.onBanUser}
       comment={this.props.comment}
       openDialog={this.props.openDialog}
     />;

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
-import {closeDialog} from '../actions';
+import {closeDialog, closeMenu} from '../actions';
 import {notify} from 'plugin-api/beta/client/actions/notification';
 import {connect, withSetCommentStatus, withSetUserStatus} from 'plugin-api/beta/client/hocs';
 import {getErrorMessages} from 'plugin-api/beta/client/utils';
@@ -14,7 +14,8 @@ class BanUserDialogContainer extends React.Component {
     const {
       notify,
       comment,
-      hideMenu,
+      closeMenu,
+      closeDialog,
       setCommentStatus,
       setUserStatus
     } = this.props;
@@ -25,7 +26,8 @@ class BanUserDialogContainer extends React.Component {
         status: 'BANNED'
       });
 
-      hideMenu();
+      closeMenu();
+      closeDialog();
 
       if (comment.status !== 'REJECTED') {
         await setCommentStatus({
@@ -52,12 +54,14 @@ class BanUserDialogContainer extends React.Component {
 
 const mapStateToProps = ({talkPluginModerationActions: state}) => ({
   showDialog: state.showDialog,
+  comment: state.comment
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
-    closeDialog
+    closeDialog,
+    closeMenu
   }, dispatch);
 
 const enhance = compose(
@@ -66,4 +70,4 @@ const enhance = compose(
   withSetUserStatus
 );
 
-export default enhance(BanUserDialogContainer);
+export default enhance(BanUserDialogContainer);

plugins/talk-plugin-moderation-actions/client/reducer.js

@@ -2,7 +2,8 @@ import {OPEN_MENU, CLOSE_MENU, OPEN_DIALOG, CLOSE_DIALOG} from './constants';
 
 const initialState = {
   showMenuForComment: null,
-  showDialog: false
+  showDialog: false,
+  comment: null
 };
 
 export default function reducer(state = initialState, action) {
@@ -20,12 +21,14 @@ export default function reducer(state = initialState, action) {
   case OPEN_DIALOG:
     return {
       ...state,
-      showDialog: true
+      showDialog: true,
+      comment: action.comment
     };
   case CLOSE_DIALOG:
     return {
       ...state,
-      showDialog: false
+      showDialog: false,
+      comment: null
     };
   default :
     return state;