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