Change report modal to include category selection in web UI (#17565)

* Change report modal to include category selection in web UI

* Various fixes and improvements

- Change thank you text to be different based on category
- Change starting headline to be different for account and status reports
- Change toggle components to have a checkmark when checked
- Fix report dialog being cut off on small screens
- Fix thank you screen offering mute or block if already muted or blocked
- Refactor toggle components in report dialog into one component

* Change wording on final screen

* Change checkboxes to be square when multiple options are possible

app/javascript/mastodon/actions/reports.js

@@ -1,89 +1,38 @@
 import api from '../api';
-import { openModal, closeModal } from './modal';
-
-export const REPORT_INIT   = 'REPORT_INIT';
-export const REPORT_CANCEL = 'REPORT_CANCEL';
+import { openModal } from './modal';
 
 export const REPORT_SUBMIT_REQUEST = 'REPORT_SUBMIT_REQUEST';
 export const REPORT_SUBMIT_SUCCESS = 'REPORT_SUBMIT_SUCCESS';
 export const REPORT_SUBMIT_FAIL    = 'REPORT_SUBMIT_FAIL';
 
-export const REPORT_STATUS_TOGGLE  = 'REPORT_STATUS_TOGGLE';
-export const REPORT_COMMENT_CHANGE = 'REPORT_COMMENT_CHANGE';
-export const REPORT_FORWARD_CHANGE = 'REPORT_FORWARD_CHANGE';
+export const initReport = (account, status) => dispatch =>
+  dispatch(openModal('REPORT', {
+    accountId: account.get('id'),
+    statusId: status.get('id'),
+  }));
 
-export function initReport(account, status) {
-  return dispatch => {
-    dispatch({
-      type: REPORT_INIT,
-      account,
-      status,
-    });
+export const submitReport = (params, onSuccess, onFail) => (dispatch, getState) => {
+  dispatch(submitReportRequest());
 
-    dispatch(openModal('REPORT'));
-  };
+  api(getState).post('/api/v1/reports', params).then(response => {
+    dispatch(submitReportSuccess(response.data));
+    if (onSuccess) onSuccess();
+  }).catch(error => {
+    dispatch(submitReportFail(error));
+    if (onFail) onFail();
+  });
 };
 
-export function cancelReport() {
-  return {
-    type: REPORT_CANCEL,
-  };
-};
+export const submitReportRequest = () => ({
+  type: REPORT_SUBMIT_REQUEST,
+});
 
-export function toggleStatusReport(statusId, checked) {
-  return {
-    type: REPORT_STATUS_TOGGLE,
-    statusId,
-    checked,
-  };
-};
+export const submitReportSuccess = report => ({
+  type: REPORT_SUBMIT_SUCCESS,
+  report,
+});
 
-export function submitReport() {
-  return (dispatch, getState) => {
-    dispatch(submitReportRequest());
-
-    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']),
-    }).then(response => {
-      dispatch(closeModal());
-      dispatch(submitReportSuccess(response.data));
-    }).catch(error => dispatch(submitReportFail(error)));
-  };
-};
-
-export function submitReportRequest() {
-  return {
-    type: REPORT_SUBMIT_REQUEST,
-  };
-};
-
-export function submitReportSuccess(report) {
-  return {
-    type: REPORT_SUBMIT_SUCCESS,
-    report,
-  };
-};
-
-export function submitReportFail(error) {
-  return {
-    type: REPORT_SUBMIT_FAIL,
-    error,
-  };
-};
-
-export function changeReportComment(comment) {
-  return {
-    type: REPORT_COMMENT_CHANGE,
-    comment,
-  };
-};
-
-export function changeReportForward(forward) {
-  return {
-    type: REPORT_FORWARD_CHANGE,
-    forward,
-  };
-};
+export const submitReportFail = error => ({
+  type: REPORT_SUBMIT_FAIL,
+  error,
+});