containers/Bonus/ClientBonuses.js

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

import {
  getCurrency,
  getFilterData,
  isFetched,
  isLastRecord,
  hasRecord,
  getSelectedTimezone,
} from '../../selectors/common';
import { getBonusStatuses, getClientBonuses } from '../../selectors/bonus';
import Filter from '../../components/Filter';
import ClientBonusesTable from '../../components/MenuItems/Bonus/ClientBonusesTable';
import ScrollTable from '../../components/ScrollTable';
import { aClearFilterData } from '../../reducers/cashier';
import { aSetFilters } from '../../reducers/common';
import { aGetClientBonuses } from '../../reducers/actions';

const mapToProps = (state) => ({
  currency: getCurrency(state),
  bonusStatuses: getBonusStatuses(state),
  clientBonuses: getClientBonuses(state),
  isFetched: isFetched(state),
  filters: getFilterData(state),
  isLastRecord: isLastRecord(state),
  hasRecord: hasRecord(state),
  selectedTimezone: getSelectedTimezone(state),
});

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

/**
 * @class
 * @property {object} props
 * @property {Array} props.currency Currency sign
 * @property {Array} props.bonusStatuses All statuses for bonus
 * @property {Array} props.clientBonuses All client bonuses data
 * @property {Array} props.filters Filters data
 * @property {boolean} props.isFetched Is API fetched
 * @property {Function} props.setFilterData Filter rounds
 * @property {Function} props.getClientBonuses Call API for client bonuses
 * @property {Function} props.clearFilterData Clear Filter Data
 */
class ClientBonuses extends Component {
  constructor(props) {
    super(props);

    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        text: 'ID',
        field: 'id',
      },
      {
        text: 'Client ID',
        field: 'clientId',
      },
      {
        text: 'Status',
        field: 'status',
        dropdown: props.bonusStatuses,
      },
    ];

    /**
     * @member
     */
    this.defaultFilter = {
      status: '',
    };

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

    /**
     * @member {boolean}
     */
    this.initialApiCall = !!props.filters;

    /**
     * @member {object}
     */
    this.selectedItem = {
      2: props.filters && props.bonusStatuses.find((x) => parseInt(x.id) === parseInt(props.filters.status)),
    };
  }

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

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getClientBonuses}
          filters={this.filters}
          selectedItem={this.selectedItem}
          filtersProps={this.props.filters}
          initialApiCall={this.initialApiCall}
          defaultFilter={this.defaultFilter}
          clearFilterData={this.props.clearFilterData}
          selectedTimezone={this.props.selectedTimezone}
        />
        <ScrollTable loadMore={this.loadMore} isFetched={this.props.isFetched} isLastRecord={this.props.isLastRecord}>
          <ClientBonusesTable
            clientBonuses={this.props.clientBonuses}
            currency={this.props.currency}
            bonusStatuses={this.props.bonusStatuses}
            hasRecord={this.props.hasRecord}
            selectedTimezone={this.props.selectedTimezone}
          />
        </ScrollTable>
      </div>
    );
  }
}

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