2017-05-03 03:04:16 +03:00
import React from 'react' ;
2017-02-14 21:59:26 +02:00
import { connect } from 'react-redux' ;
2018-02-28 07:54:55 +02:00
import { changeReportComment , changeReportForward , submitReport } from '../../../actions/reports' ;
2017-06-27 19:07:21 +03:00
import { refreshAccountTimeline } from '../../../actions/timelines' ;
2017-04-21 21:05:35 +03:00
import PropTypes from 'prop-types' ;
2017-02-14 21:59:26 +02:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-06-27 19:07:21 +03:00
import { makeGetAccount } from '../../../selectors' ;
2017-02-14 21:59:26 +02:00
import { defineMessages , FormattedMessage , injectIntl } from 'react-intl' ;
2017-06-27 19:07:21 +03:00
import StatusCheckBox from '../../report/containers/status_check_box_container' ;
2017-07-11 02:00:14 +03:00
import { OrderedSet } from 'immutable' ;
2017-06-27 19:07:21 +03:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import Button from '../../../components/button' ;
2018-02-28 07:54:55 +02:00
import Toggle from 'react-toggle' ;
2018-03-02 05:36:00 +02:00
import IconButton from '../../../components/icon_button' ;
2017-02-14 21:59:26 +02:00
const messages = defineMessages ( {
2018-03-02 05:36:00 +02:00
close : { id : 'lightbox.close' , defaultMessage : 'Close' } ,
2017-02-14 21:59:26 +02:00
placeholder : { id : 'report.placeholder' , defaultMessage : 'Additional comments' } ,
2017-05-20 18:31:47 +03:00
submit : { id : 'report.submit' , defaultMessage : 'Submit' } ,
2017-02-14 21:59:26 +02:00
} ) ;
const makeMapStateToProps = ( ) => {
const getAccount = makeGetAccount ( ) ;
const mapStateToProps = state => {
const accountId = state . getIn ( [ 'reports' , 'new' , 'account_id' ] ) ;
return {
isSubmitting : state . getIn ( [ 'reports' , 'new' , 'isSubmitting' ] ) ,
account : getAccount ( state , accountId ) ,
comment : state . getIn ( [ 'reports' , 'new' , 'comment' ] ) ,
2018-02-28 07:54:55 +02:00
forward : state . getIn ( [ 'reports' , 'new' , 'forward' ] ) ,
2017-07-11 02:00:14 +03:00
statusIds : OrderedSet ( state . getIn ( [ 'timelines' , ` account: ${ accountId } ` , 'items' ] ) ) . union ( state . getIn ( [ 'reports' , 'new' , 'status_ids' ] ) ) ,
2017-02-14 21:59:26 +02:00
} ;
} ;
return mapStateToProps ;
} ;
2017-06-23 20:36:54 +03:00
@ connect ( makeMapStateToProps )
@ injectIntl
2017-06-27 19:07:21 +03:00
export default class ReportModal extends ImmutablePureComponent {
2017-05-12 15:44:10 +03:00
static propTypes = {
isSubmitting : PropTypes . bool ,
account : ImmutablePropTypes . map ,
statusIds : ImmutablePropTypes . orderedSet . isRequired ,
comment : PropTypes . string . isRequired ,
2018-02-28 07:54:55 +02:00
forward : PropTypes . bool ,
2017-05-12 15:44:10 +03:00
dispatch : PropTypes . func . isRequired ,
2017-05-20 18:31:47 +03:00
intl : PropTypes . object . isRequired ,
2017-05-12 15:44:10 +03:00
} ;
2017-02-14 21:59:26 +02:00
2018-02-28 07:54:55 +02:00
handleCommentChange = e => {
2017-06-27 19:07:21 +03:00
this . props . dispatch ( changeReportComment ( e . target . value ) ) ;
2017-04-21 21:05:35 +03:00
}
2017-02-14 21:59:26 +02:00
2018-02-28 07:54:55 +02:00
handleForwardChange = e => {
this . props . dispatch ( changeReportForward ( e . target . checked ) ) ;
}
2017-06-27 19:07:21 +03:00
handleSubmit = ( ) => {
this . props . dispatch ( submitReport ( ) ) ;
}
2017-02-14 21:59:26 +02:00
2017-06-27 19:07:21 +03:00
componentDidMount ( ) {
2017-06-11 18:07:35 +03:00
this . props . dispatch ( refreshAccountTimeline ( this . props . account . get ( 'id' ) ) ) ;
2017-04-21 21:05:35 +03:00
}
2017-02-14 21:59:26 +02:00
componentWillReceiveProps ( nextProps ) {
if ( this . props . account !== nextProps . account && nextProps . account ) {
2017-06-11 18:07:35 +03:00
this . props . dispatch ( refreshAccountTimeline ( nextProps . account . get ( 'id' ) ) ) ;
2017-02-14 21:59:26 +02:00
}
2017-04-21 21:05:35 +03:00
}
2017-02-14 21:59:26 +02:00
render ( ) {
2018-03-02 05:36:00 +02:00
const { account , comment , intl , statusIds , isSubmitting , forward , onClose } = this . props ;
2017-02-14 21:59:26 +02:00
if ( ! account ) {
return null ;
}
2018-02-28 07:54:55 +02:00
const domain = account . get ( 'acct' ) . split ( '@' ) [ 1 ] ;
2017-02-14 21:59:26 +02:00
return (
2017-06-27 19:07:21 +03:00
< div className = 'modal-root__modal report-modal' >
< div className = 'report-modal__target' >
2018-03-02 05:36:00 +02:00
< IconButton className = 'media-modal__close' title = { intl . formatMessage ( messages . close ) } icon = 'times' onClick = { onClose } size = { 16 } / >
2017-06-27 19:07:21 +03:00
< FormattedMessage id = 'report.target' defaultMessage = 'Report {target}' values = { { target : < strong > { account . get ( 'acct' ) } < /strong> }} / >
< / d i v >
2017-02-14 21:59:26 +02:00
2017-06-27 19:07:21 +03:00
< div className = 'report-modal__container' >
< div className = 'report-modal__comment' >
2018-02-28 07:54:55 +02:00
< 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 >
2017-02-14 21:59:26 +02:00
< textarea
2017-06-27 19:07:21 +03:00
className = 'setting-text light'
2017-02-14 21:59:26 +02:00
placeholder = { intl . formatMessage ( messages . placeholder ) }
value = { comment }
onChange = { this . handleCommentChange }
disabled = { isSubmitting }
/ >
2018-02-28 07:54:55 +02:00
{ 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 >
) }
< Button disabled = { isSubmitting } text = { intl . formatMessage ( messages . submit ) } onClick = { this . handleSubmit } / >
2017-02-14 21:59:26 +02:00
< / d i v >
2017-06-27 19:07:21 +03:00
2018-02-28 07:54:55 +02:00
< div className = 'report-modal__statuses' >
< div >
{ statusIds . map ( statusId => < StatusCheckBox id = { statusId } key = { statusId } disabled = { isSubmitting } / > ) }
< / d i v >
< / d i v >
2017-06-27 19:07:21 +03:00
< / d i v >
< / d i v >
2017-02-14 21:59:26 +02:00
) ;
}
2017-04-21 21:05:35 +03:00
}