containers/LeagueSelectionPage/index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Constants, { SVG_ICONS, GAME_TYPE } from '../../constants';
import SVGComponent from '../../components/SVG/SVGComponent';
import { setSelectedLeague, changePage, goToLogin } from '../../reducers';
import { getLeagues } from '../../store/bets';
import {
  getDestinations, getIsLoading, getCnt, getUser,
} from '../../store/common';

const mapToProps = (state) => ({
  leagues: getLeagues(state),
  destinations: getDestinations(state),
  isLoading: getIsLoading(state),
  cnt: getCnt(state),
  user: getUser(state),
});

const actionsToProps = (dispatch) => ({
  setSelectedLeague: (payload) => dispatch(setSelectedLeague(payload)),
  changePage: (payload) => dispatch(changePage(payload)),
  goToLogin: (payload) => dispatch(goToLogin(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.leagues All leagues data
 * @property {object} props.destinations Destination informations
 * @property {boolean} props.isLoading Indicate is initial call is fetch
 * @property {string} props.cnt CNT path
 * @property {string} props.user User data
 * @property {Function} props.setSelectedLeague Change selected league
 * @property {Function} props.changePage Change page
 */
class LeagueSelectionPage extends Component {
  /**
   * Change selected league
   *
   * @function
   * @param {object} league
   * @param {string} type Can be "Classic" or "Turbo"
   * @param {number} index
   * @returns {void}
   */
  selectLeague = (league, type, index) => {
    this.props.setSelectedLeague({ league, type, index });
    if (type === GAME_TYPE.TURBO && !this.props.user) {
      this.props.goToLogin({ page: Constants.PAGES.LOGIN });
    } else {
      this.props.changePage({ page: Constants.PAGES.BETS });
    }
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return !this.props.isLoading ? (
      <div className="scroll-area container">
        <div className="leagues">
          {this.props.leagues.map((league, index) => (league.enabled ? (
            <div className="leagues__wrapper" key={league.id}>
              <div
                className="leagues__item-wrapper"
                onClick={this.selectLeague.bind(this, league, GAME_TYPE.CLASSIC, index)}
              >
                <div className="leagues__item" id={`lobbyLeagueBtn${league.name}`}>
                  <div className={`leagues__img ${league.flag}_flag`} />

                </div>
                <div className="leagues__item-title">{league.name}</div>
              </div>

              {this.props.user && this.props.user.turboEnabled && (
                <div
                  className="leagues__item-wrapper"
                  onClick={this.selectLeague.bind(this, league, GAME_TYPE.TURBO, index)}
                >
                  <div className="leagues__item" id={`lobbyLeagueBtn${league.name}Turbo`}>
                    <div className={`leagues__img ${league.flag}-turbo_flag`} />
                  </div>
                  <div className="leagues__item-title">
                    {league.name}
                    {' '}
                    Turbo
                  </div>
                </div>
              )}
            </div>
          ) : null))}
        </div>
        <div className="navigation">
          <a className="btn btn-primary" href={this.props.destinations.home}>
            <span>Back to main site</span>
            <SVGComponent
              className="icon-m arrow-left"
              src={`${SVG_ICONS.utility}#icon__arrow-down`}
            />
          </a>
        </div>
      </div>
    ) : (
      <>
        <div className="m-logo" />
        <div className="loading-wrap">
          <div className="loading-item" />
        </div>
      </>
    );
  }
}

export default connect(mapToProps, actionsToProps)(LeagueSelectionPage);