Convert Position to mapDispatchToProps

js/components/Position.jsx

@@ -1,55 +1,53 @@
 import React from 'react';
 import {connect} from 'react-redux';
 
-class Position extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setPosition = this.setPosition.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
+const Position = ({position, seekToPercentComplete, displayedPosition, setPosition}) => {
+  // In shade mode, the position slider shows up differently depending on if
+  // it's near the start, middle or end of its progress
+  let className = '';
+  if (position <= 33) {
+    className = 'left';
+  } else if (position >= 66) {
+    className = 'right';
   }
 
-  setPosition(e) {
-    this.props.dispatch({type: 'SET_FOCUS', input: 'position'});
-    this.props.dispatch({type: 'SET_SCRUB_POSITION', position: e.target.value});
+  return <input
+    id='position'
+    className={className}
+    type='range'
+    min='0'
+    max='100'
+    step='1'
+    value={displayedPosition}
+    onChange={seekToPercentComplete}
+    onInput={setPosition}
+    onMouseUp={seekToPercentComplete}
+    onMouseDown={setPosition}
+  />;
+};
+
+const mapStateToProps = ({media, userInput}) => {
+  const position = media.length ? (media.timeElapsed / media.length) * 100 : 0;
+
+  const displayedPosition = (userInput.focus === 'position') ?
+    userInput.scrubbingPosition :
+    position;
+
+  return {
+    displayedPosition,
+    position
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  seekToPercentComplete: (e) => {
+    ownProps.mediaPlayer.seekToPercentComplete(e.target.value);
+    dispatch({type: 'UNSET_FOCUS'});
+  },
+  setPosition: (e) => {
+    dispatch({type: 'SET_FOCUS', input: 'position'});
+    dispatch({type: 'SET_SCRUB_POSITION', position: e.target.value});
   }
+});
 
-  onMouseUp(e) {
-    this.props.mediaPlayer.seekToPercentComplete(e.target.value);
-    this.props.dispatch({type: 'UNSET_FOCUS'});
-  }
-
-  render() {
-    const position = this.props.media.length ?
-      (this.props.media.timeElapsed / this.props.media.length) * 100 :
-      0;
-
-    // In shade mode, the position slider shows up differently depending on if
-    // it's near the start, middle or end of its progress
-    let className = '';
-    if (position <= 33) {
-      className = 'left';
-    } else if (position >= 66) {
-      className = 'right';
-    }
-
-    const displayedPosition = this.props.userInput.focus === 'position' ?
-      this.props.userInput.scrubbingPosition :
-      position;
-
-    return <input
-      id='position'
-      className={className}
-      type='range'
-      min='0'
-      max='100'
-      step='1'
-      value={displayedPosition}
-      onChange={this.change}
-      onInput={this.setPosition}
-      onMouseUp={this.onMouseUp}
-      onMouseDown={this.setPosition}
-    />;
-  }
-}
-
-module.exports = connect((state) => state)(Position);
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Position);