ComposerReply → ReplyIndicator

app/javascript/flavours/glitch/features/compose/components/compose_form.js

@@ -7,12 +7,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 //  Components.
 import ComposerOptions from '../../composer/options';
 import ComposerPublisher from '../../composer/publisher';
-import ComposerReply from '../../composer/reply';
 import ComposerSpoiler from '../../composer/spoiler';
 import ComposerTextarea from '../../composer/textarea';
 import ComposerUploadForm from '../../composer/upload_form';
 import ComposerPollForm from '../../composer/poll_form';
 import WarningContainer from '../containers/warning_container';
+import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 
 //  Utils.
 import { countableText } from 'flavours/glitch/util/counter';
@@ -49,7 +49,6 @@ class ComposeForm extends ImmutablePureComponent {
     preselectDate: PropTypes.instanceOf(Date),
     privacy: PropTypes.string,
     progress: PropTypes.number,
-    inReplyTo: ImmutablePropTypes.map,
     resetFileKey: PropTypes.number,
     sideArm: PropTypes.string,
     sensitive: PropTypes.bool,
@@ -65,7 +64,6 @@ class ComposeForm extends ImmutablePureComponent {
     preselectOnReply: PropTypes.bool,
 
     //  Dispatch props.
-    onCancelReply: PropTypes.func,
     onChangeAdvancedOption: PropTypes.func,
     onChangeDescription: PropTypes.func,
     onChangeSensitivity: PropTypes.func,
@@ -283,7 +281,6 @@ class ComposeForm extends ImmutablePureComponent {
       layout,
       media,
       poll,
-      onCancelReply,
       onChangeAdvancedOption,
       onChangeDescription,
       onChangeSensitivity,
@@ -301,7 +298,6 @@ class ComposeForm extends ImmutablePureComponent {
       onUpload,
       privacy,
       progress,
-      inReplyTo,
       resetFileKey,
       sensitive,
       showSearch,
@@ -319,13 +315,7 @@ class ComposeForm extends ImmutablePureComponent {
       <div className='composer'>
         <WarningContainer />
 
-        {inReplyTo && (
+        <ReplyIndicatorContainer />
-          <ComposerReply
-            status={inReplyTo}
-            intl={intl}
-            onCancel={onCancelReply}
-          />
-        )}
 
         <ComposerSpoiler
           hidden={!spoiler}

app/javascript/flavours/glitch/features/compose/components/reply_indicator.js

@@ -2,7 +2,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
 import AccountContainer from 'flavours/glitch/containers/account_container';
@@ -10,7 +11,6 @@ import IconButton from 'flavours/glitch/components/icon_button';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 
 //  Utils.
-import { assignHandlers } from 'flavours/glitch/util/react_helpers';
 import { isRtl } from 'flavours/glitch/util/rtl';
 
 //  Messages.
@@ -21,34 +21,30 @@ const messages = defineMessages({
   },
 });
 
-//  Handlers.
-const handlers = {
 
-  //  Handles a click on the "close" button.
+export default @injectIntl
-  handleClick () {
+class ReplyIndicator extends ImmutablePureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onCancel: PropTypes.func,
+  };
+
+  handleClick = () => {
     const { onCancel } = this.props;
     if (onCancel) {
       onCancel();
     }
-  },
-};
-
-//  The component.
-export default class ComposerReply extends React.PureComponent {
-
-  //  Constructor.
-  constructor (props) {
-    super(props);
-    assignHandlers(this, handlers);
   }
 
   //  Rendering.
   render () {
-    const { handleClick } = this.handlers;
+    const { status, intl } = this.props;
-    const {
+
-      status,
+    if (!status) {
-      intl,
+      return null;
-    } = this.props;
+    }
 
     const account     = status.get('account');
     const content     = status.get('content');
@@ -61,7 +57,7 @@ export default class ComposerReply extends React.PureComponent {
           <IconButton
             className='cancel'
             icon='times'
-            onClick={handleClick}
+            onClick={this.handleClick}
             title={intl.formatMessage(messages.cancel)}
             inverted
           />
@@ -88,9 +84,3 @@ export default class ComposerReply extends React.PureComponent {
   }
 
 }
-
-ComposerReply.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  intl: PropTypes.object.isRequired,
-  onCancel: PropTypes.func,
-};

app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js

@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import ComposeForm from '../components/compose_form';
 import {
-  cancelReplyCompose,
   changeCompose,
   changeComposeAdvancedOption,
   changeComposeSensitivity,
@@ -68,9 +67,6 @@ function mapStateToProps (state) {
     preselectDate: state.getIn(['compose', 'preselectDate']),
     privacy: state.getIn(['compose', 'privacy']),
     progress: state.getIn(['compose', 'progress']),
-    inReplyTo: inReplyTo ? state.getIn(['statuses', inReplyTo]) : null,
-    replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
-    replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
     resetFileKey: state.getIn(['compose', 'resetFileKey']),
     sideArm: sideArmPrivacy,
     sensitive: state.getIn(['compose', 'sensitive']),
@@ -90,9 +86,6 @@ function mapStateToProps (state) {
 
 //  Dispatch mapping.
 const mapDispatchToProps = (dispatch, { intl }) => ({
-  onCancelReply() {
-    dispatch(cancelReplyCompose());
-  },
   onChangeAdvancedOption(option, value) {
     dispatch(changeComposeAdvancedOption(option, value));
   },

app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import { cancelReplyCompose } from 'flavours/glitch/actions/compose';
+import { makeGetStatus } from 'flavours/glitch/selectors';
+import ReplyIndicator from '../components/reply_indicator';
+
+function makeMapStateToProps (state) {
+  const inReplyTo = state.getIn(['compose', 'in_reply_to']);
+
+  return {
+    status: inReplyTo ? state.getIn(['statuses', inReplyTo]) : null,
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+
+  onCancel () {
+    dispatch(cancelReplyCompose());
+  },
+
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(ReplyIndicator);