Making upload button into a smaller icon button

app/assets/javascripts/components/actions/follow.jsx

-import api from '../api'
-
-export const FOLLOW_CHANGE         = 'FOLLOW_CHANGE';
-export const FOLLOW_SUBMIT_REQUEST = 'FOLLOW_SUBMIT_REQUEST';
-export const FOLLOW_SUBMIT_SUCCESS = 'FOLLOW_SUBMIT_SUCCESS';
-export const FOLLOW_SUBMIT_FAIL    = 'FOLLOW_SUBMIT_FAIL';
-
-export function changeFollow(text) {
-  return {
-    type: FOLLOW_CHANGE,
-    text: text
-  };
-};
-
-export function submitFollow(router) {
-  return function (dispatch, getState) {
-    dispatch(submitFollowRequest());
-
-    api(getState).post('/api/v1/follows', {
-      uri: getState().getIn(['follow', 'text'])
-    }).then(function (response) {
-      dispatch(submitFollowSuccess(response.data));
-      router.push(`/accounts/${response.data.id}`);
-    }).catch(function (error) {
-      dispatch(submitFollowFail(error));
-    });
-  };
-};
-
-export function submitFollowRequest() {
-  return {
-    type: FOLLOW_SUBMIT_REQUEST
-  };
-};
-
-export function submitFollowSuccess(account) {
-  return {
-    type: FOLLOW_SUBMIT_SUCCESS,
-    account: account
-  };
-};
-
-export function submitFollowFail(error) {
-  return {
-    type: FOLLOW_SUBMIT_FAIL,
-    error: error
-  };
-};

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

@@ -7,6 +7,7 @@ import UploadButton from './upload_button';
 import Autosuggest from 'react-autosuggest';
 import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container';
 import { debounce } from 'react-decoration';
+import UploadButtonContainer from '../containers/upload_button_container';
 
 const getTokenForSuggestions = (str, caretPosition) => {
   let word;
@@ -168,6 +169,7 @@ const ComposeForm = React.createClass({
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
           <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={disabled} /></div>
           <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div>
+          <UploadButtonContainer style={{ paddingTop: '4px' }} />
         </div>
       </div>
     );

app/assets/javascripts/components/features/ui/components/upload_button.jsx → app/assets/javascripts/components/features/compose/components/upload_button.jsx

 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Button          from '../../../components/button';
+import IconButton from '../../../components/icon_button';
 
 const UploadButton = React.createClass({
 
   propTypes: {
     disabled: React.PropTypes.bool,
-    onSelectFile: React.PropTypes.func.isRequired
+    onSelectFile: React.PropTypes.func.isRequired,
+    style: React.PropTypes.object
   },
 
   mixins: [PureRenderMixin],
@@ -17,17 +18,18 @@ const UploadButton = React.createClass({
   },
 
   handleClick () {
-    this.refs.fileElement.click();
+    this.fileElement.click();
+  },
+
+  setRef (c) {
+    this.fileElement = c;
   },
 
   render () {
     return (
-      <div>
-        <Button disabled={this.props.disabled} onClick={this.handleClick} block={true}>
-          <i className='fa fa-fw fa-photo' /> Add media
-        </Button>
-
-        <input ref='fileElement' type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} />
+      <div style={this.props.style}>
+        <IconButton icon='photo' title='Add media' disabled={this.props.disabled} onClick={this.handleClick} size={24} />
+        <input ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} />
       </div>
     );
   }

app/assets/javascripts/components/features/ui/components/upload_form.jsx → app/assets/javascripts/components/features/compose/components/upload_form.jsx

 import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import UploadButton       from './upload_button';
 import IconButton         from '../../../components/icon_button';
 
 const UploadForm = React.createClass({
@@ -15,25 +14,17 @@ const UploadForm = React.createClass({
   mixins: [PureRenderMixin],
 
   render () {
-    let uploads = this.props.media.map(function (attachment) {
-      return (
-        <div key={attachment.get('id')} style={{ borderRadius: '4px', marginBottom: '10px' }} className='transparent-background'>
-          <div style={{ width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
-            <IconButton icon='times' title='Undo' size={36} onClick={() => this.props.onRemoveFile(attachment.get('id'))} />
-          </div>
+    const uploads = this.props.media.map(attachment => (
+      <div key={attachment.get('id')} style={{ borderRadius: '4px', marginBottom: '10px' }} className='transparent-background'>
+        <div style={{ width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
+          <IconButton icon='times' title='Undo' size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
         </div>
-      );
-    }.bind(this));
-
-    const noMoreAllowed = (this.props.media.some(m => m.get('type') === 'video')) || (this.props.media.size > 3);
+      </div>
+    ));
 
     return (
-      <div style={{ marginBottom: '20px', padding: '10px', paddingTop: '0' }}>
-        <UploadButton onSelectFile={this.props.onSelectFile} disabled={this.props.is_uploading || noMoreAllowed } />
-
-        <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-          {uploads}
-        </div>
+      <div style={{ marginBottom: '20px', padding: '10px', overflow: 'hidden' }}>
+        {uploads}
       </div>
     );
   }

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

+import { connect } from 'react-redux';
+import UploadButton from '../components/upload_button';
+import { uploadCompose } from '../../../actions/compose';
+
+const mapStateToProps = state => ({
+  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onSelectFile (files) {
+    dispatch(uploadCompose(files));
+  }
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadButton);

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

+import { connect } from 'react-redux';
+import UploadForm from '../components/upload_form';
+import { undoUploadCompose } from '../../../actions/compose';
+
+const mapStateToProps = (state, props) => ({
+  media: state.getIn(['compose', 'media_attachments']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onRemoveFile (media_id) {
+    dispatch(undoUploadCompose(media_id));
+  }
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadForm);

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

-import Drawer               from '../ui/components/drawer';
-import ComposeFormContainer from '../ui/containers/compose_form_container';
-import FollowFormContainer  from '../ui/containers/follow_form_container';
-import UploadFormContainer  from '../ui/containers/upload_form_container';
-import NavigationContainer  from '../ui/containers/navigation_container';
+import Drawer               from './components/drawer';
+import ComposeFormContainer from './containers/compose_form_container';
+import UploadFormContainer  from './containers/upload_form_container';
+import NavigationContainer  from './containers/navigation_container';
 import PureRenderMixin      from 'react-addons-pure-render-mixin';
 import SuggestionsContainer from './containers/suggestions_container';
 import SearchContainer      from './containers/search_container';

app/assets/javascripts/components/features/ui/components/follow_form.jsx

-import IconButton      from '../../../components/icon_button';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-const FollowForm = React.createClass({
-
-  contextTypes: {
-    router: React.PropTypes.object
-  },
-
-  propTypes: {
-    text: React.PropTypes.string.isRequired,
-    is_submitting: React.PropTypes.bool,
-    onChange: React.PropTypes.func.isRequired,
-    onSubmit: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  handleChange (e) {
-    this.props.onChange(e.target.value);
-  },
-
-  handleKeyUp (e) {
-    if (e.keyCode === 13) {
-      this.handleSubmit();
-    }
-  },
-
-  handleSubmit () {
-    this.props.onSubmit(this.context.router);
-  },
-
-  render () {
-    return (
-      <div style={{ display: 'flex', lineHeight: '20px', padding: '10px', background: '#373b4a' }}>
-        <input autoComplete='off' type='text' disabled={this.props.is_submitting} placeholder='username@domain' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='follow-form__input' style={{ flex: '1 1 auto', boxSizing: 'border-box', display: 'block', border: 'none', padding: '10px', fontFamily: 'Roboto', color: '#282c37', fontSize: '14px', margin: '0' }} />
-        <div style={{ padding: '10px', paddingRight: '0' }}><IconButton title='Follow' size={20} icon='user-plus' onClick={this.handleSubmit} disabled={this.props.is_submitting} /></div>
-      </div>
-    );
-  }
-
-});
-
-export default FollowForm;

app/assets/javascripts/components/features/ui/containers/follow_form_container.jsx

-import { connect }                    from 'react-redux';
-import FollowForm                     from '../components/follow_form';
-import { changeFollow, submitFollow } from '../../../actions/follow';
-
-const mapStateToProps = function (state, props) {
-  return {
-    text: state.getIn(['follow', 'text']),
-    is_submitting: state.getIn(['follow', 'is_submitting'])
-  };
-};
-
-const mapDispatchToProps = function (dispatch) {
-  return {
-    onChange: function (text) {
-      dispatch(changeFollow(text));
-    },
-
-    onSubmit: function (router) {
-      dispatch(submitFollow(router));
-    }
-  }
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(FollowForm);

app/assets/javascripts/components/features/ui/containers/upload_form_container.jsx

-import { connect }                          from 'react-redux';
-import UploadForm                           from '../components/upload_form';
-import { uploadCompose, undoUploadCompose } from '../../../actions/compose';
-
-const mapStateToProps = function (state, props) {
-  return {
-    media: state.getIn(['compose', 'media_attachments']),
-    progress: state.getIn(['compose', 'progress']),
-    is_uploading: state.getIn(['compose', 'is_uploading'])
-  };
-};
-
-const mapDispatchToProps = function (dispatch) {
-  return {
-    onSelectFile: function (files) {
-      dispatch(uploadCompose(files));
-    },
-
-    onRemoveFile: function (media_id) {
-      dispatch(undoUploadCompose(media_id));
-    }
-  }
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(UploadForm);

app/assets/javascripts/components/reducers/follow.jsx

-import {
-  FOLLOW_CHANGE,
-  FOLLOW_SUBMIT_REQUEST,
-  FOLLOW_SUBMIT_SUCCESS,
-  FOLLOW_SUBMIT_FAIL
-} from '../actions/follow';
-import Immutable from 'immutable';
-
-const initialState = Immutable.Map({
-  text: '',
-  is_submitting: false
-});
-
-export default function follow(state = initialState, action) {
-  switch(action.type) {
-    case FOLLOW_CHANGE:
-      return state.set('text', action.text);
-    case FOLLOW_SUBMIT_REQUEST:
-      return state.set('is_submitting', true);
-    case FOLLOW_SUBMIT_SUCCESS:
-      return state.withMutations(map => {
-        map.set('text', '').set('is_submitting', false);
-      });
-    case FOLLOW_SUBMIT_FAIL:
-      return state.set('is_submitting', false);
-    default:
-      return state;
-  }
-};

app/assets/javascripts/components/reducers/index.jsx

@@ -2,7 +2,6 @@ import { combineReducers }   from 'redux-immutable';
 import timelines             from './timelines';
 import meta                  from './meta';
 import compose               from './compose';
-import follow                from './follow';
 import notifications         from './notifications';
 import { loadingBarReducer } from 'react-redux-loading-bar';
 import modal                 from './modal';
@@ -16,7 +15,6 @@ export default combineReducers({
   timelines,
   meta,
   compose,
-  follow,
   notifications,
   loadingBar: loadingBarReducer,
   modal,