Better smart/dumb component separation

app/assets/javascripts/components/components/autosuggest_textarea.jsx

@@ -1,8 +1,6 @@
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { isRtl } from '../rtl';
-import { connect } from 'react-redux';
-import { uploadCompose } from '../actions/compose';
 
 const textAtCursorMatchesToken = (str, caretPosition) => {
   let word;
@@ -35,7 +33,6 @@ const AutosuggestTextarea = React.createClass({
     value: React.PropTypes.string,
     suggestions: ImmutablePropTypes.list,
     disabled: React.PropTypes.bool,
-    dispatch: React.PropTypes.func.isRequired,
     fileDropDate: React.PropTypes.instanceOf(Date),
     placeholder: React.PropTypes.string,
     onSuggestionSelected: React.PropTypes.func.isRequired,
@@ -43,7 +40,8 @@ const AutosuggestTextarea = React.createClass({
     onSuggestionsFetchRequested: React.PropTypes.func.isRequired,
     onChange: React.PropTypes.func.isRequired,
     onKeyUp: React.PropTypes.func,
-    onKeyDown: React.PropTypes.func
+    onKeyDown: React.PropTypes.func,
+    onPaste: React.PropTypes.func.isRequired,
   },
 
   getInitialState () {
@@ -178,7 +176,7 @@ const AutosuggestTextarea = React.createClass({
 
   onPaste (e) {
     if (e.clipboardData && e.clipboardData.files.length === 1) {
-      this.props.dispatch(uploadCompose(e.clipboardData.files));
+      this.props.onPaste(e.clipboardData.files)
       e.preventDefault();
     }
   },
@@ -225,4 +223,4 @@ const AutosuggestTextarea = React.createClass({
 
 });
 
-export default connect()(AutosuggestTextarea);
+export default AutosuggestTextarea;

app/assets/javascripts/components/features/compose/components/compose_form.jsx

@@ -47,6 +47,7 @@ const ComposeForm = React.createClass({
     onFetchSuggestions: React.PropTypes.func.isRequired,
     onSuggestionSelected: React.PropTypes.func.isRequired,
     onChangeSpoilerText: React.PropTypes.func.isRequired,
+    onPaste: React.PropTypes.func.isRequired,
   },
 
   mixins: [PureRenderMixin],
@@ -82,6 +83,10 @@ const ComposeForm = React.createClass({
     this.props.onChangeSpoilerText(e.target.value);
   },
 
+  onPaste (files) {
+    this.props.onPaste(files);
+  },
+
   componentDidUpdate (prevProps) {
     if (this.props.focusDate !== prevProps.focusDate) {
       // If replying to zero or one users, places the cursor at the end of the textbox.
@@ -149,6 +154,7 @@ const ComposeForm = React.createClass({
           onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
           onSuggestionsClearRequested={this.onSuggestionsClearRequested}
           onSuggestionSelected={this.onSuggestionSelected}
+          onPaste={this.onPaste}
         />
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>

app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import ComposeForm from '../components/compose_form';
+import { uploadCompose } from '../../../actions/compose';
 import { createSelector } from 'reselect';
 import {
   changeCompose,
@@ -65,6 +66,10 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(changeComposeSpoilerText(checked));
   },
 
+  onPaste (files) {
+    dispatch(uploadCompose(files));
+  },
+
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);