app/javascript/mastodon/features/ui/components/mute_modal.js

   1 import React from 'react';
   2 import { connect } from 'react-redux';
   3 import PropTypes from 'prop-types';
   4 import { injectIntl, FormattedMessage } from 'react-intl';
   5 import Toggle from 'react-toggle';
   6 import Button from '../../../components/button';
   7 import { closeModal } from '../../../actions/modal';
   8 import { muteAccount } from '../../../actions/accounts';
   9 import { toggleHideNotifications } from '../../../actions/mutes';
  10
  11
  12 const mapStateToProps = state => {
  13   return {
  14     isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
  15     account: state.getIn(['mutes', 'new', 'account']),
  16     notifications: state.getIn(['mutes', 'new', 'notifications']),
  17   };
  18 };
  19
  20 const mapDispatchToProps = dispatch => {
  21   return {
  22     onConfirm(account, notifications) {
  23       dispatch(muteAccount(account.get('id'), notifications));
  24     },
  25
  26     onClose() {
  27       dispatch(closeModal());
  28     },
  29
  30     onToggleNotifications() {
  31       dispatch(toggleHideNotifications());
  32     },
  33   };
  34 };
  35
  36 @connect(mapStateToProps, mapDispatchToProps)
  37 @injectIntl
  38 export default class MuteModal extends React.PureComponent {
  39
  40   static propTypes = {
  41     isSubmitting: PropTypes.bool.isRequired,
  42     account: PropTypes.object.isRequired,
  43     notifications: PropTypes.bool.isRequired,
  44     onClose: PropTypes.func.isRequired,
  45     onConfirm: PropTypes.func.isRequired,
  46     onToggleNotifications: PropTypes.func.isRequired,
  47     intl: PropTypes.object.isRequired,
  48   };
  49
  50   componentDidMount() {
  51     this.button.focus();
  52   }
  53
  54   handleClick = () => {
  55     this.props.onClose();
  56     this.props.onConfirm(this.props.account, this.props.notifications);
  57   }
  58
  59   handleCancel = () => {
  60     this.props.onClose();
  61   }
  62
  63   setRef = (c) => {
  64     this.button = c;
  65   }
  66
  67   toggleNotifications = () => {
  68     this.props.onToggleNotifications();
  69   }
  70
  71   render () {
  72     const { account, notifications } = this.props;
  73
  74     return (
  75       <div className='modal-root__modal mute-modal'>
  76         <div className='mute-modal__container'>
  77           <p>
  78             <FormattedMessage
  79               id='confirmations.mute.message'
  80               defaultMessage='Are you sure you want to mute {name}?'
  81               values={{ name: <strong>@{account.get('acct')}</strong> }}
  82             />
  83           </p>
  84           <div>
  85             <label htmlFor='mute-modal__hide-notifications-checkbox'>
  86               <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
  87               {' '}
  88               <Toggle id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
  89             </label>
  90           </div>
  91         </div>
  92
  93         <div className='mute-modal__action-bar'>
  94           <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
  95             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
  96           </Button>
  97           <Button onClick={this.handleClick} ref={this.setRef}>
  98             <FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
  99           </Button>
 100         </div>
 101       </div>
 102     );
 103   }
 104
 105 }