containers/Results/index.js

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

import Constants from '../../constants';
import LeagueTable from '../../components/Results/LeagueTable';
import RoundsTable from '../../components/Results/RoundsTable';
import {
  getLeagueTableRequest, getResultsRequest, changePage, resetResultsData,
} from '../../reducers';
import {
  getResults, getTeams, getLeagueTableWeek, isResultsLoading,
} from '../../store/tickets';
import { getCurrentPage } from '../../store/common';
import { getSelectedLeague, getLeagues } from '../../store/bets';

const mapToProps = (state) => ({
  results: getResults(state),
  teams: getTeams(state),
  currentPage: getCurrentPage(state),
  selectedLeague: getSelectedLeague(state),
  leagues: getLeagues(state),
  leagueTableWeek: getLeagueTableWeek(state),
  isResultsLoading: isResultsLoading(state),
});

const actionsToProps = (dispatch) => ({
  getLeagueTable: (payload) => dispatch(getLeagueTableRequest(payload)),
  getResults: (payload) => dispatch(getResultsRequest(payload)),
  resetResultsData: (payload) => dispatch(resetResultsData(payload)),
  changePage: (payload) => dispatch(changePage(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {string} props.currentPage Indicate current page
 * @property {Array} props.results One season resluts information for chosen league
 * @property {Array} props.teams One season statistic per team for chosen league
 * @property {object} props.selectedLeague Selected league information
 * @property {Array} props.leagues All leagues information
 * @property {boolean} props.isResultsLoading Indicate is results or teams APIs pending
 *
 * @property {Function} props.getLeagueTable Call API for statistic
 * @property {Function} props.getResults Call API for results
 * @property {Function} props.changePage Change page
 */
class Results extends Component {
  /**
   * Reset result data on unmount
   *
   * @returns {void}
   */
  componentWillUnmount() {
    this.props.resetResultsData();
  }

  /**
   * Render
   *
   * @see module:Results/RoundsTable
   * @see module:Results/LeagueTable
   * @returns {view}
   */
  render() {
    const props = this.props;
    return (
      <>
        <div className="r-nav">
          <div
            className={`r-nav__item ${props.currentPage === Constants.PAGES.RESULTS ? 'active' : ''}`}
            onClick={props.changePage.bind(this, { page: Constants.PAGES.RESULTS })}
          >
            Results
          </div>
          <div
            className={`r-nav__item ${props.currentPage === Constants.PAGES.LEAGUE_TABLE ? 'active' : ''}`}
            onClick={props.changePage.bind(this, { page: Constants.PAGES.LEAGUE_TABLE })}
          >
            League Table
          </div>
        </div>
        <div className="scroll-area">
          {props.isResultsLoading
            ? (
              <div className="loading-wrap sm">
                <div className="loading-item" />
              </div>
            )
            : props.currentPage === Constants.PAGES.RESULTS
              ? (
                <RoundsTable
                  results={props.results}
                  selectedLeague={props.selectedLeague}
                  getResults={props.getResults}
                  resetResultsData={props.resetResultsData}
                />
              ) : props.currentPage === Constants.PAGES.LEAGUE_TABLE
                ? (
                  <LeagueTable
                    teams={props.teams}
                    selectedLeague={props.selectedLeague}
                    leagues={props.leagues}
                    leagueTableWeek={props.leagueTableWeek}
                    getLeagueTable={props.getLeagueTable}
                    resetResultsData={props.resetResultsData}
                  />
                ) : null}
        </div>
      </>
    );
  }
}

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