diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 628d02fa4..ddf5fd26f 100644
--- a/app/soapbox/components/modal_root.js
+++ b/app/soapbox/components/modal_root.js
@@ -208,7 +208,12 @@ class ModalRoot extends React.PureComponent {
})}
style={{ opacity: revealed ? 1 : 0 }}
>
-
+
{
const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet
);
const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet);
+ const isReportingAccount = useMemo(() => selectedStatusIds.size === 0, []);
const shouldRequireRule = rules.length > 0;
const [currentStep, setCurrentStep] = useState(Steps.ONE);
@@ -101,11 +102,6 @@ const ReportModal = ({ onClose }: IReportModal) => {
}
};
- const handleClose = () => {
- dispatch(cancelReport());
- onClose();
- };
-
const handleNextStep = () => {
switch (currentStep) {
case Steps.ONE:
@@ -152,8 +148,8 @@ const ReportModal = ({ onClose }: IReportModal) => {
return false;
}
- return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || selectedStatusIds.size === 0;
- }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size]);
+ return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || (!isReportingAccount && selectedStatusIds.size === 0);
+ }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size, isReportingAccount]);
const calculateProgress = useCallback(() => {
switch (currentStep) {
@@ -183,7 +179,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
return (
@{account.acct} }} />}
- onClose={handleClose}
+ onClose={onClose}
cancelAction={currentStep === Steps.THREE ? undefined : onClose}
confirmationAction={handleNextStep}
confirmationText={confirmationText}
@@ -193,7 +189,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
- {currentStep !== Steps.THREE && renderSelectedStatuses()}
+ {(currentStep !== Steps.THREE && !isReportingAccount) && renderSelectedStatuses()}
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 86d5dde48..87e83d8a6 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -1,5 +1,5 @@
import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
@@ -36,6 +36,9 @@ const ReasonStep = (_props: IReasonStep) => {
const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet);
const shouldRequireRule = rules.length > 0;
+ const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet);
+ const isReportingAccount = useMemo(() => selectedStatusIds.size === 0, []);
+
const handleCommentChange = (event: React.ChangeEvent) => {
dispatch(changeReportComment(event.target.value));
};
@@ -58,6 +61,16 @@ const ReasonStep = (_props: IReasonStep) => {
}
};
+ const filterRuleType = (rule: any) => {
+ const ruleTypeToFilter = isReportingAccount ? 'account' : 'content';
+
+ if (rule.rule_type) {
+ return rule.rule_type === ruleTypeToFilter;
+ }
+
+ return true;
+ };
+
useEffect(() => {
dispatch(fetchRules());
}, []);
@@ -87,7 +100,7 @@ const ReasonStep = (_props: IReasonStep) => {
onScroll={handleRulesScrolling}
ref={rulesListRef}
>
- {rules.map((rule, idx) => {
+ {rules.filter(filterRuleType).map((rule, idx) => {
const isSelected = ruleIds.includes(String(rule.id));
return (
diff --git a/app/soapbox/features/ui/containers/modal_container.js b/app/soapbox/features/ui/containers/modal_container.js
index a3f01dcd7..d3bbd5018 100644
--- a/app/soapbox/features/ui/containers/modal_container.js
+++ b/app/soapbox/features/ui/containers/modal_container.js
@@ -1,5 +1,7 @@
import { connect } from 'react-redux';
+import { cancelReport } from 'soapbox/actions/reports';
+
import { cancelReplyCompose } from '../../../actions/compose';
import { closeModal } from '../../../actions/modals';
import ModalRoot from '../components/modal_root';
@@ -18,8 +20,15 @@ const mapStateToProps = state => {
const mapDispatchToProps = (dispatch) => ({
onClose(type) {
- if (type === 'COMPOSE') {
+ switch (type) {
+ case 'COMPOSE':
dispatch(cancelReplyCompose());
+ break;
+ case 'REPORT':
+ dispatch(cancelReport());
+ break;
+ default:
+ break;
}
dispatch(closeModal(type));