Cacher is the code snippet organizer for pro developers

var React = require('react');
var ReactDOM = require('react-dom');
var LinkedStateMixin = require('react-addons-linked-state-mixin');

var ClockMixin =  {
  getDefaultProps: function() {
    return {
      time: 25 * 60 * 1000,
      maxtime: 25 * 60 * 1000,
    };
  },
};

var MountMixin = {
    componentDidUpdate: function(prevProps, prevState) {
        if (this.state.isPlaying) {
            if (!this.timer)
                this.timer = this.startTimer();
        } else {
            window.clearInterval(this.timer);
            this.timer = null;
        }
    },
    componentWillUnmount: function() {
        window.clearInterval(this.timer);
        this.timer = null;
    },
};

var StateMixin = {
  getMaxTime: function(isBreak) {
    return 30 * 10000;
  },

  getInitialState: function () {
    return {
      isPlaying: false,
      time: this.getMaxTime(),
      maxtime: this.getMaxTime(),
    };
  },


  timeOver: function() {
    this.setState({
      time: this.state.maxtime,
      isPlaying: false
    });
  },

  startTimer: function() {
    var _this = this;
    return window.setInterval(function () {
      if (_this.state.time > 0) {
        _this.setState({
            time: _this.state.time-1000
        });
      } else {
          _this.timeOver();
      }
    }, 100);
  },

  handleStart: function() {
    this.setState({
      isPlaying: !this.state.isPlaying,
    });
  },

  handleReset: function() {
    this.setState({
        time: this.state.maxtime,
        isPlaying: false
    });
  },

  getIconName: function() {
    if (this.state.isPlaying) {
      return 'fa fa-pause';
    } else {
      return 'fa fa-play';
    }
  },
};

var Clock = React.createClass({

  mixins: [ClockMixin],

  getTime: function() {
    var now = new Date(this.props.time).valueOf().toString();
    if(now >= 100000) {
     return now.slice(0, -4) + '.' + now.slice(2, -3);
    } else if (now <= 99999 && now >= 10000){
        return now.slice(0, -4) + '.' + now.slice(1, -3)
    } else if (now <= 9999){
        return '0.' + now.slice(0, -3)
    }
  },

  getPercent: function() {
    return 100 - ((this.props.maxtime - this.props.time) / this.props.maxtime * 100);
  },

  render: function() {

    return (

      <p className="clock-text"> {this.getTime()}</p>
      );
  }
});

var OneClock = React.createClass({

 mixins: [MountMixin, StateMixin],

 componentWillReceiveProps:function(nextProps){
   if(this.props.pause != nextProps.pause){
     this.handleStart()
   }
 },
 
  render: function() {

    return (
        <div>
          <button className="clock-float" onClick={this.handleStart}><Clock time={this.state.time} maxtime={this.state.maxtime} /></button>
          <button className="clock-float" onClick={this.handleStart}><i className={this.getIconName()} style={{fontSize: '6em'}}></i></button>
          <button className='reset' onClick={this.handleReset}>Reset </button>
        </div>
    );
  }
});

var OneTeam = React.createClass({
  mixins: [MountMixin, StateMixin],
  getInitialState:function() {
    return {pause:false}
  } ,

  handlePauseAll:function(){
   this.setState({pause:!this.state.pause})
  },


  render: function() {
  var pause = this.state.pause
        return (
            <div>
              <div className="col-md-4 col-md-offset-2">
                <h3> Home Team </h3>
            <div className='clock-button'  style={{backgroundColor: 'rgba(168,0,0, .8)'}}>
            <OneClock pause={pause}/>
            </div>
              <div className='clock-button'  style={{backgroundColor: 'rgba(168,0,0, .8)'}}>
              <OneClock  pause={pause}/>
              </div>
              <div className='clock-button'  style={{backgroundColor: 'rgba(168,0,0, .8)'}}>
              <OneClock pause={pause}/>
              </div>
              </div>
              <div className="col-md-4">
                <h3> Visitors </h3>
              <div className='clock-button'  style={{backgroundColor: 'rgba(0, 0, 179, .8)'}}>
                <OneClock pause={pause} />

              </div>
              <div className='clock-button'  style={{backgroundColor: 'rgba(0, 0, 179, .8)'}}>
              <OneClock pause={pause} />
              </div>
              <div className='clock-button'  style={{backgroundColor: 'rgba(0, 0, 179, .8)'}}>
              <OneClock pause={pause} />
              </div>
              </div>
              <div className='col-md-8 col-md-offset-2 center'>
              <button className='reset-all' onClick={this.handlePauseAll.bind(this)}>Pause</button>
              </div>
            </div>
        );
    }
});

ReactDOM.render(<OneTeam/>, document.getElementById('test'));