From 50112d3166280dae01b3c6f07272471e8dc4f0d1 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 21 Dec 2016 12:22:54 -0700 Subject: [PATCH 1/2] create mapStateToProps --- .../ModerationQueue/ModerationQueue.js | 50 ++++++++----------- 1 file changed, 20 insertions(+), 30 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index 5e0bfd3a3..f09c2eed6 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -36,7 +36,7 @@ class ModerationQueue extends React.Component { // Fetch comments and bind singleView key before render componentWillMount () { - this.props.dispatch(fetchModerationQueueComments()); + this.props.fetchModerationQueueComments(); key('s', () => this.setState({singleView: !this.state.singleView})); key('shift+/', () => this.setState({modalOpen: true})); key('esc', () => this.setState({modalOpen: false})); @@ -58,28 +58,6 @@ class ModerationQueue extends React.Component { } } - // Dispatch the update status action - onCommentAction (action, comment) { - - // If not banning then change the status to approved or flagged as action = status - this.props.dispatch(updateStatus(action, comment)); - } - - showBanUserDialog (userId, userName, commentId) { - this.props.dispatch(showBanUserDialog(userId, userName, commentId)); - } - - hideBanUserDialog () { - this.props.dispatch(hideBanUserDialog(false)); - } - - banUser (userId, commentId) { - this.props.dispatch(userStatusUpdate('banned', userId, commentId)) - .then(() => { - this.props.dispatch(fetchModerationQueueComments()); - }); - } - onTabClick (activeTab) { this.setState({activeTab}); } @@ -111,14 +89,14 @@ class ModerationQueue extends React.Component { commentIds={premodIds} comments={comments.byId} users={users.byId} - onClickAction={(action, comment) => this.onCommentAction(action, comment)} - onClickShowBanDialog={(userId, userName, commentId) => this.showBanUserDialog(userId, userName, commentId)} + onClickAction={this.props.updateStatus} + onClickShowBanDialog={this.props.showBanUserDialog} actions={['reject', 'approve', 'ban']} loading={comments.loading} /> this.hideBanUserDialog()} - onClickBanUser={(userId, commentId) => this.banUser(userId, commentId)} + handleClose={this.props.hideBanUserDialog} + onClickBanUser={this.props.banUser} user={comments.banUser}/>
@@ -128,7 +106,7 @@ class ModerationQueue extends React.Component { commentIds={rejectedIds} comments={comments.byId} users={users.byId} - onClickAction={(action, comment) => this.onCommentAction(action, comment)} + onClickAction={this.props.updateStatus} actions={['approve']} loading={comments.loading} />
@@ -139,7 +117,7 @@ class ModerationQueue extends React.Component { commentIds={flaggedIds} comments={comments.byId} users={users.byId} - onClickAction={(action, comment) => this.onCommentAction(action, comment)} + onClickAction={this.props.updateStatus} actions={['reject', 'approve']} loading={comments.loading} /> @@ -156,6 +134,18 @@ const mapStateToProps = state => ({ users: state.users.toJS() }); -export default connect(mapStateToProps)(ModerationQueue); +const mapDispatchToProps = dispatch => { + return { + fetchModerationQueueComments: () => dispatch(fetchModerationQueueComments()), + showBanUserDialog: (userId, userName, commentId) => dispatch(showBanUserDialog(userId, userName, commentId)), + hideBanUserDialog: () => dispatch(hideBanUserDialog(false)), + banUser: (userId, commentId) => dispatch(userStatusUpdate('banned', userId, commentId)).then(() => { + dispatch(fetchModerationQueueComments()); + }), + updateStatus: (action, comment) => dispatch(updateStatus(action, comment)) + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ModerationQueue); const lang = new I18n(translations); From 168248f9752f796f4cb7d04547ea9e7016f75433 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 23 Dec 2016 16:09:46 -0300 Subject: [PATCH 2/2] Presentational and Container Components added --- client/coral-admin/src/AppRouter.js | 4 +- .../ModerationQueue/ModerationContainer.js | 98 +++++++++ .../ModerationQueue/ModerationQueue.js | 199 +++++------------- 3 files changed, 158 insertions(+), 143 deletions(-) create mode 100644 client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index bc9747f34..9c0f271cc 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/client/coral-admin/src/AppRouter.js @@ -1,7 +1,7 @@ import React from 'react'; import {Router, Route, IndexRoute, browserHistory} from 'react-router'; -import ModerationQueue from 'containers/ModerationQueue/ModerationQueue'; +import ModerationContainer from 'containers/ModerationQueue/ModerationContainer'; import CommentStream from 'containers/CommentStream/CommentStream'; import Configure from 'containers/Configure/Configure'; import Streams from 'containers/Streams/Streams'; @@ -10,7 +10,7 @@ import LayoutContainer from 'containers/LayoutContainer'; const routes = ( - + diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js new file mode 100644 index 000000000..a2bc5a411 --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -0,0 +1,98 @@ +import React from 'react'; +import {connect} from 'react-redux'; +import key from 'keymaster'; + +import { + updateStatus, + showBanUserDialog, + hideBanUserDialog, + fetchModerationQueueComments +} from 'actions/comments'; +import {userStatusUpdate} from 'actions/users'; + +import ModerationQueue from './ModerationQueue'; + +class ModerationContainer extends React.Component { + + constructor(props) { + super(props); + + this.state = { + activeTab: 'pending', + singleView: false, + modalOpen: false + }; + + this.onClose = this.onClose.bind(this); + this.onTabClick = this.onTabClick.bind(this); + } + + componentWillMount() { + this.props.fetchModerationQueueComments(); + key('s', () => this.setState({singleView: !this.state.singleView})); + key('shift+/', () => this.setState({modalOpen: true})); + key('esc', () => this.setState({modalOpen: false})); + } + + componentWillUnmount() { + key.unbind('s'); + key.unbind('shift+/'); + key.unbind('esc'); + } + + componentDidMount() { + + // Hack for dynamic mdl tabs + if (typeof componentHandler !== 'undefined') { + + // FIXME: fix this hack + componentHandler.upgradeAllRegistered(); // eslint-disable-line no-undef + } + } + + onTabClick(activeTab) { + this.setState({activeTab}); + } + + onClose() { + this.setState({modalOpen: false}); + } + + render () { + const {comments} = 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); + + return ( + + ); + } +} + +const mapStateToProps = state => ({ + comments: state.comments.toJS(), + users: state.users.toJS() +}); + +const mapDispatchToProps = dispatch => { + return { + fetchModerationQueueComments: () => dispatch(fetchModerationQueueComments()), + showBanUserDialog: (userId, userName, commentId) => dispatch(showBanUserDialog(userId, userName, commentId)), + hideBanUserDialog: () => dispatch(hideBanUserDialog(false)), + banUser: (userId, commentId) => dispatch(userStatusUpdate('banned', userId, commentId)).then(() => { + dispatch(fetchModerationQueueComments()); + }), + updateStatus: (action, comment) => dispatch(updateStatus(action, comment)) + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ModerationContainer); diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index f09c2eed6..7c3a1c06c 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -1,151 +1,68 @@ import React from 'react'; -import {connect} from 'react-redux'; -import key from 'keymaster'; +import styles from './ModerationQueue.css'; import ModerationKeysModal from 'components/ModerationKeysModal'; import CommentList from 'components/CommentList'; import BanUserDialog from 'components/BanUserDialog'; -import { - updateStatus, - showBanUserDialog, - hideBanUserDialog, - fetchModerationQueueComments -} from 'actions/comments'; -import {userStatusUpdate} from 'actions/users'; -import styles from './ModerationQueue.css'; - import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; -/* - * Renders the moderation queue as a tabbed layout with 3 moderation - * queues : - * * pending: filtered by status Untouched - * * rejected: filtered by status Rejected - * * flagged: with a flagged action on them - */ - -class ModerationQueue extends React.Component { - - constructor (props) { - super(props); - - this.state = {activeTab: 'pending', singleView: false, modalOpen: false}; - } - - // Fetch comments and bind singleView key before render - componentWillMount () { - this.props.fetchModerationQueueComments(); - key('s', () => this.setState({singleView: !this.state.singleView})); - key('shift+/', () => this.setState({modalOpen: true})); - key('esc', () => this.setState({modalOpen: false})); - } - - // Unbind singleView key before unmount - componentWillUnmount () { - key.unbind('s'); - key.unbind('shift+/'); - key.unbind('esc'); - } - - // Hack for dynamic mdl tabs - componentDidMount () { - if (typeof componentHandler !== 'undefined') { - - // FIXME: fix this hack - componentHandler.upgradeAllRegistered(); // eslint-disable-line no-undef - } - } - - onTabClick (activeTab) { - this.setState({activeTab}); - } - - // Render the tabbed lists moderation queues - render () { - const {comments, users} = this.props; - const {activeTab, singleView, modalOpen} = this.state; - - 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); - - return ( - - ); - } -} - -const mapStateToProps = state => ({ - comments: state.comments.toJS(), - users: state.users.toJS() -}); - -const mapDispatchToProps = dispatch => { - return { - fetchModerationQueueComments: () => dispatch(fetchModerationQueueComments()), - showBanUserDialog: (userId, userName, commentId) => dispatch(showBanUserDialog(userId, userName, commentId)), - hideBanUserDialog: () => dispatch(hideBanUserDialog(false)), - banUser: (userId, commentId) => dispatch(userStatusUpdate('banned', userId, commentId)).then(() => { - dispatch(fetchModerationQueueComments()); - }), - updateStatus: (action, comment) => dispatch(updateStatus(action, comment)) - }; -}; - -export default connect(mapStateToProps, mapDispatchToProps)(ModerationQueue); - const lang = new I18n(translations); + +export default ({onTabClick, ...props}) => ( + +);