mirror of
https://github.com/wassname/talk.git
synced 2026-08-12 12:30:39 +08:00
Trying to get the Dialog up.
This commit is contained in:
@@ -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;
|
||||
@@ -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
|
||||
|
||||
@@ -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}));
|
||||
|
||||
@@ -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
@@ -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
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user