containers/Bonus/ClientRanks.js

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

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

const mapToProps = (state) => ({
  currency: getCurrency(state),
  clientRanks: getClientRanks(state),
  isFetched: isFetched(state),
  filters: getFilterData(state),
  isLastRecord: isLastRecord(state),
  hasRecord: hasRecord(state),
  selectedTimezone: getSelectedTimezone(state),
});

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

/**
 * @class
 * @property {object} props
 * @property {Array} props.clientRanks All client ranks data
 * @property {Array} props.currency Currency sign
 * @property {Array} props.filters Filters data
 * @property {boolean} props.isFetched Is API fetched
 * @property {Function} props.setFilterData Filter rounds
 * @property {Function} props.getClientRanks Call API for client ranks
 * @property {Function} props.clearFilterData Clear Filter Data
 */
class ClientRanks extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        text: 'Client ID',
        field: 'clientId',
      },
    ];

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

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

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

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getClientRanks}
          filters={this.filters}
          defaultFilters={{}}
          allowEmpty
          filtersProps={this.props.filters}
          initialApiCall={this.initialApiCall}
          clearFilterData={this.props.clearFilterData}
          selectedTimezone={this.props.selectedTimezone}
        />
        <ScrollTable loadMore={this.loadMore} isFetched={this.props.isFetched} isLastRecord={this.props.isLastRecord}>
          <ClientRanksTable
            clientRanks={this.props.clientRanks}
            currency={this.props.currency}
            hasRecord={this.props.hasRecord}
            selectedTimezone={this.props.selectedTimezone}
          />
        </ScrollTable>
      </div>
    );
  }
}

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