containers/Settings/OddsTemplate.js

/* eslint-disable sonarjs/no-duplicate-string */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { aForceTurbo, aGetPermissions, aOddsTemplate } from '../../reducers/actions';
import { PERMISSIONS, SVG_ICONS } from '../../constants';
import { getOddsTemplate } from '../../selectors/settings';
import { checkPermisson, isFetched, isLastRecord, hasRecord, getSelectedTimezone } from '../../selectors/common';
import { getCountryDateTime } from '../../utils/common';
import SVGComponent from '../../components/SVG/SVGComponent';
import NewTemplateFileModal from '../../components/MenuItems/Settings/NewTemplateFileModal';
import ScrollTable from '../../components/ScrollTable';
import TableNoResult from '../../components/TableNoResult';
import ConfirmationModal from '../../components/Modals/ConfirmationModal';

const mapToProps = (state) => ({
  oddsTemplate: getOddsTemplate(state),
  checkPermisson: (payload) => checkPermisson(state, payload),
  isFetched: isFetched(state),
  isLastRecord: isLastRecord(state),
  hasRecord: hasRecord(state),
  selectedTimezone: getSelectedTimezone(state),
});

const actionsToProps = (dispatch) => ({
  getOddsTemplate: (payload) => dispatch(aOddsTemplate(payload)),
  getPermissions: (payload) => dispatch(aGetPermissions(payload)),
  forceTurbo: (payload) => dispatch(aForceTurbo(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.oddsTemplate Odds Template data
 * @property {boolean} props.checkPermisson
 * @property {Function} props.getOddsTemplate Call API for odds template
 */
class OddsTemplate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addNewTemplateFileModalOpen: false,
      forceTurboModalOpen: false,
      forceTurboElemDetails: null,
    };
    /**
     * @member {object}
     * @description Check of user have permission for some of actions
     * @property {boolean} view
     * @property {boolean} addNew
     */
    this.hasPermissionTo = {
      view: props.checkPermisson(PERMISSIONS.ODDS_TEMPLATE_VIEW),
      addNew: props.checkPermisson(PERMISSIONS.EXCEL_FILES_VIEW),
    };
  }

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

  /**
   * Refresh and update odds template table
   *
   * @function
   * @returns {void}
   */
  refreshTable = () => {
    this.props.getOddsTemplate();
  };

  /**
   * function add new odds templates
   *
   * @function
   * @returns {void}
   */
  addNewOdds = () => {
    this.setState({
      addNewTemplateFileModalOpen: true,
    });
  };

  /**
   * Close new template file modal
   *
   * @function
   * @returns {void}
   */
  closeNewTemplateFileModal = () => {
    this.setState({
      addNewTemplateFileModalOpen: false,
    });
  };

  /**
   * Prompt Force Turbo comfirmation
   *
   * @function
   * @param {object} details
   * @returns {void}
   */
  promptForceTurbo = (details) => {
    this.setState({
      forceTurboModalOpen: true,
      forceTurboElemDetails: details,
    });
  };

  /**
   * Render odds template rows
   *
   * @function
   * @param {object} oddTemplate
   * @returns {view}
   */
  renderOddsTemplateRows = (oddTemplate) => (
    <tr className="table-style-row" key={oddTemplate.id}>
      <td>{oddTemplate.id}</td>
      <td>{oddTemplate.fileName}</td>
      <td>{oddTemplate.competitionName}</td>
      <td>
        {oddTemplate.active === true ? <SVGComponent className="icon-xxs" src={`${SVG_ICONS.utility}#tick`} /> : '-'}
        {oddTemplate.active}
      </td>
      <td>{getCountryDateTime(oddTemplate.startDt, this.props.selectedTimezone)}</td>
      <td>{oddTemplate.endDt !== '' ? getCountryDateTime(oddTemplate.endDt, this.props.selectedTimezone) : '_'}</td>

      <td>
        <label className="toggle-switch">
          <input
            type="checkbox"
            checked={oddTemplate?.forceTurbo}
            onChange={oddTemplate?.active ? this.promptForceTurbo.bind(this, oddTemplate) : () => {}}
          />{' '}
          <span className="toggle-switch__slider" />
        </label>
      </td>
    </tr>
  );

  /**
   * reset state for forceturbo mechanism
   *
   * @function
   * @returns {void}
   */
  resetForceTurbo = () => {
    this.setState({
      forceTurboModalOpen: false,
      forceTurboElemDetails: null,
    });
  };

  /**
   * Trigger save request and reset forceTurbo state
   *
   * @function
   * @returns {void}
   */
  handleSave = () => {
    this.props.forceTurbo({
      templateId: this.state.forceTurboElemDetails?.id,
      forceTurbo: !this.state.forceTurboElemDetails?.forceTurbo,
    });

    this.resetForceTurbo();
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    const fade = this.state.addNewTemplateFileModalOpen ? 'fade-effect' : '';
    return (
      this.hasPermissionTo.view && (
        <div className={`{user" ${fade}`}>
          {this.state.addNewTemplateFileModalOpen ? (
            <NewTemplateFileModal closeDialog={this.closeNewTemplateFileModal} />
          ) : null}
          {this.state.forceTurboModalOpen ? (
            <ConfirmationModal
              modalData={{
                heading: 'Force Turbo',
                subHeading: `Do you want to ${
                  this.state.forceTurboElemDetails?.forceTurbo ? 'disable' : 'enable'
                } Force Turbo for League: ${this.state.forceTurboElemDetails?.competitionName} ?`,
              }}
              cancel={this.resetForceTurbo}
              confirmation={this.handleSave}
              cancelBtnText="No"
              confirmBtnText="Yes"
            />
          ) : null}

          <ScrollTable
            loadMore={this.refreshTable}
            isFetched={this.props.isFetched}
            isLastRecord={this.props.isLastRecord}
          >
            <>
              <table className="table-style table-s">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>File Name</th>
                    <th>Competition</th>
                    <th>Active</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Force Turbo</th>
                  </tr>
                </thead>
                <tbody>{this.props.oddsTemplate.map((oddTemplate) => this.renderOddsTemplateRows(oddTemplate))}</tbody>
              </table>
              {!this.props.hasRecord && !this.props.oddsTemplate.length && <TableNoResult />}
            </>
          </ScrollTable>
          <hr className="line-spacer mt-20" />
          <div className="d-flex justify-content-end mt-20">
            {this.hasPermissionTo.addNew && (
              <button id="oddsTemplate_newBtn" type="button" className="btn btn-primary" onClick={this.addNewOdds}>
                New Odds Template
              </button>
            )}
          </div>
          {(this.state.addNewTemplateFileModalOpen || this.state.forceTurboModalOpen) && (
            <div className="overlay-mask bg-grey open" />
          )}
        </div>
      )
    );
  }
}

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