containers/Cashiers/StatementList.js

/* eslint-disable jsx-a11y/control-has-associated-label */
import React, { Component } from 'react';
import { connect } from 'react-redux';

import {
  hasRecord,
  clearFilters,
  getFilterData,
  getSelectedTimezone,
  isFetched,
  isLastRecord,
} from '../../selectors/common';

import Filter from '../../components/Filter';
import { parseAmount, getCountryDateTime } from '../../utils/common';
import ScrollTable from '../../components/ScrollTable';
import { getStatementsList, getStatementTypesDropdown, getUserId } from '../../selectors/cashiers';
import TableNoResult from '../../components/TableNoResult';
import { aClearFilterData, aClearUserId } from '../../reducers/cashier';
import { aSetClearFilters, aSetFilters } from '../../reducers/common';
import { aGetStatementList } from '../../reducers/actions';

const mapToProps = (state) => ({
  hasRecord: hasRecord(state),
  clearFilters: clearFilters(state),
  filters: getFilterData(state),
  selectedTimezone: getSelectedTimezone(state),
  isFetched: isFetched(state),
  isLastRecord: isLastRecord(state),
  statementTypesDropdown: getStatementTypesDropdown(state),
  statements: getStatementsList(state),
  userId: getUserId(state),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  setClearFilers: (payload) => dispatch(aSetClearFilters(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
  getStatementList: (payload) => dispatch(aGetStatementList(payload)),
  clearUserId: (payload) => dispatch(aClearUserId(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.statements All statements data
 * @property {Function} props.getStatementsList API action to get statements list data
 * @property {Function} props.setFilterData Filter users
 * @property {object} props.filters Filters data
 * @property {Function} props.clearFilterData Clear Filter Data
 */
class StatementList extends Component {
  constructor(props) {
    super(props);

    this.state = {};

    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        text: 'User ID *',
        field: 'userId',
      },
      {
        text: 'Date Interval',
        fields: ['startDate', 'endDate'],
        dateInterval: true,
      },
      {
        text: 'Type',
        field: 'type',
        dropdown: props.statementTypesDropdown,
      },
      {
        text: 'Reference',
        field: 'reference',
      },
    ];

    /**
     * @member {object}
     * @description default filters
     */
    this.defaultFilter = {
      userId: '',
      startDate: '',
      endDate: '',
      type: '',
      reference: '',
    };

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

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

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

  renderTableBody = () =>
    this.props.statements.length > 0 &&
    this.props.statements.map((l) => {
      const type = this.props.statementTypesDropdown.find((o) => parseInt(o.id) === parseInt(l.type));

      return (
        <tr className="table-style-row" key={l.statementId}>
          <td>{l.statementId}</td>
          <td>{l.userId}</td>
          <td>{getCountryDateTime(l.date, this.props.selectedTimezone)}</td>
          <td>
            {parseAmount(l.amountLess, 100)} {l.currencySymbol}
          </td>
          <td>
            {parseAmount(l.amountPlus, 100)} {l.currencySymbol}
          </td>
          <td>
            {parseAmount(l.balance, 100)} {l.currencySymbol}
          </td>
          <td>{type?.label}</td>
          <td>{l.reference}</td>
          <td>{l.gameId}</td>
          <td>{l.roundId}</td>
        </tr>
      );
    });

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getStatementList}
          allowEmpty
          clearFilters={this.props.clearFilters}
          filtersProps={this.props.filters}
          defaultFilter={this.defaultFilter}
          filters={this.filters}
          clearFilterData={this.props.clearFilterData}
          selectedTimezone={this.props.selectedTimezone}
          dateFilterFields={this.filterFields[1]?.fields}
          additionalFiltersCheck
          mustBePopulatedFilters={[this.filterFields[0]]}
        />

        <ScrollTable loadMore={this.loadMore} isFetched={this.props.isFetched} isLastRecord={this.props.isLastRecord}>
          <table className="table-style">
            <thead>
              <tr>
                <th>Statements ID</th>
                <th>User ID</th>
                <th>Date</th>
                <th>Amount Less</th>
                <th>Amount Plus</th>
                <th>Balance</th>
                <th>Type</th>
                <th>Reference</th>
                <th>Game ID</th>
                <th>Round ID</th>
              </tr>
            </thead>
            <tbody>{this.renderTableBody()}</tbody>
          </table>
          {!this.props.hasRecord && this.props.statements.length === 0 && <TableNoResult />}
        </ScrollTable>
      </div>
    );
  }
}

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