zap-desktop/app/components/Activity/Countdown.js

import React from 'react'
import PropTypes from 'prop-types'

import styles from './Countdown.scss'

class Countdown extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      days: null,
      hours: null,
      minutes: null,
      seconds: null,
      expired: false,
      interval: null
    }

    this.timerInterval = this.timerInterval.bind(this)
  }

  componentDidMount() {
    const interval = setInterval(this.timerInterval, 1000)
    // store interval in the state so it can be accessed later
    this.setState({ interval })
  }

  componentWillUnmount() {
    // use interval from the state to clear the interval
    clearInterval(this.state.interval)
  }

  timerInterval() {
    const convertTwoDigits = n => (n > 9 ? n : `0${n}`.slice(-2))

    const now = new Date().getTime()
    const distance = (this.props.countDownDate * 1000) - now

    if (distance <= 0) {
      this.setState({ expired: true })
      clearInterval(this.state.interval)
      return
    }

    const days = convertTwoDigits(Math.floor(distance / (1000 * 60 * 60 * 24)))
    const hours = convertTwoDigits(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)))
    const minutes = convertTwoDigits(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)))
    const seconds = convertTwoDigits(Math.floor((distance % (1000 * 60)) / 1000))

    this.setState({
      days,
      hours,
      minutes,
      seconds
    })
  }

  render() {
    const {
      days,
      hours,
      minutes,
      seconds,
      expired
    } = this.state

    if (expired) { return <span className={`${styles.container} ${styles.expired}`}>Expired</span> }
    if (!days && !hours && !minutes && !seconds) { return <span className={styles.container} /> }

    return (
      <span className={styles.container}>
        <i className={styles.caption}>Expires in</i>
        <i>
          {days > 0 && `${days}:`}
        </i>
        <i>
          {hours > 0 && `${hours}:`}
        </i>
        <i>
          {minutes > 0 && `${minutes}:`}
        </i>
        <i>
          {seconds >= 0 && `${seconds}`}
        </i>
      </span>
    )
  }
}

Countdown.propTypes = {
  countDownDate: PropTypes.number.isRequired
}

export default Countdown