wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-06-28 16:31:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into sory-139595043-qbox

Browse Source
This commit is contained in:
gaba
2017-02-14 08:51:58 -08:00
parent d4109c8fca b85950140b
commit f51c857e8b
57 changed files with 1179 additions and 663 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-admin/src/AppRouter.js
+3
View File
@@ -18,6 +18,9 @@ const routes = (
<Route path='community' component={CommunityContainer} />
<Route path='configure' component={Configure} />
<Route path='streams' component={Streams} />
<Route path='moderate' component={ModerationContainer} />
<Route path='moderate/:id' component={ModerationContainer} />
</Route>
</div>
);
client/coral-admin/src/actions/assets.js
+7 -1
View File
@@ -4,8 +4,10 @@ import {
FETCH_ASSETS_FAILURE,
UPDATE_ASSET_STATE_REQUEST,
UPDATE_ASSET_STATE_SUCCESS,
UPDATE_ASSET_STATE_FAILURE
UPDATE_ASSET_STATE_FAILURE,
UPDATE_ASSETS
} from '../constants/assets';
import coralApi from '../../../coral-framework/helpers/response';
/**
@@ -34,3 +36,7 @@ export const updateAssetState = (id, closedAt) => (dispatch) => {
dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
.catch(error => dispatch({type: UPDATE_ASSET_STATE_FAILURE, error}));
};
export const updateAssets = assets => dispatch => {
dispatch({type: UPDATE_ASSETS, assets});
};
client/coral-admin/src/actions/comments.js
-9
View File
@@ -101,12 +101,3 @@ export const flagComment = id => (dispatch, getState) => {
dispatch({type: commentTypes.COMMENT_FLAG, id});
dispatch({type: 'COMMENT_UPDATE', comment: getState().comments.get('byId').get(id)});
};
// Dialog Actions
export const showBanUserDialog = (userId, userName, commentId) => {
return {type: commentTypes.SHOW_BANUSER_DIALOG, userId, userName, commentId};
};
export const hideBanUserDialog = (showDialog) => {
return {type: commentTypes.HIDE_BANUSER_DIALOG, showDialog};
};
client/coral-admin/src/actions/moderation.js
+9
View File
@@ -0,0 +1,9 @@
import * as actions from 'constants/moderation';
export const setActiveTab = activeTab => ({type: actions.SET_ACTIVE_TAB, activeTab});
export const toggleModal = open => ({type: actions.TOGGLE_MODAL, open});
export const singleView = () => ({type: actions.SINGLE_VIEW});
// Ban User Dialog
export const showBanUserDialog = (user, commentId) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId});
export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});
client/coral-admin/src/components/ActionButton.js
+11 -37
View File
@@ -1,48 +1,22 @@
import React from 'react';
import styles from './ModerationList.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations.json';
import {FabButton, Button, Icon} from 'coral-ui';
import BanUserButton from './BanUserButton';
import {FabButton} from 'coral-ui';
import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
const ActionButton = ({option, type, comment = {}, user, menuOptionsMap, onClickAction, onClickShowBanDialog}) =>
{
const banned = user.status === 'BANNED';
const ActionButton = ({type = '', user, ...props}) => {
if (type === 'BAN') {
return <BanUserButton user={user} onClick={() => props.showBanUserDialog(props.user, props.id)} />;
}
if (option === 'flag' && (type === 'USERS' || comment.status || comment.flagged === true)) {
return null;
}
if (option === 'ban') {
return (
<div className={styles.ban}>
<Button
className={`ban ${styles.banButton}`}
cStyle='darkGrey'
disabled={banned ? 'disabled' : ''}
onClick={() => onClickShowBanDialog(user.id, user.username, comment.id)
}
raised
>
<Icon name='not_interested' className={styles.banIcon} />
{lang.t('comment.ban_user')}
</Button>
</div>
);
}
const menuOption = menuOptionsMap[option];
const action = {
item_type: type,
item_id: type === 'COMMENTS' ? comment.id : user.id
};
return (
<FabButton
className={`${option} ${styles.actionButton}`}
cStyle={option}
icon={menuOption.icon}
onClick={() => onClickAction(menuOption.status, type === 'COMMENTS' ? comment : user, action)}
className={`${type.toLowerCase()} ${styles.actionButton}`}
cStyle={type.toLowerCase()}
icon={menuActionsMap[type].icon}
onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
/>
);
};
export default ActionButton;
const lang = new I18n(translations);
client/coral-admin/src/components/BanUserButton.css
+10
View File
@@ -0,0 +1,10 @@
.banButton {
width: 114px;
letter-spacing: 1px;
i {
vertical-align: middle;
margin-right: 10px;
font-size: 14px;
}
}
client/coral-admin/src/components/BanUserButton.js
+26
View File
@@ -0,0 +1,26 @@
import React, {PropTypes} from 'react';
import {Button, Icon} from 'coral-ui';
import styles from './BanUserButton.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-admin/src/translations.json';
const lang = new I18n(translations);
const BanUserButton = ({user, ...props}) => (
<div className={styles.ban}>
<Button cStyle='darkGrey'
className={`ban ${styles.banButton}`}
disabled={user.status === 'BANNED' ? 'disabled' : ''}
onClick={props.onClick}
raised>
<Icon name='not_interested' />
{lang.t('comment.ban_user')}
</Button>
</div>
);
BanUserButton.propTypes = {
onClick: PropTypes.func.isRequired
};
export default BanUserButton;
client/coral-admin/src/components/BanUserDialog.js
+15 -15
View File
@@ -1,4 +1,4 @@
import React from 'react';
import React, {PropTypes} from 'react';
import {Dialog} from 'coral-ui';
import styles from './BanUserDialog.css';
@@ -8,34 +8,28 @@ import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => (
const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
<Dialog
className={styles.dialog}
id="banuserDialog"
open={open}
onClose={() => handleClose()}
onCancel={() => handleClose()}
onClose={handleClose}
onCancel={handleClose}
title={lang.t('bandialog.ban_user')}>
<span className={styles.close} onClick={handleClose}>×</span>
<div>
<div className={styles.header}>
<h2>
{lang.t('bandialog.ban_user')}
</h2>
<h2>{lang.t('bandialog.ban_user')}</h2>
</div>
<div className={styles.separator}>
<h3>
{lang.t('bandialog.are_you_sure', user.userName)}
</h3>
<i>
{lang.t('bandialog.note')}
</i>
<h3>{lang.t('bandialog.are_you_sure', user.name)}</h3>
<i>{lang.t('bandialog.note')}</i>
</div>
<div className={styles.buttons}>
<Button cStyle="cancel" className={styles.cancel} onClick={() => handleClose()} raised>
<Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
{lang.t('bandialog.cancel')}
</Button>
<Button cStyle="black" className={styles.ban} onClick={() => onClickBanUser('BANNED', user.userId, user.commentId)} raised>
<Button cStyle="black" className={styles.ban} onClick={() => handleBanUser({userId: user.id})} raised>
{lang.t('bandialog.yes_ban_user')}
</Button>
</div>
@@ -43,4 +37,10 @@ const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => (
</Dialog>
);
BanUserDialog.propTypes = {
handleBanUser: PropTypes.func.isRequired,
handleClose: PropTypes.func.isRequired,
user: PropTypes.object.isRequired,
};
export default BanUserDialog;
client/coral-admin/src/components/ModerationList.css
+6 -5
View File
@@ -96,11 +96,6 @@
margin-left: 40px;
}
.actionButton {
transform: scale(.8);
margin: 0;
}
.body {
margin-top: 20px;
flex: 1;
@@ -182,3 +177,9 @@
font-size: 14px;
}
}
.actionButton {
transform: scale(.8);
margin: 0;
}
client/coral-admin/src/components/User.js
+1 -2
View File
@@ -25,9 +25,8 @@ const User = props => {
{props.modActions.map(
(action, i) =>
<ActionButton
option={action}
type={action.toUpperCase()}
key={i}
type='USERS'
user={user}
menuOptionsMap={props.menuOptionsMap}
onClickAction={props.onClickAction}
client/coral-admin/src/components/ui/Header.css
+1
View File
@@ -16,6 +16,7 @@
.rightPanel {
position: absolute;
top: 0;
right: 0;
width: 170px;
height: 100%;
client/coral-admin/src/components/ui/Header.js
+5 -5
View File
@@ -13,10 +13,14 @@ export default ({handleLogout, restricted = false}) => (
!restricted ?
<div>
<Navigation className={styles.nav}>
<IndexLink className={styles.navLink} to="/admin"
<IndexLink className={styles.navLink} to="/admin/moderate"
activeClassName={styles.active}>
{lang.t('configure.moderate')}
</IndexLink>
<Link className={styles.navLink} to="/admin/streams"
activeClassName={styles.active}>
{lang.t('configure.streams')}
</Link>
<Link className={styles.navLink} to="/admin/community"
activeClassName={styles.active}>
{lang.t('configure.community')}
@@ -25,10 +29,6 @@ export default ({handleLogout, restricted = false}) => (
activeClassName={styles.active}>
{lang.t('configure.configure')}
</Link>
<Link className={styles.navLink} to="/admin/streams"
activeClassName={styles.active}>
{lang.t('configure.streams')}
</Link>
</Navigation>
<div className={styles.rightPanel}>
<ul>
client/coral-admin/src/constants/assets.js
+3
View File
@@ -1,6 +1,9 @@
export const FETCH_ASSETS_REQUEST = 'FETCH_ASSETS_REQUEST';
export const FETCH_ASSETS_SUCCESS = 'FETCH_ASSETS_SUCCESS';
export const FETCH_ASSETS_FAILURE = 'FETCH_ASSETS_FAILURE';
export const UPDATE_ASSET_STATE_REQUEST = 'UPDATE_ASSET_STATE_REQUEST';
export const UPDATE_ASSET_STATE_SUCCESS = 'UPDATE_ASSET_STATE_SUCCESS';
export const UPDATE_ASSET_STATE_FAILURE = 'UPDATE_ASSET_STATE_FAILURE';
export const UPDATE_ASSETS = 'UPDATE_ASSETS';
client/coral-admin/src/constants/moderation.js
+5
View File
@@ -0,0 +1,5 @@
export const SET_ACTIVE_TAB = 'SET_ACTIVE_TAB';
export const TOGGLE_MODAL = 'TOGGLE_MODAL';
export const SINGLE_VIEW = 'SINGLE_VIEW';
export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+86 -100
View File
@@ -1,42 +1,33 @@
import React from 'react';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {compose} from 'react-apollo';
import key from 'keymaster';
import isEqual from 'lodash/isEqual';
import {modQueueQuery} from '../../graphql/queries';
import {banUser, setCommentStatus} from '../../graphql/mutations';
import {
updateStatus,
showBanUserDialog,
hideBanUserDialog,
fetchPremodQueue,
fetchRejectedQueue,
fetchFlaggedQueue,
fetchModerationQueueComments,
} from 'actions/comments';
import {userStatusUpdate, sendNotificationEmail, enableUsernameEdit} from 'actions/users';
import {fetchSettings} from 'actions/settings';
import {updateAssets} from 'actions/assets';
import {setActiveTab, toggleModal, singleView, showBanUserDialog, hideBanUserDialog} from 'actions/moderation';
import {Spinner} from 'coral-ui';
import BanUserDialog from '../../components/BanUserDialog';
import ModerationQueue from './ModerationQueue';
import ModerationMenu from './components/ModerationMenu';
import ModerationHeader from './components/ModerationHeader';
import NotFoundAsset from './components/NotFoundAsset';
class ModerationContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTab: 'all',
singleView: false,
modalOpen: false
};
this.onClose = this.onClose.bind(this);
this.onTabClick = this.onTabClick.bind(this);
}
class ModerationContainer extends Component {
componentWillMount() {
this.props.fetchModerationQueueComments();
const {toggleModal, singleView} = this.props;
this.props.fetchSettings();
key('s', () => this.setState({singleView: !this.state.singleView}));
key('shift+/', () => this.setState({modalOpen: true}));
key('esc', () => this.setState({modalOpen: false}));
key('s', () => singleView());
key('shift+/', () => toggleModal(true));
key('esc', () => toggleModal(false));
}
componentWillUnmount() {
@@ -45,90 +36,85 @@ class ModerationContainer extends React.Component {
key.unbind('esc');
}
componentDidMount() {
// Hack for dynamic mdl tabs
if (typeof componentHandler !== 'undefined') {
// FIXME: fix this hack
componentHandler.upgradeAllRegistered(); // eslint-disable-line no-undef
componentWillReceiveProps(nextProps) {
const {updateAssets} = this.props;
if(!isEqual(nextProps.data.assets, this.props.data.assets)) {
updateAssets(nextProps.data.assets);
}
}
onTabClick(activeTab) {
this.setState({activeTab});
if (activeTab === 'premod') {
this.props.fetchPremodQueue();
} else if (activeTab === 'rejected') {
this.props.fetchRejectedQueue();
} else if (activeTab === 'flagged') {
this.props.fetchFlaggedQueue();
} else {
this.props.fetchModerationQueueComments();
}
}
onClose() {
this.setState({modalOpen: false});
}
render () {
const {comments, actions, settings} = this.props;
const premodIds = comments.ids.filter(id => comments.byId[id].status === 'PREMOD');
const rejectedIds = comments.ids.filter(id => comments.byId[id].status === 'REJECTED');
const flaggedIds = comments.ids.filter(id =>
comments.byId[id].flagged === true &&
comments.byId[id].status !== 'REJECTED' &&
comments.byId[id].status !== 'ACCEPTED'
);
const userActionIds = actions.ids.filter(id => actions.byId[id].item_type === 'USERS');
const {data, moderation, settings, assets, ...props} = this.props;
const providedAssetId = this.props.params.id;
let asset;
// show the Pre-Mod tab if premod is enabled globally OR there are pre-mod comments in the db.
let enablePremodTab = (settings.settings && settings.settings.moderation === 'PRE') || premodIds.length;
if (data.loading) {
return <div><Spinner/></div>;
}
if (data.error) {
console.log(data);
return <div>Error</div>;
}
if (providedAssetId) {
asset = assets.find(asset => asset.id === this.props.params.id);
if (!asset) {
return <NotFoundAsset assetId={providedAssetId} />;
}
}
const enablePremodTab = !!data.premod.length;
return (
<ModerationQueue
enablePremodTab={enablePremodTab}
onTabClick={this.onTabClick}
onClose={this.onClose}
premodIds={premodIds}
userActionIds={userActionIds}
rejectedIds={rejectedIds}
flaggedIds={flaggedIds}
{...this.props}
{...this.state}
/>
<div>
<ModerationHeader asset={asset} />
<ModerationMenu
onTabClick={props.onTabClick}
enablePremodTab={enablePremodTab}
activeTab={moderation.activeTab}
/>
<ModerationQueue
data={data}
currentAsset={asset}
activeTab={moderation.activeTab}
enablePremodTab={enablePremodTab}
suspectWords={settings.wordlist.suspect}
showBanUserDialog={props.showBanUserDialog}
acceptComment={props.acceptComment}
rejectComment={props.rejectComment}
/>
<BanUserDialog
open={moderation.banDialog}
user={moderation.user}
handleClose={props.hideBanUserDialog}
handleBanUser={props.banUser}
/>
</div>
);
}
}
const mapStateToProps = state => ({
comments: state.comments.toJS(),
moderation: state.moderation.toJS(),
settings: state.settings.toJS(),
users: state.users.toJS(),
actions: state.actions.toJS(),
assets: state.assets.get('assets')
});
const mapDispatchToProps = dispatch => {
return {
fetchSettings: () => dispatch(fetchSettings()),
fetchModerationQueueComments: () => dispatch(fetchModerationQueueComments()),
fetchPremodQueue: () => dispatch(fetchPremodQueue()),
fetchRejectedQueue: () => dispatch(fetchRejectedQueue()),
fetchFlaggedQueue: () => dispatch(fetchFlaggedQueue()),
showBanUserDialog: (userId, userName, commentId) => dispatch(showBanUserDialog(userId, userName, commentId)),
hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
userStatusUpdate: (status, userId, commentId) => dispatch(userStatusUpdate(status, userId, commentId)).then(() => {
dispatch(fetchModerationQueueComments());
}),
suspendUser: (userId, subject, text) => dispatch(userStatusUpdate('BANNED', userId))
.then(() => dispatch(enableUsernameEdit(userId)))
.then(() => dispatch(sendNotificationEmail(userId, subject, text)))
.then(() => dispatch(fetchModerationQueueComments()))
,
updateStatus: (action, comment) => dispatch(updateStatus(action, comment))
};
};
const mapDispatchToProps = dispatch => ({
onTabClick: activeTab => dispatch(setActiveTab(activeTab)),
toggleModal: toggle => dispatch(toggleModal(toggle)),
onClose: () => dispatch(toggleModal(false)),
singleView: () => dispatch(singleView()),
updateAssets: assets => dispatch(updateAssets(assets)),
fetchSettings: () => dispatch(fetchSettings()),
showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
});
export default connect(mapStateToProps, mapDispatchToProps)(ModerationContainer);
export default compose(
connect(mapStateToProps, mapDispatchToProps),
setCommentStatus,
modQueueQuery,
banUser
)(ModerationContainer);
client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css
-53
View File
@@ -1,53 +0,0 @@
@custom-media --big-viewport (min-width: 780px);
.listContainer {
max-width: 860px;
margin: 0 auto;
}
.tabBar {
background: #262626;
z-index: 5;
}
.tab {
flex: 1;
color: white;
text-transform: capitalize;
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
transition: border-bottom 200ms;
}
.active {
color: white;
box-sizing: border-box;
border-bottom: solid 5px #F36451;
}
.active > span {
color: white;
}
.active:after {
background: transparent !important;
}
.showShortcuts {
position: absolute;
right: 130px;
display: flex;
align-items: center;
font-size: 13px;
span {
margin-left: 7px;
}
}
@media (--big-viewport) {
.tab {
flex: none;
}
}
client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+23 -201
View File
@@ -1,212 +1,34 @@
import React, {PropTypes} from 'react';
import styles from './ModerationQueue.css';
import ModerationKeysModal from 'components/ModerationKeysModal';
import ModerationList from 'components/ModerationList';
import BanUserDialog from 'components/BanUserDialog';
import Comment from './components/Comment';
import {actionsMap} from './helpers/moderationQueueActionsMap';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../../translations.json';
const lang = new I18n(translations);
const ModerationQueue = (props) => (
<div>
<div className='mdl-tabs'>
<div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
<a href='#all'
onClick={(e) => {
e.preventDefault();
props.onTabClick('all');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'all' ? styles.active : ''}`}
>
{lang.t('modqueue.all')}
</a>
{
props.enablePremodTab
? <a href='#premod'
onClick={(e) => {
e.preventDefault();
props.onTabClick('premod');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'premod' ? styles.active : ''}`}>
{lang.t('modqueue.premod')}
</a>
: null
}
<a href='#account'
onClick={(e) => {
e.preventDefault();
props.onTabClick('account');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'account' ? styles.active : ''}`}>
{lang.t('modqueue.account')}
</a>
<a href='#rejected'
onClick={(e) => {
e.preventDefault();
props.onTabClick('rejected');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}
>
{lang.t('modqueue.rejected')}
</a>
<a href='#flagged'
onClick={(e) => {
e.preventDefault();
props.onTabClick('flagged');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}
>
{lang.t('modqueue.flagged')}
</a>
</div>
<div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='all'>
{
props.activeTab === 'all' &&
<div>
<ModerationList
suspectWords={props.settings.settings.wordlist.suspect}
isActive={props.activeTab === 'all'}
singleView={props.singleView}
commentIds={[...props.premodIds, ...props.flaggedIds]}
comments={props.comments.byId}
users={props.users.byId}
actionIds={props.userActionIds}
actions={props.actions.byId}
userStatusUpdate={props.userStatusUpdate}
suspendUser={props.suspendUser}
updateCommentStatus={props.updateStatus}
onClickShowBanDialog={props.showBanUserDialog}
modActions={['reject', 'approve', 'ban']}
loading={props.comments.loading}/>
<BanUserDialog
open={props.comments.showBanUserDialog}
handleClose={props.hideBanUserDialog}
onClickBanUser={props.userStatusUpdate}
user={props.comments.banUser}
/>
</div>
}
</div>
const ModerationQueue = props => {
return (
<div id="moderationList">
<ul>
{
props.enablePremodTab
? <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='premod'>
{
props.activeTab === 'premod' &&
<div>
<ModerationList
suspectWords={props.settings.settings.wordlist.suspect}
isActive={props.activeTab === 'premod'}
singleView={props.singleView}
commentIds={props.premodIds}
comments={props.comments.byId}
users={props.users.byId}
actions={props.actions.byId}
userStatusUpdate={props.userStatusUpdate}
suspendUser={props.suspendUser}
updateCommentStatus={props.updateStatus}
onClickShowBanDialog={props.showBanUserDialog}
modActions={['reject', 'approve', 'ban']}
loading={props.comments.loading}/>
<BanUserDialog
open={props.comments.showBanUserDialog}
handleClose={props.hideBanUserDialog}
onClickBanUser={props.userStatusUpdate}
user={props.comments.banUser}
/>
</div>
}
</div>
: null
props.data[props.activeTab].map((comment, i) => {
return <Comment
key={i}
index={i}
comment={comment}
suspectWords={props.suspectWords}
actions={actionsMap[comment.status]}
showBanUserDialog={props.showBanUserDialog}
acceptComment={props.acceptComment}
rejectComment={props.rejectComment}
currentAsset={props.currentAsset}
/>;
})
}
<div className={`mdl-tabs__panel ${styles.listContainer}`} id='account'>
{
props.activeTab === 'account' &&
<div>
<ModerationList
suspectWords={props.settings.settings.wordlist.suspect}
isActive={props.activeTab === 'account'}
singleView={props.singleView}
users={props.users.byId}
actionIds={props.userActionIds}
actions={props.actions.byId}
userStatusUpdate={props.userStatusUpdate}
suspendUser={props.suspendUser}
updateCommentStatus={props.updateStatus}
onClickShowBanDialog={props.showBanUserDialog}
modActions={['reject', 'approve', 'ban']}
loading={props.comments.loading}/>
<BanUserDialog
open={props.comments.showBanUserDialog}
handleClose={props.hideBanUserDialog}
onClickBanUser={props.userStatusUpdate}
user={props.comments.banUser}
/>
</div>
}
</div>
<div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
{
props.activeTab === 'flagged' &&
<div>
<ModerationList
suspectWords={props.settings.settings.wordlist.suspect}
isActive={props.activeTab === 'flagged'}
singleView={props.singleView}
commentIds={props.flaggedIds}
userStatusUpdate={props.userStatusUpdate}
suspendUser={props.suspendUser}
comments={props.comments.byId}
users={props.users.byId}
updateCommentStatus={props.updateStatus}
modActions={['reject', 'approve']}
loading={props.comments.loading}/>
<BanUserDialog
open={props.comments.showBanUserDialog}
handleClose={props.hideBanUserDialog}
onClickBanUser={props.userStatusUpdate}
user={props.comments.banUser}
/>
</div>
}
</div>
<div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
{
props.activeTab === 'rejected' &&
<div>
<ModerationList
suspectWords={props.settings.settings.wordlist.suspect}
isActive={props.activeTab === 'rejected'}
singleView={props.singleView}
commentIds={props.rejectedIds}
userStatusUpdate={props.userStatusUpdate}
suspendUser={props.suspendUser}
comments={props.comments.byId}
users={props.users.byId}
updateCommentStatus={props.updateStatus}
modActions={['approve']}
loading={props.comments.loading}
/>
<BanUserDialog
open={props.comments.showBanUserDialog}
handleClose={props.hideBanUserDialog}
onClickBanUser={props.userStatusUpdate}
user={props.comments.banUser}
/>
</div>
}
</div>
<ModerationKeysModal open={props.modalOpen} onClose={props.closeModal} />
</ul>
</div>
</div>
);
);
};
ModerationQueue.propTypes = {
enablePremodTab: PropTypes.bool.isRequired
data: PropTypes.object.isRequired
};
export default ModerationQueue;
client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+79
View File
@@ -0,0 +1,79 @@
import React from 'react';
import timeago from 'timeago.js';
import Linkify from 'react-linkify';
import Highlighter from 'react-highlight-words';
import {Link} from 'react-router';
import styles from './styles.css';
import {Icon} from 'coral-ui';
import ActionButton from '../../../components/ActionButton';
import FlagBox from './FlagBox';
const linkify = new Linkify();
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-admin/src/translations.json';
const lang = new I18n(translations);
const Comment = ({actions = [], ...props}) => {
const links = linkify.getMatches(props.comment.body);
const actionSumaries = props.comment.action_summaries;
return (
<li tabIndex={props.index}
className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
<div className={styles.itemHeader}>
<div className={styles.author}>
<span>{props.comment.user.name}</span>
<span className={styles.created}>
{timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
</span>
{props.comment.action_summaries ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
</div>
<div className={styles.sideActions}>
{links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
<div className={`actions ${styles.actions}`}>
{actions.map((action, i) =>
<ActionButton key={i}
type={action}
user={props.comment.user}
acceptComment={() => props.acceptComment({commentId: props.comment.id})}
rejectComment={() => props.rejectComment({commentId: props.comment.id})}
showBanUserDialog={() => props.showBanUserDialog(props.comment.user, props.comment.id)}
/>
)}
</div>
{props.comment.user.banned === 'banned' ?
<span className={styles.banned}>
<Icon name='error_outline'/>
{lang.t('comment.banned_user')}
</span>
: null}
</div>
</div>
{!props.currentAsset && (
<div className={styles.moderateArticle}>
Article: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate Article</Link>
</div>
)}
<div className={styles.itemBody}>
<p className={styles.body}>
<Linkify component='span' properties={{style: linkStyles}}>
<Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
</Linkify>
</p>
</div>
{actionSumaries && <FlagBox actionSumaries={actionSumaries} />}
{/* <span className={styles.context}>*/}
{/* <a>View context</a>*/}
{/* </span>*/}
</li>
);
};
const linkStyles = {
backgroundColor: 'rgb(255, 219, 135)',
padding: '1px 2px'
};
export default Comment;
client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js
+19
View File
@@ -0,0 +1,19 @@
import React, {PropTypes} from 'react';
import styles from './styles.css';
const FlagBox = props => (
<div className={styles.flagBox}>
<h3>Flags:</h3>
<ul>
{props.actionSumaries.map((action, i) =>
<li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
)}
</ul>
</div>
);
FlagBox.propTypes = {
actionSumaries: PropTypes.array.isRequired
};
export default FlagBox;
client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
+25
View File
@@ -0,0 +1,25 @@
import React from 'react';
import {Link} from 'react-router';
import styles from './styles.css';
const ModerationHeader = props => (
<div className=''>
<div className={`mdl-tabs ${styles.header}`}>
{
props.asset ?
<div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
<Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
<a className="mdl-tabs__tab">{props.asset.title}</a>
<Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
</div>
:
<div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
<a className="mdl-tabs__tab" />
<a className="mdl-tabs__tab">All Streams</a>
<Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
</div>
}
</div>
</div>
);
export default ModerationHeader;
client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+59
View File
@@ -0,0 +1,59 @@
import React, {PropTypes} from 'react';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-admin/src/translations.json';
const lang = new I18n(translations);
const ModerationMenu = (props) => (
<div className='mdl-tabs'>
<div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
<a href='#all'
onClick={(e) => {
e.preventDefault();
props.onTabClick('all');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'all' ? styles.active : ''}`}
>
{lang.t('modqueue.all')}
</a>
{
props.enablePremodTab
? <a href='#premod'
onClick={(e) => {
e.preventDefault();
props.onTabClick('premod');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'premod' ? styles.active : ''}`}>
{lang.t('modqueue.premod')}
</a>
: null
}
<a href='#rejected'
onClick={(e) => {
e.preventDefault();
props.onTabClick('rejected');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}
>
{lang.t('modqueue.rejected')}
</a>
<a href='#flagged'
onClick={(e) => {
e.preventDefault();
props.onTabClick('flagged');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}
>
{lang.t('modqueue.flagged')}
</a>
</div>
</div>
);
ModerationMenu.propTypes = {
activeTab: PropTypes.string.isRequired,
enablePremodTab: PropTypes.bool
};
export default ModerationMenu;
client/coral-admin/src/containers/ModerationQueue/components/NotFoundAsset.js
+14
View File
@@ -0,0 +1,14 @@
import React from 'react';
import {Link} from 'react-router';
import styles from './styles.css';
const NotFound = props => (
<div className={`mdl-card mdl-shadow--2dp ${styles.notFound}`}>
<p>
The provided asset id <Link to={`/admin/moderate/${props.assetId}`}>{props.assetId}</Link> does not exist.
<Link className={styles.goToStreams} to="/admin/streams">Go to Streams</Link>
</p>
</div>
);
export default NotFound;
client/coral-admin/src/containers/ModerationQueue/components/styles.css
+327
View File
@@ -0,0 +1,327 @@
@custom-media --big-viewport (min-width: 780px);
.listContainer {
max-width: 860px;
margin: 0 auto;
}
.tabBar {
background-color: rgba(44, 44, 44, 0.89);
z-index: 5;
}
.tab {
flex: 1;
color: white;
text-transform: capitalize;
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
transition: border-bottom 200ms;
}
.active {
color: white;
box-sizing: border-box;
border-bottom: solid 5px #F36451;
}
.active > span {
color: white;
}
.active:after {
background: transparent !important;
}
.showShortcuts {
position: absolute;
right: 130px;
display: flex;
align-items: center;
font-size: 13px;
span {
margin-left: 7px;
}
}
@media (--big-viewport) {
.tab {
flex: none;
}
}
.notFound {
position: relative;
margin: 20px auto;
text-align: center;
padding: 68px 45px;
vertical-align: middle;
min-width: 500px;
a {
color: rgb(244, 126, 107);
font-weight: 500;
&.goToStreams {
position: absolute;
right: 10px;
bottom: 10px;
}
}
}
.header {
background-color: #2c2c2c;
color: white;
margin-bottom: -1px;
.moderateAsset {
a {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: white;
text-transform: capitalize;
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
transition: opacity 200ms;
opacity: 1;
&:hover {
opacity: .8;
cursor: pointer;
}
&:first-child {
text-align: left;
}
&:nth-child(2) {
text-align: center;
}
&:last-child {
text-align: right;
}
}
}
}
@custom-media --big-viewport (min-width: 780px);
.list {
padding: 8px 0;
list-style: none;
display: block;
&.singleView .listItem {
display: none;
}
&.singleView .listItem.activeItem {
display: block;
height: 100%;
font-size: 1.5em;
line-height: 1.5em;
border: none;
.actions {
position: fixed;
bottom: 60px;
left: 25%;
margin: 0 auto;
display: flex;
justify-content: space-around;
width: 50%;
margin: 0;
}
.actionButton {
transform: scale(1.4);
}
}
}
.listItem {
border-bottom: 1px solid #e0e0e0;
font-size: 16px;
width: 100%;
max-width: 660px;
min-width: 400px;
margin: 0 auto;
padding: 16px 14px;
position: relative;
transition: box-shadow 200ms;
margin-top: 0;
&:hover {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
&:last-child {
border-bottom: none;
}
.context {
a {
color: #f36451;
text-decoration: underline;
float: right;
}
}
.sideActions {
position: absolute;
right: 0;
height: 100%;
top: 0;
padding: 40px 18px;
box-sizing: border-box;
}
.itemHeader {
display: flex;
align-items: center;
justify-content: space-between;
.author {
min-width: 230px;
display: flex;
align-items: center;
}
}
.itemBody {
display: flex;
justify-content: space-between;
}
.avatar {
margin-right: 16px;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #757575;
font-size: 40px;
color: #fff;
}
.created {
color: #666;
font-size: 13px;
margin-left: 40px;
}
.actionButton {
transform: scale(.8);
margin: 0;
}
.body {
margin-top: 0px;
flex: 1;
font-size: 0.88em;
color: black;
max-width: 500px;
word-wrap: break-word;
}
.flagged {
color: rgba(255, 0, 0, .5);
padding-top: 15px;
padding-left: 10px;
}
.flagCount{
font-size: 12px;
color: #d32f2f;
}
}
.empty {
color: #444;
margin-top: 50px;
text-align: center;
}
@media (--big-viewport) {
.listItem {
border: 1px solid #e0e0e0;
margin-bottom: 30px;
&:last-child {
border-bottom: 1px solid #e0e0e0;
}
&.activeItem {
border: 2px solid #333;
}
}
}
.hasLinks {
color: #f00;
text-align: right;
display: flex;
align-items: center;
i {
margin-right: 5px;
}
}
.banned {
color: #f00;
text-align: left;
display: flex;
align-items: center;
i {
margin-right: 5px;
}
}
.ban {
display: block;
text-align: center;
margin-top: 5px;
}
.Comment {
.moderateArticle {
font-size: 12px;
a {
display: inline-block;
color: #679af3;
text-decoration: none;
font-size: 1em;
font-weight: 400;
letter-spacing: .5px;
font-size: 12px;
margin-left: 10px;
&:hover {
text-decoration: underline;
opacity: .9;
cursor: pointer;
}
}
}
}
.flagBox {
border-top: 1px solid rgba(66, 66, 66, 0.12);
h3 {
font-size: 14px;
margin: 0;
font-weight: 500;
}
}
client/coral-admin/src/containers/ModerationQueue/helpers/moderationQueueActionsMap.js
+13
View File
@@ -0,0 +1,13 @@
export const actionsMap = {
PREMOD: ['REJECT', 'APPROVE', 'BAN'],
FLAGGED: ['REJECT', 'APPROVE'],
REJECTED: ['APPROVE']
};
export const menuActionsMap = {
'REJECT': {status: 'REJECTED', icon: 'close', key: 'r'},
'APPROVE': {status: 'ACCEPTED', icon: 'done', key: 't'},
'FLAGGED': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
'BAN': {status: 'BANNED', icon: 'not interested'},
'': {icon: 'done'}
};
client/coral-admin/src/containers/Streams/Streams.css
+6
View File
@@ -55,6 +55,12 @@
border-left: none;
border-right: none;
a {
color: rgb(44, 44, 44);
font-weight: 500;
text-decoration: none;
}
th {
font-size: 1.1em;
}
client/coral-admin/src/containers/Streams/Streams.js
+18 -18
View File
@@ -4,14 +4,10 @@ import {connect} from 'react-redux';
import I18n from 'coral-framework/modules/i18n/i18n';
import {fetchAssets, updateAssetState} from '../../actions/assets';
import translations from '../../translations.json';
import {
RadioGroup,
Radio,
Icon,
DataTable,
TableHeader
} from 'react-mdl';
import Pager from 'coral-ui/components/Pager';
import {Link} from 'react-router';
import {Pager, Icon} from 'coral-ui';
import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
const limit = 25;
@@ -74,6 +70,8 @@ class Streams extends Component {
}
}
renderTitle = (title, {id}) => <Link to={`/admin/moderate/${id}`}>{title}</Link>
renderStatus = (closedAt, {id}) => {
const closed = closedAt && new Date(closedAt).getTime() < Date.now();
const statusMenuOpen = this.state.statusMenus[id];
@@ -104,6 +102,9 @@ class Streams extends Component {
render () {
const {search, sort, filter} = this.state;
const {assets} = this.props;
const assetsIds = assets.ids.map((id) => assets.byId[id]);
return (
<div className={styles.container}>
<div className={styles.leftColumn}>
@@ -142,16 +143,14 @@ class Streams extends Component {
</RadioGroup>
</div>
<div className={styles.mainContent}>
<DataTable
className={styles.streamsTable}
rows={assets.ids.map((id) => assets.byId[id])}>
<TableHeader name="title">{lang.t('streams.article')}</TableHeader>
<TableHeader name="publication_date" cellFormatter={this.renderDate}>
{lang.t('streams.pubdate')}
</TableHeader>
<TableHeader name="closedAt" cellFormatter={this.renderStatus} className={styles.status}>
{lang.t('streams.status')}
</TableHeader>
<DataTable className={styles.streamsTable} rows={assetsIds} onClick={this.goToModeration}>
<TableHeader name="title" cellFormatter={this.renderTitle}>{lang.t('streams.article')}</TableHeader>
<TableHeader name="publication_date" cellFormatter={this.renderDate}>
{lang.t('streams.pubdate')}
</TableHeader>
<TableHeader name="closedAt" cellFormatter={this.renderStatus} className={styles.status}>
{lang.t('streams.status')}
</TableHeader>
</DataTable>
<Pager
totalPages={Math.ceil((assets.count || 0) / limit)}
@@ -169,6 +168,7 @@ const mapStateToProps = ({assets}) => {
assets: assets.toJS()
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchAssets: (...args) => {
client/coral-admin/src/graphql/fragments/commentView.graphql
+15
View File
@@ -0,0 +1,15 @@
fragment commentView on Comment {
id
body
created_at
status
user {
id
name: username
status
}
asset {
id
title
}
}
client/coral-admin/src/graphql/mutations/index.js
+38
View File
@@ -0,0 +1,38 @@
import {graphql} from 'react-apollo';
import SET_USER_STATUS from './setUserStatus.graphql';
import SET_COMMENT_STATUS from './setCommentStatus.graphql';
export const banUser = graphql(SET_USER_STATUS, {
props: ({mutate}) => ({
banUser: ({userId}) => {
return mutate({
variables: {
userId,
status: 'BANNED'
}
});
}}),
});
export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
props: ({mutate}) => ({
acceptComment: ({commentId}) => {
return mutate({
variables: {
commentId,
status: 'ACCEPTED'
},
refetchQueries: ['ModQueue']
});
},
rejectComment: ({commentId}) => {
return mutate({
variables: {
commentId,
status: 'REJECTED'
},
refetchQueries: ['ModQueue']
});
}
})
});
client/coral-admin/src/graphql/mutations/setCommentStatus.graphql
+7
View File
@@ -0,0 +1,7 @@
mutation setCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){
setCommentStatus(id: $commentId, status: $status) {
errors {
translation_key
}
}
}
client/coral-admin/src/graphql/mutations/setUserStatus.graphql
+7
View File
@@ -0,0 +1,7 @@
mutation setUserStatus($userId: ID!, $status: USER_STATUS!) {
setUserStatus(id: $userId, status: $status) {
errors {
translation_key
}
}
}
client/coral-admin/src/graphql/queries/assetsQuery.graphql
+6
View File
@@ -0,0 +1,6 @@
query Assets {
assets {
id
title
}
}
client/coral-admin/src/graphql/queries/index.js
+12
View File
@@ -0,0 +1,12 @@
import {graphql} from 'react-apollo';
import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
options: ({params: {id = ''}}) => {
return {
variables: {
asset_id: id
}
};
}
});
client/coral-admin/src/graphql/queries/modQueueQuery.graphql
+38
View File
@@ -0,0 +1,38 @@
#import "../fragments/commentView.graphql"
query ModQueue ($asset_id: ID!) {
all: comments(query: {
statuses: [REJECTED, PREMOD],
asset_id: $asset_id
}) {
...commentView
}
premod: comments(query: {
statuses: [PREMOD],
asset_id: $asset_id
}) {
...commentView
}
flagged: comments(query: {
action_type: FLAG,
asset_id: $asset_id
}) {
...commentView
action_summaries {
count
... on FlagActionSummary {
reason
}
}
}
rejected: comments(query: {
statuses: [REJECTED],
asset_id: $asset_id
}) {
...commentView
}
assets: assets {
id
title
}
}
client/coral-admin/src/reducers/actions.js
-27
View File
@@ -1,27 +0,0 @@
import {Map, Set, fromJS} from 'immutable';
import * as types from '../constants/actions';
const initialState = Map({
ids: Set(),
byId: Map()
});
export default (state = initialState, action) => {
switch (action.type) {
case types.ACTIONS_MODERATION_QUEUE_FETCH_SUCCESS: return addActions(state, action);
default:
return state;
}
};
const addActions = (state, action) => {
// Make ids that are unique by item_id and by action type
const typeId = (action) => `${action.action_type}_${action.item_id}`;
const ids = action.actions.map(action => typeId(action));
const map = action.actions.reduce((memo, action) => {
memo[typeId(action)] = action;
return memo;
}, {});
return state.set('byId', fromJS(map)).set('ids', new Set(ids));
};
client/coral-admin/src/reducers/assets.js
+14 -8
View File
@@ -1,20 +1,26 @@
import {Map, List, fromJS} from 'immutable';
import {FETCH_ASSETS_SUCCESS, UPDATE_ASSET_STATE_REQUEST} from '../constants/assets';
import * as actions from '../constants/assets';
const initialState = Map({
byId: Map(),
ids: List()
ids: List(),
assets: List()
});
export default (state = initialState, action) => {
export default function assets (state = initialState, action) {
switch (action.type) {
case FETCH_ASSETS_SUCCESS:
case actions.FETCH_ASSETS_SUCCESS:
return replaceAssets(action, state);
case UPDATE_ASSET_STATE_REQUEST:
return state.setIn(['byId', action.id, 'closedAt'], action.closedAt);
default: return state;
case actions.UPDATE_ASSET_STATE_REQUEST:
return state
.setIn(['byId', action.id, 'closedAt'], action.closedAt);
case actions.UPDATE_ASSETS:
return state
.set('assets', List(action.assets));
default:
return state;
}
};
}
const replaceAssets = (action, state) => {
const assets = fromJS(action.assets.reduce((prev, curr) => { prev[curr.id] = curr; return prev; }, {}));
client/coral-admin/src/reducers/comments.js
-77
View File
@@ -1,77 +0,0 @@
import * as actions from '../constants/comments';
import * as userActions from '../constants/users';
import {Map, List, fromJS} from 'immutable';
/**
* Comments state is stored using 2 structures:
* - byId is a Map holding the comments using the item_id property as keys
* - ids is a List of item_id, this allows us to order and iterate easily
* since maps are unordered and some times we just need a list of things
*/
const initialState = Map({
byId: Map(),
ids: List(),
loading: false,
showBanUserDialog: false,
banUser: {
'userName': '',
'userId': '',
'commentId': ''
}
});
// Handle the comment actions
export default (state = initialState, action) => {
switch (action.type) {
case actions.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST: return state.set('loading', true);
case actions.COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS: return replaceComments(action, state);
case actions.COMMENTS_MODERATION_QUEUE_FAILED: return state.set('loading', false);
case actions.COMMENT_STATUS_UPDATE_REQUEST: return updateStatus(state, action);
case actions.COMMENT_FLAG: return flag(state, action);
case actions.COMMENT_CREATE_SUCCESS: return addComment(state, action);
case actions.COMMENT_STREAM_FETCH_SUCCESS: return replaceComments(action, state);
case actions.SHOW_BANUSER_DIALOG: return setBanUser(state, true, action);
case actions.HIDE_BANUSER_DIALOG: return setBanUser(state, false, action);
case actions.USER_BAN_SUCCESS: return setBanUser(state, false, action);
case userActions.UPDATE_STATUS_SUCCESS: return setBanUser(state, false, action);
default: return state;
}
};
// hide or show the UI for the dialog confirming the ban
// set the user that is going to set and the comment that is the reason
const setBanUser = (state, showBanUser, action) => {
const banUser = {'userName': action.userName, 'userId': action.userId, 'commentId': action.commentId};
return state.set('showBanUserDialog', showBanUser)
.set('banUser', banUser);
};
// Update a comment status
const updateStatus = (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));
};
// Flag a comment
const flag = (state, action) => {
const byId = state.get('byId');
const data = byId.get(action.id).set('flagged', true);
const comment = byId.get(action.id).set('data', data);
return state.set('byId', byId.set(action.id, comment));
};
// Replace the comment list with a new one
const replaceComments = (action, state) => {
const comments = fromJS(action.comments.reduce((prev, curr) => { prev[curr.id] = curr; return prev; }, {}));
return state.set('byId', comments).set('loading', false)
.set('ids', List(comments.keys()));
};
// Add a new comment
const addComment = (state, action) => {
const comment = fromJS(action.comment);
return state.set('byId', state.get('byId').set(comment.get('item_id'), comment))
.set('ids', state.get('ids').unshift(comment.get('item_id')));
};
client/coral-admin/src/reducers/index.js
+9 -13
View File
@@ -1,19 +1,15 @@
import auth from 'reducers/auth';
import users from 'reducers/users';
import assets from 'reducers/assets';
import actions from 'reducers/actions';
import install from 'reducers/install';
import comments from 'reducers/comments';
import settings from 'reducers/settings';
import community from 'reducers/community';
import auth from './auth';
import assets from './assets';
import settings from './settings';
import community from './community';
import moderation from './moderation';
import install from './install';
export default {
settings,
comments,
community,
auth,
actions,
assets,
users,
settings,
community,
moderation,
install
};
client/coral-admin/src/reducers/moderation.js
+37
View File
@@ -0,0 +1,37 @@
import {Map} from 'immutable';
import * as actions from '../constants/moderation';
const initialState = Map({
activeTab: 'all',
singleView: false,
modalOpen: false,
user: Map({}),
commentId: null,
banDialog: false
});
export default function moderation (state = initialState, action) {
switch (action.type) {
case actions.HIDE_BANUSER_DIALOG:
return state
.set('banDialog', false);
case actions.SHOW_BANUSER_DIALOG:
return state
.merge({
user: Map(action.user),
commentId: action.commentId,
banDialog: true
});
case actions.SET_ACTIVE_TAB:
return state
.set('activeTab', action.activeTab);
case actions.TOGGLE_MODAL:
return state
.set('modalOpen', action.open);
case actions.SINGLE_VIEW:
return state
.set('singleView', !state.get('singleView'));
default :
return state;
}
}
client/coral-admin/src/reducers/settings.js
+45 -44
View File
@@ -1,5 +1,5 @@
import {Map, List} from 'immutable';
import * as types from '../actions/settings';
import * as actions from '../actions/settings';
const initialState = Map({
settings: Map({
@@ -16,48 +16,49 @@ const initialState = Map({
fetchingSettings: false
});
// Handle the comment actions
export default (state = initialState, action) => {
export default function settings (state = initialState, action) {
switch (action.type) {
case types.SETTINGS_LOADING: return state.set('fetchingSettings', true).set('fetchSettingsError', null);
case types.SETTINGS_RECEIVED: return updateSettings(state, action);
case types.SETTINGS_FETCH_ERROR: return settingsFetchFailed(state, action);
case types.SETTINGS_UPDATED: return updateSettings(state, action);
case types.SAVE_SETTINGS_LOADING: return state.set('fetchingSettings', true).set('saveSettingsError', null);
case types.SAVE_SETTINGS_SUCCESS: return saveComplete(state, action);
case types.SAVE_SETTINGS_FAILED: return settingsSaveFailed(state, action);
case types.WORDLIST_UPDATED: return updateWordlist(state, action);
case types.DOMAINLIST_UPDATED: return updateDomainlist(state, action);
default: return state;
case actions.SETTINGS_LOADING:
return state
.set('fetchingSettings', true)
.set('fetchSettingsError', null);
case actions.SETTINGS_RECEIVED:
return state.merge({
fetchingSettings: null,
fetchSettingsError: null,
...action.settings
});
case actions.SETTINGS_FETCH_ERROR:
return state
.set('fetchingSettings', false)
.set('fetchSettingsError', action.error);
case actions.SETTINGS_UPDATED:
return state.merge({
fetchingSettings: null,
fetchSettingsError: null,
...action.settings
});
case actions.SAVE_SETTINGS_LOADING:
return state
.set('fetchingSettings', true)
.set('saveSettingsError', null);
case actions.SAVE_SETTINGS_SUCCESS:
return state.merge({
fetchingSettings: false,
fetchSettingsError: null,
...action.settings
});
case actions.SAVE_SETTINGS_FAILED:
return state
.set('fetchingSettings', false)
.set('fetchSettingsError', action.error);
case actions.WORDLIST_UPDATED:
return state
.setIn(['settings', 'wordlist', action.listName], action.list);
case actions.DOMAINLIST_UPDATED:
return state
.setIn(['settings', 'domains', action.listName], action.list);
default:
return state;
}
};
// only for updating top-level settings
const updateSettings = (state, action) => {
const s = state.set('fetchingSettings', false).set('fetchSettingsError', null);
const settings = s.get('settings').merge(action.settings);
return s.set('settings', settings);
};
// any nested settings must have a specialized setter
const updateWordlist = (state, action) => {
return state.setIn(['settings', 'wordlist', action.listName], action.list);
};
const updateDomainlist = (state, action) => {
return state.setIn(['settings', 'domains', action.listName], action.list);
};
const saveComplete = (state, action) => {
const s = state.set('fetchingSettings', false).set('saveSettingsError', null);
const settings = s.get('settings').merge(action.settings);
return s.set('settings', settings);
};
const settingsFetchFailed = (state, action) => {
return state.set('fetchingSettings', false).set('fetchSettingsError', action.error);
};
const settingsSaveFailed = (state, action) => {
return state.set('fetchingSettings', false).set('fetchSettingsError', action.error);
};
}
client/coral-admin/src/reducers/users.js
-28
View File
@@ -1,28 +0,0 @@
import {Map, List, fromJS} from 'immutable';
const initialState = Map({
byId: Map(),
ids: List()
});
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;
}
};
// Replace the comment list with a new one
const replaceUsers = (action, state) => {
const users = fromJS(action.users.reduce((prev, curr) => { prev[curr.id] = curr; return prev; }, {}));
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.author_id).set('status', action.status.toLowerCase());
return state.set('byId', byId.set(action.author_id, data));
};
client/coral-admin/src/services/PymConnection.js
+9
View File
@@ -0,0 +1,9 @@
import Pym from '../../node_modules/pym.js';
const pym = new Pym.Child({polling: 100});
export default pym;
export const link = (url) => (e) => {
e.preventDefault();
pym.sendMessage('navigate', url);
};
client/coral-admin/src/services/client.js
-1
View File
@@ -2,7 +2,6 @@ import ApolloClient, {addTypename} from 'apollo-client';
import getNetworkInterface from './transport';
export const client = new ApolloClient({
connectToDevTools: true,
queryTransformer: addTypename,
dataIdFromObject: (result) => {
if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
client/coral-embed-stream/src/Embed.js
+2
View File
@@ -17,6 +17,7 @@ import {Notification, notificationActions, authActions, assetActions, pym} from
import Stream from './Stream';
import InfoBox from 'coral-plugin-infobox/InfoBox';
import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
import {ModerationLink} from 'coral-plugin-moderation';
import Count from 'coral-plugin-comment-count/CommentCount';
import CommentBox from 'coral-plugin-commentbox/CommentBox';
import UserBox from 'coral-sign-in/components/UserBox';
@@ -139,6 +140,7 @@ class Embed extends Component {
charCount={asset.settings.charCountEnable && asset.settings.charCount} />
: null
}
<ModerationLink assetId={asset.id} isAdmin={isAdmin} />
</RestrictedContent>
</div>
: <p>{asset.settings.closedMessage}</p>
client/coral-plugin-author-name/styles.css
+1 -1
View File
@@ -1,7 +1,7 @@
.authorName {
color: black;
display: inline-block;
margin: 10px 5px 10px 0;
margin: 10px 8px 10px 0;
}
.hasBio {
client/coral-plugin-likes/LikeButton.js
+1 -1
View File
@@ -8,7 +8,7 @@ class LikeButton extends Component {
static propTypes = {
like: PropTypes.shape({
current: PropTypes.obect,
current: PropTypes.object,
count: PropTypes.number
}),
id: PropTypes.string,
client/coral-plugin-moderation/ModerationLink.js
+22
View File
@@ -0,0 +1,22 @@
import React, {PropTypes} from 'react';
import styles from './styles.css';
import {I18n} from '../coral-framework';
import translations from './translations.json';
const ModerationLink = props => props.isAdmin ? (
<div className={styles.moderationLink}>
<a href={`/admin/moderate/${props.assetId}`} target="_blank">
{lang.t('MODERATE_THIS_STREAM')}
</a>
</div>
) : null;
ModerationLink.propTypes = {
assetId: PropTypes.string.isRequired,
isAdmin: PropTypes.bool.isRequired
};
const lang = new I18n(translations);
export default ModerationLink;
client/coral-plugin-moderation/index.js
+1
View File
@@ -0,0 +1 @@
export {default as ModerationLink} from './ModerationLink';
client/coral-plugin-moderation/styles.css
+9
View File
@@ -0,0 +1,9 @@
.moderationLink {
a {
color: #679af3;
text-decoration: none;
font-size: 1em;
font-weight: 600;
letter-spacing: .3px;
}
}
client/coral-plugin-moderation/translations.json
+8
View File
@@ -0,0 +1,8 @@
{
"en": {
"MODERATE_THIS_STREAM": "Moderate this stream"
},
"es": {
"MODERATE_THIS_STREAM": "Modera este stream"
}
}
graph/mutators/comment.js
+25 -10
View File
@@ -162,22 +162,37 @@ const createPublicComment = (context, commentInput) => {
}));
};
/**
* Sets the status of a comment
* @param {String} comment comment in graphql context
* @param {String} id identifier of the comment (uuid)
* @param {String} status the new status of the comment
*/
const setCommentStatus = ({comment}, {id, status}) => {
return CommentsService.setStatus(id, status)
.then(res => res);
};
module.exports = (context) => {
// TODO: refactor to something that'll return an error in the event an attempt
// is made to mutate state while not logged in. There's got to be a better way
// to do this.
if (context.user && context.user.can('mutation:createComment')) {
return {
Comment: {
create: (comment) => createPublicComment(context, comment)
}
};
}
return {
let mutators = {
Comment: {
create: () => Promise.reject(errors.ErrNotAuthorized)
create: () => Promise.reject(errors.ErrNotAuthorized),
setCommentStatus: () => Promise.reject(errors.ErrNotAuthorized)
}
};
if (context.user && context.user.can('mutation:createComment')) {
mutators.Comment.create = (comment) => createPublicComment(context, comment);
}
if (context.user && context.user.can('mutation:setCommentStatus')) {
mutators.Comment.setCommentStatus = (action) => setCommentStatus(context, action);
}
return mutators;
};
graph/mutators/index.js
+2
View File
@@ -2,6 +2,7 @@ const _ = require('lodash');
const Comment = require('./comment');
const Action = require('./action');
const User = require('./user');
module.exports = (context) => {
@@ -9,6 +10,7 @@ module.exports = (context) => {
return _.merge(...[
Comment,
Action,
User,
].map((mutators) => {
// Each set of mutators is a function which takes the context.
graph/mutators/user.js
+27
View File
@@ -0,0 +1,27 @@
const errors = require('../../errors');
const UsersService = require('../../services/users');
const setUserStatus = ({user}, {id, status}) => {
return UsersService.setStatus(id, status)
.then(res => res);
};
module.exports = (context) => {
// TODO: refactor to something that'll return an error in the event an attempt
// is made to mutate state while not logged in. There's got to be a better way
// to do this.
if (context.user && context.user.can('mutation:setUserStatus')) {
return {
User: {
setUserStatus: (action) => setUserStatus(context, action)
}
};
}
return {
User: {
setUserStatus: () => Promise.reject(errors.ErrNotAuthorized)
}
};
};
graph/resolvers/root_mutation.js
+6
View File
@@ -27,6 +27,12 @@ const RootMutation = {
deleteAction(_, {id}, {mutators: {Action}}) {
return wrapResponse(null)(Action.delete({id}));
},
setUserStatus(_, {id, status}, {mutators: {User}}) {
return wrapResponse(null)(User.setUserStatus({id, status}));
},
setCommentStatus(_, {id, status}, {mutators: {Comment}}) {
return wrapResponse(null)(Comment.setCommentStatus({id, status}));
}
};
module.exports = RootMutation;
graph/resolvers/root_query.js
+1 -6
View File
@@ -29,12 +29,7 @@ const RootQuery = {
if (user != null && user.hasRoles('ADMIN') && action_type) {
return Actions.getByTypes({action_type, item_type: 'COMMENTS'})
.then((actions) => {
// Map the actions from the items referenced byt this query. The actions
// returned by this query are explicitly going to be distinct by their
// `item_id`'s.
let ids = actions.map((action) => action.item_id);
.then((ids) => {
// Perform the query using the available resolver.
return Comments.getByQuery({ids, statuses, asset_id, parent_id, limit, cursor, sort});
graph/typeDefs.graphql
+32
View File
@@ -44,6 +44,9 @@ type User {
# returns all comments based on a query.
comments(query: CommentsQuery): [Comment]
# returns user status
status: USER_STATUS
}
type Tag {
@@ -362,6 +365,13 @@ enum SORT_ORDER {
}
# All queries that can be executed.
enum USER_STATUS {
ACTIVE
BANNED
PENDING
APPROVED
}
type RootQuery {
# Site wide settings and defaults.
@@ -468,6 +478,22 @@ type DeleteActionResponse implements Response {
errors: [UserError]
}
# SetUserStatusResponse is the response returned with possibly some errors
# relating to the delete action attempt.
type SetUserStatusResponse implements Response {
# An array of errors relating to the mutation that occured.
errors: [UserError]
}
# SetCommentStatusResponse is the response returned with possibly some errors
# relating to the delete action attempt.
type SetCommentStatusResponse implements Response {
# An array of errors relating to the mutation that occured.
errors: [UserError]
}
# All mutations for the application are defined on this object.
type RootMutation {
@@ -482,6 +508,12 @@ type RootMutation {
# Delete an action based on the action id.
deleteAction(id: ID!): DeleteActionResponse
# Sets User status
setUserStatus(id: ID!, status: USER_STATUS!): SetUserStatusResponse
# Sets Comment status
setCommentStatus(id: ID!, status: COMMENT_STATUS!): SetCommentStatusResponse
}
################################################################################
models/user.js
+7 -1
View File
@@ -154,7 +154,9 @@ const USER_GRAPH_OPERATIONS = [
'mutation:createComment',
'mutation:createAction',
'mutation:deleteAction',
'mutation:editName'
'mutation:editName',
'mutation:setUserStatus',
'mutation:setCommentStatus'
];
/**
@@ -170,6 +172,10 @@ UserSchema.method('can', function(...actions) {
return false;
}
if (actions.some((action) => action === 'mutation:setUserStatus' || action === 'mutation:setCommentStatus') && !this.hasRoles('ADMIN')) {
return false;
}
return true;
});
services/comments.js
+27
View File
@@ -7,6 +7,12 @@ const ALLOWED_TAGS = [
{name: 'STAFF'}
];
const STATUSES = [
'ACCEPTED',
'REJECTED',
'PREMOD',
];
module.exports = class CommentsService {
/**
@@ -249,4 +255,25 @@ module.exports = class CommentsService {
return CommentModel.find(query);
}
/**
* Sets Comment Status
* @param {String} id identifier of the comment (uuid)
* @param {String} status the new status of the comment
* @return {Promise}
*/
static setStatus(id, status) {
// Check to see if the comment status is in the allowable set of statuses.
if (STATUSES.indexOf(status) === -1) {
// Comment status is not supported! Error out here.
return Promise.reject(new Error(`status ${status} is not supported`));
}
return CommentModel.update({id}, {
$set: {status}
});
}
};