diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js index 4b0b0538a..3f8d975df 100644 --- a/client/coral-admin/src/actions/moderation.js +++ b/client/coral-admin/src/actions/moderation.js @@ -33,3 +33,12 @@ export const setSortOrder = (order) => ({ order }); +export const changeUserDetailStatuses = (tab) => { + let statuses; + if (tab === 'all') { + statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD']; + } else if (tab === 'rejected') { + statuses = ['REJECTED']; + } + return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses}; +}; diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css index 99927e7ad..2b5989191 100644 --- a/client/coral-admin/src/components/ModerationList.css +++ b/client/coral-admin/src/components/ModerationList.css @@ -192,7 +192,7 @@ .minimal { width: 45px; min-width: 0; - float: right; + float: left; } .approve__active { diff --git a/client/coral-admin/src/constants/moderation.js b/client/coral-admin/src/constants/moderation.js index 3586b1a75..aa8a51a24 100644 --- a/client/coral-admin/src/constants/moderation.js +++ b/client/coral-admin/src/constants/moderation.js @@ -8,3 +8,4 @@ export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG'; export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL'; export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL'; export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER'; +export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES'; diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js index 10cbe0eca..4201ffb06 100644 --- a/client/coral-admin/src/reducers/moderation.js +++ b/client/coral-admin/src/reducers/moderation.js @@ -8,6 +8,8 @@ const initialState = fromJS({ commentId: null, commentStatus: null, userDetailId: null, + userDetailActiveTab: 'all', + userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'], banDialog: false, shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show', sortOrder: 'REVERSE_CHRONOLOGICAL', @@ -65,6 +67,10 @@ export default function moderation (state = initialState, action) { return state.set('userDetailId', action.userId); case actions.HIDE_USER_DETAIL: return state.set('userDetailId', null); + case actions.CHANGE_USER_DETAIL_STATUSES: + return state + .set('userDetailActiveTab', action.tab) + .set('userDetailStatuses', action.statuses); case actions.SET_SORT_ORDER: return state.set('sortOrder', action.order); default : diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.css b/client/coral-admin/src/routes/Moderation/components/UserDetail.css index 7c84f62fa..1119be8c4 100644 --- a/client/coral-admin/src/routes/Moderation/components/UserDetail.css +++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.css @@ -39,3 +39,20 @@ width: 90%; outline: none; } + +.commentStatuses { + padding: 0; + list-style: none; + + li { + display: inline-block; + margin: 0 10px; + cursor: pointer; + padding: 0 10px; + } +} + +.active { + font-weight: bold; + border-bottom: 3px solid #F36451; +} diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/routes/Moderation/components/UserDetail.js index d8587bd7b..c461220c8 100644 --- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js +++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.js @@ -28,6 +28,14 @@ export default class UserDetail extends React.Component { } } + changeStatus = (tab) => { + if (tab === 'all') { + this.props.changeStatus('all'); + } else if (tab === 'rejected') { + this.props.changeStatus('rejected'); + } + } + render () { const { root: { @@ -36,6 +44,7 @@ export default class UserDetail extends React.Component { rejectedComments, comments: {nodes} }, + moderation: {userDetailActiveTab: tab}, bannedWords, suspectWords, showBanUserDialog, @@ -85,6 +94,10 @@ export default class UserDetail extends React.Component {

{`${(rejectedPercent).toFixed(1)}%`}

+
{ nodes.map((comment, i) => { diff --git a/client/coral-admin/src/routes/Moderation/containers/UserDetail.js b/client/coral-admin/src/routes/Moderation/containers/UserDetail.js index d28d35481..9afd10efb 100644 --- a/client/coral-admin/src/routes/Moderation/containers/UserDetail.js +++ b/client/coral-admin/src/routes/Moderation/containers/UserDetail.js @@ -1,9 +1,12 @@ import React, {PropTypes} from 'react'; import {compose, gql} from 'react-apollo'; +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; import UserDetail from '../components/UserDetail'; import withQuery from 'coral-framework/hocs/withQuery'; import {getSlotsFragments} from 'coral-framework/helpers/plugins'; import {getDefinitionName} from 'coral-framework/utils'; +import {changeUserDetailStatuses} from 'coral-admin/src/actions/moderation'; import Comment from './Comment'; const commentConnectionFragment = gql` @@ -33,12 +36,12 @@ class UserDetailContainer extends React.Component { return null; } - return ; + return ; } } export const withUserDetailQuery = withQuery(gql` - query CoralAdmin_UserDetail($author_id: ID!) { + query CoralAdmin_UserDetail($author_id: ID!, $statuses: [COMMENT_STATUS!]) { user(id: $author_id) { id username @@ -53,7 +56,7 @@ export const withUserDetailQuery = withQuery(gql` rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]}) comments: comments(query: { author_id: $author_id, - statuses: [NONE, PREMOD, ACCEPTED, REJECTED] + statuses: $statuses }) { ...CoralAdmin_Moderation_CommentConnection } @@ -64,13 +67,22 @@ export const withUserDetailQuery = withQuery(gql` ${pluginFragments.definitions('root')} ${commentConnectionFragment} `, { - options: ({id}) => { + options: ({id, moderation: {userDetailStatuses: statuses}}) => { return { - variables: {author_id: id} + variables: {author_id: id, statuses} }; } }); +const mapStateToProps = (state) => ({ + moderation: state.moderation.toJS() +}); + +const mapDispatchToProps = (dispatch) => ({ + ...bindActionCreators({changeUserDetailStatuses}, dispatch) +}); + export default compose( + connect(mapStateToProps, mapDispatchToProps), withUserDetailQuery, )(UserDetailContainer);