Ban button.

client/coral-admin/src/actions/users.js

@@ -2,6 +2,10 @@
  * Action disptacher related to users
  */
 
-export const updateUserStatus = (status, id) => (dispatch) => {
-  dispatch({type: 'USER_STATUS_UPDATE', id, status});
+let rejected = 'rejected';
+
+export const banUser = (status, id, author_id) => (dispatch, getState) => {
+  dispatch({type: 'USER_STATUS_UPDATE', id, author_id, status});
+  dispatch({type: 'COMMENT_STATUS_UPDATE', id, rejected});
+  dispatch({type: 'COMMENT_UPDATE', comment: getState().comments.get('byId').get(id)});
 };

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

@@ -12,7 +12,7 @@ const linkify = new Linkify();
 
 // Render a single comment for the list
 export default props => {
-  const author_status = props.author.get('status');
+  const authorStatus = props.author.get('status');
   const {comment, author} = props;
   const links = linkify.getMatches(comment.get('body'));
 
@@ -33,8 +33,8 @@ export default props => {
           </div>
         </div>
         <div>
-          {author_status === 'banned' ?
-          <span className={styles.banned}><Icon name='error_outline'/> Banned User</span> : null}
+          {authorStatus === 'banned' ?
+          <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
         </div>
       </div>
       <div className={styles.itemBody}>
@@ -52,16 +52,16 @@ export default props => {
 const getActionButton = (action, i, props) => {
   const status = props.comment.get('status');
   const flagged = props.comment.get('flagged');
+  const banned = (props.author.get('status') === 'banned');
 
   if (action === 'flag' && (status || flagged === true)) {
     return null;
   }
-  if (action === 'ban') {
+  if (action === 'ban' && !banned) {
     return (
-      <Button
-        cStyle='darkGrey'
+      <Button raised
         key={i}
-        onClick={() => props.onClickAction(props.actionsMap[action].status, props.comment.get('id'))}>{lang.t('comment.ban_user')}</Button>
+        onClick={() => props.onClickAction(props.actionsMap[action].status, props.comment.get('id'), props.author.get('id'))}>{lang.t('comment.ban_user')}</Button>
     );
   }
   return (

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

@@ -10,7 +10,7 @@ const actions = {
   'reject': {status: 'rejected', icon: 'close', key: 'r'},
   'approve': {status: 'accepted', icon: 'done', key: 't'},
   'flag': {status: 'flagged', icon: 'flag', filter: 'Untouched'},
-  'ban': {status: 'ban'}
+  'ban': {status: 'banned'}
 };
 
 // Renders a comment list and allow performing actions
@@ -100,7 +100,8 @@ export default class CommentList extends React.Component {
   // If we are performing an action over a comment (aka removing from the list) we need to select a new active.
   // TODO: In the future this can be improved and look at the actual state to
   // resolve since the content of the list could change externally. For now it works as expected
-  onClickAction (action, id) {
+  onClickAction (action, id, author_id) {
+    // activate the next comment
     if (id === this.state.active) {
       const {commentIds} = this.props;
       if (commentIds.last() === this.state.active) {
@@ -109,7 +110,7 @@ export default class CommentList extends React.Component {
         this.setState({active: commentIds.get(Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.size - 1))});
       }
     }
-    this.props.onClickAction(action, id);
+    this.props.onClickAction(action, id, author_id);
   }
 
   render () {

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

@@ -6,7 +6,7 @@ import ModerationKeysModal from 'components/ModerationKeysModal';
 import CommentList from 'components/CommentList';
 
 import {updateStatus} from 'actions/comments';
-import {updateUserStatus} from 'actions/users';
+import {banUser} from 'actions/users';
 import styles from './ModerationQueue.css';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -52,11 +52,11 @@ class ModerationQueue extends React.Component {
   }
 
   // Dispatch the update status action
-  onCommentAction (action, id) {
-    // if we are banning a user by the action then dispatch updateUserStatus
+  onCommentAction (action, id, author_id) {
+    // if we are banning a user by the action then dispatch banUser
     // action = 'banned' in the case of banning
     if (action === 'banned') {
-      this.props.dispatch(updateUserStatus(action, id));
+      this.props.dispatch(banUser(action, id, author_id));
     }
 
     // If not banning then change the status to approved or flagged as action = status
@@ -69,7 +69,7 @@ class ModerationQueue extends React.Component {
 
   // Render the tabbed lists moderation queues
   render () {
-    const {comments, commenters} = this.props;
+    const {comments, users} = this.props;
     const {activeTab, singleView, modalOpen} = this.state;
 
     return (
@@ -94,8 +94,8 @@ class ModerationQueue extends React.Component {
                     .get('status'))
               }
               comments={comments.get('byId')}
-              commenters={commenters.get('byId')}
-              onClickAction={(action, id) => this.onCommentAction(action, id)}
+              users={users.get('byId')}
+              onClickAction={(action, id, author_id) => this.onCommentAction(action, id, author_id)}
               actions={['reject', 'approve', 'ban']}
               loading={comments.loading} />
           </div>
@@ -113,7 +113,7 @@ class ModerationQueue extends React.Component {
                       .get('status') === 'rejected')
               }
               comments={comments.get('byId')}
-              commenters={commenters.get('byId')}
+              users={users.get('byId')}
               onClickAction={(action, id) => this.onCommentAction(action, id)}
               actions={['approve']}
               loading={comments.loading} />
@@ -127,7 +127,7 @@ class ModerationQueue extends React.Component {
                 return !data.get('status') && data.get('flagged') === true;
               })}
               comments={comments.get('byId')}
-              commenters={commenters.get('byId')}
+              users={users.get('byId')}
               onClickAction={(action, id) => this.onCommentAction(action, id)}
               actions={['reject', 'approve']}
               loading={comments.loading} />
@@ -140,6 +140,6 @@ class ModerationQueue extends React.Component {
   }
 }
 
-export default connect(({comments, commenters}) => ({comments, commenters}))(ModerationQueue);
+export default connect(({comments, users}) => ({comments, users}))(ModerationQueue);
 
 const lang = new I18n(translations);

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

@@ -8,6 +8,7 @@ const initialState = Map({
 export default (state = initialState, action) => {
   switch (action.type) {
   case 'USERS_MODERATION_QUEUE_FETCH_SUCCESS': return replaceUsers(action, state);
+  case 'USER_STATUS_UPDATE': return updateUserStatus(state, action);
   default: return state;
   }
 };
@@ -18,3 +19,10 @@ const replaceUsers = (action, state) => {
   return state.set('byId', users)
   .set('ids', List(users.keys()));
 };
+
+// Update a user status
+const updateUserStatus = (state, action) => {
+  const byId = state.get('byId');
+  const data = byId.get(action.id).set('status', action.status.toLowerCase());
+  return state.set('byId', byId.set(action.id, data));
+};

client/coral-admin/src/services/talk-adapter.js

@@ -21,8 +21,8 @@ export default store => next => action => {
   case 'COMMENT_CREATE':
     createComment(store, action.name, action.body);
     break;
-  case 'BAN_USER':
-    banUser(store, action.comment);
+  case 'USER_STATUS_UPDATE':
+    userStatusUpdate(store, action.author_id, action.status);
     break;
   }
 
@@ -86,8 +86,11 @@ const createComment = (store, name, comment) => {
 };
 
 // Ban a user
-const banUser = (store, comment) => {
-  coralApi(`/user/${comment.get('author_id')}/status`, {method: 'POST', body: {status: comment.get('status')}})
+const userStatusUpdate = (store, author_id, status) => {
+  console.log('DEBUG author_id', author_id);
+  console.log('DEBUG status', status);
+  console.log('DEBUG store', store);
+  coralApi(`/user/${author_id}/status`, {method: 'POST', body: {status: status, comment_id: ''}})
   .then(res => store.dispatch({type: 'USER_BAN_SUCESSS', res}))
   .catch(error => store.dispatch({type: 'USER_BAN_FAILED', error}));
 };

client/coral-admin/src/translations.json

@@ -33,7 +33,8 @@
     "comment": {
       "flagged": "flagged",
       "anon": "Anonymous",
-      "ban_user": "Ban User"
+      "ban_user": "Ban User",
+      "banned_user": "Banned User"
     },
     "embedlink": {
       "copy": "Copy to Clipboard"
@@ -78,7 +79,8 @@
     "comment": {
       "flagged": "marcado",
       "anon": "Anónimo",
-      "ban_user": "Suspender Usuario"
+      "ban_user": "Suspender Usuario",
+      "banned_user": "Usuario Suspendido"
     },
     "configure": {
       "enable-pre-moderation": "Habilitar pre-moderación",

routes/api/user/index.js

@@ -62,7 +62,7 @@ router.post('/:user_id/role', authorization.needed('admin'), (req, res, next) =>
 
 router.post('/:user_id/status', (req, res, next) => {
   User
-    .setStatus(req.params.user_id, req.body.status, res.body.comment_id)
+    .setStatus(req.params.user_id, req.body.status, req.body.comment_id)
     .then(status => {
       res.send(status);
     })