containers/Modals/index.js

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

import Constants from '../../constants';
import NoBettingTime from '../../components/Modals/NoBettingTime';
import LiveFinish from '../../components/Modals/LiveFinish';

import SessionExpired from '../../components/Modals/SessionExpired';
import LiveStarted from '../../components/Modals/LiveStarted';
import GeneralError from '../../components/Modals/GeneralError';
import {
  getRoundRequest,
  closeModal,
  changePage,
  goToLogin,
  kickOffRequest,
  liveFinished,
  removePlacedBets,
  logoutRequest,
} from '../../reducers';
import {
  getActiveModal, getModalData, getCurrentPage, getDestinations,
} from '../../store/common';
import {
  getHaveLiveMatches,
  getLiveId,
  getMarkets,
  getRoundId,
} from '../../store/bets';
import FreeBets from '../../components/Modals/FreeBets';
import { getAllPlacedBets, getPlacedSelectionsTurbo } from '../../store/placebet';
import MaxSelections from '../../components/Modals/MaxSelections';
import { getScores } from '../../store/live';

const mapToProps = (state) => ({
  activeModal: getActiveModal(state),
  modalData: getModalData(state),
  currentPage: getCurrentPage(state),
  destinations: getDestinations(state),
  haveLiveMatches: getHaveLiveMatches(state),
  placedSelectionsTurbo: getPlacedSelectionsTurbo(state),
  roundId: getRoundId(state),
  scores: getScores(state),
  liveId: getLiveId(state),
  allPlacedBets: getAllPlacedBets(state),
  markets: getMarkets(state),
});

const actionsToProps = (dispatch) => ({
  getRound: (payload) => dispatch(getRoundRequest(payload)),
  getTurboRound: (payload) => dispatch(kickOffRequest(payload)),
  closeModal: (payload) => dispatch(closeModal(payload)),
  changePage: (payload) => dispatch(changePage(payload)),
  goToLogin: (payload) => dispatch(goToLogin(payload)),
  liveFinished: (payload) => dispatch(liveFinished(payload)),
  removePlacedBets: (payload) => dispatch(removePlacedBets(payload)),
  logoutRequest: (payload) => dispatch(logoutRequest(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {null|string} props.activeModal Indicate which modal is active
 * @property {object} props.modalData Additional informations for modal
 *   passed trough props on open modal
 * @property {string} props.currentPage Indicate current page
 * @property {object} props.destinations Destinations information
 * @property {boolean} props.haveLiveMatches Is live game started
 *
 * @property {Function} props.getRound Round API call
 * @property {Function} props.getTurboRound Turbo Round API call
 * @property {Function} props.closeModal Close modals
 * @property {Function} props.changePage Change page
 * @property {Function} props.goToLogin Redirect to login page
 */
class Modals extends Component {
  /**
   * Render view one of existed modal depended on activeModal string
   *
   * @function
   * @returns {view}
   */
  renderActiveModal=() => {
    switch (this.props.activeModal) {
      case Constants.MODALS.NO_BETTING_TIME: {
        return (
          <NoBettingTime
            modalData={this.props.modalData}
            closeModal={this.props.closeModal}
            changePage={this.props.changePage}
            currentPage={this.props.currentPage}
            getRound={this.props.getRound}
            getTurboRound={this.props.getTurboRound}
            placedSelectionsTurbo={this.props.placedSelectionsTurbo[this.props.roundId]}
          />
        );
      }
      case Constants.MODALS.LIVE_FINISH: {
        return (
          <LiveFinish
            modalData={this.props.modalData}
            closeModal={this.props.closeModal}
            changePage={this.props.changePage}
            currentPage={this.props.currentPage}
            liveFinished={this.props.liveFinished}
            scores={this.props.scores}
            liveId={this.props.liveId}
            placedBets={this.props.allPlacedBets[this.props.liveId] || []}
            markets={this.props.markets}
            removePlacedBets={this.props.removePlacedBets}
          />
        );
      }
      case Constants.MODALS.SESSION_EXPIRED: {
        return (
          <SessionExpired
            modalData={this.props.modalData}
            destinations={this.props.destinations}
            goToLogin={this.props.goToLogin}
            logoutRequest={this.props.logoutRequest}
          />
        );
      }
      case Constants.MODALS.LIVE_STARTED: {
        return (
          <LiveStarted
            modalData={this.props.modalData}
            closeModal={this.props.closeModal}
            changePage={this.props.changePage}
            haveLiveMatches={this.props.haveLiveMatches}
          />
        );
      }
      case Constants.MODALS.MAX_SELECTIONS: {
        return (
          <MaxSelections
            closeModal={this.props.closeModal}
          />
        );
      }
      case Constants.MODALS.GENERAL_ERROR: {
        return (
          <GeneralError
            modalData={this.props.modalData}
          />
        );
      }
      case Constants.MODALS.FREE_BETS: {
        return (
          <FreeBets
            closeModal={this.props.closeModal}
          />
        );
      }
      default:
        return <div />;
    }
  }

  /**
   * Render
   *
   * @see module:Modals/NoBettingTime
   * @see module:Modals/LiveFinish
   * @see module:Modals/SessionExpired
   * @see module:Modals/ViewPlacedBets
   * @see module:Modals/LiveStarted
   * @see module:Modals/GeneralError
   * @see module:Modals/FreeBets
   * @returns {view}
   */
  render() {
    return this.renderActiveModal();
  }
}
export default connect(
  mapToProps,
  actionsToProps,
)(Modals);