diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index be656c22d..4a21b0846 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -14,8 +14,7 @@ const linkify = new Linkify(); // Render a single comment for the list export default props => { - const comment = props.comment.toJS(); - const author = props.author.toJS(); + const {comment, author} = props; let authorStatus = author.status; const links = linkify.getMatches(comment.body); @@ -53,8 +52,7 @@ export default props => { // Get the button of the action performed over a comment if any const getActionButton = (action, i, props) => { - const comment = props.comment.toJS(); - const author = props.author.toJS(); + const {comment, author} = props; const status = comment.status; const flagged = comment.flagged; const banned = (author.status === 'banned'); @@ -74,7 +72,9 @@ const getActionButton = (action, i, props) => { ); } return ( - props.onClickAction(props.actionsMap[action].status, comment.id)} diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index b4547335e..eab2e637c 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -4,6 +4,8 @@ import styles from './CommentList.css'; import key from 'keymaster'; import Hammer from 'hammerjs'; import Comment from 'components/Comment'; +import head from 'lodash/head'; +import last from 'lodash/last'; // Each action has different meaning and configuration const actions = { @@ -37,7 +39,7 @@ export default class CommentList extends React.Component { // If entering to singleview and no active, active is the first eleement componentWillReceiveProps (nextProps) { if (nextProps.singleView && !this.state.active) { - this.setState({active: nextProps.commentIds.get(0)}); + this.setState({active: nextProps.commentIds[0]}); } } @@ -81,12 +83,12 @@ export default class CommentList extends React.Component { const {commentIds} = this.props; const {active} = this.state; // check boundaries - if (active === null || !commentIds.size) { - this.setState({active: commentIds.get(0)}); - } else if (direction === 'up' && active !== commentIds.first()) { - this.setState({active: commentIds.get(commentIds.indexOf(active) - 1)}); - } else if (direction === 'down' && active !== commentIds.last()) { - this.setState({active: commentIds.get(commentIds.indexOf(active) + 1)}); + if (active === null || !commentIds.length) { + this.setState({active: head(commentIds)}); + } else if (direction === 'up' && active !== head(commentIds)) { + this.setState({active: commentIds[commentIds.indexOf(active) - 1]}); + } else if (direction === 'down' && active !== last(commentIds)) { + this.setState({active: commentIds[commentIds.indexOf(active) + 1]}); } // scroll to the position @@ -105,10 +107,10 @@ export default class CommentList extends React.Component { // activate the next comment if (id === this.state.active) { const {commentIds} = this.props; - if (commentIds.last() === this.state.active) { - this.setState({active: commentIds.get(commentIds.size - 2)}); + if (last(commentIds) === this.state.active) { + this.setState({active: commentIds[commentIds.length - 2]}); } else { - this.setState({active: commentIds.get(Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.size - 1))}); + this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.l - 1)]}); } } this.props.onClickAction(action, id, author_id); @@ -119,16 +121,20 @@ export default class CommentList extends React.Component { } render () { - const {singleView, commentIds, comments, users, hideActive, key} = this.props; - const {active} = this.state; + const {singleView, commentIds, hideActive, key} = this.props; + let {active} = this.state; + + const users = this.props.users.toJS(); + const comments = this.props.comments.toJS(); return ( ); } diff --git a/client/coral-admin/src/containers/CommentStream/CommentStream.js b/client/coral-admin/src/containers/CommentStream/CommentStream.js index 113a7bc86..556e50463 100644 --- a/client/coral-admin/src/containers/CommentStream/CommentStream.js +++ b/client/coral-admin/src/containers/CommentStream/CommentStream.js @@ -46,9 +46,9 @@ class CommentStream extends React.Component { @@ -58,4 +58,9 @@ class CommentStream extends React.Component { } } -export default connect(({comments, users}) => ({comments, users}))(CommentStream); +const mapStateToProps = state => ({ + comments: state.comments.toJS(), + users: state.users.toJS() +}); + +export default connect(mapStateToProps)(CommentStream); diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index 34b418a57..ca3465903 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -79,6 +79,11 @@ class ModerationQueue extends React.Component { const {comments, users} = this.props; const {activeTab, singleView, modalOpen} = this.state; + const c = comments.toJS(); + const premodIds = c.ids.filter(id => c.byId[id].status === 'premod'); + const rejectedIds = c.ids.filter(id => c.byId[id].status === 'rejected'); + const flaggedIds = c.ids.filter(id => c.byId[id].flagged === true); + return (
@@ -94,14 +99,7 @@ class ModerationQueue extends React.Component { - comments - .get('byId') - .get(id) - .get('status') === 'premod') - } + commentIds={premodIds} comments={comments.get('byId')} users={users.get('byId')} onClickAction={(action, commentId) => this.onCommentAction(action, commentId)} @@ -118,15 +116,7 @@ class ModerationQueue extends React.Component { - comments - .get('byId') - .get(id) - .get('status') === 'rejected') - } + commentIds={rejectedIds} comments={comments.get('byId')} users={users.get('byId')} onClickAction={(action, id) => this.onCommentAction(action, id)} @@ -137,10 +127,7 @@ class ModerationQueue extends React.Component { { - const data = comments.get('byId').get(id); - return !data.get('status') && data.get('flagged') === true; - })} + commentIds={flaggedIds} comments={comments.get('byId')} users={users.get('byId')} onClickAction={(action, id) => this.onCommentAction(action, id)}