@ -1,25 +1,31 @@
import React from 'react' ;
import { connect } from 'react-redux' ;
import PropTypes from 'prop-types' ;
import { injectIntl, FormattedMessage } from 'react-intl' ;
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl' ;
import Toggle from 'react-toggle' ;
import Button from '../../../components/button' ;
import { closeModal } from '../../../actions/modal' ;
import { muteAccount } from '../../../actions/accounts' ;
import { toggleHideNotifications } from '../../../actions/mutes' ;
import { toggleHideNotifications , changeMuteDuration } from '../../../actions/mutes' ;
const messages = defineMessages ( {
minutes : { id : 'intervals.full.minutes' , defaultMessage : '{number, plural, one {# minute} other {# minutes}}' } ,
hours : { id : 'intervals.full.hours' , defaultMessage : '{number, plural, one {# hour} other {# hours}}' } ,
days : { id : 'intervals.full.days' , defaultMessage : '{number, plural, one {# day} other {# days}}' } ,
} ) ;
const mapStateToProps = state => {
return {
account : state . getIn ( [ 'mutes' , 'new' , 'account' ] ) ,
notifications : state . getIn ( [ 'mutes' , 'new' , 'notifications' ] ) ,
muteDuration : state . getIn ( [ 'mutes' , 'new' , 'duration' ] ) ,
} ;
} ;
const mapDispatchToProps = dispatch => {
return {
onConfirm ( account , notifications ) {
dispatch ( muteAccount ( account . get ( 'id' ) , notifications )) ;
onConfirm ( account , notifications , muteDuration ) {
dispatch ( muteAccount ( account . get ( 'id' ) , notifications , muteDuration )) ;
} ,
onClose ( ) {
@ -29,6 +35,10 @@ const mapDispatchToProps = dispatch => {
onToggleNotifications ( ) {
dispatch ( toggleHideNotifications ( ) ) ;
} ,
onChangeMuteDuration ( e ) {
dispatch ( changeMuteDuration ( e . target . value ) ) ;
} ,
} ;
} ;
@ -43,6 +53,8 @@ class MuteModal extends React.PureComponent {
onConfirm : PropTypes . func . isRequired ,
onToggleNotifications : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
muteDuration : PropTypes . number . isRequired ,
onChangeMuteDuration : PropTypes . func . isRequired ,
} ;
componentDidMount ( ) {
@ -51,7 +63,7 @@ class MuteModal extends React.PureComponent {
handleClick = ( ) => {
this . props . onClose ( ) ;
this . props . onConfirm ( this . props . account , this . props . notifications );
this . props . onConfirm ( this . props . account , this . props . notifications , this . props . muteDuration );
}
handleCancel = ( ) => {
@ -66,8 +78,12 @@ class MuteModal extends React.PureComponent {
this . props . onToggleNotifications ( ) ;
}
changeMuteDuration = ( e ) => {
this . props . onChangeMuteDuration ( e ) ;
}
render ( ) {
const { account , notifications } = this . props ;
const { account , notifications , muteDuration , intl } = this . props ;
return (
< div className = 'modal-root__modal mute-modal' >
@ -91,6 +107,21 @@ class MuteModal extends React.PureComponent {
< FormattedMessage id = 'mute_modal.hide_notifications' defaultMessage = 'Hide notifications from this user?' / >
< / l a b e l >
< / d i v >
< div >
< span > < FormattedMessage id = 'mute_modal.duration' defaultMessage = 'Duration' / > : < / s p a n >
{ /* eslint-disable-next-line jsx-a11y/no-onchange */ }
< select value = { muteDuration } onChange = { this . changeMuteDuration } >
< option value = { 0 } > { intl . formatMessage ( { id : 'mute_modal.indefinite' } ) } < / o p t i o n >
< option value = { 300 } > { intl . formatMessage ( messages . minutes , { number : 5 } ) } < / o p t i o n >
< option value = { 1800 } > { intl . formatMessage ( messages . minutes , { number : 30 } ) } < / o p t i o n >
< option value = { 3600 } > { intl . formatMessage ( messages . hours , { number : 1 } ) } < / o p t i o n >
< option value = { 21600 } > { intl . formatMessage ( messages . hours , { number : 6 } ) } < / o p t i o n >
< option value = { 86400 } > { intl . formatMessage ( messages . days , { number : 1 } ) } < / o p t i o n >
< option value = { 259200 } > { intl . formatMessage ( messages . days , { number : 3 } ) } < / o p t i o n >
< option value = { 604800 } > { intl . formatMessage ( messages . days , { number : 7 } ) } < / o p t i o n >
< / s e l e c t >
< / d i v >
< / d i v >
< div className = 'mute-modal__action-bar' >