components/Modals/NoBettingTime.js

/**
 * @module Modals/NoBettingTime
 */
import React, { Component } from 'react';
import { openLiveStartedModal, computeLoader } from '../../utils/common';
/**
 * @typedef {object} props
 * @property {ModalData} modalData
 * @property {string} currentPage
 * @property {Function} placedSelectionsTurbo
 * @property {Function} getRound
 * @property {Function} getTurboRound
 * @property {Function} closeModal
 */
/**
 * @typedef {object} ModalData
 * @property {Time} leftTime
 * @property {number} noBettingTimeCountdown
 * @property {boolean} fatchingRoundInProgress
 * @property {number} round
 * @property {boolean} isTurbo
 */
export default class NoBettingTime extends Component {
  constructor() {
    super();
    /**
     * @member {object}
     * @property {boolean} noBettingTimeCountdown Timer for no betting time
     */
    this.state = {
      noBettingTimeCountdown: 0,
    };
    /**
     * @member {object}
     * @description Configs for loader transformations
     */
    this.style = {
      progress__slice: '#5E5E5E',
      progress__bg: '#ffffff',
      angle1: 90,
      angle2: 0,
      increment: 0,
      secondHalf: false,
    };
    /**
     * @member {number|null}
     */
    this.cdownInterval = null;
  }

  /**
   * Start countdown on component mount
   *
   * @returns {void}
   */
  componentDidMount() {
    const leftTime = this.props.modalData.leftTime || this.props.modalData.noBettingTimeCountdown;
    this.fatchingRoundInProgress = this.props.modalData.fatchingRoundInProgress || false;
    this.style.increment = 360 / this.props.modalData.noBettingTimeCountdown;
    if (leftTime > 0 && leftTime <= this.props.modalData.noBettingTimeCountdown) {
      // eslint-disable-next-line react/no-did-mount-set-state
      this.setState({ noBettingTimeCountdown: leftTime }, this.startCountDown);
    } else {
      this.props.closeModal();
    }
  }

  /**
   * Clear interval
   *
   * @returns {void}
   */
  componentWillUnmount() {
    clearInterval(this.cdownInterval);
  }

  /**
   * Calculate count down and compute loader translations
   * Also check if !fatchingRoundInProgress in situation when user are come to page
   * when is NO-BETTING modal showed and to call only one from this modal.
   *
   * @function
   * @returns {void}
   */
  startCountDown=() => {
    if (!this.cdownInterval) {
      for (
        let i = this.props.modalData.noBettingTimeCountdown;
        i > this.state.noBettingTimeCountdown;
        i -= 1) {
        this.style = computeLoader(this.style);
      }
      this.cdownInterval = setInterval(() => {
        if (this.state.noBettingTimeCountdown > 0) {
          this.style = computeLoader(this.style);
          this.setState({ noBettingTimeCountdown: this.state.noBettingTimeCountdown - 1 });
          if (!this.fatchingRoundInProgress
          // && Math.ceil(this.props.modalData.noBettingTimeCountdown / 2) >=
          // this.state.noBettingTimeCountdown --we dont need this
          // because it is 3 second till live start not 5 like it is on BE
          ) {
            if (this.props.modalData.isTurbo) {
              this.props.getTurboRound({
                placedSelections: this.props.placedSelectionsTurbo || {},
              });
            } else {
              this.props.getRound();
            }
            this.fatchingRoundInProgress = true;
          }
        } else {
          this.fatchingRoundInProgress = false;
          clearInterval(this.cdownInterval);
          this.cdownInterval = null;
          this.props.closeModal();
        }
      }, 1000);
    }
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      openLiveStartedModal(this.props.currentPage)
      && (
      <div className="loader content-center bg-dark">
        <h3>
          Week
          {' '}
          {this.props.modalData.round}
        </h3>
        <h4>Commencing in</h4>
        <div className="progress-circ">
          <div className="progress-circ__wrap">
            <div className="progress-circ__bg" style={{ backgroundColor: this.style.progress__bg }}>
              <div
                className={`progress-circ__slice right ${this.style.secondHalf === true ? 'p0' : ''}`}
                style={{
                  backgroundColor: this.style.progress__slice,
                  transform: `rotate(${this.style.angle1}deg)`,
                }}
              />
              <div
                className={`progress-circ__slice left ${this.style.secondHalf === true ? 'p0' : ''}`}
                style={{
                  backgroundColor: this.style.progress__slice,
                  transform: `rotate(${this.style.angle2}deg)`,
                }}
              />
              <div className="progress-circ__center" style={{ backgroundColor: '#000000' }}>
                <div className="progress-circ__center-wrap">
                  <div className="progress-circ__points">
                    {this.state.noBettingTimeCountdown}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      )
    );
  }
}