Merge branch 'add-block-report-modal' into 'master'

Add 'block user' option to the report window

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

app/soapbox/actions/reports.js

@@ -11,6 +11,7 @@ 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 REPORT_BLOCK_CHANGE   = 'REPORT_BLOCK_CHANGE';
 
 export function initReport(account, status) {
   return dispatch => {
@@ -87,3 +88,10 @@ export function changeReportForward(forward) {
     forward,
   };
 };
+
+export function changeReportBlock(block) {
+  return {
+    type: REPORT_BLOCK_CHANGE,
+    block,
+  };
+};

app/soapbox/features/ui/components/report_modal.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { changeReportComment, changeReportForward, submitReport } from '../../../actions/reports';
+import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from '../../../actions/reports';
+import { blockAccount } from '../../../actions/accounts';
 import { expandAccountTimeline } from '../../../actions/timelines';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -30,6 +31,7 @@ const makeMapStateToProps = () => {
       account: getAccount(state, accountId),
       comment: state.getIn(['reports', 'new', 'comment']),
       forward: state.getIn(['reports', 'new', 'forward']),
+      block: state.getIn(['reports', 'new', 'block']),
       statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])),
     };
   };
@@ -47,6 +49,7 @@ class ReportModal extends ImmutablePureComponent {
     statusIds: ImmutablePropTypes.orderedSet.isRequired,
     comment: PropTypes.string.isRequired,
     forward: PropTypes.bool,
+    block: PropTypes.bool,
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
@@ -59,8 +62,15 @@ class ReportModal extends ImmutablePureComponent {
     this.props.dispatch(changeReportForward(e.target.checked));
   }
 
+  handleBlockChange = e => {
+    this.props.dispatch(changeReportBlock(e.target.checked));
+  }
+
   handleSubmit = () => {
     this.props.dispatch(submitReport());
+    if (this.props.block) {
+      this.props.dispatch(blockAccount(this.props.account.get('id')));
+    }
   }
 
   handleKeyDown = e => {
@@ -80,7 +90,7 @@ class ReportModal extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, comment, intl, statusIds, isSubmitting, forward, onClose } = this.props;
+    const { account, comment, intl, statusIds, isSubmitting, forward, block, onClose } = this.props;
 
     if (!account) {
       return null;
@@ -120,6 +130,15 @@ class ReportModal extends ImmutablePureComponent {
               </div>
             )}
 
+            <div>
+              <p><FormattedMessage id='report.block_hint' defaultMessage='Do you also want to block this account?' /></p>
+
+              <div className='setting-toggle'>
+                <Toggle id='report-block' checked={block} disabled={isSubmitting} onChange={this.handleBlockChange} />
+                <label htmlFor='report-block' className='setting-toggle__label'><FormattedMessage id='report.block' defaultMessage='Block {target}' values={{ target: account.get('acct') }} /></label>
+              </div>
+            </div>
+
             <Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} />
           </div>
 

app/soapbox/locales/defaultMessages.json

@@ -2700,6 +2700,14 @@
       {
         "defaultMessage": "Forward to {target}",
         "id": "report.forward"
+      },
+      {
+        "defaultMessage": "Do you also want to block this account?",
+        "id": "report.block_hint"
+      },
+      {
+        "defaultMessage": "Block {target}",
+        "id": "report.block"
       }
     ],
     "path": "app/soapbox/features/ui/components/report_modal.json"
@@ -2894,4 +2902,4 @@
     ],
     "path": "app/soapbox/features/video/index.json"
   }
-]
+]

app/soapbox/locales/en.json

@@ -325,6 +325,8 @@
   "relative_time.minutes": "{number}m",
   "relative_time.seconds": "{number}s",
   "reply_indicator.cancel": "Cancel",
+  "report.block": "Block {target}",
+  "report.block_hint": "Do you also want to block this account?",
   "report.forward": "Forward to {target}",
   "report.forward_hint": "The account is from another server. Send an anonymized copy of the report there as well?",
   "report.hint": "The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:",

app/soapbox/reducers/reports.js

@@ -7,6 +7,7 @@ import {
   REPORT_STATUS_TOGGLE,
   REPORT_COMMENT_CHANGE,
   REPORT_FORWARD_CHANGE,
+  REPORT_BLOCK_CHANGE,
 } from '../actions/reports';
 import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable';
 
@@ -17,6 +18,7 @@ const initialState = ImmutableMap({
     status_ids: ImmutableSet(),
     comment: '',
     forward: false,
+    block: false,
   }),
 });
 
@@ -46,6 +48,8 @@ export default function reports(state = initialState, action) {
     return state.setIn(['new', 'comment'], action.comment);
   case REPORT_FORWARD_CHANGE:
     return state.setIn(['new', 'forward'], action.forward);
+  case REPORT_BLOCK_CHANGE:
+      return state.setIn(['new', 'block'], action.block);
   case REPORT_SUBMIT_REQUEST:
     return state.setIn(['new', 'isSubmitting'], true);
   case REPORT_SUBMIT_FAIL: