diff --git a/client/coral-admin/src/components/RejectUsernameDialog.js b/client/coral-admin/src/components/RejectUsernameDialog.js index cdd211bc4..a15d5e02a 100644 --- a/client/coral-admin/src/components/RejectUsernameDialog.js +++ b/client/coral-admin/src/components/RejectUsernameDialog.js @@ -1,23 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Dialog } from 'coral-ui'; -import { RadioGroup, Radio } from 'react-mdl'; import styles from './SuspendUserDialog.css'; import cn from 'classnames'; - +import { RadioGroup, Radio } from 'react-mdl'; import Button from 'coral-ui/components/Button'; +import { username as flagReason } from 'coral-framework/graphql/flagReasons'; -import t, { timeago } from 'coral-framework/services/i18n'; -import { dateAdd } from 'coral-framework/utils'; +const initialState = { reason: flagReason.offensive, message: '' }; -const initialState = { step: 0, duration: '3' }; - -function durationsToDate(hours) { - // Add 1 minute more to help `timeago.js` to display the correct duration. - return dateAdd(new Date(), 'minute', hours * 60 + 1); -} - -class SuspendUserDialog extends React.Component { +class RejectUsernameDialog extends React.Component { state = initialState; componentWillReceiveProps(next) { @@ -26,138 +18,28 @@ class SuspendUserDialog extends React.Component { } } - handleDurationChange = event => { - this.setState({ duration: event.target.value }); + handleReasonChange = event => { + this.setState({ reason: event.target.value }); }; handleMessageChange = event => { this.setState({ message: event.target.value }); }; - goToStep1 = () => { - this.setState({ - step: 1, - message: t( - 'suspenduser.email_message_suspend', - this.props.username, - this.props.organizationName, - timeago(durationsToDate(this.state.duration)) - ), - }); - }; - handlePerform = () => { this.props.onPerform({ + reason: this.state.reason, message: this.state.message, - - // Add 1 minute more to help `timeago.js` to display the correct duration. - until: durationsToDate(this.state.duration), }); }; - renderStep0() { - const { onCancel, username } = this.props; - const { duration } = this.state; - return ( - - {t('suspenduser.title_suspend')} - - {t('suspenduser.description_suspend', username)} - - - - {t('suspenduser.select_duration')} - - - {t('suspenduser.one_hour')} - {t('suspenduser.hours', 3)} - {t('suspenduser.hours', 24)} - {t('suspenduser.days', 7)} - - - - - {t('suspenduser.cancel')} - - - {t('suspenduser.suspend_user')} - - - - ); - } - - renderStep1() { - const { message } = this.state; - const { onCancel, username } = this.props; - return ( - - {t('suspenduser.title_notify')} - - {t('suspenduser.description_notify', username)} - - - - {t('suspenduser.write_message')} - - - - - - {t('suspenduser.cancel')} - - - {t('suspenduser.send')} - - - - ); - } - render() { const { open, onCancel } = this.props; - const { step } = this.state; + const { reason, message } = this.state; return ( @@ -170,19 +52,78 @@ class SuspendUserDialog extends React.Component { × - {step === 0 && this.renderStep0()} - {step === 1 && this.renderStep1()} + + + Reject Username: {this.props.username} + + Help us understand + + Reason + + + This username is offensive + + I dont like this username + + This user is impersonating + + + This looks like an ad/marketing + + Other + + {reason === flagReason.other && ( + + + Reason for reporting (Optional) + + + + )} + + + + Cancel + + + Reject Username + + + ); } } -SuspendUserDialog.propTypes = { +RejectUsernameDialog.propTypes = { open: PropTypes.bool.isRequired, onPerform: PropTypes.func.isRequired, onCancel: PropTypes.func.isRequired, - organizationName: PropTypes.string, username: PropTypes.string, }; -export default SuspendUserDialog; +export default RejectUsernameDialog; diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js index 5572c7d71..70238ecd5 100644 --- a/client/coral-admin/src/components/UserDetail.js +++ b/client/coral-admin/src/components/UserDetail.js @@ -51,8 +51,8 @@ class UserDetail extends React.Component { username: this.props.root.user.username, }); - showRejectUsername = () => - this.props.showBanUserDialog({ + showRejectUsernameDialog = () => + this.props.showRejectUsernameDialog({ userId: this.props.root.user.id, username: this.props.root.user.username, }); @@ -118,13 +118,6 @@ class UserDetail extends React.Component { router.push('/admin/community/flagged'); }; - rejectUsername = data => { - // trigger modal or tooltip - // flag user and then - // perform rejection - this.props.rejectUsername(data); - }; - renderLoaded() { const { root, @@ -236,7 +229,7 @@ class UserDetail extends React.Component { ) : ( {t('user_detail.reject_username')} @@ -450,6 +443,7 @@ UserDetail.propTypes = { selectedCommentIds: PropTypes.array.isRequired, viewUserDetail: PropTypes.any.isRequired, loadMore: PropTypes.any.isRequired, + showRejectUsernameDialog: PropTypes.func, showSuspendUserDialog: PropTypes.func, showBanUserDialog: PropTypes.func, unbanUser: PropTypes.func.isRequired, diff --git a/client/coral-admin/src/containers/RejectUsernameDialog.js b/client/coral-admin/src/containers/RejectUsernameDialog.js index 83551200f..d2a2e61fa 100644 --- a/client/coral-admin/src/containers/RejectUsernameDialog.js +++ b/client/coral-admin/src/containers/RejectUsernameDialog.js @@ -1,79 +1,74 @@ -// import React, { Component } from 'react'; -// import PropTypes from 'prop-types'; -// import { connect } from 'react-redux'; -// import { bindActionCreators } from 'redux'; -// import RejectUsernameDialog from '../components/RejectUsernameDialog'; -// import { hideRejectUsernameDialog } from '../actions/rejectUsernameDialog'; -// import { withRejectUsername } from 'coral-framework/graphql/mutations'; -// import { compose } from 'react-apollo'; -// import t from 'coral-framework/services/i18n'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import RejectUsernameDialog from '../components/RejectUsernameDialog'; +import { hideRejectUsernameDialog } from '../actions/rejectUsernameDialog'; +import { + withRejectUsername, + withPostFlag, +} from 'coral-framework/graphql/mutations'; +import { compose } from 'react-apollo'; -// class RejectUsernameDialogContainer extends Component { -// banUser = async () => { -// const { -// userId, -// commentId, -// commentStatus, -// banUser, -// setCommentStatus, -// hideBanUserDialog, -// } = this.props; -// await banUser({ id: userId, message: '' }); -// hideBanUserDialog(); -// if (commentId && commentStatus && commentStatus !== 'REJECTED') { -// await setCommentStatus({ commentId, status: 'REJECTED' }); -// } -// }; +class RejectUsernameDialogContainer extends Component { + rejectUsername = async ({ reason, message }) => { + const { + postFlag, + rejectUsername, + hideRejectUsernameDialog, + userId, + } = this.props; -// getInfo() { -// let note = t('bandialog.note_ban_user'); -// if (this.props.commentStatus && this.props.commentStatus !== 'REJECTED') { -// note = t('bandialog.note_reject_comment'); -// } -// return t('bandialog.note', note); -// } + await postFlag({ + item_id: userId, + item_type: 'USERS', + reason, + message, + }); -// render() { -// return ( -// -// ); -// } -// } + render() { + return ( + + ); + } +} -// BanUserDialogContainer.propTypes = { -// banUser: PropTypes.func.isRequired, -// hideBanUserDialog: PropTypes.func, -// open: PropTypes.bool, -// username: PropTypes.string, -// commentStatus: PropTypes.string, -// }; +RejectUsernameDialogContainer.propTypes = { + rejectUsername: PropTypes.func.isRequired, + hideRejectUsernameDialog: PropTypes.func, + open: PropTypes.bool, + userId: PropTypes.string, + username: PropTypes.string, +}; -// const mapStateToProps = ({ -// banUserDialog: { open, userId, username, commentId, commentStatus }, -// }) => ({ -// open, -// userId, -// username, -// commentId, -// commentStatus, -// }); +const mapStateToProps = ({ + rejectUsernameDialog: { open, userId, username }, +}) => ({ + open, + userId, + username, +}); -// const mapDispatchToProps = dispatch => ({ -// ...bindActionCreators( -// { -// hideRejectUsernameDialog, -// }, -// dispatch -// ), -// }); +const mapDispatchToProps = dispatch => ({ + ...bindActionCreators( + { + hideRejectUsernameDialog, + }, + dispatch + ), +}); -// export default compose( -// connect(mapStateToProps, mapDispatchToProps), -// withRejectUsername -// )(RejectUsernameDialogContainer); +export default compose( + connect(mapStateToProps, mapDispatchToProps), + withRejectUsername, + withPostFlag +)(RejectUsernameDialogContainer);
- {t('suspenduser.description_suspend', username)} -
- {t('suspenduser.description_notify', username)} -
Help us understand