containers/Tickets/index.js

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

import TicketsList from '../../components/Tickets/TicketList';
import Constants, { GAME_TYPE } from '../../constants';
import TicketDetails from '../../components/Tickets/TicketDetails';
import {
  getRoundRequest, getTicketsRequest, clearMyBets, changePage, selectTicket, getTurboRoundRequest,
  setScrollPosition,
} from '../../reducers';
import {
  getTickets, getSelectedTicket, getBetsPending, getScrollTo, getTicketDates,
  getNoMoreBets, getTicketsUpdated,
} from '../../store/tickets';
import {
  getGameType, getInitialBetsLoaded, getInitialTurboBetsLoaded, getLeagues, getWinCap,
} from '../../store/bets';
import { getConfigs, getCurrentPage } from '../../store/common';
import { getBonusPercentages, getBonusOddsThreshold } from '../../store/placebet';

const mapToProps = (state) => ({
  tickets: getTickets(state),
  initialBetsLoaded: getInitialBetsLoaded(state),
  initialTurboBetsLoaded: getInitialTurboBetsLoaded(state),
  currentPage: getCurrentPage(state),
  selectedTicket: getSelectedTicket(state),
  leagues: getLeagues(state),
  betsPending: getBetsPending(state),
  scrollTo: getScrollTo(state),
  ticketDates: getTicketDates(state),
  bonusPercentages: getBonusPercentages(state),
  bonusOddsThreshold: getBonusOddsThreshold(state),
  gameType: getGameType(state),
  noMoreBets: getNoMoreBets(state),
  ticketsUpdated: getTicketsUpdated(state),
  config: getConfigs(state),
  winCap: getWinCap(state),
});

const actionsToProps = (dispatch) => ({
  getRound: (payload) => dispatch(getRoundRequest(payload)),
  getTurboRound: (payload) => dispatch(getTurboRoundRequest(payload)),
  getTickets: (payload) => dispatch(getTicketsRequest(payload)),
  clearMyBets: (payload) => dispatch(clearMyBets(payload)),
  changePage: (payload) => dispatch(changePage(payload)),
  selectTicket: (payload) => dispatch(selectTicket(payload)),
  setScrollPosition: () => dispatch(setScrollPosition()),
});

/**
 * @class
 * @property {object} props
 * @property {string} props.tickets All tickets information
 * @property {string} props.initialBetsLoaded Indicate is round API is fatched once
 * @property {string} props.initialTurboBetsLoaded Indicate is Turbo round API is fatched once
 * @property {string} props.currentPage Indicate current page
 * @property {string} props.selectedTicket Selected ticket information
 * @property {string} props.leagues All leagues information
 * @property {boolean} props.betsPending  Indicate is tickets API is fatched
 * @property {number} props.scrollTo Indicate numer of pixels to scroll when user come back
 *  from ticket details page on tickets list page. Scroll to last previewed ticket
 * @property {Array} props.ticketDates Array of all dates from ticket list page
 * @property {number} props.bonusPercentages Config form API
 * @property {Array} props.bonusOddsThreshold Config form API
 * @property {string} props.gameType Game type Classic/Turbo
 *
 * @property {Function} props.getRound Call get round API in case when user automaticaly
 *  go on "My Bets" in header account option from lobby page
 * @property {Function} props.getRoundTurbo Call API for turbo round
 * @property {Function} props.getTickets Call API for tickets
 * @property {Function} props.clearMyBets Clear tickets array
 * @property {Function} props.selectTicket Get ticket details
 * @property {Function} props.changePage Change page
 * @property {Function} props.setScrollPosition set position of scrollable element
 */
class Tickets extends Component {
  /**
   * Get initial tickets
   *
   * @returns {void}
   */
  componentDidMount() {
    if (this.props.initialBetsLoaded === false && this.props.gameType === GAME_TYPE.CLASSIC) {
      this.props.getRound();
    } else if (this.props.initialTurboBetsLoaded === false
      && this.props.gameType === GAME_TYPE.TURBO) {
      this.props.getTurboRound({ haveGameTypeChanged: true });
    }
    if (!this.props.tickets) {
      this.props.getTickets();
    }
  }

  /**
   * Clearing tickets array
   *
   * @returns {void}
   */
  componentWillUnmount() {
    this.props.clearMyBets();
  }

  /**
   * Render
   *
   * @see module:Tickets/TicketsList
   * @see module:Tickets/TicketDetails
   * @returns {view}
   */
  render() {
    return (
      this.props.currentPage === Constants.PAGES.TICKETS
        ? (
          <TicketsList
            tickets={this.props.tickets}
            betsPending={this.props.betsPending}
            changePage={this.props.changePage}
            selectTicket={this.props.selectTicket}
            scrollTo={this.props.scrollTo}
            getTickets={this.props.getTickets}
            ticketDates={this.props.ticketDates}
            noMoreBets={this.props.noMoreBets}
            setScrollPosition={this.props.setScrollPosition}
            ticketsUpdated={this.props.ticketsUpdated}
            currencySymbol={this.props.config?.currencySymbol}
          />
        )
        : (
          <TicketDetails
            selectedTicket={this.props.selectedTicket}
            leagues={this.props.leagues}
            changePage={this.props.changePage}
            bonusPercentages={this.props.bonusPercentages}
            bonusOddsThreshold={this.props.bonusOddsThreshold}
            currencySymbol={this.props.config?.currencySymbol}
            winCap={this.props.winCap}
          />
        )
    );
  }
}

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