Show the Dialog.

client/coral-admin/src/components/BanUserDialog.js

@@ -1,13 +1,40 @@
 import React from 'react';
+
 import {Dialog} from 'coral-ui';
+import Button from 'coral-ui/components/Button';
+
 import styles from './BanUserDialog.css';
 
-import BanUserDialogContent from './BanUserDialogContent';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
 
-const BanUserDialog = ({open, handleClose, ...props}) => (
-  <Dialog className={styles.dialog} open={open}>
+const BanUserDialog = ({open, handleClose, authorName}) => (
+  <Dialog className={styles.dialog} open={open} title={lang.t('bandialog.ban_user')} onClose={handleClose} onCancel={handleClose}>
     <span className={styles.close} onClick={handleClose}>×</span>
-    <BanUserDialogContent {...props} />
+      <div>
+        <div className={styles.header}>
+          <h3>
+            {lang.t('bandialog.ban_user')}
+          </h3>
+        </div>
+        <div className={styles.separator}>
+          <h4>
+            {lang.t('bandialog.are_you_sure', authorName)}
+          </h4>
+          <i>
+            {lang.t('bandialog.note')}
+          </i>
+        </div>
+        <div className={styles.buttons}>
+          <Button cStyle="cancel" full>
+            {lang.t('bandialog.cancel')}
+          </Button>
+          <Button cStyle="black" full>
+            {lang.t('bandialog.yes_ban_user')}
+          </Button>
+        </div>
+      </div>
   </Dialog>
 );
 export default BanUserDialog;

client/coral-admin/src/components/BanUserDialogContent.js

@@ -5,7 +5,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-export const BanUserDialogContent = ({...props}) => (
+export const BanUserDialogContent = () => (
   <div>
     <div className={styles.header}>
       <h1>
@@ -21,10 +21,10 @@ export const BanUserDialogContent = ({...props}) => (
       </h3>
     </div>
     <div className={styles.buttons}>
-      <Button cStyle="cancel" onClick={props.cancelBan} full>
+      <Button cStyle="cancel" full>
         {lang.t('bandialog.cancel')}
       </Button>
-      <Button cStyle="black" onClick={props.ban} full>
+      <Button cStyle="black" full>
         {lang.t('bandialog.yes_ban_user')}
       </Button>
     </div>

client/coral-admin/src/components/Comment.js

@@ -1,22 +1,17 @@
 import React from 'react';
 import timeago from 'timeago.js';
+import Linkify from 'react-linkify';
+
 import styles from './CommentList.css';
+
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
-import Linkify from 'react-linkify';
+
 import {Icon} from 'react-mdl';
 import {FabButton, Button} from 'coral-ui';
+import BanUserDialog from './BanUserDialog';
 
 const linkify = new Linkify();
-//
-// const mapDispatchToProps = dispatch => ({
-//   showBanUserDialog: () => actions.dispatch(showBanUserDialog(),
-//   handleClose: () => actions.hideBanUserDialog(),
-// });
-
-// handleClose() {
-//   this.props.hideBanUserDialog();
-// }
 
 // Render a single comment for the list
 export default props => {
@@ -65,7 +60,7 @@ const getActionButton = (action, i, props) => {
     return null;
   }
   if (action === 'ban') {
-    //const {showBanUserDialog} = this.props;
+    const showBanUserDialog = true;
     return (
       // <Button
       //   {...props.author.get('status') === 'banned' ? 'disabled' : 'raised'}
@@ -79,6 +74,11 @@ const getActionButton = (action, i, props) => {
             {...props} >
             {lang.t('comment.ban_user')}
           </Button>
+          <BanUserDialog
+            open={showBanUserDialog}
+            handleClose={props.hideBanUserDialog}
+            authorName={props.author.get('displayName')}
+          />
         </div>
   );
   }