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 0a6c129fd..7c3a1c06c 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -1,168 +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 {fetchSettings} from 'actions/settings'; -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.dispatch(fetchSettings()); - this.props.dispatch(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 - } - } - - // 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}); - } - - // Render the tabbed lists moderation queues - render () { - const {comments, users, settings} = 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 ( -
-
- -
- this.onCommentAction(action, comment)} - onClickShowBanDialog={(userId, userName, commentId) => this.showBanUserDialog(userId, userName, commentId)} - modActions={['reject', 'approve', 'ban']} - loading={comments.loading} /> - this.hideBanUserDialog()} - onClickBanUser={(userId, commentId) => this.banUser(userId, commentId)} - user={comments.banUser}/> -
-
- this.onCommentAction(action, comment)} - modActions={['approve']} - loading={comments.loading} /> -
-
- this.onCommentAction(action, comment)} - modActions={['reject', 'approve']} - loading={comments.loading} /> -
- this.setState({modalOpen: false})} /> -
-
- ); - } -} - -const mapStateToProps = state => ({ - actions: state.actions.toJS(), - settings: state.settings.toJS(), - comments: state.comments.toJS(), - users: state.users.toJS() -}); - -export default connect(mapStateToProps)(ModerationQueue); - const lang = new I18n(translations); + +export default ({onTabClick, ...props}) => ( + +);