components/MenuItems/Settings/NewTemplateFileModal.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import SVGComponent from '../../SVG/SVGComponent';
import { SVG_ICONS } from '../../../constants';
import { getLeaguesSettings, getTemplateExelList } from '../../../selectors/settings';
import { aGetLeaguesSettings } from '../../../reducers/settings';
import {
  aGetStatsTemplateExelList,
  aOddsShopTemplateExelList,
  aOddsTemplateExelList,
  aSaveNewOddsShopTemplate,
  aSaveNewOddsTemplate,
  aSaveNewStatsTemplate,
} from '../../../reducers/actions';

const mapToProps = (state) => ({
  oddsTemplateExelList: getTemplateExelList(state),
  leagues: getLeaguesSettings(state),
});

const actionsToProps = (dispatch) => ({
  getLeaguesSettings: (payload) => dispatch(aGetLeaguesSettings(payload)),
  getOddsTemplateExelList: (payload) => dispatch(aOddsTemplateExelList(payload)),
  getOddsShopTemplateExelList: (payload) => dispatch(aOddsShopTemplateExelList(payload)),
  getStatsTemplateExelList: (payload) => dispatch(aGetStatsTemplateExelList(payload)),
  saveNewOddsTemplate: (payload) => dispatch(aSaveNewOddsTemplate(payload)),
  saveNewOddsShopTemplate: (payload) => dispatch(aSaveNewOddsShopTemplate(payload)),
  saveNewStatsTemplate: (payload) => dispatch(aSaveNewStatsTemplate(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.leagues leagues
 * @property {Array} props.oddsTemplateExelList exelList
 *
 */
class NewTemplateFileModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedCompetitionIds: [],
      fileSelected: null,
      forceTurbo: false,
    };
  }

  /**
   * Get initial data
   *
   * @returns {void}
   */
  componentDidMount() {
    this.refreshData();
  }

  /**
   * Get Data
   *
   * @function
   * @returns {void}
   */
  refreshData = () => {
    this.props.getLeaguesSettings();
    if (this.props.isShop) {
      this.props.getOddsShopTemplateExelList();
    } else if (this.props.isStats) {
      this.props.getStatsTemplateExelList();
    } else {
      this.props.getOddsTemplateExelList();
    }
  };

  /**
   * Save New Odds Template
   *
   * @function
   * @returns {void}
   */
  saveNewOddsTemplate = () => {
    let saveFunction = this.props.saveNewOddsShopTemplate;
    const payload = {
      fileName: this.state.fileSelected,
      competitions: this.state.checkedCompetitionIds,
    };

    if (!this.props.isShop && !this.props.isStats) {
      saveFunction = this.props.saveNewOddsTemplate;
      payload.forceTurbo = this.state.forceTurbo;
    } else if (this.props.isStats) {
      saveFunction = this.props.saveNewStatsTemplate;
    }

    saveFunction(payload);
    this.closeDialog();
  };

  /**
   * On checkBox click
   *
   * @function
   * @param {object} e
   * @returns {void}
   */
  checkBoxClick = (e) => {
    let newArr = this.state.checkedCompetitionIds;
    const selected = e.target;
    if (selected.checked === true && !newArr.includes(selected.id)) {
      newArr.push(parseInt(selected.id, 10));
    } else {
      newArr = newArr.filter((competitionId) => parseInt(competitionId, 10) !== parseInt(selected.id, 10));
    }
    this.setState({ checkedCompetitionIds: newArr });
  };

  /**
   * on file selected
   *
   * @function
   * @param {object} e
   * @returns {void}
   */
  changeSelect = (e) => {
    this.setState({ fileSelected: e.target.value });
  };

  /**
   * Close dialog
   *
   * @function
   * @returns {void}
   */
  closeDialog = () => {
    this.props.closeDialog();
  };

  /**
   * Render row leagues
   *
   * @function
   * @returns {view}
   */
  renderLeagesRows = () => {
    const devider = 3;
    const numOfRows = this.props.leagues ? Math.ceil(this.props.leagues.length / devider) : 0;
    const template = [];
    let latestIndex = devider;
    let minIndex = 0;

    for (let i = 1; i <= numOfRows; i += 1) {
      template.push(
        <div className="dialog__row justify-content-between mt-30" key={i}>
          {this.props.leagues.map((league, index) =>
            index >= minIndex && latestIndex > index ? this.renderLeagues(league) : null
          )}
        </div>
      );
      minIndex = latestIndex;
      latestIndex *= i + 1;
    }
    return template;
  };

  /**
   * Render leagues
   *
   * @function
   * @param {object} league
   * @returns {view}
   */
  renderLeagues = (league) => (
    <div className="check-box" key={league.leagueID}>
      <input type="checkbox" id={league.leagueID} onClick={(e) => this.checkBoxClick(e)} />
      <label htmlFor={league.leagueID} className="check-box__wrap">
        <div className="check-box__icon" />
        <div className="check-box__label">{league.name}</div>
      </label>
    </div>
  );

  /**
   * Toggle force Turbo option
   *
   * @function
   * @returns {void}
   */
  updateForceTurbo = () => {
    this.setState({
      forceTurbo: !this.state.forceTurbo,
    });
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="dialog open" id="add-user">
        <div className="p-20">
          <div className="dialog__heading">
            <span className="dialog-title">{this.props.isStats ? 'New Stats Template' : 'New Odds Template'}</span>
            <SVGComponent
              className="icon-xxs dialog__close"
              onClick={this.closeDialog}
              src={`${SVG_ICONS.utility}#close`}
            />
          </div>
        </div>
        <div className="dialog__row mb-20">
          <label className="style-2 m-0 pr-3">File</label>
          <div className="dialog__fields">
            <select defaultValue="selected" className="dialog__fields-select" onChange={(e) => this.changeSelect(e)}>
              <option key="1" value="selected" disabled="disabled" hidden="hidden">
                Select a file
              </option>
              {this.props.oddsTemplateExelList.map((file) => (
                <option key={file}>{file}</option>
              ))}
            </select>
          </div>
          <div className="flex-grow-1" />
        </div>
        <div className="pr-20 pl-20 pb-0">
          <h3 className="txt-green">Select the competitions to apply odds :</h3>
          <hr className="line-spacer" />
        </div>
        {this.renderLeagesRows()}
        <div className="p-20">
          <div className="dialog__button-wrapper">
            {!this.props.isShop && !this.props.isStats && (
              <div className="dialog__checkbox">
                <input type="checkbox" id="chk-9" value={this.state.forceTurbo} onChange={this.updateForceTurbo} />{' '}
                <label htmlFor="chk-9" className="dialog__checkbox-wrap">
                  <div className="dialog__checkbox-icon" />
                  <div className="dialog__checkbox-label">Force this odds template for Turbo rounds</div>
                </label>
              </div>
            )}

            <button
              id="newTemplateFileModal_cancel"
              type="button"
              className="btn btn-secondary"
              onClick={this.closeDialog}
            >
              Cancel
            </button>
            <button
              id="newTemplateFileModal_save"
              type="button"
              disabled={this.state.fileSelected === null || this.state.checkedCompetitionIds.length < 1}
              className="btn btn-primary ml-10"
              onClick={this.saveNewOddsTemplate}
            >
              Save
            </button>
          </div>
        </div>
      </div>
    );
  }
}

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