components/LiveLeagueNavigation.js

/**
 * @module LiveLeagueNavigation
 */
import React, { Component } from 'react';
import Constants, { GAME_TYPE } from '../constants';
/**
 * @typedef {object} props
 * @property {string} currentPage
 * @property {Array} leagues
 * @property {object} selectedLeague
 * @property {number} selectedLeagueIndex
 * @property {boolean} showMyLive Indicate is user logged in and user have placed bets
 * @property {string} cnt
 * @property {Function} changePage
 * @property {Function} setSelectedLeague
 */
export default class LiveLeagueNavigation extends Component {
  /**
   * Check if selected league exist on live page
   *
   * @returns {void}
   */
  componentDidMount() {
    if (this.props.selectedLeague.liveEnabled === 0
      && this.props.currentPage !== Constants.PAGES.MY_LIVE) {
      const index = this.props.leagues.findIndex((l) => l.liveEnabled === 1);
      this.selectLeague(this.props.leagues[index], index);
    }
  }

  /**
   * Select league and redirect to LIVE page
   *
   * @function
   * @param {object} league Selected league
   * @param {number} index Index of selected league
   * @returns {void}
   */
  selectLeague = (league, index) => {
    this.props.changePage({ page: Constants.PAGES.LIVE });
    this.props.setSelectedLeague({ league, type: this.props.gameType, index });
  }

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

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

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    const activeClass = 'live-nav__item--active';
    const leagueGameTypeFlag = this.props.gameType === GAME_TYPE.CLASSIC
      ? '_flag' : '-turbo_flag';
    return (
      <div className="live-nav">
        {this.props.leagues.map((league, index) => (
          league.liveEnabled === 1
            ? (
              <div
                key={league.id}
                className={`live-nav__item ${this.props.currentPage === Constants.PAGES.LIVE && this.props.selectedLeagueIndex === index ? activeClass : ''}`}
                onClick={this.selectLeague.bind(this, league, index)}
              >
                <div className={`live-nav__item-img ${league.flag}${leagueGameTypeFlag}`} />
              </div>
            )
            : null
        ))}
        <div
          className={`live-nav__item ${this.props.currentPage === Constants.PAGES.ALL_LIVE ? activeClass : ''}`}
          onClick={this.goAllLive}
        >
          All
        </div>
        {this.props.showMyLive
          && (
            <div
              className={`live-nav__item ${this.props.currentPage === Constants.PAGES.MY_LIVE ? activeClass : ''}`}
              onClick={this.goMyLive}
            >
              My Live
            </div>
          )}
      </div>
    );
  }
}