add a tab for All/Rejected user detail comments

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};
+};

client/coral-admin/src/components/ModerationList.css

@@ -192,7 +192,7 @@
 .minimal {
   width: 45px;
   min-width: 0;
-  float: right;
+  float: left;
 }
 
 .approve__active {

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';

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 :

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;
+}

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 {
             <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
           </div>
         </div>
+        <ul className={styles.commentStatuses}>
+          <li className={tab === 'all' ? styles.active : ''} onClick={this.changeStatus.bind(this, 'all')}>All</li>
+          <li className={tab === 'rejected' ? styles.active : ''} onClick={this.changeStatus.bind(this, 'rejected')}>Rejected</li>
+        </ul>
         <div>
           {
             nodes.map((comment, i) => {

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 <UserDetail {...this.props}/>;
+    return <UserDetail changeStatus={this.props.changeUserDetailStatuses} {...this.props}/>;
   }
 }
 
 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);