components/MMenu.js

/**
 * @module MMenu
 */
import React, { Component } from 'react';
import Constants, { SVG_ICONS } from '../constants';
import SVGComponent from './SVG/SVGComponent';
import { isLivePage } from '../utils/common';
import { parseBigNums } from '../utils/parser';
/**
 * @typedef {object} props
 * @property {string} currentPage
 * @property {boolean} isOpen
 * @property {boolean} haveLiveMatches
 * @property {number} numberOfSelections
 * @property {number} numberOfBets
 * @property {Function} toggleBetslip
 * @property {Function} changePage
 * @property {Function} togglePM
 */
export default class MMenu extends Component {
  /**
   * Redirect to BETS page
   *
   * @function
   * @returns {void}
   */
  goToBets = () => {
    this.props.changePage({ page: Constants.PAGES.BETS });
  }

  /**
   * Redirect to LIVE page
   *
   * @function
   * @returns {void}
   */
  goToLive = () => {
    const nextPage = this.props.placedSelectionsLiveTurbo
      ? Constants.PAGES.MY_LIVE
      : Constants.PAGES.LIVE;
    this.props.changePage({ page: nextPage });
  }

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

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

  /**
   * @function
   * @returns {void}
   */
  betSlipTabClick = () => {
    if (this.props.numberOfSelections === 0) {
      this.props.closeModal();
    }
    this.props.toggleBetslip();
  }

  /**
   * @function
   * @returns {void}
   */
  calculateOdd = () => {
    let result = 1;
    const matches = {};
    for (let i = 0; i < this.props.selectedOdds.length; i += 1) {
      const sel = this.props.selectedOdds[i];
      matches[`${sel.league}-${sel.matchId}`] = true;
      result *= parseFloat(sel.odd);
    }
    if (Object.keys(matches).length !== this.props.selectedOdds.length) {
      if (Object.keys(matches).length === 1) return 'Single';
      return 'Split';
    }
    return parseBigNums(result.toFixed(2));
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="container-fluid m-menu" id="bottom-nav">
        <div className="row no-gutters">

          <div
            className={`col m-menu__item ${this.props.isOpen ? 'active' : ''}`}
            onClick={this.props.togglePM}
          >
            <SVGComponent
              className="m-menu__item-img"
              src={`${SVG_ICONS.navbar}#menu`}
            />
            <div className="m-menu__item-title">Menu</div>
          </div>

          {this.props.haveLiveMatches && !isLivePage(this.props.currentPage)
            ? (
              <div
                className="col m-menu__item " // LIVE page cant be selected as active
                onClick={this.goToLive}
              >
                <SVGComponent
                  className="m-menu__item-img"
                  src={`${SVG_ICONS.navbar}#live`}
                />
                <div className="m-menu__item-title">Live</div>
              </div>
            )
            : (
              <div
                className={`col m-menu__item ${!this.props.isOpen
                  && this.props.currentPage === Constants.PAGES.BETS ? 'active' : ''}`}
                onClick={this.goToBets}
              >
                <SVGComponent
                  className="m-menu__item-img"
                  src={`${SVG_ICONS.navbar}#odds`}
                />
                <div className="m-menu__item-title">Odds</div>
              </div>
            )}
          <div
            className={`col m-menu__item b-slip ${this.props.numberOfSelections > 0 ? 'active' : ''}`}
            id="betslipBtn"
            disabled={this.props.roundLoading}
            onClick={this.betSlipTabClick}
          >
            {this.props.currentPage === Constants.PAGES.BETS && this.props.selectedOdds.length > 0
              ? <div className="m-menu__item-odd">{this.calculateOdd()}</div> : null}
            <div className="m-menu__item-selected">
              {this.props.numberOfSelections}
            </div>
            <div className="m-menu__item-title">Bet slip</div>
          </div>
          <div
            id="myBetsBtn"
            className={`col m-menu__item ${!this.props.isOpen && (this.props.currentPage === Constants.PAGES.TICKETS
              || this.props.currentPage === Constants.PAGES.TICKET_DETAILS) ? 'active' : ''}`}
            onClick={this.goToTickets}
          >
            <div className="m-menu__item-number-wrap">
              <div className="m-menu__item-number">
                {this.props.totalBetCount}
              </div>
              <SVGComponent
                className="m-menu__item-img"
                src={`${SVG_ICONS.navbar}#my-bets`}
              />
            </div>
            <div className="m-menu__item-title">My Bets</div>
          </div>
          <div
            className={`col m-menu__item ${!this.props.isOpen && (this.props.currentPage === Constants.PAGES.RESULTS
              || this.props.currentPage === Constants.PAGES.LEAGUE_TABLE) ? 'active' : ''}`}
            onClick={this.goToResults}
          >
            <SVGComponent
              className="m-menu__item-img"
              src={`${SVG_ICONS.navbar}#results`}
            />
            <div className="m-menu__item-title">Results</div>
          </div>
        </div>
      </div>
    );
  }
}