containers/Settings/OddsTemplateShop.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { aGetPermissions, aOddsShopTemplate } from '../../reducers/actions';
import { PERMISSIONS, SVG_ICONS } from '../../constants';
import { getOddsShopTemplate, 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';

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

const actionsToProps = (dispatch) => ({
  getOddsShopTemplate: (payload) => dispatch(aOddsShopTemplate(payload)),
  getPermissions: (payload) => dispatch(aGetPermissions(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.oddsShopTemplate Odds Shop Template data
 * @property {boolean} props.checkPermisson
 * @property {Function} props.getOddsShopTemplate Call API for odds shop template
 *
 */
class OddsTemplateShop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addNewTemplateFileModalOpen: false,
    };
    /**
     * @member {object}
     * @description Check of user have permission for some of actions
     * @property {boolean} view
     * @property {boolean} addNew
     */
    this.hasPermissionTo = {
      view: props.checkPermisson(PERMISSIONS.SHOP_ODDS_TEMPLATE_VIEW),
      addNew: props.checkPermisson(PERMISSIONS.SHOP_EXCEL_FILES_VIEW),
    };
  }

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

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

  /**
   * 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,
    });
  };

  /**
   * 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>
    </tr>
  );

  /**
   * 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} isShop />
          ) : 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>
                  </tr>
                </thead>
                <tbody>
                  {this.props.oddsShopTemplate.map((oddShopTemplate) => this.renderOddsTemplateRows(oddShopTemplate))}
                </tbody>
              </table>
              {!this.props.hasRecord && !this.props.oddsShopTemplate.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 && <div className="overlay-mask bg-grey open" />}
        </div>
      )
    );
  }
}

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