Merge branch 'improve-reporting' into 'develop'

ReportModal fixes

See merge request soapbox-pub/soapbox-fe!1297

app/soapbox/actions/reports.js

@@ -56,12 +56,14 @@ export function toggleStatusReport(statusId, checked) {
 export function submitReport() {
   return (dispatch, getState) => {
     dispatch(submitReportRequest());
+    const { reports } = getState();
 
     return api(getState).post('/api/v1/reports', {
-      account_id: getState().getIn(['reports', 'new', 'account_id']),
-      status_ids: getState().getIn(['reports', 'new', 'status_ids']),
-      comment: getState().getIn(['reports', 'new', 'comment']),
-      forward: getState().getIn(['reports', 'new', 'forward']),
+      account_id: reports.getIn(['new', 'account_id']),
+      status_ids: reports.getIn(['new', 'status_ids']),
+      rule_ids: reports.getIn(['new', 'rule_ids']),
+      comment: reports.getIn(['new', 'comment']),
+      forward: reports.getIn(['new', 'forward']),
     });
   };
 }

app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx

@@ -28,6 +28,7 @@ describe('<ReportModal />', () => {
         new: {
           account_id: '1',
           status_ids: ImmutableSet(['1']),
+          rule_ids: ImmutableSet(),
         },
       }),
       statuses: ImmutableMap({

app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx

@@ -84,7 +84,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
   const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
   const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
   const rules = useAppSelector((state) => state.rules.items);
-  const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as string);
+  const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet<string>);
   const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
 
   const shouldRequireRule = rules.length > 0;
@@ -152,8 +152,8 @@ const ReportModal = ({ onClose }: IReportModal) => {
       return false;
     }
 
-    return isSubmitting || (shouldRequireRule && !ruleId) || selectedStatusIds.size === 0;
-  }, [currentStep, isSubmitting, shouldRequireRule, ruleId, selectedStatusIds.size]);
+    return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || selectedStatusIds.size === 0;
+  }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size]);
 
   const calculateProgress = useCallback(() => {
     switch (currentStep) {

app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx

@@ -32,7 +32,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
 
   const statusIds = useAppSelector((state) => OrderedSet(state.timelines.getIn([`account:${account.id}:with_replies`, 'items'])).union(state.reports.getIn(['new', 'status_ids']) as Iterable<unknown>) as OrderedSet<string>);
   const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
-  const isForward = useAppSelector((state) => state.reports.getIn(['reports', 'forward']) as boolean);
+  const isForward = useAppSelector((state) => state.reports.getIn(['new', 'forward']) as boolean);
   const canForward = isRemote(account as any) && features.federating;
   const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
 

app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx

@@ -8,6 +8,7 @@ import { fetchRules } from 'soapbox/actions/rules';
 import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
+import type { Set as ImmutableSet } from 'immutable';
 import type { ReducerAccount } from 'soapbox/reducers/accounts';
 
 const messages = defineMessages({
@@ -32,7 +33,7 @@ const ReasonStep = (_props: IReasonStep) => {
 
   const comment = useAppSelector((state) => state.reports.getIn(['new', 'comment']) as string);
   const rules = useAppSelector((state) => state.rules.items);
-  const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as boolean);
+  const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet<string>);
   const shouldRequireRule = rules.length > 0;
 
   const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -87,7 +88,7 @@ const ReasonStep = (_props: IReasonStep) => {
               ref={rulesListRef}
             >
               {rules.map((rule, idx) => {
-                const isSelected = String(ruleId) === String(rule.id);
+                const isSelected = ruleIds.includes(String(rule.id));
 
                 return (
                   <button

app/soapbox/reducers/__tests__/reports-test.js

@@ -12,7 +12,7 @@ describe('reports reducer', () => {
         comment: '',
         forward: false,
         block: false,
-        rule_id: null,
+        rule_ids: ImmutableSet(),
       }),
     }));
   });

app/soapbox/reducers/reports.js

@@ -21,7 +21,7 @@ const initialState = ImmutableMap({
     comment: '',
     forward: false,
     block: false,
-    rule_id: null,
+    rule_ids: ImmutableSet(),
   }),
 });
 
@@ -54,7 +54,7 @@ export default function reports(state = initialState, action) {
   case REPORT_BLOCK_CHANGE:
     return state.setIn(['new', 'block'], action.block);
   case REPORT_RULE_CHANGE:
-    return state.setIn(['new', 'rule_id'], action.rule_id);
+    return state.setIn(['new', 'rule_ids'], ImmutableSet([action.rule_id]));
   case REPORT_SUBMIT_REQUEST:
     return state.setIn(['new', 'isSubmitting'], true);
   case REPORT_SUBMIT_FAIL:
@@ -66,7 +66,7 @@ export default function reports(state = initialState, action) {
       map.setIn(['new', 'status_ids'], ImmutableSet());
       map.setIn(['new', 'comment'], '');
       map.setIn(['new', 'isSubmitting'], false);
-      map.setIn(['new', 'rule_id'], null);
+      map.setIn(['new', 'rule_ids'], ImmutableSet());
       map.setIn(['new', 'block'], false);
     });
   default: