From b517adab56ff6a9b83c1dd39a9691b71a3e27a57 Mon Sep 17 00:00:00 2001 From: David Jay Date: Tue, 3 Jan 2017 16:57:53 -0500 Subject: [PATCH] Moving commentList to ModerationList --- client/coral-admin/src/components/Comment.js | 2 +- .../{CommentList.css => ModerationList.css} | 0 .../{CommentList.js => ModerationList.js} | 84 ++++++++++++------- .../containers/CommentStream/CommentStream.js | 8 +- .../ModerationQueue/ModerationContainer.js | 3 +- .../ModerationQueue/ModerationQueue.js | 8 +- client/coral-framework/actions/user.js | 2 +- client/coral-framework/reducers/user.js | 2 +- docs/swagger.yaml | 8 ++ models/action.js | 6 ++ tests/e2e/pages/adminPage.js | 12 +-- 11 files changed, 87 insertions(+), 48 deletions(-) rename client/coral-admin/src/components/{CommentList.css => ModerationList.css} (100%) rename client/coral-admin/src/components/{CommentList.js => ModerationList.js} (68%) diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index 17bd56714..68db89565 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -2,7 +2,7 @@ import React from 'react'; import timeago from 'timeago.js'; import Linkify from 'react-linkify'; -import styles from './CommentList.css'; +import styles from './ModerationList.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations.json'; diff --git a/client/coral-admin/src/components/CommentList.css b/client/coral-admin/src/components/ModerationList.css similarity index 100% rename from client/coral-admin/src/components/CommentList.css rename to client/coral-admin/src/components/ModerationList.css diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/ModerationList.js similarity index 68% rename from client/coral-admin/src/components/CommentList.js rename to client/coral-admin/src/components/ModerationList.js index b5eb40231..9e8d6e0ff 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/ModerationList.js @@ -1,5 +1,5 @@ import React, {PropTypes} from 'react'; -import styles from './CommentList.css'; +import styles from './ModerationList.css'; import key from 'keymaster'; import Hammer from 'hammerjs'; import Comment from 'components/Comment'; @@ -13,15 +13,17 @@ const modActions = { }; // Renders a comment list and allow performing actions -export default class CommentList extends React.Component { +export default class ModerationList extends React.Component { static propTypes = { isActive: PropTypes.bool, singleView: PropTypes.bool, - commentIds: PropTypes.arrayOf(PropTypes.string).isRequired, - comments: PropTypes.object.isRequired, - users: PropTypes.object.isRequired, + commentIds: PropTypes.arrayOf(PropTypes.string), + actionIds: PropTypes.arrayOf(PropTypes.string), + comments: PropTypes.object, + users: PropTypes.object, + actions: PropTypes.object, onClickAction: PropTypes.func, - + // list of actions (flags, etc) associated with the comments modActions: PropTypes.arrayOf(PropTypes.string).isRequired, loading: PropTypes.bool, @@ -73,11 +75,11 @@ export default class CommentList extends React.Component { // Add key handlers. Each action has one and added j/k for moving around bindKeyHandlers () { this.props.modActions.filter(action => modActions[action].key).forEach(action => { - key(modActions[action].key, 'commentList', () => this.props.isActive && this.actionKeyHandler(modActions[action].status)); + key(modActions[action].key, 'moderationList', () => this.props.isActive && this.actionKeyHandler(modActions[action].status)); }); - key('j', 'commentList', () => this.props.isActive && this.moveKeyHandler('down')); - key('k', 'commentList', () => this.props.isActive && this.moveKeyHandler('up')); - key.setScope('commentList'); + key('j', 'moderationList', () => this.props.isActive && this.moveKeyHandler('down')); + key('k', 'moderationList', () => this.props.isActive && this.moveKeyHandler('up')); + key.setScope('moderationList'); } // Perform an action using the keys only if the comment is active @@ -111,7 +113,7 @@ export default class CommentList extends React.Component { } unbindKeyHandlers () { - key.deleteScope('commentList'); + key.deleteScope('moderationList'); } // If we are performing an action over a comment (aka removing from the list) we need to select a new active. @@ -135,31 +137,53 @@ export default class CommentList extends React.Component { this.props.onClickShowBanDialog(userId, userName, commentId); } - render () { - const {singleView, commentIds, comments, users, hideActive, key, suspectWords} = this.props; + mapModItems = (itemId, index) => { + const {comments, users, actions, modActions, suspectWords, hideActive} = this.props; const {active} = this.state; + // Because ids are unique, the id will either appear as an action or as a comment. + + const item = comments[itemId] || actions[itemId]; + let modItem; + + if (item.body) { + // If the item is a comment... + const author = users[item.author_id]; + modItem = ; + } else { + // If the item is an action... + modItem =

Action

; + } + return modItem; + } + + render () { + const {singleView, commentIds, actionIds, comments, actions, key} = this.props; + + // Combine moderations and actions into a single stream and sort by most recently updated. + const moderationIds = [ ...commentIds, ...actionIds ].sort((a, b) => { + const itemA = comments[a] || actions[a]; + const itemB = comments[b] || actions[b]; + return itemB.updated_at - itemA.updated_at; + }); + return ( ); } diff --git a/client/coral-admin/src/containers/CommentStream/CommentStream.js b/client/coral-admin/src/containers/CommentStream/CommentStream.js index 556e50463..e2fac3702 100644 --- a/client/coral-admin/src/containers/CommentStream/CommentStream.js +++ b/client/coral-admin/src/containers/CommentStream/CommentStream.js @@ -3,11 +3,11 @@ import styles from './CommentStream.css'; import {Snackbar} from 'react-mdl'; import {connect} from 'react-redux'; import {createComment, flagComment} from 'actions/comments'; -import CommentList from 'components/CommentList'; +import ModerationList from 'components/ModerationList'; import CommentBox from 'components/CommentBox'; /** - * Renders a comment stream using a CommentList component + * Renders a comment stream using a ModerationList component * and adds a box for adding a new comment */ @@ -39,12 +39,12 @@ class CommentStream extends React.Component { } } - // Render the comment box along with the CommentList + // Render the comment box along with the ModerationList render ({comments, users}, {snackbar, snackbarMsg}) { return (
- ({ comments: state.comments.toJS(), settings: state.settings.toJS(), - users: state.users.toJS() + users: state.users.toJS(), + actions: state.actions.toJS(), }); const mapDispatchToProps = dispatch => { diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index 55a2e705e..058001884 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -2,7 +2,7 @@ import React from 'react'; import styles from './ModerationQueue.css'; import ModerationKeysModal from 'components/ModerationKeysModal'; -import CommentList from 'components/CommentList'; +import ModerationList from 'components/ModerationList'; import BanUserDialog from 'components/BanUserDialog'; import I18n from 'coral-framework/modules/i18n/i18n'; @@ -22,7 +22,7 @@ export default ({onTabClick, ...props}) => ( className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}
- ( />
- ( />
-