Trying to get the Dialog up.

This commit is contained in:
gaba
2016-12-01 13:05:10 -08:00
parent 443cd031d5
commit 15eb946f00
13 changed files with 269 additions and 66 deletions
+4 -4
View File
@@ -2,10 +2,10 @@
* Action disptacher related to users
*/
let rejected = 'rejected';
// Dialog Actions
export const showBanUserDialog = () => ({type: 'SHOW_BANUSER_DIALOG'});
export const hideBanUserDialog = () => ({type: 'HIDE_BANUSER_DIALOG'});
export const banUser = (status, id, author_id) => (dispatch, getState) => {
export const banUser = (status, id, author_id) => (dispatch) => {
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)});
};
@@ -0,0 +1,143 @@
.dialog {
border: none;
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
width: 280px;
top: 10px;
}
.header {
margin-bottom: 20px;
}
.header h1, .separator h1{
text-align: center;
font-size: 1.2em;
}
.formField {
margin-top: 15px;
}
.formField label {
font-size: 1.08em;
font-weight: bold;
margin-bottom: 5px;
}
.formField input {
width: 100%;
display: block;
border: none;
outline: none;
border: 1px solid rgba(0,0,0,.12);
padding: 10px 6px;
box-sizing: border-box;
border-radius: 2px;
margin: 5px auto;
}
.footer {
margin: 20px auto 10px;
text-align: center;
}
.footer span {
display: block;
margin-bottom: 5px;
}
.footer a {
color: #2c69b6;
cursor: pointer;
margin: 0 5px;
}
.socialConnections {
margin-bottom: 20px;
}
.signInButton {
margin-top: 10px;
}
.close {
font-size: 20px;
line-height: 14px;
top: 10px;
right: 10px;
position: absolute;
display: block;
font-weight: bold;
color: #363636;
cursor: pointer;
}
.close:hover {
color: #6b6b6b;
}
input.error{
border: solid 2px #f44336;
}
.errorMsg, .hint {
color: grey;
font-weight: 600;
padding: 3px 0 16px;
}
.alert {
padding: 10px;
margin-bottom: 20px;
border-radius: 2px;
}
.alert--success {
border: solid 1px #1ec00e;
background: #cbf1b8;
color: #006900;
}
.alert--error {
background: #FFEBEE;
color: #B71C1C;
}
.userBox a {
color: #2c69b6;
cursor: pointer;
margin: 0px;
}
.attention {
display: inline-block;
width: 15px;
height: 15px;
background: #B71C1C;
color: #FFEBEE;
font-weight: bolder;
padding: 4px;
vertical-align: middle;
border-radius: 20px;
box-sizing: border-box;
font-size: 9px;
line-height: 7px;
text-align: center;
margin-right: 5px;
}
.action {
margin-top: 15px;
}
.passwordRequestSuccess {
border: 1px solid green;
background-color: lightgreen;
padding: 10px;
}
.passwordRequestFailure {
border: 1px solid orange;
background-color: 1px solid coral;
padding: 10px;
}
@@ -0,0 +1,14 @@
import React from 'react';
import {Dialog} from 'coral-ui';
import styles from './BanUserDialog.css';
import BanUserDialogContent from './BanUserDialogContent';
const BanUserDialog = ({view, handleClose, ...props}) => (
<Dialog className={styles.dialog}>
<span className={styles.close} onClick={handleClose}>×</span>
{view === 'Ban' && <BanUserDialogContent {...props} />}
</Dialog>
);
export default BanUserDialog;
@@ -0,0 +1,34 @@
import React from 'react';
import Button from 'coral-ui/components/Button';
import styles from './BanUserDialog.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
const BanUserDialogContent = ({...props}) => (
<div>
<div className={styles.header}>
<h1>
{lang.t('bandialog.ban_user')}
</h1>
</div>
<div className={styles.separator}>
<h2>
{lang.t('bandialog.are_you_sure')}
</h2>
<h3>
{lang.t('bandialog.note')}
</h3>
</div>
<div className={styles.buttons}>
<Button cStyle="cancel" onClick={props.cancelBan} full>
{lang.t('bandialog.cancel')}
</Button>
<Button cStyle="black" onClick={props.ban} full>
{lang.t('bandialog.yes_ban_user')}
</Button>
</div>
</div>
);
export default BanUserDialogContent;
+30 -7
View File
@@ -1,4 +1,3 @@
import React from 'react';
import timeago from 'timeago.js';
import styles from './CommentList.css';
@@ -7,8 +6,19 @@ 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';
// import {showBanUserDialog, hideBanUserDialog} from '../actions/users';
const linkify = new Linkify();
//
// const mapDispatchToProps = dispatch => ({
// showBanUserDialog: () => dispatch(showBanUserDialog()),
// handleClose: () => dispatch(hideBanUserDialog()),
// });
// handleClose() {
// this.props.hideBanUserDialog();
// }
// Render a single comment for the list
export default props => {
@@ -52,17 +62,30 @@ 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' && !banned) {
if (action === 'ban') {
//const {showBanUserDialog} = this.props;
return (
<Button raised
key={i}
onClick={() => props.onClickAction(props.actionsMap[action].status, props.comment.get('id'), props.author.get('id'))}>{lang.t('comment.ban_user')}</Button>
);
// <Button
// {...props.author.get('status') === 'banned' ? 'disabled' : 'raised'}
// key={i}
// onClick={() => props.onClickAction(props.actionsMap[action].status, props.comment.get('id'), props.author.get('id'))}>{lang.t('comment.ban_user')}</Button>
<div>
<Button
{...props.author.get('status') === 'banned' ? 'disabled' : 'raised'}
cStyle="black"
onClick={props.cancelBan}
key={i}>
{lang.t('comment.ban_user')}
</Button>
<BanUserDialog
view='Ban'
/>
</div>
);
}
return (
<FabButton icon={props.actionsMap[action].icon} className={styles.actionButton}
@@ -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: 'banned'}
'ban': {status: 'banned', icon: 'not interested'}
};
// Renders a comment list and allow performing actions
@@ -0,0 +1,2 @@
export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
@@ -57,6 +57,7 @@ class ModerationQueue extends React.Component {
// action = 'banned' in the case of banning
if (action === 'banned') {
this.props.dispatch(banUser(action, id, author_id));
this.props.dispatch(updateStatus('rejected', id));
}
// If not banning then change the status to approved or flagged as action = status
+11 -3
View File
@@ -1,14 +1,22 @@
import {Map, List, fromJS} from 'immutable';
import * as actions from '../constants/users';
const initialState = Map({
byId: Map(),
ids: List()
ids: List(),
showBanUserDialog: false
});
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);
case actions.SHOW_BANUSER_DIALOG:
return state
.set('showBanUserDialog', true);
case actions.HIDE_BANUSER_DIALOG:
return state
.set('showBanUserDialog', false);
default: return state;
}
};
@@ -23,6 +31,6 @@ const replaceUsers = (action, state) => {
// 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));
const data = byId.get(action.author_id).set('status', action.status.toLowerCase());
return state.set('byId', byId.set(action.author_id, data));
};
@@ -87,9 +87,6 @@ const createComment = (store, name, comment) => {
// Ban a user
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}));
+14
View File
@@ -51,6 +51,13 @@
"moderate": "Moderate",
"configure": "Configure",
"community": "Community"
},
"bandialog": {
"ban_user": "Ban User?",
"are_you_sure": "Are you sure you would like to ban {props.author.displayName}?",
"note": "Note: Banning this user will also place this comment in the Rejected queue.",
"cancel": "Cancel",
"yes_ban_user": "Yes, Ban User"
}
},
"es": {
@@ -94,6 +101,13 @@
"moderate": "Moderar",
"configure": "Configurar",
"community": "Comunidad"
},
"bandialog": {
"ban_user": "Quieres suspender el Usuario?",
"are_you_sure": "Estas segura que quieres suspender a {props.author.displayName}?",
"note": "Nota: Suspender este usuario también va a colocar este comentario en la cola de Rechazados.",
"cancel": "Cancelar",
"yes_ban_user": "Si, Suspendan el usuario"
}
}
}
+15 -22
View File
@@ -422,34 +422,27 @@ UserService.setStatus = (id, status, comment_id) => {
return Promise.reject(new Error(`status ${status} is not supported`));
}
// If ban then disable the account, reject the comment and update status
// If ban then reject the comment and update status
if (status === 'banned') {
return UserService.disableUser(id)
return UserModel.update({
id: id
}, {
$set: {
status: status
}
})
.then(() => {
return Comment.changeStatus(comment_id, 'rejected')
.then(() => {
return UserModel.update({
id: id
}, {
$set: {
status: status
}
});
});
return Comment.changeStatus(comment_id, 'rejected');
});
}
// If active then unable the account and update status
if (status === 'active') {
return UserService.enableUser(id)
.then(() => {
return UserModel.update({
id: id
}, {
$set: {
status: status
}
});
return UserModel.update({
id: id
}, {
$set: {
status: status
}
});
}
};
-26
View File
@@ -105,18 +105,6 @@ describe('User: models', () => {
});
});
it('should disable the user', () => {
return User
.setStatus(mockUsers[0].id, 'banned', mockComment.id)
.then(() => {
User.findById(mockUsers[0].id)
.then((user) => {
expect(user).to.have.property('disabled')
.and.to.equal(true);
});
});
});
it('should set the status to banned', () => {
return User
.setStatus(mockUsers[0].id, 'banned', mockComment.id)
@@ -149,8 +137,6 @@ describe('User: models', () => {
.then((user) => {
expect(user).to.have.property('status')
.and.to.equal('banned');
expect(user).to.have.property('disabled')
.and.to.equal(true);
});
});
});
@@ -167,18 +153,6 @@ describe('User: models', () => {
});
});
it('should enable the user', () => {
return User
.setStatus(mockUsers[0].id, 'active', mockComment.id)
.then(() => {
User.findById(mockUsers[0].id)
.then((user) => {
expect(user).to.have.property('disabled')
.and.to.equal(false);
});
});
});
it('should set the status to active', () => {
return User
.setStatus(mockUsers[0].id, 'active', mockComment.id)