React

by bhagyas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            minutes: 0,
            seconds: 0,
            currentCount: 10
        }
    }
    timer() {
        // let remainingTime = moment.unix(this.props.validityEnds);
        let remainingTime = moment.unix(this.props.validityEnds);
        let minutes = remainingTime.diff(moment.now(), "minutes");
        let seconds = remainingTime.diff(moment.now(), "seconds");
        
        this.setState({
            minutes: minutes,
            seconds: seconds % 60,
            currentCount: this.state.currentCount - 1
        })
        if(this.state.minutes < 1 && this.state.seconds < 1) {
            clearInterval(this.intervalId);
            //wait for a few seconds more.
            setTimeout(() => {
                location.reload();
            }, 2000);
        }
    }
    componentDidMount() {
        this.intervalId = setInterval(this.timer.bind(this), 1000);
    }
    componentWillUnmount(){
        clearInterval(this.intervalId);
    }
    render() {
        let minutes = this.state.minutes;
        let seconds = this.state.seconds;
        if(minutes == 0 && seconds == 0){
            return null;
        }
        if(!this.props.error){
          return (<div>{minutes} <span>&nbsp;minutes</span>&nbsp;<span>{seconds} <span>&nbsp;seconds</span></span></div>
          );
        }else{
        return (<div>{minutes} &nbsp;minutes&nbsp;{seconds} &nbsp;seconds</div>
          );
        }
        
    }
}

class TimerApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
      <div>
        <h2>Timers</h2>
        
        <Clock...