React Component Update

countdown_timer.jsx

@@ -1,9 +1,7 @@
-var React = require('react');
+import React, { Component, PropTypes } from 'react'
 
 // Generic Countdown Timer UI component
 //
-// https://github.com/uken/react-countdown-timer
-//
 // props:
 //   - initialTimeRemaining: Number
 //       The time remaining for the countdown (in ms).
@@ -17,59 +15,49 @@ var React = require('react');
 //   - tickCallback(timeRemaining): Function (optional)
 //       A function to call each tick.
 //
-//   - completeCallback(): Function (optional)
-//       A function to call when the countdown completes.
-//
-var CountdownTimer = React.createClass({
-  displayName: 'CountdownTimer',
+export default class CountdownTimer extends Component {
 
-  propTypes: {
+  static propTypes = {
     initialTimeRemaining: React.PropTypes.number.isRequired,
     interval: React.PropTypes.number,
     formatFunc: React.PropTypes.func,
     tickCallback: React.PropTypes.func,
     completeCallback: React.PropTypes.func
-  },
-
-  getDefaultProps: function() {
-    return {
-      interval: 1000,
-      formatFunc: null,
-      tickCallback: null,
-      completeCallback: null
-    };
-  },
-
-  getInitialState: function() {
-    // Normally an anti-pattern to use this.props in getInitialState,
-    // but these are all initializations (not an anti-pattern).
-    return {
-      timeRemaining: this.props.initialTimeRemaining,
-      timeoutId: null,
-      prevTime: null
-    };
-  },
-
-  componentDidMount: function() {
-    this.tick();
-  },
+  }
+
+  defaultProps = {
+    interval: 1000,
+    formatFunc: null,
+    tickCallback: null,
+    completeCallback: null,
+  }
 
-  componentWillReceiveProps: function(newProps) {
-    if (this.state.timeoutId) { clearTimeout(this.state.timeoutId); }
-    this.setState({prevTime: null, timeRemaining: newProps.initialTimeRemaining});
-  },
+  state = {
+    timeRemaining: this.props.initialTimeRemaining,
+    timeoutId: null,
+    prevTime: null
+  }
 
-  componentDidUpdate: function() {
-    if ((!this.state.prevTime) && this.state.timeRemaining > 0 && this.isMounted()) {
-      this.tick();
-    }
-  },
+  componentWillMount() {
+    this.isComponentMounted = false;
+  }
+
+  isMounted() {
+    return this.isComponentMounted;
+  }
 
-  componentWillUnmount: function() {
+  componentDidMount() {
+    this.isComponentMounted = true;
+    this.tick = this.tick.bind(this)
+    this.getFormattedTime = this.getFormattedTime.bind(this)
+    this.tick();
+  }
+
+  componentWillUnmount() {
     clearTimeout(this.state.timeoutId);
-  },
+  }
 
-  tick: function() {
+  tick() {
     var currentTime = Date.now();
     var dt = this.state.prevTime ? (currentTime - this.state.prevTime) : 0;
     var interval = this.props.interval;
@@ -102,35 +90,34 @@ var CountdownTimer = React.createClass({
     if (this.props.tickCallback) {
       this.props.tickCallback(timeRemaining);
     }
-  },
 
-  getFormattedTime: function(milliseconds) {
-    if (this.props.formatFunc) {
-      return this.props.formatFunc(milliseconds);
-    }
+}
 
-    var totalSeconds = Math.round(milliseconds / 1000);
+getFormattedTime = (milliseconds) => {
+  if (this.props.formatFunc) {
+    return this.props.formatFunc(milliseconds);
+  }
 
-    var seconds = parseInt(totalSeconds % 60, 10);
-    var minutes = parseInt(totalSeconds / 60, 10) % 60;
-    var hours = parseInt(totalSeconds / 3600, 10);
+  var totalSeconds = Math.round(milliseconds / 1000);
 
-    seconds = seconds < 10 ? '0' + seconds : seconds;
-    minutes = minutes < 10 ? '0' + minutes : minutes;
-    hours = hours < 10 ? '0' + hours : hours;
+  var seconds = parseInt(totalSeconds % 60);
+  var minutes = parseInt(totalSeconds / 60) % 60;
+  var hours = parseInt(totalSeconds / 3600);
 
-    return hours + ':' + minutes + ':' + seconds;
-  },
+  seconds = seconds < 10 ? '0' + seconds : seconds;
+  minutes = minutes < 10 ? '0' + minutes : minutes;
+  hours = hours < 10 ? '0' + hours : hours;
 
-  render: function() {
-    var timeRemaining = this.state.timeRemaining;
+  return hours + ':' + minutes + ':' + seconds;
+}
 
-    return (
-      <div className='timer'>
-        {this.getFormattedTime(timeRemaining)}
-      </div>
-    );
-  }
-});
+render() {
+  var timeRemaining = this.state.timeRemaining;
 
-module.exports = CountdownTimer;
+  return (
+    <div className='timer'>
+    {this.getFormattedTime(timeRemaining)}
+    </div>
+    );
+}
+}