vizon-countdown-website/src/App.jsx

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment-timezone';
import 'react-fontawesome';
import WebFont from 'webfontloader';
import Countdown from './Countdown';
import Header from './Header';
import getUpcomingDate from './getUpcomingDate';

import style from './App.sass';

WebFont.load({
  google: {
    families: [
      'Titillium Web:300,400,700',
    ],
  },
});

class App extends React.Component {
  static propTypes = {
    getNow: PropTypes.func,
    weekdays: PropTypes.arrayOf(
      PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
      ])),
  }

  static defaultProps = {
    getNow: () => moment(),
    weekdays: [
      2,
      4,
      6,
    ],
  }

  componentDidMount() {
    this.interval = setInterval(this.updateUpcomingDate.bind(this), 1000);
    this.updateUpcomingDate();
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  calculateUpcomingDate() {
    const { getNow, weekdays } = this.props;
    const now = getNow();
    return moment.min(
      ...weekdays.map(weekday => getUpcomingDate(now, weekday)),
    );
  }

  updateUpcomingDate() {
    this.setState({ nextUpcomingDate: this.calculateUpcomingDate() });
  }

  render() {
    if (!this.state) {
      return null;
    }

    const { nextUpcomingDate } = this.state;
    if (!nextUpcomingDate) {
      return null;
    }

    return (
      <div className={style.app}>
        <Header>
          <b>rizon</b> VIzon countdown
        </Header>

        <div className={style.content}>
          <p>
            The next VIzon draw is on {nextUpcomingDate.format('dddd')}, {nextUpcomingDate.format('L LT z')}.
          </p>
          <Countdown date={nextUpcomingDate} />
        </div>
        <div className={style.footer}>
          Made by Icedream & MAGIC
        </div>
      </div>
    );
  }
}

export default App;