components/Modals/ViewPlacedBets.js

/**
 * @module Modals/ViewPlacedBets
 */
import React, { Component } from 'react';
import SVGComponent from '../SVG/SVGComponent';
import Constants, { SVG_ICONS, AUTO_CLOSE_MODAL_TIMER } from '../../constants';
import SwipeItem from '../SwipeItem';
/**
 * @typedef {object} props
 * @property {string} currentPage
 * @property {Function} changePage
 * @property {Function} closeModal
 */
export default class ViewPlacedBets extends Component {
  constructor() {
    super();
    this.viewPlacebetTimeout = null;
  }

  /**
   * Close it on ticket page
   *
   * @returns {void}
   */
  componentDidUpdate() {
    if (this.viewPlacebetTimeout) {
      clearTimeout(this.viewPlacebetTimeout);
    }
    this.viewPlacebetTimeout = setTimeout(() => {
      this.props.closeModal();
    }, AUTO_CLOSE_MODAL_TIMER);
  }

  componentWillUnmount() {
    clearTimeout(this.viewPlacebetTimeout);
  }

  /**
   * Go to TICKETS page
   *
   * @function
   * @returns {void}
   */
  onClickElement = () => {
    this.props.closeModal();
    this.props.changePage({ page: Constants.PAGES.TICKETS });
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      this.props.currentPage === Constants.PAGES.BETS
      && (
        <SwipeItem
          closeModal={this.props.closeModal}
          onClickElement={this.onClickElement}
          className="betslip__popup slideInRight"
          rightMargin="0"
          viewPlaceBet="true"
        >
          <span className="betslip__popup-info"> Bet placed, press to view bets</span>
          <SVGComponent
            className="betslip__popup-arrow icon-m"
            src={`${SVG_ICONS.utility}#icon__arrow`}
          />
        </SwipeItem>
      )
    );
  }
}