[Glitch] Add `forward_to_domains` parameter to `POST /api/v1/reports`
Port c27b82a437 to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire
parent
075887e1d6
commit
c699dc0908
|
|
@ -1,87 +1,121 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
|
||||
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
|
||||
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
|
||||
|
||||
import { OrderedSet, List as ImmutableList } from 'immutable';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { shallowEqual } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
import { fetchAccount } from 'flavours/glitch/actions/accounts';
|
||||
import Button from 'flavours/glitch/components/button';
|
||||
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'report.placeholder', defaultMessage: 'Type or paste additional comments' },
|
||||
});
|
||||
|
||||
class Comment extends PureComponent {
|
||||
const selectRepliedToAccountIds = createSelector(
|
||||
[
|
||||
(state) => state.get('statuses'),
|
||||
(_, statusIds) => statusIds,
|
||||
],
|
||||
(statusesMap, statusIds) => statusIds.map((statusId) => statusesMap.getIn([statusId, 'in_reply_to_account_id'])),
|
||||
{
|
||||
resultEqualityCheck: shallowEqual,
|
||||
}
|
||||
);
|
||||
|
||||
static propTypes = {
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
comment: PropTypes.string.isRequired,
|
||||
onChangeComment: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
isSubmitting: PropTypes.bool,
|
||||
forward: PropTypes.bool,
|
||||
isRemote: PropTypes.bool,
|
||||
domain: PropTypes.string,
|
||||
onChangeForward: PropTypes.func.isRequired,
|
||||
};
|
||||
const Comment = ({ comment, domain, statusIds, isRemote, isSubmitting, selectedDomains, onSubmit, onChangeComment, onToggleDomain }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
handleClick = () => {
|
||||
const { onSubmit } = this.props;
|
||||
onSubmit();
|
||||
};
|
||||
const dispatch = useAppDispatch();
|
||||
const loadedRef = useRef(false);
|
||||
|
||||
handleChange = e => {
|
||||
const { onChangeComment } = this.props;
|
||||
onChangeComment(e.target.value);
|
||||
};
|
||||
const handleClick = useCallback(() => onSubmit(), [onSubmit]);
|
||||
const handleChange = useCallback((e) => onChangeComment(e.target.value), [onChangeComment]);
|
||||
const handleToggleDomain = useCallback(e => onToggleDomain(e.target.value, e.target.checked), [onToggleDomain]);
|
||||
|
||||
handleKeyDown = e => {
|
||||
const handleKeyDown = useCallback((e) => {
|
||||
if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
|
||||
this.handleClick();
|
||||
handleClick();
|
||||
}
|
||||
};
|
||||
}, [handleClick]);
|
||||
|
||||
handleForwardChange = e => {
|
||||
const { onChangeForward } = this.props;
|
||||
onChangeForward(e.target.checked);
|
||||
};
|
||||
// Memoize accountIds since we don't want it to trigger `useEffect` on each render
|
||||
const accountIds = useAppSelector((state) => domain ? selectRepliedToAccountIds(state, statusIds) : ImmutableList());
|
||||
|
||||
render () {
|
||||
const { comment, isRemote, forward, domain, isSubmitting, intl } = this.props;
|
||||
// While we could memoize `availableDomains`, it is pretty inexpensive to recompute
|
||||
const accountsMap = useAppSelector((state) => state.get('accounts'));
|
||||
const availableDomains = domain ? OrderedSet([domain]).union(accountIds.map((accountId) => accountsMap.getIn([accountId, 'acct'], '').split('@')[1]).filter(domain => !!domain)) : OrderedSet();
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3>
|
||||
useEffect(() => {
|
||||
if (loadedRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
<textarea
|
||||
className='report-dialog-modal__textarea'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={comment}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
loadedRef.current = true;
|
||||
|
||||
{isRemote && (
|
||||
<>
|
||||
<p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
|
||||
// First, pre-select known domains
|
||||
availableDomains.forEach((domain) => {
|
||||
onToggleDomain(domain, true);
|
||||
});
|
||||
|
||||
<label className='report-dialog-modal__toggle'>
|
||||
<Toggle checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
|
||||
// Then, fetch missing replied-to accounts
|
||||
const unknownAccounts = OrderedSet(accountIds.filter(accountId => accountId && !accountsMap.has(accountId)));
|
||||
unknownAccounts.forEach((accountId) => {
|
||||
dispatch(fetchAccount(accountId));
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3>
|
||||
|
||||
<textarea
|
||||
className='report-dialog-modal__textarea'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={comment}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
|
||||
{isRemote && (
|
||||
<>
|
||||
<p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
|
||||
|
||||
{ availableDomains.map((domain) => (
|
||||
<label className='report-dialog-modal__toggle' key={`toggle-${domain}`}>
|
||||
<Toggle checked={selectedDomains.includes(domain)} disabled={isSubmitting} onChange={handleToggleDomain} value={domain} />
|
||||
<FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} />
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className='flex-spacer' />
|
||||
|
||||
<div className='report-dialog-modal__actions'>
|
||||
<Button onClick={this.handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
<div className='flex-spacer' />
|
||||
|
||||
<div className='report-dialog-modal__actions'>
|
||||
<Button onClick={handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default injectIntl(Comment);
|
||||
Comment.propTypes = {
|
||||
comment: PropTypes.string.isRequired,
|
||||
domain: PropTypes.string,
|
||||
statusIds: ImmutablePropTypes.list.isRequired,
|
||||
isRemote: PropTypes.bool,
|
||||
isSubmitting: PropTypes.bool,
|
||||
selectedDomains: ImmutablePropTypes.set.isRequired,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
onChangeComment: PropTypes.func.isRequired,
|
||||
onToggleDomain: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default Comment;
|
||||
|
|
|
|||
|
|
@ -46,25 +46,26 @@ class ReportModal extends ImmutablePureComponent {
|
|||
state = {
|
||||
step: 'category',
|
||||
selectedStatusIds: OrderedSet(this.props.statusId ? [this.props.statusId] : []),
|
||||
selectedDomains: OrderedSet(),
|
||||
comment: '',
|
||||
category: null,
|
||||
selectedRuleIds: OrderedSet(),
|
||||
forward: true,
|
||||
isSubmitting: false,
|
||||
isSubmitted: false,
|
||||
};
|
||||
|
||||
handleSubmit = () => {
|
||||
const { dispatch, accountId } = this.props;
|
||||
const { selectedStatusIds, comment, category, selectedRuleIds, forward } = this.state;
|
||||
const { selectedStatusIds, selectedDomains, comment, category, selectedRuleIds } = this.state;
|
||||
|
||||
this.setState({ isSubmitting: true });
|
||||
|
||||
dispatch(submitReport({
|
||||
account_id: accountId,
|
||||
status_ids: selectedStatusIds.toArray(),
|
||||
selected_domains: selectedDomains.toArray(),
|
||||
comment,
|
||||
forward,
|
||||
forward: selectedDomains.size > 0,
|
||||
category,
|
||||
rule_ids: selectedRuleIds.toArray(),
|
||||
}, this.handleSuccess, this.handleFail));
|
||||
|
|
@ -88,13 +89,19 @@ class ReportModal extends ImmutablePureComponent {
|
|||
}
|
||||
};
|
||||
|
||||
handleRuleToggle = (ruleId, checked) => {
|
||||
const { selectedRuleIds } = this.state;
|
||||
|
||||
handleDomainToggle = (domain, checked) => {
|
||||
if (checked) {
|
||||
this.setState({ selectedRuleIds: selectedRuleIds.add(ruleId) });
|
||||
this.setState((state) => ({ selectedDomains: state.selectedDomains.add(domain) }));
|
||||
} else {
|
||||
this.setState({ selectedRuleIds: selectedRuleIds.remove(ruleId) });
|
||||
this.setState((state) => ({ selectedDomains: state.selectedDomains.remove(domain) }));
|
||||
}
|
||||
};
|
||||
|
||||
handleRuleToggle = (ruleId, checked) => {
|
||||
if (checked) {
|
||||
this.setState((state) => ({ selectedRuleIds: state.selectedRuleIds.add(ruleId) }));
|
||||
} else {
|
||||
this.setState((state) => ({ selectedRuleIds: state.selectedRuleIds.remove(ruleId) }));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -106,10 +113,6 @@ class ReportModal extends ImmutablePureComponent {
|
|||
this.setState({ comment });
|
||||
};
|
||||
|
||||
handleChangeForward = forward => {
|
||||
this.setState({ forward });
|
||||
};
|
||||
|
||||
handleNextStep = step => {
|
||||
this.setState({ step });
|
||||
};
|
||||
|
|
@ -138,8 +141,8 @@ class ReportModal extends ImmutablePureComponent {
|
|||
step,
|
||||
selectedStatusIds,
|
||||
selectedRuleIds,
|
||||
selectedDomains,
|
||||
comment,
|
||||
forward,
|
||||
category,
|
||||
isSubmitting,
|
||||
isSubmitted,
|
||||
|
|
@ -187,10 +190,11 @@ class ReportModal extends ImmutablePureComponent {
|
|||
isSubmitting={isSubmitting}
|
||||
isRemote={isRemote}
|
||||
comment={comment}
|
||||
forward={forward}
|
||||
domain={domain}
|
||||
onChangeComment={this.handleChangeComment}
|
||||
onChangeForward={this.handleChangeForward}
|
||||
statusIds={selectedStatusIds}
|
||||
selectedDomains={selectedDomains}
|
||||
onToggleDomain={this.handleDomainToggle}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -709,6 +709,7 @@
|
|||
&__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > span {
|
||||
font-size: 17px;
|
||||
|
|
|
|||
Reference in New Issue