components/Modals/LiveStarted.js

/**
 * @module Modals/LiveStarted
 */
import React, { Component } from 'react';
import Constants from '../../constants';
/**
 * @typedef {object} props
 * @property {boolean} haveLiveMatches
 * @property {Function} changePage
 * @property {Function} closeModal
 */
export default class LiveStarted extends Component {
  /**
   * Close modal if live is not active
   *
   * @returns {void}
   */
  componentDidUpdate() {
    if (!this.props.haveLiveMatches) {
      this.props.closeModal();
    }
  }

  /**
   * Redirect to LIVE page
   *
   * @function
   * @returns {void}
   */
  goLive=() => {
    this.props.changePage({ page: Constants.PAGES.LIVE });
    this.props.closeModal();
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="modals bets-modal">
        <div className="bets-modal">
          <div className="modal__box">
            <div className="modal__box-content">
              <p className="modal__box-heading">{Constants.MODALS.LIVE_STARTED}</p>
              <p className="modal__box-subtitle">Do you want to watch it?</p>
              <div className="btn-box d-flex">
                <button
                  type="button"
                  className="btn btn-danger btn-block btn-sm"
                  onClick={this.props.closeModal}
                >
                  No
                </button>
                <button
                  className="btn btn-secondary ml-4 mt-0 btn-block btn-sm"
                  onClick={this.goLive}
                  type="button"
                >
                  Yes
                </button>
              </div>
            </div>
          </div>
        </div>
        <div className="modal-mask" onClick={this.props.closeModal} />
      </div>
    );
  }
}