containers/Settings/StatsTemplateMobile/StatsTemplateMobile.js

/* eslint-disable sonarjs/no-duplicate-string */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { PERMISSIONS } from '../../../constants';
import { getStatsTemplate } from '../../../selectors/settings';
import { checkPermisson, isFetched, isLastRecord, hasRecord } from '../../../selectors/common';

import NewTemplateFileModal from '../../../components/MenuItems/Settings/NewTemplateFileModal';
import ScrollTable from '../../../components/ScrollTable';
import TableNoResult from '../../../components/TableNoResult';
import StatsTemplateRows from './StatsTemplateRows';
import { aClearStatsTemplateMobile } from '../../../reducers/settings';
import { aGetPermissions, aGetStatsTemplate } from '../../../reducers/actions';

const mapToProps = (state) => ({
  statsTemplate: getStatsTemplate(state),
  checkPermisson: (payload) => checkPermisson(state, payload),
  isFetched: isFetched(state),
  isLastRecord: isLastRecord(state),
  hasRecord: hasRecord(state),
});

const actionsToProps = (dispatch) => ({
  getStatsTemplate: (payload) => dispatch(aGetStatsTemplate(payload)),
  getPermissions: (payload) => dispatch(aGetPermissions(payload)),
  clearStatsTemplateMobile: (payload) => dispatch(aClearStatsTemplateMobile(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.statsTemplate stats Template data
 * @property {boolean} props.checkPermisson
 * @property {Function} props.getstatsTemplate Call API for stats template
 */
class StatsTemplateMobile 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.STATS_TEMPLATE_VIEW),
      addNew: props.checkPermisson(PERMISSIONS.APPLY_NEW_STATS_TEMPLATE),
    };
  }

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

  componentWillUnmount() {
    this.props.clearStatsTemplateMobile();
  }

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

  toggleTemplateFileModal = () => {
    this.setState({
      addNewTemplateFileModalOpen: !this.state.addNewTemplateFileModalOpen,
    });
  };

  /**
   * 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.toggleTemplateFileModal} isStats />
          ) : 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>
                  <StatsTemplateRows statsTemplateList={this.props.statsTemplate} />
                </tbody>
              </table>
              {!this.props.hasRecord && !this.props.statsTemplate.length && <TableNoResult />}
            </>
          </ScrollTable>
          <hr className="line-spacer mt-20" />
          <div className="d-flex justify-content-end mt-20">
            {this.hasPermissionTo.addNew && (
              <button
                id="statsTemplate_newBtn"
                type="button"
                className="btn btn-primary"
                onClick={this.toggleTemplateFileModal}
              >
                New Stats Template
              </button>
            )}
          </div>
          {this.state.addNewTemplateFileModalOpen && <div className="overlay-mask bg-grey open" />}
        </div>
      )
    );
  }
}

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