containers/Cashiers/CashierList.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 { getCashiersList } from '../../selectors/cashiers';

import Filter from '../../components/Filter';
import { parseAmount } from '../../utils/common';
import ScrollTable from '../../components/ScrollTable';
import { PAGES } from '../../constants';
import TableNoResult from '../../components/TableNoResult';
import { aClearFilterData, aSetUserId } from '../../reducers/cashier';
import { aSetClearFilters, aSetFilters } from '../../reducers/common';
import { aGetCashierList } from '../../reducers/actions';
import { withRouterHooks } from '../../utils/router';

const mapToProps = (state) => ({
  hasRecord: hasRecord(state),
  clearFilters: clearFilters(state),
  filters: getFilterData(state),
  selectedTimezone: getSelectedTimezone(state),
  cashiersList: getCashiersList(state),
  isFetched: isFetched(state),
  isLastRecord: isLastRecord(state),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  setClearFilers: (payload) => dispatch(aSetClearFilters(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
  getCashierList: (payload) => dispatch(aGetCashierList(payload)),
  setUserId: (payload) => dispatch(aSetUserId(payload)),
});

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

    this.state = {};

    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        text: 'User ID',
        field: 'userId',
      },
      {
        text: 'Agent ID',
        field: 'agentId',
      },
      {
        text: 'Username',
        field: 'username',
      },
    ];

    /**
     * @member {object}
     * @description default filters
     */
    this.defaultFilter = {
      userId: '',
      agentId: '',
      username: '',
    };

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

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

  /**
   * redirect to statement list page
   *
   * @param  {number} userId
   * @function
   * @returns {void}
   */
  viewStatement = (userId) => {
    this.props.setUserId(userId);
    this.props.navigate(`${PAGES.STATEMENTS_VIEW}?userId=${userId}&startDate=&endDate=`);
  };

  renderTableBody = () =>
    this.props.cashiersList.length > 0 &&
    this.props.cashiersList.map((l) => (
      <tr className="table-style-row" key={l.userId}>
        <td>{l.userId}</td>
        <td>{l.username}</td>
        <td>{l.agentId}</td>
        <td>{l.networkId}</td>
        <td>
          {parseAmount(l.balance, 100)} {l.currency}
        </td>
        <td>
          <button type="button" className="btn btn-primary" onClick={this.viewStatement.bind(this, l.userId)}>
            View statement
          </button>
        </td>
      </tr>
    ));

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getCashierList}
          initialApiCall
          allowEmpty
          clearFilters={this.props.clearFilters}
          filtersProps={this.props.filters}
          defaultFilter={this.defaultFilter}
          filters={this.filters}
          clearFilterData={this.props.clearFilterData}
          selectedTimezone={this.props.selectedTimezone}
        />

        <ScrollTable
          loadMore={this.loadMore}
          isFetched={this.props.isFetched}
          isLastRecord={this.props.isLastRecord}
          hasMenu
        >
          <table className="table-style">
            <thead>
              <tr>
                <th>User Id</th>
                <th>Username</th>
                <th>Agent Id</th>
                <th>Network Id</th>
                <th>Balance</th>
                <th />
              </tr>
            </thead>
            <tbody>{this.renderTableBody()}</tbody>
          </table>
          {!this.props.hasRecord && this.props.cashiersList.length === 0 && <TableNoResult />}
        </ScrollTable>
      </div>
    );
  }
}

export default connect(mapToProps, actionsToProps)(withRouterHooks(CashierList));