From 1899dcbb7eb724d459e0809b0473e1ea62fede7c Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Thu, 2 Mar 2017 09:27:53 -0800
Subject: [PATCH] Suspend User dialog.

---
 client/coral-admin/src/actions/community.js   |   4 +-
 client/coral-admin/src/components/Modal.js    |   1 -
 .../Community/CommunityContainer.js           |  16 ++-
 .../containers/Community/FlaggedAccounts.js   |   2 +-
 .../Community/components/ActionButton.js      |   2 +-
 ...endUserModal.css => SuspendUserDialog.css} |   0
 .../Community/components/SuspendUserDialog.js | 119 ++++++++++++++++++
 .../Community/components/SuspendUserModal.js  | 106 ----------------
 .../containers/Community/components/User.js   |   2 +-
 .../src/graphql/mutations/index.js            |   5 +-
 client/coral-admin/src/reducers/community.js  |   3 +-
 client/coral-admin/src/translations.json      |  17 ++-
 12 files changed, 155 insertions(+), 122 deletions(-)
 rename client/coral-admin/src/containers/Community/components/{SuspendUserModal.css => SuspendUserDialog.css} (100%)
 create mode 100644 client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
 delete mode 100644 client/coral-admin/src/containers/Community/components/SuspendUserModal.js

diff --git a/client/coral-admin/src/actions/community.js b/client/coral-admin/src/actions/community.js
index ea9a28efa..0f53ea3da 100644
--- a/client/coral-admin/src/actions/community.js
+++ b/client/coral-admin/src/actions/community.js
@@ -63,8 +63,8 @@ export const setCommenterStatus = (id, status) => (dispatch) => {
 
 // Ban User Dialog
 export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
-export const hideBanUserDialog = (showDialog) => ({type: HIDE_BANUSER_DIALOG, showDialog});
+export const hideBanUserDialog = () => ({type: HIDE_BANUSER_DIALOG});
 
 // Suspend User Dialog
 export const showSuspendUserDialog = (user) => ({type: SHOW_SUSPENDUSER_DIALOG, user});
-export const hideSuspendUserDialog = (showDialog) => ({type: HIDE_SUSPENDUSER_DIALOG, showDialog});
+export const hideSuspendUserDialog = () => ({type: HIDE_SUSPENDUSER_DIALOG});
diff --git a/client/coral-admin/src/components/Modal.js b/client/coral-admin/src/components/Modal.js
index 99c27c3a1..b667258c2 100644
--- a/client/coral-admin/src/components/Modal.js
+++ b/client/coral-admin/src/components/Modal.js
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import {Button, Icon} from 'react-mdl';
 import styles from './Modal.css';
diff --git a/client/coral-admin/src/containers/Community/CommunityContainer.js b/client/coral-admin/src/containers/Community/CommunityContainer.js
index c9cc245c5..5e02b193b 100644
--- a/client/coral-admin/src/containers/Community/CommunityContainer.js
+++ b/client/coral-admin/src/containers/Community/CommunityContainer.js
@@ -11,12 +11,13 @@ import {
   newPage,
   showBanUserDialog,
   hideBanUserDialog,
+  showSuspendUserDialog,
   hideSuspendUserDialog
 } from '../../actions/community';
 
 import CommunityMenu from './components/CommunityMenu';
 import BanUserDialog from './components/BanUserDialog';
-import SuspendUserModal from './components/SuspendUserModal';
+import SuspendUserDialog from './components/SuspendUserDialog';
 
 import People from './People';
 import FlaggedAccounts from './FlaggedAccounts';
@@ -93,6 +94,7 @@ class CommunityContainer extends Component {
       );
     }
 
+    console.log('debug props', props);
     return (
       <div>
         <FlaggedAccounts
@@ -101,7 +103,7 @@ class CommunityContainer extends Component {
           error={data.error}
           showBanUserDialog={props.showBanUserDialog}
           approveUser={props.approveUser}
-          rejectUser={props.rejectUser}
+          showSuspendUserDialog={props.showSuspendUserDialog}
           {...this}
         />
         <BanUserDialog
@@ -110,10 +112,11 @@ class CommunityContainer extends Component {
           handleClose={props.hideBanUserDialog}
           handleBanUser={props.banUser}
         />
-        <SuspendUserModal
-          stage={0}
+      <SuspendUserDialog
+          open={community.suspendDialog}
           onClose={props.hideSuspendUserDialog}
-          suspendUser={props.rejectUser}
+          user={community.user}
+          suspendUser={props.suspendUser}
         />
       </div>
     );
@@ -143,7 +146,8 @@ const mapDispatchToProps = dispatch => ({
   fetchAccounts: query => dispatch(fetchAccounts(query)),
   showBanUserDialog: (user) => dispatch(showBanUserDialog(user)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
-  hideSuspendUserDialog: () => dispatch(hideSuspendUserDialog(false))
+  showSuspendUserDialog: () => dispatch(showSuspendUserDialog()),
+  hideSuspendUserDialog: () => dispatch(hideSuspendUserDialog())
 });
 
 export default compose(
diff --git a/client/coral-admin/src/containers/Community/FlaggedAccounts.js b/client/coral-admin/src/containers/Community/FlaggedAccounts.js
index 817f51a37..154e74ef0 100644
--- a/client/coral-admin/src/containers/Community/FlaggedAccounts.js
+++ b/client/coral-admin/src/containers/Community/FlaggedAccounts.js
@@ -27,8 +27,8 @@ const FlaggedAccounts = ({...props}) => {
               index={index}
               modActionButtons={['REJECT', 'APPROVE']}
               showBanUserDialog={props.showBanUserDialog}
+              showSuspendUserDialog={props.showSuspendUserDialog}
               approveUser={props.approveUser}
-              rejectUser={props.rejectUser}
               />;
           })
           : <EmptyCard>{lang.t('community.no-flagged-accounts')}</EmptyCard>
diff --git a/client/coral-admin/src/containers/Community/components/ActionButton.js b/client/coral-admin/src/containers/Community/components/ActionButton.js
index 305cf8d1a..7ae8aa20b 100644
--- a/client/coral-admin/src/containers/Community/components/ActionButton.js
+++ b/client/coral-admin/src/containers/Community/components/ActionButton.js
@@ -15,7 +15,7 @@ const ActionButton = ({type = '', user, ...props}) => {
       cStyle={type.toLowerCase()}
       icon={menuActionsMap[type].icon}
       onClick={() => {
-        type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.rejectUser({userId: user.id});
+        type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.showSuspendUserDialog({user: user});
       }}
     />
   );
diff --git a/client/coral-admin/src/containers/Community/components/SuspendUserModal.css b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.css
similarity index 100%
rename from client/coral-admin/src/containers/Community/components/SuspendUserModal.css
rename to client/coral-admin/src/containers/Community/components/SuspendUserDialog.css
diff --git a/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
new file mode 100644
index 000000000..e385403c6
--- /dev/null
+++ b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
@@ -0,0 +1,119 @@
+import React, {Component, PropTypes} from 'react';
+
+import {Dialog, Button} from 'coral-ui';
+import styles from './SuspendUserDialog.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../../translations.json';
+
+const lang = new I18n(translations);
+
+const stages = [
+  {
+    title: 'suspenduser.title_0',
+    description: 'suspenduser.description_0',
+    options: {
+      'j': 'suspenduser.no_cancel',
+      'k': 'suspenduser.yes_suspend'
+    }
+  },
+  {
+    title: 'suspenduser.title_1',
+    description: 'suspenduser.description_1',
+    options: {
+      'j': 'bandialog.cancel',
+      'k': 'suspenduser.send'
+    }
+  }
+];
+
+class SuspendUserDialog extends Component  {
+
+  state = {email: '', stage: 0}
+
+  static propTypes = {
+    stage: PropTypes.number,
+    onClose: PropTypes.func.isRequired,
+    suspendUser: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    this.setState({email: lang.t('suspenduser.email'), about: lang.t('suspenduser.username')});
+  }
+
+  /*
+  * When an admin clicks to suspend a user a dialog is shown, this function
+  * handles the possible actions for that dialog.
+  */
+  onActionClick = (stage, menuOption) => () => {
+    const {suspendUser, user} = this.props;
+    const {stage, email} = this.state;
+
+    console.log('DEBUG props --> ', this.props);
+    console.log('DEBUG user', user);
+
+    const cancel = this.props.onClose;
+    const next = () => this.setState({stage: stage + 1});
+    const suspend = () => {
+      suspendUser({userId: user.id, email})
+      .then(() => {
+        this.props.onClose;
+      });
+    };
+
+    const suspendModalActions = [
+      [ cancel, next ],
+      [ cancel, suspend ]
+    ];
+    return suspendModalActions[stage][menuOption]();
+  }
+
+  onEmailChange = (e) => {
+    console.log('debug', e.target);
+    this.setState({email: e.target.value});
+  }
+
+  render () {
+    const {open, onClose} = this.props;
+    const {stage} = this.state;
+
+    return <Dialog
+            className={styles.suspendDialog}
+            id="suspendUserDialog"
+            open={open}
+            onClose={onClose}
+            onCancel={onClose}
+            title={lang.t('suspenduser.title')}>
+            <div className={styles.title}>
+              {lang.t(stages[stage].title, lang.t('suspenduser.username'))}
+            </div>
+            <div className={styles.container}>
+              <div className={styles.description}>
+                {lang.t(stages[stage].description, lang.t('suspenduser.username'))}
+              </div>
+              {
+                stage === 1 &&
+                <div className={styles.writeContainer}>
+                  <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
+                  <div className={styles.emailContainer}>
+                    <textarea
+                      rows={5}
+                      className={styles.emailInput}
+                      value={this.state.email}
+                      onChange={this.onEmailChange}/>
+                  </div>
+                </div>
+              }
+              <div className={styles.modalButtons}>
+                {Object.keys(stages[stage].options).map((key, i) => (
+                  <Button key={i} onClick={this.onActionClick(stage, i)}>
+                    {lang.t(stages[stage].options[key], lang.t('suspenduser.username'))}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </Dialog>;
+  }
+}
+
+export default SuspendUserDialog;
diff --git a/client/coral-admin/src/containers/Community/components/SuspendUserModal.js b/client/coral-admin/src/containers/Community/components/SuspendUserModal.js
deleted file mode 100644
index 7fbcd87d0..000000000
--- a/client/coral-admin/src/containers/Community/components/SuspendUserModal.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../../translations.json';
-import React, {Component, PropTypes} from 'react';
-import Modal from 'components/Modal';
-import styles from './SuspendUserModal.css';
-import {Button} from 'coral-ui';
-
-const stages = [
-  {
-    title: 'suspenduser.title_0',
-    description: 'suspenduser.description_0',
-    options: {
-      'j': 'suspenduser.no_cancel',
-      'k': 'suspenduser.yes_suspend'
-    }
-  },
-  {
-    title: 'suspenduser.title_1',
-    description: 'suspenduser.description_1',
-    options: {
-      'j': 'bandialog.cancel',
-      'k': 'suspenduser.send'
-    }
-  }
-];
-
-class SuspendUserModal extends Component  {
-
-  state = {email: '', stage: 0}
-
-  static propTypes = {
-    stage: PropTypes.number,
-    actionType: PropTypes.string,
-    onClose: PropTypes.func.isRequired,
-    suspendUser: PropTypes.func.isRequired
-  }
-
-  componentDidMount() {
-    const about = lang.t('suspenduser.username');
-    this.setState({email: lang.t('suspenduser.email', about)});
-  }
-
-  /*
-  * When an admin clicks to suspend a user a dialog is shown, this function
-  * handles the possible actions for that dialog.
-  */
-  onActionClick = (stage, menuOption) => () => {
-    const {suspendUser, action} = this.props;
-    const {stage, email} = this.state;
-    const cancel = this.props.onClose;
-    const next = () => this.setState({stage: stage + 1});
-    const suspend = () => suspendUser(action.item_id, lang.t('suspenduser.email_subject'), email)
-      .then(this.props.onClose);
-    const suspendModalActions = [
-      [ cancel, next ],
-      [ cancel, suspend ]
-    ];
-    return suspendModalActions[stage][menuOption]();
-  }
-
-  onEmailChange = (e) => this.setState({email: e.target.value})
-
-  render () {
-    const {action, onClose} = this.props;
-
-    if (!action) {
-      return null;
-    }
-
-    const {stage} = this.state;
-    const actionType = action.actionType;
-    const about = actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
-    return <Modal open={true} onClose={onClose}>
-        <div className={styles.title}>{lang.t(stages[stage].title, about)}</div>
-        <div className={styles.container}>
-          <div className={styles.description}>
-            {lang.t(stages[stage].description, about)}
-          </div>
-          {
-            stage === 1 &&
-            <div className={styles.writeContainer}>
-              <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
-              <div className={styles.emailContainer}>
-                <textarea
-                  rows={5}
-                  className={styles.emailInput}
-                  value={this.state.email}
-                  onChange={this.onEmailChange}/>
-              </div>
-            </div>
-          }
-          <div className={styles.modalButtons}>
-            {Object.keys(stages[stage].options).map((key, i) => (
-              <Button key={i} onClick={this.onActionClick(stage, i)}>
-                {lang.t(stages[stage].options[key], about)}
-              </Button>
-            ))}
-        </div>
-        </div>
-      </Modal>;
-  }
-}
-
-export default SuspendUserModal;
-
-const lang = new I18n(translations);
diff --git a/client/coral-admin/src/containers/Community/components/User.js b/client/coral-admin/src/containers/Community/components/User.js
index 9ef3cb324..3cadb819a 100644
--- a/client/coral-admin/src/containers/Community/components/User.js
+++ b/client/coral-admin/src/containers/Community/components/User.js
@@ -56,7 +56,7 @@ const User = props => {
                   key={i}
                   user={user}
                   approveUser={props.approveUser}
-                  rejectUser={props.rejectUser}
+                  showSuspendUserDialog={props.showSuspendUserDialog}
                   />;
               }
             )}
diff --git a/client/coral-admin/src/graphql/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js
index f10df6339..d6cec0fde 100644
--- a/client/coral-admin/src/graphql/mutations/index.js
+++ b/client/coral-admin/src/graphql/mutations/index.js
@@ -26,11 +26,12 @@ export const setUserStatus = graphql(SET_USER_STATUS, {
         refetchQueries: ['Users']
       });
     },
-    rejectUser: ({userId}) => {
+    suspendUser: ({userId}) => {
       return mutate({
         variables: {
           userId,
-          status: 'BANNED'
+          status: 'BANNED',
+          canEditName: true
         },
         refetchQueries: ['Users']
       });
diff --git a/client/coral-admin/src/reducers/community.js b/client/coral-admin/src/reducers/community.js
index e1382caaf..d051ae0ff 100644
--- a/client/coral-admin/src/reducers/community.js
+++ b/client/coral-admin/src/reducers/community.js
@@ -23,7 +23,8 @@ const initialState = Map({
   totalPagesPeople: 0,
   pagePeople: 0,
   user: Map({}),
-  banDialog: false
+  banDialog: false,
+  suspendDialog: false
 });
 
 export default function community (state = initialState, action) {
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 04cd8b142..bbc3b3419 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -109,7 +109,8 @@
       "yes_ban_user": "Yes, Ban User"
     },
     "suspenduser": {
-      "title_0": "We noticed you rejected a {0}",
+      "title": "Suspend a user",
+      "title_0": "We noticed you rejected a username",
       "description_0": "Would you like to temporarily ban this user becuase of their {0}? Doing so will temporarily hide their comments until they rewrite their {0}.",
       "title_1": "Notify the user of their temporary suspension",
       "description_1": "Suspending this user will temporarily disable their account and hide all of their comments on the site.",
@@ -173,6 +174,20 @@
       "cancel": "Cancelar",
       "yes_ban_user": "Si, Suspendan el usuario"
     },
+    "suspenduser": {
+      "title": "Suspendiendo un usuario",
+      "title_0": "Esta queriendo suspender un usuario?",
+      "description_0": "Le gustaria suspender a esta usuaria temporarianmente por su nombre de usuario? Si lo hace sus comentarios serán escondidos temporariamente hasta que puedan reescribir su nombre de usuario.",
+      "title_1": "Enviarle una nota al usuario sobre su cuenta suspendida",
+      "description_1": "Si suspende a este usuario, su cuenta va a ser deshabilitada y todos sus comentarios escondidos del sitio.",
+      "no_cancel": "No, cancelar",
+      "yes_suspend": "Si, suspender",
+      "send": "Enviar",
+      "username": "nombre de usuario",
+      "email_subject": "Su cuenta ha sido suspendida temporariamente",
+      "email": "Otra persona de la comunidad recientemente marcó su nombre de usuario para ser revisado. Por su contenido, el nombre de usuario ha sido rechazado. Esto quiere decir que no puede comentar, gustar o marcar contenido hasta que modifique su nombre de usuario. Por favor, envienos un correo a moderator@newsorg.com si tiene alguna pregunta o preocupación",
+      "write_message": "Escribir un mensaje"
+    },
     "modqueue": {
       "likes": "gustos",
       "premod": "pre-mod",