2022-02-23 19:03:46 +00:00
import PropTypes from 'prop-types' ;
2023-05-23 15:15:17 +00:00
import { PureComponent } from 'react' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import { List as ImmutableList } from 'immutable' ;
2022-04-28 19:29:29 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { connect } from 'react-redux' ;
2023-05-23 15:15:17 +00:00
2022-02-23 19:03:46 +00:00
import Button from 'mastodon/components/button' ;
2023-05-23 15:15:17 +00:00
2022-02-23 19:03:46 +00:00
import Option from './components/option' ;
const messages = defineMessages ( {
dislike : { id : 'report.reasons.dislike' , defaultMessage : 'I don\'t like it' } ,
dislike _description : { id : 'report.reasons.dislike_description' , defaultMessage : 'It is not something you want to see' } ,
spam : { id : 'report.reasons.spam' , defaultMessage : 'It\'s spam' } ,
2022-03-06 21:51:40 +00:00
spam _description : { id : 'report.reasons.spam_description' , defaultMessage : 'Malicious links, fake engagement, or repetitive replies' } ,
2023-06-06 21:41:59 +00:00
legal : { id : 'report.reasons.legal' , defaultMessage : 'It\'s illegal' } ,
legal _description : { id : 'report.reasons.legal_description' , defaultMessage : 'You believe it violates the law of your or the server\'s country' } ,
2022-02-23 19:03:46 +00:00
violation : { id : 'report.reasons.violation' , defaultMessage : 'It violates server rules' } ,
violation _description : { id : 'report.reasons.violation_description' , defaultMessage : 'You are aware that it breaks specific rules' } ,
other : { id : 'report.reasons.other' , defaultMessage : 'It\'s something else' } ,
other _description : { id : 'report.reasons.other_description' , defaultMessage : 'The issue does not fit into other categories' } ,
status : { id : 'report.category.title_status' , defaultMessage : 'post' } ,
account : { id : 'report.category.title_account' , defaultMessage : 'profile' } ,
} ) ;
2022-04-28 19:29:29 +00:00
const mapStateToProps = state => ( {
2022-10-18 17:33:11 +00:00
rules : state . getIn ( [ 'server' , 'server' , 'rules' ] , ImmutableList ( ) ) ,
2022-04-28 19:29:29 +00:00
} ) ;
2023-05-23 08:52:27 +00:00
class Category extends PureComponent {
2022-02-23 19:03:46 +00:00
static propTypes = {
onNextStep : PropTypes . func . isRequired ,
2022-04-28 19:29:29 +00:00
rules : ImmutablePropTypes . list ,
2022-02-23 19:03:46 +00:00
category : PropTypes . string ,
onChangeCategory : PropTypes . func . isRequired ,
startedFrom : PropTypes . oneOf ( [ 'status' , 'account' ] ) ,
intl : PropTypes . object . isRequired ,
} ;
handleNextClick = ( ) => {
const { onNextStep , category } = this . props ;
switch ( category ) {
case 'dislike' :
onNextStep ( 'thanks' ) ;
break ;
case 'violation' :
onNextStep ( 'rules' ) ;
break ;
default :
onNextStep ( 'statuses' ) ;
break ;
}
} ;
handleCategoryToggle = ( value , checked ) => {
const { onChangeCategory } = this . props ;
if ( checked ) {
onChangeCategory ( value ) ;
}
} ;
render ( ) {
2022-04-28 19:29:29 +00:00
const { category , startedFrom , rules , intl } = this . props ;
2022-02-23 19:03:46 +00:00
2022-04-28 19:29:29 +00:00
const options = rules . size > 0 ? [
2022-02-23 19:03:46 +00:00
'dislike' ,
'spam' ,
2023-06-06 21:41:59 +00:00
'legal' ,
2022-02-23 19:03:46 +00:00
'violation' ,
'other' ,
2022-04-28 19:29:29 +00:00
] : [
'dislike' ,
'spam' ,
2023-06-06 21:41:59 +00:00
'legal' ,
2022-04-28 19:29:29 +00:00
'other' ,
2022-02-23 19:03:46 +00:00
] ;
return (
2023-05-23 09:47:36 +00:00
< >
2022-02-23 19:03:46 +00:00
< h3 className = 'report-dialog-modal__title' > < FormattedMessage id = 'report.category.title' defaultMessage = "Tell us what's going on with this {type}" values = { { type : intl . formatMessage ( messages [ startedFrom ] ) } } / > < / h3 >
< p className = 'report-dialog-modal__lead' > < FormattedMessage id = 'report.category.subtitle' defaultMessage = 'Choose the best match' / > < / p >
< div >
{ options . map ( item => (
< Option
key = { item }
name = 'category'
value = { item }
checked = { category === item }
onToggle = { this . handleCategoryToggle }
label = { intl . formatMessage ( messages [ item ] ) }
description = { intl . formatMessage ( messages [ ` ${ item } _description ` ] ) }
/ >
) ) }
< / div >
< div className = 'flex-spacer' / >
< div className = 'report-dialog-modal__actions' >
< Button onClick = { this . handleNextClick } disabled = { category === null } > < FormattedMessage id = 'report.next' defaultMessage = 'Next' / > < / Button >
< / div >
2023-05-23 09:47:36 +00:00
< / >
2022-02-23 19:03:46 +00:00
) ;
}
}
2023-03-24 02:17:53 +00:00
export default connect ( mapStateToProps ) ( injectIntl ( Category ) ) ;