containers/Reports/RoundReports.js

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

import {
  getCurrency,
  getFilterData,
  isFetched,
  isLastRecord,
  hasRecord,
  getSelectedTimezone,
} from '../../selectors/common';
import Filter from '../../components/Filter';
import { getReports } from '../../selectors/reports';
import { getRoundDropDown } from '../../selectors/rounds';
import RoundReportTable from '../../components/MenuItems/Reports/RoundReportTable';
import ScrollTable from '../../components/ScrollTable';
import { getGameStatusesMobile } from '../../selectors/coupons';
import { aClearFilterData } from '../../reducers/cashier';
import { aSetFilters } from '../../reducers/common';
import { aGetRoundReports } from '../../reducers/actions';

const mapToProps = (state) => ({
  currency: getCurrency(state),
  reports: getReports(state),
  roundDropDown: getRoundDropDown(state),
  filters: getFilterData(state),
  isFetched: isFetched(state),
  isLastRecord: isLastRecord(state),
  hasRecord: hasRecord(state),
  selectedTimezone: getSelectedTimezone(state),
  getGameStatusesMobile: getGameStatusesMobile(state),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  getReports: (payload) => dispatch(aGetRoundReports(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.currency Currency sign
 * @property {Array} props.reports All reports data
 * @property {object} props.pagination Pagination settings
 * @property {Array} props.roundDropDown Round list of statuses
 * @property {object} props.filters Filters data
 * @property {boolean} props.isFetched Is API fetched
 * @property {Function} props.setFilterData Filter rounds
 * @property {Function} props.getReports Get reports API
 */
class RoundReports extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        text: 'Round ID',
        field: 'roundId',
      },
      {
        text: 'Start Date',
        fields: ['startRoundStartDate', 'endRoundStartDate'],
        dateInterval: true,
      },
      {
        text: 'Game',
        field: 'game',
        dropdown: props.getGameStatusesMobile,
      },
    ];

    /**
     * @member
     */
    this.defaultFilter = {
      roundId: '',
      startRoundStartDate: '',
      endRoundStartDate: '',
    };
    this.selectedItem = {
      2: props.filters && props.getGameStatusesMobile.find((x) => parseInt(x.id) === parseInt(props.filters.game)),
    };

    /**
     * @member {object}
     */
    this.filters = props.filters
      ? {
          ...props.filters,
          startRoundStartDate: '',
          endRoundStartDate: '',
        }
      : { ...this.defaultFilter };
  }

  /**
   * Load more reports
   *
   * @function
   * @returns {void}
   */
  loadMore = () => {
    const filters = this.props.filters || this.filters;
    this.props.getReports(filters);
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getReports}
          filters={this.filters}
          selectedItem={this.selectedItem}
          defaultFilter={this.defaultFilter}
          filtersProps={this.props.filters}
          clearFilterData={this.props.clearFilterData}
          initialApiCall
          selectedTimezone={this.props.selectedTimezone}
          dateFilterFields={this.filterFields[1]?.fields}
        />
        <ScrollTable loadMore={this.loadMore} isFetched={this.props.isFetched} isLastRecord={this.props.isLastRecord}>
          <RoundReportTable
            reports={this.props.reports}
            roundDropDown={this.props.roundDropDown}
            currency={this.props.currency}
            hasRecord={this.props.hasRecord}
            selectedTimezone={this.props.selectedTimezone}
            gameStatuses={this.props.getGameStatusesMobile}
          />
        </ScrollTable>
      </div>
    );
  }
}

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