import PropTypes from 'prop-types'; import { PureComponent } from 'react'; import { injectIntl, defineMessages } from 'react-intl'; import classNames from 'classnames'; import api from 'flavours/glitch/api'; const messages = defineMessages({ legal: { id: 'report.categories.legal', defaultMessage: 'Legal' }, other: { id: 'report.categories.other', defaultMessage: 'Other' }, spam: { id: 'report.categories.spam', defaultMessage: 'Spam' }, violation: { id: 'report.categories.violation', defaultMessage: 'Content violates one or more server rules' }, }); class Category extends PureComponent { static propTypes = { id: PropTypes.string.isRequired, text: PropTypes.string.isRequired, selected: PropTypes.bool, disabled: PropTypes.bool, onSelect: PropTypes.func, children: PropTypes.node, }; handleClick = () => { const { id, disabled, onSelect } = this.props; if (!disabled) { onSelect(id); } }; render () { const { id, text, disabled, selected, children } = this.props; return (
{selected && }
{text}
{(selected && children) && (
{children}
)}
); } } class Rule extends PureComponent { static propTypes = { id: PropTypes.string.isRequired, text: PropTypes.string.isRequired, selected: PropTypes.bool, disabled: PropTypes.bool, onToggle: PropTypes.func, }; handleClick = () => { const { id, disabled, onToggle } = this.props; if (!disabled) { onToggle(id); } }; render () { const { id, text, disabled, selected } = this.props; return (
{selected && } {text}
); } } class ReportReasonSelector extends PureComponent { static propTypes = { id: PropTypes.string.isRequired, category: PropTypes.string.isRequired, rule_ids: PropTypes.arrayOf(PropTypes.string), disabled: PropTypes.bool, intl: PropTypes.object.isRequired, }; state = { category: this.props.category, rule_ids: this.props.rule_ids || [], rules: [], }; componentDidMount() { api().get('/api/v1/instance').then(res => { this.setState({ rules: res.data.rules, }); }).catch(err => { console.error(err); }); } _save = () => { const { id, disabled } = this.props; const { category, rule_ids } = this.state; if (disabled) { return; } api().put(`/api/v1/admin/reports/${id}`, { category, rule_ids, }).catch(err => { console.error(err); }); }; handleSelect = id => { this.setState({ category: id }, () => this._save()); }; handleToggle = id => { const { rule_ids } = this.state; if (rule_ids.includes(id)) { this.setState({ rule_ids: rule_ids.filter(x => x !== id ) }, () => this._save()); } else { this.setState({ rule_ids: [...rule_ids, id] }, () => this._save()); } }; render () { const { disabled, intl } = this.props; const { rules, category, rule_ids } = this.state; return (
{rules.map(rule => )}
); } } export default injectIntl(ReportReasonSelector);