2017-05-02 20:04:16 -04:00
import React from 'react' ;
2017-02-14 14:59:26 -05:00
import { connect } from 'react-redux' ;
2018-02-28 00:54:55 -05:00
import { changeReportComment , changeReportForward , submitReport } from '../../../actions/reports' ;
2018-03-24 10:25:15 -04:00
import { expandAccountTimeline } from '../../../actions/timelines' ;
2017-04-21 14:05:35 -04:00
import PropTypes from 'prop-types' ;
2017-02-14 14:59:26 -05:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-06-27 12:07:21 -04:00
import { makeGetAccount } from '../../../selectors' ;
2017-02-14 14:59:26 -05:00
import { defineMessages , FormattedMessage , injectIntl } from 'react-intl' ;
2017-06-27 12:07:21 -04:00
import StatusCheckBox from '../../report/containers/status_check_box_container' ;
2017-07-10 19:00:14 -04:00
import { OrderedSet } from 'immutable' ;
2017-06-27 12:07:21 -04:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import Button from '../../../components/button' ;
2018-02-28 00:54:55 -05:00
import Toggle from 'react-toggle' ;
2018-03-01 22:36:00 -05:00
import IconButton from '../../../components/icon_button' ;
2017-02-14 14:59:26 -05:00
const messages = defineMessages ( {
2018-03-01 22:36:00 -05:00
close : { id : 'lightbox.close' , defaultMessage : 'Close' } ,
2017-02-14 14:59:26 -05:00
placeholder : { id : 'report.placeholder' , defaultMessage : 'Additional comments' } ,
2017-05-20 11:31:47 -04:00
submit : { id : 'report.submit' , defaultMessage : 'Submit' } ,
2017-02-14 14:59:26 -05: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 00:54:55 -05:00
forward : state . getIn ( [ 'reports' , 'new' , 'forward' ] ) ,
2018-05-06 14:38:17 -04:00
statusIds : OrderedSet ( state . getIn ( [ 'timelines' , ` account: ${ accountId } :with_replies ` , 'items' ] ) ) . union ( state . getIn ( [ 'reports' , 'new' , 'status_ids' ] ) ) ,
2017-02-14 14:59:26 -05:00
} ;
} ;
return mapStateToProps ;
} ;
2018-09-14 11:59:48 -04:00
export default @ connect ( makeMapStateToProps )
2017-06-23 13:36:54 -04:00
@ injectIntl
2018-09-14 11:59:48 -04:00
class ReportModal extends ImmutablePureComponent {
2017-05-12 08:44:10 -04:00
static propTypes = {
isSubmitting : PropTypes . bool ,
account : ImmutablePropTypes . map ,
statusIds : ImmutablePropTypes . orderedSet . isRequired ,
comment : PropTypes . string . isRequired ,
2018-02-28 00:54:55 -05:00
forward : PropTypes . bool ,
2017-05-12 08:44:10 -04:00
dispatch : PropTypes . func . isRequired ,
2017-05-20 11:31:47 -04:00
intl : PropTypes . object . isRequired ,
2017-05-12 08:44:10 -04:00
} ;
2017-02-14 14:59:26 -05:00
2018-02-28 00:54:55 -05:00
handleCommentChange = e => {
2017-06-27 12:07:21 -04:00
this . props . dispatch ( changeReportComment ( e . target . value ) ) ;
2017-04-21 14:05:35 -04:00
}
2017-02-14 14:59:26 -05:00
2018-02-28 00:54:55 -05:00
handleForwardChange = e => {
this . props . dispatch ( changeReportForward ( e . target . checked ) ) ;
}
2017-06-27 12:07:21 -04:00
handleSubmit = ( ) => {
this . props . dispatch ( submitReport ( ) ) ;
}
2017-02-14 14:59:26 -05:00
2018-06-04 07:09:52 -04:00
handleKeyDown = e => {
if ( e . keyCode === 13 && ( e . ctrlKey || e . metaKey ) ) {
this . handleSubmit ( ) ;
}
}
2017-06-27 12:07:21 -04:00
componentDidMount ( ) {
2018-05-06 14:38:17 -04:00
this . props . dispatch ( expandAccountTimeline ( this . props . account . get ( 'id' ) , { withReplies : true } ) ) ;
2017-04-21 14:05:35 -04:00
}
2017-02-14 14:59:26 -05:00
componentWillReceiveProps ( nextProps ) {
if ( this . props . account !== nextProps . account && nextProps . account ) {
2018-05-06 14:38:17 -04:00
this . props . dispatch ( expandAccountTimeline ( nextProps . account . get ( 'id' ) , { withReplies : true } ) ) ;
2017-02-14 14:59:26 -05:00
}
2017-04-21 14:05:35 -04:00
}
2017-02-14 14:59:26 -05:00
render ( ) {
2018-03-01 22:36:00 -05:00
const { account , comment , intl , statusIds , isSubmitting , forward , onClose } = this . props ;
2017-02-14 14:59:26 -05:00
if ( ! account ) {
return null ;
}
2018-02-28 00:54:55 -05:00
const domain = account . get ( 'acct' ) . split ( '@' ) [ 1 ] ;
2017-02-14 14:59:26 -05:00
return (
2017-06-27 12:07:21 -04:00
< div className = 'modal-root__modal report-modal' >
< div className = 'report-modal__target' >
2018-03-01 22:36:00 -05:00
< IconButton className = 'media-modal__close' title = { intl . formatMessage ( messages . close ) } icon = 'times' onClick = { onClose } size = { 16 } / >
2017-06-27 12:07:21 -04:00
< FormattedMessage id = 'report.target' defaultMessage = 'Report {target}' values = { { target : < strong > { account . get ( 'acct' ) } < /strong> }} / >
< / d i v >
2017-02-14 14:59:26 -05:00
2017-06-27 12:07:21 -04:00
< div className = 'report-modal__container' >
< div className = 'report-modal__comment' >
2019-02-05 13:11:24 -05:00
< p > < FormattedMessage id = 'report.hint' defaultMessage = 'The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' / > < / p >
2018-02-28 00:54:55 -05:00
2017-02-14 14:59:26 -05:00
< textarea
2017-06-27 12:07:21 -04:00
className = 'setting-text light'
2017-02-14 14:59:26 -05:00
placeholder = { intl . formatMessage ( messages . placeholder ) }
value = { comment }
onChange = { this . handleCommentChange }
2018-06-04 07:09:52 -04:00
onKeyDown = { this . handleKeyDown }
2017-02-14 14:59:26 -05:00
disabled = { isSubmitting }
2018-09-13 09:27:29 -04:00
autoFocus
2017-02-14 14:59:26 -05:00
/ >
2018-02-28 00:54:55 -05: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 14:59:26 -05:00
< / d i v >
2017-06-27 12:07:21 -04:00
2018-02-28 00:54:55 -05: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 12:07:21 -04:00
< / d i v >
< / d i v >
2017-02-14 14:59:26 -05:00
) ;
}
2017-04-21 14:05:35 -04:00
}