React Timer

react timer with audio

by Rich Costello

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<div id="timer-app">
   
</div>

Babel + JSX

class Timer extends React.Component {
	render() {
  	if (this.props.timeLeft == 0) {
    	document.getElementById('end-of-time').play()
    }
  	if (this.props.timeLeft == null || this.props.timeLeft == 0)
    	return <div/>
    return <h1>Time left: {this.props.timeLeft}</h1>
  }
}


class Button extends React.Component {
	startTimer(event) {
  	return this.props.startTimer(this.props.time)
  }
  render() {
  	return <button type="button" className='btn-default-btn' onClick={this.startTimer.bind(this)}>
  	  {this.props.time} seconds
  	</button>
  }
}

class TimeWrapper extends React.Component {
  constructor (props) {
   super(props)
   this.state = {timeLeft: null, timer: null}
   this.startTimer = this.startTimer.bind(this)
  }
  
  startTimer(timeLeft) {
  	clearInterval(this.state.timer)
    let timer = setInterval(() => {
    	console.log('2: Inside of setInterval')
    	var timeLeft = this.state.timeLeft - 1
      if (timeLeft == 0) clearInterval(timer)
      this.setState({timeLeft: timeLeft})
    }, 1000)
    return this.setState({timeLeft: timeLeft, timer: timer})
  }
  render() {
   return (
   	<div className="row-fluid">
    <h2>Timer</h2>
    <div className="btn-group" role="group">
      <Button time="5" startTimer={this.startTimer} />
      <Button time="10" startTimer={this.startTimer} />
      <Button time="15" startTimer={this.startTimer} />
    </div>
    <Timer timeLeft={this.state.timeLeft}/>
    <audio id="end-of-time" src="https://raw.githubusercontent.com/azat-co/react-quickly/master/ch11/timer/flute_c_long_01.wav" preload="auto"></audio>
   	</div>
   )
  }
}


ReactDOM.render(
	<TimeWrapper/>,
  document.getElementById('timer-app')
);