Turn report screen into a modal (#3965)

app/javascript/mastodon/features/account_timeline/components/header.js

@@ -38,7 +38,6 @@ export default class Header extends ImmutablePureComponent {
 
   handleReport = () => {
     this.props.onReport(this.props.account);
-    this.context.router.history.push('/report');
   }
 
   handleMute = () => {

app/javascript/mastodon/features/status/components/action_bar.js

@@ -56,7 +56,6 @@ export default class ActionBar extends React.PureComponent {
 
   handleReport = () => {
     this.props.onReport(this.props.status);
-    this.context.router.history.push('/report');
   }
 
   render () {

app/javascript/mastodon/features/ui/components/modal_root.js

@@ -5,6 +5,7 @@ import OnboardingModal from './onboarding_modal';
 import VideoModal from './video_modal';
 import BoostModal from './boost_modal';
 import ConfirmationModal from './confirmation_modal';
+import ReportModal from './report_modal';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
 
@@ -14,6 +15,7 @@ const MODAL_COMPONENTS = {
   'VIDEO': VideoModal,
   'BOOST': BoostModal,
   'CONFIRM': ConfirmationModal,
+  'REPORT': ReportModal,
 };
 
 export default class ModalRoot extends React.PureComponent {

app/javascript/mastodon/features/ui/components/report_modal.js

@@ -1,19 +1,17 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { changeReportComment, submitReport } from '../../actions/reports';
-import { refreshAccountTimeline } from '../../actions/timelines';
+import { changeReportComment, submitReport } from '../../../actions/reports';
+import { refreshAccountTimeline } from '../../../actions/timelines';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Column from '../ui/components/column';
-import Button from '../../components/button';
-import { makeGetAccount } from '../../selectors';
+import { makeGetAccount } from '../../../selectors';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import StatusCheckBox from './containers/status_check_box_container';
+import StatusCheckBox from '../../report/containers/status_check_box_container';
 import Immutable from 'immutable';
-import ColumnBackButtonSlim from '../../components/column_back_button_slim';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import Button from '../../../components/button';
 
 const messages = defineMessages({
-  heading: { id: 'report.heading', defaultMessage: 'New report' },
   placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
   submit: { id: 'report.submit', defaultMessage: 'Submit' },
 });
@@ -37,11 +35,7 @@ const makeMapStateToProps = () => {
 
 @connect(makeMapStateToProps)
 @injectIntl
-export default class Report extends React.PureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
+export default class ReportModal extends ImmutablePureComponent {
 
   static propTypes = {
     isSubmitting: PropTypes.bool,
@@ -52,17 +46,15 @@ export default class Report extends React.PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  componentWillMount () {
-    if (!this.props.account) {
-      this.context.router.history.replace('/');
-    }
+  handleCommentChange = (e) => {
+    this.props.dispatch(changeReportComment(e.target.value));
+  }
+
+  handleSubmit = () => {
+    this.props.dispatch(submitReport());
   }
 
   componentDidMount () {
-    if (!this.props.account) {
-      return;
-    }
-
     this.props.dispatch(refreshAccountTimeline(this.props.account.get('id')));
   }
 
@@ -72,15 +64,6 @@ export default class Report extends React.PureComponent {
     }
   }
 
-  handleCommentChange = (e) => {
-    this.props.dispatch(changeReportComment(e.target.value));
-  }
-
-  handleSubmit = () => {
-    this.props.dispatch(submitReport());
-    this.context.router.history.replace('/');
-  }
-
   render () {
     const { account, comment, intl, statusIds, isSubmitting } = this.props;
 
@@ -89,36 +72,33 @@ export default class Report extends React.PureComponent {
     }
 
     return (
-      <Column heading={intl.formatMessage(messages.heading)} icon='flag'>
-        <ColumnBackButtonSlim />
+      <div className='modal-root__modal report-modal'>
+        <div className='report-modal__target'>
+          <FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
+        </div>
 
-        <div className='report scrollable'>
-          <div className='report__target'>
-            <FormattedMessage id='report.target' defaultMessage='Reporting' />
-            <strong>{account.get('acct')}</strong>
-          </div>
-
-          <div className='scrollable report__statuses'>
+        <div className='report-modal__container'>
+          <div className='report-modal__statuses'>
             <div>
               {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
             </div>
           </div>
 
-          <div className='report__textarea-wrapper'>
+          <div className='report-modal__comment'>
             <textarea
-              className='report__textarea'
+              className='setting-text light'
               placeholder={intl.formatMessage(messages.placeholder)}
               value={comment}
               onChange={this.handleCommentChange}
               disabled={isSubmitting}
             />
-
-            <div className='report__submit'>
-              <div className='report__submit-button'><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div>
-            </div>
           </div>
         </div>
-      </Column>
+
+        <div className='report-modal__action-bar'>
+          <Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} />
+        </div>
+      </div>
     );
   }
 

app/javascript/mastodon/features/ui/index.js

@@ -15,7 +15,6 @@ import { refreshHomeTimeline } from '../../actions/timelines';
 import { refreshNotifications } from '../../actions/notifications';
 import UploadArea from './components/upload_area';
 import ColumnsAreaContainer from './containers/columns_area_container';
-
 import Status from '../../features/status';
 import GettingStarted from '../../features/getting_started';
 import PublicTimeline from '../../features/public_timeline';
@@ -35,7 +34,6 @@ import GenericNotFound from '../../features/generic_not_found';
 import FavouritedStatuses from '../../features/favourited_statuses';
 import Blocks from '../../features/blocks';
 import Mutes from '../../features/mutes';
-import Report from '../../features/report';
 
 // Small wrapper to pass multiColumn to the route components
 const WrappedSwitch = ({ multiColumn, children }) => (
@@ -206,7 +204,6 @@ export default class UI extends React.PureComponent {
             <WrappedRoute path='/follow_requests' component={FollowRequests} content={children} />
             <WrappedRoute path='/blocks' component={Blocks} content={children} />
             <WrappedRoute path='/mutes' component={Mutes} content={children} />
-            <WrappedRoute path='/report' component={Report} content={children} />
 
             <WrappedRoute component={GenericNotFound} content={children} />
           </WrappedSwitch>