diff --git a/app/javascript/flavours/glitch/features/report/category.jsx b/app/javascript/flavours/glitch/features/report/category.jsx
index c4b9273be5..a0ec40794f 100644
--- a/app/javascript/flavours/glitch/features/report/category.jsx
+++ b/app/javascript/flavours/glitch/features/report/category.jsx
@@ -66,7 +66,7 @@ class Category extends PureComponent {
render () {
const { category, startedFrom, rules, intl } = this.props;
- const options = rules.length > 0 ? [
+ let options = rules.length > 0 ? [
'spam',
'violation',
'other',
@@ -75,10 +75,21 @@ class Category extends PureComponent {
'other',
];
+ if (startedFrom === 'collection') {
+ options = options.filter(item => item !== 'dislike');
+ }
+
return (
<>
-
+ {startedFrom === 'collection' ? (
+
+ ) : (
+
+ )}
diff --git a/app/javascript/flavours/glitch/features/ui/components/report_collection_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/report_collection_modal.tsx
index f0d2dd4260..eda0bcd967 100644
--- a/app/javascript/flavours/glitch/features/ui/components/report_collection_modal.tsx
+++ b/app/javascript/flavours/glitch/features/ui/components/report_collection_modal.tsx
@@ -13,7 +13,9 @@ import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_foc
import { useAccount } from 'flavours/glitch/hooks/useAccount';
import { useAppDispatch } from 'flavours/glitch/store';
+import Category from '../../report/category';
import Comment from '../../report/comment';
+import Rules from '../../report/rules';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -60,8 +62,14 @@ export const ReportCollectionModal: React.FC<{
'idle' | 'submitting' | 'submitted' | 'error'
>('idle');
- const [step, setStep] = useState<'comment' | 'thanks'>('comment');
+ const [step, setStep] = useState<'category' | 'rules' | 'comment' | 'thanks'>(
+ 'category',
+ );
+ const [category, setCategory] = useState<
+ 'spam' | 'legal' | 'violation' | 'other' | null
+ >(null);
+ const [selectedRuleIds, setSelectedRuleIds] = useState([]);
const [comment, setComment] = useState('');
const [selectedDomains, setSelectedDomains] = useState([]);
@@ -73,6 +81,22 @@ export const ReportCollectionModal: React.FC<{
}
}, []);
+ const handleRuleToggle = useCallback((ruleId: string) => {
+ setSelectedRuleIds((ruleIds) =>
+ ruleIds.includes(ruleId)
+ ? ruleIds.filter((id) => ruleId !== id)
+ : [...ruleIds, ruleId],
+ );
+ }, []);
+
+ const handleNextStep = useCallback(() => {
+ if (step === 'category' && category === 'violation') {
+ setStep('rules');
+ } else {
+ setStep('comment');
+ }
+ }, [category, step]);
+
const handleSubmit = useCallback(() => {
setSubmitState('submitting');
@@ -85,7 +109,8 @@ export const ReportCollectionModal: React.FC<{
forward_to_domains: selectedDomains,
comment,
forward: selectedDomains.length > 0,
- category: 'spam',
+ category: category ?? 'other',
+ rule_ids: selectedRuleIds,
},
() => {
setSubmitState('submitted');
@@ -96,7 +121,15 @@ export const ReportCollectionModal: React.FC<{
},
),
);
- }, [account_id, comment, dispatch, collectionId, selectedDomains]);
+ }, [
+ account_id,
+ category,
+ selectedRuleIds,
+ comment,
+ dispatch,
+ collectionId,
+ selectedDomains,
+ ]);
if (!account) {
return null;
@@ -108,15 +141,28 @@ export const ReportCollectionModal: React.FC<{
let stepComponent;
switch (step) {
+ case 'category':
+ stepComponent = (
+
+ );
+ break;
+ case 'rules':
+ stepComponent = (
+
+ );
+ break;
case 'comment':
stepComponent = (
- }
submitError={
submitState === 'error' && (