Cleaning up action names and compose drawer

app/assets/javascripts/components/components/avatar.jsx

@@ -1,9 +1,13 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
 const Avatar = React.createClass({
 
   propTypes: {
     src: React.PropTypes.string.isRequired
   },
 
+  mixins: [PureRenderMixin],
+
   render () {
     return (
       <div style={{ width: '48px', height: '48px', flex: '0 0 auto' }}>

app/assets/javascripts/components/components/button.jsx

@@ -1,12 +1,21 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
 const Button = React.createClass({
+
   propTypes: {
     text: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func
+    onClick: React.PropTypes.func,
+    disabled: React.PropTypes.boolean
   },
 
+  mixins: [PureRenderMixin],
+
   handleClick (e) {
     e.preventDefault();
-    this.props.onClick();
+
+    if (!this.props.disabled) {
+      this.props.onClick();
+    }
   },
 
   render () {

app/assets/javascripts/components/components/character_counter.jsx

@@ -1,8 +1,13 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
 const CharacterCounter = React.createClass({
+
   propTypes: {
     text: React.PropTypes.string.isRequired
   },
 
+  mixins: [PureRenderMixin],
+
   render () {
     return (
       <span style={{ fontSize: '16px', cursor: 'default' }}>

app/assets/javascripts/components/components/column.jsx

@@ -1,12 +1,16 @@
 import StatusListContainer from '../containers/status_list_container';
 import ColumnHeader        from './column_header';
+import PureRenderMixin     from 'react-addons-pure-render-mixin';
 
 const Column = React.createClass({
+
   propTypes: {
     type: React.PropTypes.string
   },
 
-  render: function() {
+  mixins: [PureRenderMixin],
+
+  render () {
     return (
       <div style={{ width: '380px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
         <ColumnHeader type={this.props.type} />
@@ -14,6 +18,7 @@ const Column = React.createClass({
       </div>
     );
   }
+
 });
 
 export default Column;

app/assets/javascripts/components/components/column_header.jsx

@@ -1,15 +1,21 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
 const ColumnHeader = React.createClass({
+
   propTypes: {
     type: React.PropTypes.string
   },
 
-  render: function() {
+  mixins: [PureRenderMixin],
+
+  render () {
     return (
       <div style={{ padding: '15px', fontSize: '16px', background: '#2f3441', flex: '0 0 auto' }}>
         {this.props.type}
       </div>
     );
   }
+
 });
 
 export default ColumnHeader;

app/assets/javascripts/components/components/columns_area.jsx

@@ -1,8 +1,11 @@
-import Column from './column';
+import Column          from './column';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 const ColumnsArea = React.createClass({
 
-  render: function() {
+  mixins: [PureRenderMixin],
+
+  render () {
     return (
       <div style={{ display: 'flex', flexDirection: 'row', flex: '1' }}>
         <Column type='home' />
@@ -10,6 +13,7 @@ const ColumnsArea = React.createClass({
       </div>
     );
   }
+
 });
 
 export default ColumnsArea;

app/assets/javascripts/components/components/composer_drawer.jsx

@@ -1,42 +1,40 @@
 import CharacterCounter from './character_counter';
 import Button           from './button';
-import { publish }      from '../actions/statuses';
+import PureRenderMixin  from 'react-addons-pure-render-mixin';
 
 const ComposerDrawer = React.createClass({
 
   propTypes: {
+    text: React.PropTypes.string.isRequired,
+    isSubmitting: React.PropTypes.boolean,
+    onChange: React.PropTypes.func.isRequired,
     onSubmit: React.PropTypes.func.isRequired
   },
 
-  getInitialState() {
-    return {
-      text: ''
-    };
-  },
+  mixins: [PureRenderMixin],
 
   handleChange (e) {
-    this.setState({ text: e.target.value });
+    this.props.onChange(e.target.value);
   },
 
   handleKeyUp (e) {
     if (e.keyCode === 13 && e.ctrlKey) {
-      this.handleSubmit();
+      this.props.onSubmit();
     }
   },
 
   handleSubmit () {
-    this.props.onSubmit(this.state.text, null);
-    this.setState({ text: '' });
+    this.props.onSubmit();
   },
 
   render () {
     return (
-      <div style={{ width: '230px', background: '#454b5e', margin: '10px 0', padding: '10px' }}>
-        <textarea placeholder='What is on your mind?' value={this.state.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} />
+      <div style={{ width: '380px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}>
+        <textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} />
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-          <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} /></div>
-          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.state.text} /></div>
+          <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={this.props.isSubmitting} /></div>
+          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.props.text} /></div>
         </div>
       </div>
     );

app/assets/javascripts/components/components/display_name.jsx

@@ -1,10 +1,14 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
 
 const DisplayName = React.createClass({
+
   propTypes: {
     account: ImmutablePropTypes.map.isRequired
   },
 
+  mixins: [PureRenderMixin],
+
   render () {
     var displayName = this.props.account.get('display_name', this.props.account.get('username'));
     var acct        = this.props.account.get('acct');

app/assets/javascripts/components/components/frontend.jsx

@@ -1,18 +1,20 @@
-import NavBar                  from './nav_bar';
 import ColumnsArea             from './columns_area';
 import ComposerDrawerContainer from '../containers/composer_drawer_container';
+import PureRenderMixin         from 'react-addons-pure-render-mixin';
 
 const Frontend = React.createClass({
 
-  render: function() {
+  mixins: [PureRenderMixin],
+
+  render () {
     return (
       <div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
-        <NavBar />
         <ComposerDrawerContainer />
         <ColumnsArea />
       </div>
     );
   }
+
 });
 
 export default Frontend;

app/assets/javascripts/components/components/nav_bar.jsx

@@ -1,12 +0,0 @@
-const NavBar = React.createClass({
-
-  render: function() {
-    return (
-      <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }}>
-
-      </div>
-    );
-  }
-});
-
-export default NavBar;

app/assets/javascripts/components/components/relative_timestamp.jsx

@@ -1,4 +1,5 @@
-import moment from 'moment';
+import moment          from 'moment';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 moment.updateLocale('en', {
   relativeTime : {
@@ -19,6 +20,7 @@ moment.updateLocale('en', {
 });
 
 const RelativeTimestamp = React.createClass({
+
   getInitialState () {
     return {
       text: ''
@@ -29,6 +31,8 @@ const RelativeTimestamp = React.createClass({
     timestamp: React.PropTypes.string.isRequired
   },
 
+  mixins: [PureRenderMixin],
+
   componentWillMount () {
     this._updateMomentText();
     this.interval = setInterval(this._updateMomentText, 6000);

app/assets/javascripts/components/components/status.jsx

@@ -2,12 +2,16 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar             from './avatar';
 import DisplayName        from './display_name';
 import RelativeTimestamp  from './relative_timestamp';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
 
 const Status = React.createClass({
+
   propTypes: {
     status: ImmutablePropTypes.map.isRequired
   },
 
+  mixins: [PureRenderMixin],
+
   render () {
     var content = { __html: this.props.status.get('content') };
     var status  = this.props.status;
@@ -30,6 +34,7 @@ const Status = React.createClass({
       </div>
     );
   }
+
 });
 
 export default Status;

app/assets/javascripts/components/components/status_list.jsx

@@ -1,12 +1,16 @@
 import Status             from './status';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
 
 const StatusList = React.createClass({
+
   propTypes: {
     statuses: ImmutablePropTypes.list.isRequired
   },
 
-  render: function() {
+  mixins: [PureRenderMixin],
+
+  render () {
     return (
       <div style={{ overflowY: 'scroll', flex: '1 1 auto' }}>
         <div>
@@ -17,6 +21,7 @@ const StatusList = React.createClass({
       </div>
     );
   }
+
 });
 
 export default StatusList;