From 946537edf75b72f58fbcf8f8bbe98fae710bf1bc Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 29 Dec 2016 21:56:31 -0800
Subject: [PATCH] Convert Time to mapDispatchToProps

---
 js/components/Time.jsx | 42 +++++++++++++++++++-----------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/js/components/Time.jsx b/js/components/Time.jsx
index 4077e8b8..f586cb20 100644
--- a/js/components/Time.jsx
+++ b/js/components/Time.jsx
@@ -3,28 +3,24 @@ import {connect} from 'react-redux';
 
 import {getTimeObj} from '../utils';
 
-class Time extends React.Component {
-  constructor(props) {
-    super(props);
-    this.toggleTimeMode = this.toggleTimeMode.bind(this);
-  }
-  toggleTimeMode() {
-    this.props.dispatch({type: 'TOGGLE_TIME_MODE'});
-  }
-  render() {
-    const seconds = this.props.timeMode === 'ELAPSED' ?
-      this.props.timeElapsed :
-      this.props.length - this.props.timeElapsed;
+const Time = ({timeElapsed, length, timeMode, toggleTimeMode}) => {
+  const seconds = timeMode === 'ELAPSED' ?
+    timeElapsed :
+    length - timeElapsed;
 
-    const timeObj = getTimeObj(seconds);
-    return <div id='time' onClick={this.toggleTimeMode} className='countdown'>
-      {this.props.timeMode === 'REMAINING' && <div id='minus-sign' />}
-      <div id='minute-first-digit' className={`digit digit-${timeObj.minutesFirstDigit}`} />
-      <div id='minute-second-digit' className={`digit digit-${timeObj.minutesSecondDigit}`} />
-      <div id='second-first-digit' className={`digit digit-${timeObj.secondsFirstDigit}`} />
-      <div id='second-second-digit' className={`digit digit-${timeObj.secondsSecondDigit}`} />
-    </div>;
-  }
-}
+  const timeObj = getTimeObj(seconds);
+  return <div id='time' onClick={toggleTimeMode} className='countdown'>
+    {timeMode === 'REMAINING' && <div id='minus-sign' />}
+    <div id='minute-first-digit' className={`digit digit-${timeObj.minutesFirstDigit}`} />
+    <div id='minute-second-digit' className={`digit digit-${timeObj.minutesSecondDigit}`} />
+    <div id='second-first-digit' className={`digit digit-${timeObj.secondsFirstDigit}`} />
+    <div id='second-second-digit' className={`digit digit-${timeObj.secondsSecondDigit}`} />
+  </div>;
+};
 
-module.exports = connect((state) => state.media)(Time);
+const mapStateToProps = (state) => state.media;
+const mapDispatchToProps = (dispatch) => ({
+  toggleTimeMode: () => dispatch({type: 'TOGGLE_TIME_MODE'})
+});
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Time);