You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
4.2 KiB

  1. import { connect } from 'react-redux';
  2. import { cancelReport, changeReportComment, submitReport } from '../../actions/reports';
  3. import { fetchAccountTimeline } from '../../actions/accounts';
  4. import PureRenderMixin from 'react-addons-pure-render-mixin';
  5. import ImmutablePropTypes from 'react-immutable-proptypes';
  6. import Column from '../ui/components/column';
  7. import Button from '../../components/button';
  8. import { makeGetAccount } from '../../selectors';
  9. import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
  10. import StatusCheckBox from './containers/status_check_box_container';
  11. import Immutable from 'immutable';
  12. import ColumnBackButtonSlim from '../../components/column_back_button_slim';
  13. const messages = defineMessages({
  14. heading: { id: 'report.heading', defaultMessage: 'New report' },
  15. placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
  16. submit: { id: 'report.submit', defaultMessage: 'Submit' }
  17. });
  18. const makeMapStateToProps = () => {
  19. const getAccount = makeGetAccount();
  20. const mapStateToProps = state => {
  21. const accountId = state.getIn(['reports', 'new', 'account_id']);
  22. return {
  23. isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
  24. account: getAccount(state, accountId),
  25. comment: state.getIn(['reports', 'new', 'comment']),
  26. statusIds: Immutable.OrderedSet(state.getIn(['timelines', 'accounts_timelines', accountId, 'items'])).union(state.getIn(['reports', 'new', 'status_ids']))
  27. };
  28. };
  29. return mapStateToProps;
  30. };
  31. const textareaStyle = {
  32. marginBottom: '10px'
  33. };
  34. const Report = React.createClass({
  35. contextTypes: {
  36. router: React.PropTypes.object
  37. },
  38. propTypes: {
  39. isSubmitting: React.PropTypes.bool,
  40. account: ImmutablePropTypes.map,
  41. statusIds: ImmutablePropTypes.list.isRequired,
  42. comment: React.PropTypes.string.isRequired,
  43. dispatch: React.PropTypes.func.isRequired,
  44. intl: React.PropTypes.object.isRequired
  45. },
  46. mixins: [PureRenderMixin],
  47. componentWillMount () {
  48. if (!this.props.account) {
  49. this.context.router.replace('/');
  50. }
  51. },
  52. componentDidMount () {
  53. if (!this.props.account) {
  54. return;
  55. }
  56. this.props.dispatch(fetchAccountTimeline(this.props.account.get('id')));
  57. },
  58. componentWillReceiveProps (nextProps) {
  59. if (this.props.account !== nextProps.account && nextProps.account) {
  60. this.props.dispatch(fetchAccountTimeline(nextProps.account.get('id')));
  61. }
  62. },
  63. handleCommentChange (e) {
  64. this.props.dispatch(changeReportComment(e.target.value));
  65. },
  66. handleSubmit () {
  67. this.props.dispatch(submitReport());
  68. this.context.router.replace('/');
  69. },
  70. render () {
  71. const { account, comment, intl, statusIds, isSubmitting } = this.props;
  72. if (!account) {
  73. return null;
  74. }
  75. return (
  76. <Column heading={intl.formatMessage(messages.heading)} icon='flag'>
  77. <ColumnBackButtonSlim />
  78. <div className='report' style={{ display: 'flex', flexDirection: 'column', maxHeight: '100%', boxSizing: 'border-box' }}>
  79. <div className='report__target' style={{ flex: '0 0 auto', padding: '10px' }}>
  80. <FormattedMessage id='report.target' defaultMessage='Reporting' />
  81. <strong>{account.get('acct')}</strong>
  82. </div>
  83. <div style={{ flex: '1 1 auto' }} className='scrollable'>
  84. <div>
  85. {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
  86. </div>
  87. </div>
  88. <div style={{ flex: '0 0 160px', padding: '10px' }}>
  89. <textarea
  90. className='report__textarea'
  91. placeholder={intl.formatMessage(messages.placeholder)}
  92. value={comment}
  93. onChange={this.handleCommentChange}
  94. style={textareaStyle}
  95. disabled={isSubmitting}
  96. />
  97. <div style={{ marginTop: '10px', overflow: 'hidden' }}>
  98. <div style={{ float: 'right' }}><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div>
  99. </div>
  100. </div>
  101. </div>
  102. </Column>
  103. );
  104. }
  105. });
  106. export default connect(makeMapStateToProps)(injectIntl(Report));