Convert Balance to mapDispatchToProps

js/components/Balance.jsx

@@ -4,48 +4,34 @@ import {connect} from 'react-redux';
 import {setBalance} from '../actionCreators';
 import {SET_FOCUS, UNSET_FOCUS} from '../actionTypes';
 
-class Balance extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setBalance = this.setBalance.bind(this);
-    this.showMarquee = this.showMarquee.bind(this);
-    this.hideMarquee = this.hideMarquee.bind(this);
-  }
+const offsetFromBalance = (balance) => {
+  const percent = Math.abs(balance) / 100;
+  const sprite = Math.round(percent * 28);
+  const offset = (sprite - 1) * 15;
+  return offset;
+};
 
-  setBalance(e) {
-    this.props.dispatch(setBalance(e.target.value));
-  }
+const Balance = ({balance, handleChange, showMarquee, hideMarquee}) => (
+  <input
+    id='balance'
+    type='range'
+    min='-100'
+    max='100'
+    step='1'
+    value={balance}
+    style={{backgroundPosition: `0 -${offsetFromBalance(balance)}px`}}
+    onChange={handleChange}
+    onMouseDown={showMarquee}
+    onMouseUp={hideMarquee}
+  />
+);
 
-  showMarquee() {
-    this.props.dispatch({type: SET_FOCUS, input: 'balance'});
-  }
+const mapStateToProps = (state) => state.media;
 
-  hideMarquee() {
-    this.props.dispatch({type: UNSET_FOCUS});
-  }
+const mapDispatchToProps = (dispatch) => ({
+  handleChange: (e) => dispatch(setBalance(e.target.value)),
+  showMarquee: () => dispatch({type: SET_FOCUS, input: 'balance'}),
+  hideMarquee: () => dispatch({type: UNSET_FOCUS})
+});
 
-  render() {
-    const balance = Math.abs(this.props.balance) / 100;
-    const sprite = Math.round(balance * 28);
-    const offset = (sprite - 1) * 15;
-
-    const style = {
-      backgroundPosition: `0 -${offset}px`
-    };
-
-    return <input
-      id='balance'
-      type='range'
-      min='-100'
-      max='100'
-      step='1'
-      value={this.props.balance}
-      style={style}
-      onChange={this.setBalance}
-      onMouseDown={this.showMarquee}
-      onMouseUp={this.hideMarquee}
-    />;
-  }
-}
-
-module.exports = connect((state) => state.media)(Balance);
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Balance);