diff --git a/app/javascript/mastodon/features/report/category.jsx b/app/javascript/mastodon/features/report/category.jsx index b97347279b..539f1d8bda 100644 --- a/app/javascript/mastodon/features/report/category.jsx +++ b/app/javascript/mastodon/features/report/category.jsx @@ -68,7 +68,7 @@ class Category extends PureComponent { render () { const { category, startedFrom, rules, intl } = this.props; - const options = rules.length > 0 ? [ + let options = rules.length > 0 ? [ 'dislike', 'spam', 'legal', @@ -81,10 +81,21 @@ class Category extends PureComponent { 'other', ]; + if (startedFrom === 'collection') { + options = options.filter(item => item !== 'dislike'); + } + return ( <> - + {startedFrom === 'collection' ? ( + + ) : ( + + )}

diff --git a/app/javascript/mastodon/features/ui/components/report_collection_modal.tsx b/app/javascript/mastodon/features/ui/components/report_collection_modal.tsx index 9113491a5a..8c700bc898 100644 --- a/app/javascript/mastodon/features/ui/components/report_collection_modal.tsx +++ b/app/javascript/mastodon/features/ui/components/report_collection_modal.tsx @@ -13,7 +13,9 @@ import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_targ import { useAccount } from 'mastodon/hooks/useAccount'; import { useAppDispatch } from 'mastodon/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' && (