containers/Rounds/RoundsShop.js

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

import Filter from '../../components/Filter';
import { getSelectedRound, getRoundDropDown, getRoundsShop } from '../../selectors/rounds';
import RoundsTable from '../../components/MenuItems/Round/RoundsTable';
import RoundResults from '../../components/MenuItems/Round/RoundResults';
import ScrollTable from '../../components/ScrollTable';
import Section from '../../components/Section';
import { isFetched, getFilterData, isLastRecord, hasRecord, getSelectedTimezone } from '../../selectors/common';
import { getShopGameStatuses } from '../../selectors/coupons';
import { aClearFilterData } from '../../reducers/cashier';
import { aSetFilters, aShowFilteredRound } from '../../reducers/common';
import { aGetRoundsShop, aSetSelectedRound } from '../../reducers/actions';

const mapToProps = (state) => ({
  rounds: getRoundsShop(state),
  selectedRound: getSelectedRound(state),
  roundDropDown: getRoundDropDown(state),
  isFetched: isFetched(state),
  filters: getFilterData(state),
  isLastRecord: isLastRecord(state),
  hasRecord: hasRecord(state),
  selectedTimezone: getSelectedTimezone(state),
  shopGameStatuses: getShopGameStatuses(state),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  getRounds: (payload) => dispatch(aGetRoundsShop(payload)),
  selectRound: (payload) => dispatch(aSetSelectedRound(payload)),
  showFilteredRound: (payload) => dispatch(aShowFilteredRound(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.rounds All rounds data
 * @property {object} props.selectedRound Selected round data
 * @property {Array} props.roundDropDown Status dropdown list
 * @property {boolean} props.isFetched Is API fetched
 * @property {Array} props.filters Filters data
 * @property {Function} props.setFilterData Filter rounds
 * @property {Function} props.getRounds Get rounds API
 * @property {Function} props.selectRound Change selected round
 * @property {Function} props.showFilteredRound Show selected round data
 * @property {Function} props.clearFilterData Clear Filter data
 */
class RoundsShop extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {object}
     * @property {number|null} menuIsOpen
     */
    this.state = {
      menuIsOpen: null,
    };
    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        text: 'Round ID',
        field: 'roundId',
      },
      {
        text: 'Status',
        field: 'roundStatus',
        dropdown: props.roundDropDown,
      },
      {
        text: 'Game',
        field: 'game',
        dropdown: props.shopGameStatuses,
      },
      {
        text: 'Start Date',
        fields: ['startRoundStartDate', 'endRoundStartDate'],
        dateInterval: true,
      },
    ];

    /**
     * @member {Array}
     * @description Filters that are not mandatory
     */
    this.notMandatoryFilters = ['roundStatus', 'game'];
    /**
     * @member
     */
    this.defaultFilter = {
      roundStatus: props.roundDropDown[0].id,
      startRoundStartDate: '',
      endRoundStartDate: '',
    };

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

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

  /**
   * Toggle right menu
   *
   * @function
   * @param {object} round
   * @returns {void}
   */
  toggleMenu = (round) => {
    this.setState({ menuIsOpen: this.state.menuIsOpen ? null : round?.roundId });
  };

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

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <>
        <div className="user">
          <Filter
            filterFields={this.filterFields}
            info
            setFilterData={this.props.setFilterData}
            search={this.props.getRounds}
            filters={this.filters}
            selectedItem={this.selectedItem}
            defaultFilter={this.defaultFilter}
            filtersProps={this.props.filters}
            clearFilterData={this.props.clearFilterData}
            selectedTimezone={this.props.selectedTimezone}
            notMandatoryFilters={this.notMandatoryFilters}
            dateFilterFields={this.filterFields[3]?.fields}
          />
          <Section heading="Played Rounds">
            <ScrollTable
              loadMore={this.loadMore}
              isFetched={this.props.isFetched}
              isLastRecord={this.props.isLastRecord}
              hasMenu
              hideScroll={this.state.menuIsOpen}
            >
              <RoundsTable
                rounds={this.props.rounds}
                selectRound={this.props.selectRound}
                selectedRoundId={this.props.selectedRound && this.props.selectedRound.roundId}
                showFilteredRound={this.props.showFilteredRound}
                roundDropDown={this.props.roundDropDown}
                hasRecord={this.props.hasRecord}
                menuIsOpen={this.state.menuIsOpen}
                toggleMenu={this.toggleMenu}
                isTurbo={false}
                selectedTimezone={this.props.selectedTimezone}
                isShop
                gameStatuses={this.props.shopGameStatuses}
              />
            </ScrollTable>
          </Section>
        </div>
        {this.props.selectedRound && <RoundResults selectedRound={this.props.selectedRound} isShop />}
      </>
    );
  }
}

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