@ -1,6 +1,6 @@
import React from 'react' ;
import { connect } from 'react-redux' ;
import { changeReportComment , submitReport } from '../../../actions/reports' ;
import { changeReportComment , changeReportForward , submitReport } from '../../../actions/reports' ;
import { refreshAccountTimeline } from '../../../actions/timelines' ;
import PropTypes from 'prop-types' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
@ -10,6 +10,7 @@ import StatusCheckBox from '../../report/containers/status_check_box_container';
import { OrderedSet } from 'immutable' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import Button from '../../../components/button' ;
import Toggle from 'react-toggle' ;
const messages = defineMessages ( {
placeholder : { id : 'report.placeholder' , defaultMessage : 'Additional comments' } ,
@ -26,6 +27,7 @@ const makeMapStateToProps = () => {
isSubmitting : state . getIn ( [ 'reports' , 'new' , 'isSubmitting' ] ) ,
account : getAccount ( state , accountId ) ,
comment : state . getIn ( [ 'reports' , 'new' , 'comment' ] ) ,
forward : state . getIn ( [ 'reports' , 'new' , 'forward' ] ) ,
statusIds : OrderedSet ( state . getIn ( [ 'timelines' , ` account: ${ accountId } ` , 'items' ] ) ) . union ( state . getIn ( [ 'reports' , 'new' , 'status_ids' ] ) ) ,
} ;
} ;
@ -42,14 +44,19 @@ export default class ReportModal extends ImmutablePureComponent {
account : ImmutablePropTypes . map ,
statusIds : ImmutablePropTypes . orderedSet . isRequired ,
comment : PropTypes . string . isRequired ,
forward : PropTypes . bool ,
dispatch : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
} ;
handleCommentChange = ( e ) => {
handleCommentChange = e => {
this . props . dispatch ( changeReportComment ( e . target . value ) ) ;
}
handleForwardChange = e => {
this . props . dispatch ( changeReportForward ( e . target . checked ) ) ;
}
handleSubmit = ( ) => {
this . props . dispatch ( submitReport ( ) ) ;
}
@ -65,12 +72,14 @@ export default class ReportModal extends ImmutablePureComponent {
}
render ( ) {
const { account , comment , intl , statusIds , isSubmitting } = this . props ;
const { account , comment , intl , statusIds , isSubmitting , forward } = this . props ;
if ( ! account ) {
return null ;
}
const domain = account . get ( 'acct' ) . split ( '@' ) [ 1 ] ;
return (
< div className = 'modal-root__modal report-modal' >
< div className = 'report-modal__target' >
@ -78,13 +87,9 @@ export default class ReportModal extends ImmutablePureComponent {
< / d i v >
< div className = 'report-modal__container' >
< div className = 'report-modal__statuses' >
< div >
{ statusIds . map ( statusId => < StatusCheckBox id = { statusId } key = { statusId } disabled = { isSubmitting } / > ) }
< / d i v >
< / d i v >
< div className = 'report-modal__comment' >
< p > < FormattedMessage id = 'report.hint' defaultMessage = 'The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:' / > < / p >
< textarea
className = 'setting-text light'
placeholder = { intl . formatMessage ( messages . placeholder ) }
@ -92,12 +97,27 @@ export default class ReportModal extends ImmutablePureComponent {
onChange = { this . handleCommentChange }
disabled = { isSubmitting }
/ >
{ domain && (
< div >
< p > < FormattedMessage id = 'report.forward_hint' defaultMessage = 'The account is from another server. Send an anonymized copy of the report there as well?' / > < / p >
< div className = 'setting-toggle' >
< Toggle id = 'report-forward' checked = { forward } disabled = { isSubmitting } onChange = { this . handleForwardChange } / >
< label htmlFor = 'report-forward' className = 'setting-toggle__label' > < FormattedMessage id = 'report.forward' defaultMessage = 'Forward to {target}' values = { { target : domain } } / > < / l a b e l >
< / d i v >
< / d i v >
) }
< div className = 'report-modal__action-bar' >
< Button disabled = { isSubmitting } text = { intl . formatMessage ( messages . submit ) } onClick = { this . handleSubmit } / >
< / d i v >
< div className = 'report-modal__statuses' >
< div >
{ statusIds . map ( statusId => < StatusCheckBox id = { statusId } key = { statusId } disabled = { isSubmitting } / > ) }
< / d i v >
< / d i v >
< / d i v >
< / d i v >
) ;
}