Adding ban message and setRole

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

@@ -4,7 +4,6 @@
   width: 500px;
   top: 50%;
   transform: translateY(-50%);
-  height: 184px;
   padding: 20px;
 
   h2 {
@@ -163,3 +162,16 @@ input.error{
   margin: 20px;
   text-align: center;
 }
+
+.legend {
+  padding: 0;
+  font-weight: bold;
+}
+
+.messageInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  box-sizing: border-box;
+}

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

@@ -7,7 +7,7 @@ import styles from './BanUserDialog.css';
 import Button from 'coral-ui/components/Button';
 import t from 'coral-framework/services/i18n';
 
-const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
+const BanUserDialog = ({open, onCancel, onPerform, username, info, handleMessageChange, message}) => (
   <Dialog
     className={cn(styles.dialog, 'talk-ban-user-dialog')}
     id="banUserDialog"
@@ -20,8 +20,16 @@ const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
     </div>
     <div className={styles.separator}>
       <h3>{t('bandialog.are_you_sure', username)}</h3>
-      <i>{info}</i>
+      <p>{info}</p>
     </div>
+    <fieldset>
+      <legend className={styles.legend}>{t('bandialog.write_a_message')}</legend>
+      <textarea
+        rows={5}
+        className={styles.messageInput}
+        value={message}
+        onChange={this.handleMessageChange} />
+    </fieldset>
     <div className={styles.buttons}>
       <Button
         className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
@@ -47,6 +55,8 @@ BanUserDialog.propTypes = {
   onCancel: PropTypes.func.isRequired,
   username: PropTypes.string,
   info: PropTypes.string,
+  message: PropTypes.string,
+  handleMessageChange: PropTypes.func.isRequired,
 };
 
 export default BanUserDialog;

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

@@ -11,6 +11,18 @@ import {getErrorMessages} from 'coral-framework/utils';
 import {notify} from 'coral-framework/actions/notification';
 
 class BanUserDialogContainer extends Component {
+  constructor() {
+    super();
+    
+    this.state = {
+      message: '',
+    };
+  }
+
+  handleMessageChange = (e) => {
+    const {value: message} = e; 
+    this.setState(message);
+  }
 
   banUser = async () => {
     const {userId, commentId, commentStatus, banUser, setCommentStatus, hideBanUserDialog, notify} = this.props;
@@ -42,6 +54,8 @@ class BanUserDialogContainer extends Component {
         onCancel={this.props.hideBanUserDialog}
         username={this.props.username}
         info={this.getInfo()}
+        message={this.state.message}
+        handleMessageChange={this.handleMessageChange}
       />
     );
   }

client/coral-admin/src/graphql/index.js

@@ -28,6 +28,14 @@ export default {
         }
       }
     }),
+    ApproveUsername: ({variables: {id}}) => ({
+      updateQueries: {
+        TalkAdmin_LoadMoreFlaggedAccounts: (prev) => {
+          console.log(prev, id);
+          return prev;
+        }
+      }
+    }),
     RejectUsername: ({variables: {id: userId}})  => ({
       updateQueries: {
         TalkAdmin_Community: (prev) => {

client/coral-admin/src/reducers/community.js

@@ -5,7 +5,6 @@ import {
   SORT_UPDATE,
   SET_PAGE,
   SET_SEARCH_VALUE,
-  SET_ROLE,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
   SHOW_REJECT_USERNAME_DIALOG,
@@ -59,16 +58,6 @@ export default function community (state = initialState, action) {
       ...state,
       pagePeople: action.page,
     };
-  case SET_ROLE : {
-    const commenters = state.users;
-    const idx = commenters.findIndex((el) => el.id === action.id);
-
-    commenters[idx].roles[0] = action.role;
-    return {
-      ...state,
-      users: commenters.map((id) => id),
-    };
-  }
   case SORT_UPDATE :
     return {
       ...state,

client/coral-admin/src/routes/Community/components/People.js

@@ -17,7 +17,7 @@ const People = (props) => {
     onPageChange,
     totalPages,
     page,
-    setRole,
+    setUserRole,
     setUserBanStatus,
     viewUserDetail,
   } = props;
@@ -44,7 +44,7 @@ const People = (props) => {
           hasResults
             ? <Table
               users={users}
-              setRole={setRole}
+              setUserRole={setUserRole}
               viewUserDetail={viewUserDetail}
               setUserBanStatus={setUserBanStatus}
               onHeaderClickHandler={onHeaderClickHandler}
@@ -68,7 +68,7 @@ People.propTypes = {
   totalPages: PropTypes.number,
   onPageChange: PropTypes.func,
   setUserBanStatus: PropTypes.func.isRequired,
-  setRole: PropTypes.func.isRequired,
+  setUserRole: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
 };
 

client/coral-admin/src/routes/Community/components/Table.js

@@ -27,7 +27,7 @@ const getStatus = (status) => {
   return status.banned.status ? 'BANNED' : 'ACTIVE';
 };
 
-const Table = ({users, setRole, onHeaderClickHandler, setUserBanStatus, viewUserDetail, pageCount, page, onPageChange}) => (
+const Table = ({users, setUserRole, onHeaderClickHandler, setUserBanStatus, viewUserDetail, pageCount, page, onPageChange}) => (
   <div>
     <table className={`mdl-data-table ${styles.dataTable}`}>
       <thead>
@@ -66,10 +66,10 @@ const Table = ({users, setRole, onHeaderClickHandler, setUserBanStatus, viewUser
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
                 containerClassName="talk-admin-community-people-dd-role"
-                value={row.role || ''}
+                value={row.role}
                 placeholder={t('community.role')}
-                onChange={(role) => setRole(row.id, role)}>
-                <Option value={''} label={t('community.none')} />
+                onChange={(role) => setUserRole(row.id, role)}>
+                <Option value={'COMMENTER'} label={t('community.commenter')} />
                 <Option value={'STAFF'} label={t('community.staff')} />
                 <Option value={'MODERATOR'} label={t('community.moderator')} />
                 <Option value={'ADMIN'} label={t('community.admin')} />
@@ -90,7 +90,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setUserBanStatus, viewUser
 Table.propTypes = {
   users: PropTypes.array,
   onHeaderClickHandler: PropTypes.func.isRequired,
-  setRole: PropTypes.func.isRequired,
+  setUserRole: PropTypes.func.isRequired,
   setUserBanStatus: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   pageCount: PropTypes.number.isRequired,

client/coral-admin/src/routes/Community/containers/People.js

@@ -4,7 +4,7 @@ import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
 import People from '../components/People';
 import PropTypes from 'prop-types';
-import {withUnBanUser, withBanUser, withAddUserRole, withRemoveUserRole} from 'coral-framework/graphql/mutations';
+import {withUnBanUser, withBanUser, withSetUserRole} from 'coral-framework/graphql/mutations';
 
 import {viewUserDetail} from '../../../actions/userDetail';
 
@@ -67,12 +67,11 @@ class PeopleContainer extends React.Component {
     await bannedStatus ? banUser({id, message: ''}) : unBanUser({id});
     await this.fetchUsers();
   } 
-   
-  setRole = async (id, role) => {
-    const {addUserRole, removeUserRole} = this.props;
-    await role ? addUserRole(id, role) : removeUserRole(id, role);
+
+  setUserRole = async (id, role) => {
+    await this.props.setUserRole(id, role);
     await this.fetchUsers();
-  } 
+  }
 
   render() {
     return <People
@@ -83,8 +82,7 @@ class PeopleContainer extends React.Component {
       onPageChange={this.onPageChange}
       totalPages={this.props.community.totalPagesPeople}
       setUserBanStatus={this.setUserBanStatus}
-      setRole={this.setRole}
-      removeUserRole={this.props.removeUserRole}
+      setUserRole={this.setUserRole}
       page={this.props.community.pagePeople}
       viewUserDetail={this.props.viewUserDetail}
     />;
@@ -95,8 +93,7 @@ PeopleContainer.propTypes = {
   setPage: PropTypes.func,
   fetchUsers: PropTypes.func,
   updateSorting: PropTypes.func,
-  addUserRole: PropTypes.func.isRequired,
-  removeUserRole: PropTypes.func.isRequired,
+  setUserRole: PropTypes.func.isRequired,
   banUser: PropTypes.func.isRequired,
   unBanUser: PropTypes.func.isRequired,
   setSearchValue: PropTypes.func.isRequired,
@@ -118,6 +115,5 @@ export default compose(
   connect(null, mapDispatchToProps),
   withBanUser,
   withUnBanUser,
-  withAddUserRole,
-  withRemoveUserRole,
+  withSetUserRole,
 )(PeopleContainer);

client/coral-framework/graphql/fragments.js

@@ -3,7 +3,7 @@ import {createDefaultResponseFragments} from '../utils';
 // fragments defined here are automatically registered.
 export default {
   ...createDefaultResponseFragments(
-    'ModifyUserRoleResponse',
+    'SetUserRoleResponse',
     'ChangeUsernameResponse',
     'BanUsersResponse',
     'UnBanUserResponse',

client/coral-framework/graphql/mutations.js

@@ -273,36 +273,16 @@ export const withUnBanUser = withMutation(
     }),
   });
 
-export const withAddUserRole = withMutation(
+export const withSetUserRole = withMutation(
   gql`
-    mutation AddUserRole($id: ID!, $role: USER_ROLES!) {
-      addUserRole(id: $id, role: $role) {
-        ...ModifyUserRoleResponse
+    mutation SetUserRole($id: ID!, $role: USER_ROLES!) {
+      setUserRole(id: $id, role: $role) {
+        ...SetUserRoleResponse
       }
     }
   `, {
     props: ({mutate}) => ({
-      addUserRole: (id, role) => {
-        return mutate({
-          variables: {
-            id,
-            role,
-          },
-        });
-      }
-    }),
-  });
-
-export const withRemoveUserRole = withMutation(
-  gql`
-    mutation RemoveUserRole($id: ID!, $role: USER_ROLES!) {
-      removeUserRole(id: $id, role: $role) {
-        ...ModifyUserRoleResponse
-      }
-    }
-  `, {
-    props: ({mutate}) => ({
-      removeUserRole: (id, role) => {
+      setUserRole: (id, role) => {
         return mutate({
           variables: {
             id,

locales/en.yml

@@ -12,6 +12,7 @@ en:
     note_reject_comment: "Banning this user will also place this comment in the Rejected queue."
     note_ban_user: "Banning this user will not let them edit comment or remove anything."
     yes_ban_user: "Yes, Ban User"
+    write_a_message: "Write a message"
   bio_offensive: "This bio is offensive"
   cancel: "Cancel"
   characters_remaining: "characters remaining"
@@ -76,7 +77,7 @@ en:
     status: Status
     username_and_email: "Username and Email"
     yes_ban_user: "Yes Ban User"
-    none: "None"
+    commenter: "Commenter"
   configure:
     apply: Apply
     banned_word_text: "Comments which contain these words or phrases (not case-sensitive) will be automatically removed from the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list."

locales/es.yml

@@ -12,6 +12,7 @@ es:
     note_reject_comment: "Suspender a este usuario también va a colocar este comentario en la cola de Rechazados."
     note_ban_user: "Suspender a este usuario no le va a permitir (al usuario) borrar ni editar ni comentar."
     yes_ban_user: "Si, Suspender al usuario"
+    write_a_message: "Escribe un mensaje"
   bio_offensive: "Esta biografia es ofensiva"
   cancel: Cancelar
   characters_remaining: "carácteres restantes"
@@ -74,7 +75,7 @@ es:
     status: Estado
     username_and_email: "Usuario y Correo"
     yes_ban_user: "Si, Suspendan el usuario"
-    none: "Ninguno"
+    commenter: "Comentarista"
   configure:
     apply: Aplicar
     banned_word_text: "Comentarios que contengan estas palabras o frases,  en mayusculas o minúsculas, serán automáticamente eliminados del hilo de comentario. Escribir una palabra y apretar Enter o Tabulador para agregarla. O pueden pegar una lista de palabras separadas por coma."