logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

report_modal.js (4898B)


  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import { changeReportComment, changeReportForward, submitReport } from '../../../actions/reports';
  4. import { expandAccountTimeline } from '../../../actions/timelines';
  5. import PropTypes from 'prop-types';
  6. import ImmutablePropTypes from 'react-immutable-proptypes';
  7. import { makeGetAccount } from '../../../selectors';
  8. import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
  9. import StatusCheckBox from '../../report/containers/status_check_box_container';
  10. import { OrderedSet } from 'immutable';
  11. import ImmutablePureComponent from 'react-immutable-pure-component';
  12. import Button from '../../../components/button';
  13. import Toggle from 'react-toggle';
  14. import IconButton from '../../../components/icon_button';
  15. const messages = defineMessages({
  16. close: { id: 'lightbox.close', defaultMessage: 'Close' },
  17. placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
  18. submit: { id: 'report.submit', defaultMessage: 'Submit' },
  19. });
  20. const makeMapStateToProps = () => {
  21. const getAccount = makeGetAccount();
  22. const mapStateToProps = state => {
  23. const accountId = state.getIn(['reports', 'new', 'account_id']);
  24. return {
  25. isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
  26. account: getAccount(state, accountId),
  27. comment: state.getIn(['reports', 'new', 'comment']),
  28. forward: state.getIn(['reports', 'new', 'forward']),
  29. statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])),
  30. };
  31. };
  32. return mapStateToProps;
  33. };
  34. @connect(makeMapStateToProps)
  35. @injectIntl
  36. export default class ReportModal extends ImmutablePureComponent {
  37. static propTypes = {
  38. isSubmitting: PropTypes.bool,
  39. account: ImmutablePropTypes.map,
  40. statusIds: ImmutablePropTypes.orderedSet.isRequired,
  41. comment: PropTypes.string.isRequired,
  42. forward: PropTypes.bool,
  43. dispatch: PropTypes.func.isRequired,
  44. intl: PropTypes.object.isRequired,
  45. };
  46. handleCommentChange = e => {
  47. this.props.dispatch(changeReportComment(e.target.value));
  48. }
  49. handleForwardChange = e => {
  50. this.props.dispatch(changeReportForward(e.target.checked));
  51. }
  52. handleSubmit = () => {
  53. this.props.dispatch(submitReport());
  54. }
  55. componentDidMount () {
  56. this.props.dispatch(expandAccountTimeline(this.props.account.get('id')));
  57. }
  58. componentWillReceiveProps (nextProps) {
  59. if (this.props.account !== nextProps.account && nextProps.account) {
  60. this.props.dispatch(expandAccountTimeline(nextProps.account.get('id')));
  61. }
  62. }
  63. render () {
  64. const { account, comment, intl, statusIds, isSubmitting, forward, onClose } = this.props;
  65. if (!account) {
  66. return null;
  67. }
  68. const domain = account.get('acct').split('@')[1];
  69. return (
  70. <div className='modal-root__modal report-modal'>
  71. <div className='report-modal__target'>
  72. <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
  73. <FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
  74. </div>
  75. <div className='report-modal__container'>
  76. <div className='report-modal__comment'>
  77. <p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:' /></p>
  78. <textarea
  79. className='setting-text light'
  80. placeholder={intl.formatMessage(messages.placeholder)}
  81. value={comment}
  82. onChange={this.handleCommentChange}
  83. disabled={isSubmitting}
  84. />
  85. {domain && (
  86. <div>
  87. <p><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
  88. <div className='setting-toggle'>
  89. <Toggle id='report-forward' checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
  90. <label htmlFor='report-forward' className='setting-toggle__label'><FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} /></label>
  91. </div>
  92. </div>
  93. )}
  94. <Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} />
  95. </div>
  96. <div className='report-modal__statuses'>
  97. <div>
  98. {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. );
  104. }
  105. }