components/MenuItems/Round/RoundsTable.js

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

import { getCountryDateTime } from '../../../utils/common';
import SVGComponent from '../../SVG/SVGComponent';
import { SVG_ICONS, ROUND_STATUS, PAGES, ROUND_STATUS_ID } from '../../../constants';
import TableNoResult from '../../TableNoResult';
import { withRouterHooks } from '../../../utils/router';
/**
 * @module MI-RoundDetails/RoundsTable
 */
/**
 * @typedef {object} props
 * @property {Array} rounds All rounds data
 * @property {number} selectedRoundId
 * @property {Array} roundDropDown
 * @property {Function} selectRound
 * @property {Function} showFilteredRound
 */
class RoundsTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openContextMenu: '',
    };
  }

  /**
   * Select round
   *
   * @function
   * @param {object} payload
   * @returns {void}
   */
  selectRound = (payload) => {
    this.props.selectRound(payload);
    this.props.toggleMenu();
    this.setState({ openContextMenu: '' });
  };

  /**
   * create key for contex menu
   *
   * @function
   * @param {string} round
   * @param {string} game
   * @returns {string}
   */
  createKey = (round, game) => `${game}-${round}`;

  /**
   * Toggle context menu
   *
   * @function
   * @param {string} key
   */
  toggleContextMenu = (key) => {
    if (this.state.openContextMenu === key) {
      this.setState({ openContextMenu: '' });
    } else {
      this.setState({ openContextMenu: key });
    }
  };

  /**
   * Go to copupons page
   *
   * @param {object} round
   * @param {string} status
   * @param {boolean} isShop
   * @returns {void}
   */
  showCoupon = (round, status, isShop) => {
    const page =
      !status || status.label === ROUND_STATUS.SETTLEMENT_COMPLETED
        ? isShop
          ? PAGES.SHOP_COUPONS_SETTLED_VIEW
          : PAGES.COUPONS_SETTLED_VIEW
        : isShop
        ? PAGES.SHOP_COUPONS_PLACED_VIEW
        : PAGES.COUPONS_PLACED_VIEW;

    this.props.navigate(page);
    this.props.showFilteredRound({
      filter: { 'filter.roundId': round.roundId, 'filter.game': round.game },
    });
  };

  /**
   * Go to reports round page
   *
   * @param {object} round
   * @param {boolean} isShop
   * @returns {void}
   */
  showReports = (round, isShop) => {
    const page = isShop ? PAGES.SHOP_ROUND_REPORT_VIEW : PAGES.ROUND_REPORT_VIEW;
    this.props.navigate(page);
    this.props.showFilteredRound({
      filter: { roundId: round.roundId, game: round.game },
    });
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <>
        <table className="table-style table-s" id="data-table">
          <thead>
            <tr>
              <th>Round ID</th>
              {!this.props.isTurbo && <th>Game</th>}
              {this.props.isTurbo && <th>Client ID</th>}
              <th>
                Start Date
                <i className="table-arrow ml-1" />
              </th>
              <th>End Date</th>
              <th>Status</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {this.props.rounds.map((round) => {
              const status = this.props.roundDropDown.find((r) => parseInt(r.id) === parseInt(round.roundStatus));

              let game;
              if (!this.props.isTurbo) {
                game = this.props.gameStatuses.find((l) => l.id === round.game);
              }
              return (
                <tr
                  className={`table-style-row 
                      ${parseInt(this.props.selectedRoundId) === parseInt(round.roundId) ? 'active' : ''} 
                      ${
                        this.state.openContextMenu === this.createKey(round.roundId, game?.label || round.clientId)
                          ? 'active open'
                          : ''
                      }`}
                  key={`${round.roundId}-${round.roundStartDate}-${round.roundEndDate}`}
                >
                  <td>{round.roundId}</td>
                  {!this.props.isTurbo && game && <td>{game.label}</td>}
                  {this.props.isTurbo && <td>{round.clientId}</td>}
                  <td>{getCountryDateTime(round.roundStartDate, this.props.selectedTimezone)}</td>
                  <td>{getCountryDateTime(round.roundEndDate, this.props.selectedTimezone)}</td>
                  <td>{status ? status.label : round.roundStatus}</td>
                  <td className="table-style-icon">
                    <SVGComponent
                      className="icon-xs"
                      src={`${SVG_ICONS.utility}#dots`}
                      onClick={() => {
                        this.toggleContextMenu(this.createKey(round.roundId, game?.label || round.clientId));
                      }}
                    />
                    <div className="table-style-option">
                      <div
                        className="table-style-option-item"
                        onClick={this.showCoupon.bind(this, round, status, this.props.isShop)}
                      >
                        Show Coupon
                      </div>
                      {!this.props.isTurbo &&
                        parseInt(status?.id) !== ROUND_STATUS_ID.IN_PROGRESS &&
                        parseInt(status?.id) !== ROUND_STATUS_ID.SLOT_RESULT_GEN_INT_DB && (
                          <div
                            className="table-style-option-item"
                            onClick={this.showReports.bind(this, round, this.props.isShop)}
                          >
                            Show Stats
                          </div>
                        )}
                      {parseInt(status?.id) !== ROUND_STATUS_ID.IN_PROGRESS &&
                        parseInt(status?.id) !== ROUND_STATUS_ID.SLOT_RESULT_GEN_INT_DB && (
                          <div
                            className="table-style-option-item"
                            onClick={this.selectRound.bind(this, {
                              roundId: round.roundId,
                              turbo: round.game,
                              isShop: this.props.isShop,
                            })}
                          >
                            Show Results
                          </div>
                        )}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {!this.props.hasRecord && this.props.rounds.length < 1 && <TableNoResult />}
        {this.props.menuIsOpen != null && <div className="overlay-mask bg-grey open" />}
      </>
    );
  }
}
export default withRouterHooks(RoundsTable);