From 443cd031d5ab5f0819dc2fab6284a557117727fd Mon Sep 17 00:00:00 2001 From: gaba Date: Wed, 30 Nov 2016 19:20:07 -0800 Subject: [PATCH] Ban button. --- client/coral-admin/src/actions/users.js | 8 ++++++-- client/coral-admin/src/components/Comment.js | 14 ++++++------- .../coral-admin/src/components/CommentList.js | 7 ++++--- .../ModerationQueue/ModerationQueue.js | 20 +++++++++---------- client/coral-admin/src/reducers/users.js | 8 ++++++++ .../coral-admin/src/services/talk-adapter.js | 11 ++++++---- client/coral-admin/src/translations.json | 6 ++++-- routes/api/user/index.js | 2 +- 8 files changed, 47 insertions(+), 29 deletions(-) diff --git a/client/coral-admin/src/actions/users.js b/client/coral-admin/src/actions/users.js index 8747293c4..53ff83e42 100644 --- a/client/coral-admin/src/actions/users.js +++ b/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)}); }; diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index 998b5f774..6d7eaf3db 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/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 => {
- {author_status === 'banned' ? - Banned User : null} + {authorStatus === 'banned' ? + {lang.t('comment.banned_user')} : null}
@@ -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 ( - + onClick={() => props.onClickAction(props.actionsMap[action].status, props.comment.get('id'), props.author.get('id'))}>{lang.t('comment.ban_user')} ); } return ( diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index 2df70209e..99664226e 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/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 () { diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index b1a01c234..ba7ffa69a 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/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} />
@@ -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); diff --git a/client/coral-admin/src/reducers/users.js b/client/coral-admin/src/reducers/users.js index 872ae904a..156b19de6 100644 --- a/client/coral-admin/src/reducers/users.js +++ b/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)); +}; diff --git a/client/coral-admin/src/services/talk-adapter.js b/client/coral-admin/src/services/talk-adapter.js index 8b9fb1a8d..246b656f0 100644 --- a/client/coral-admin/src/services/talk-adapter.js +++ b/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})); }; diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index b70c232bc..d219361b4 100644 --- a/client/coral-admin/src/translations.json +++ b/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", diff --git a/routes/api/user/index.js b/routes/api/user/index.js index d02276da8..70ac7e3cd 100644 --- a/routes/api/user/index.js +++ b/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); })