components/MenuItems/Round/RoundResults.js

import React, { Component } from 'react';
import Section from '../../Section';
import { scrollTo } from '../../../utils/common';
import { EXTRA_BETS_MARKET_IDS, MARKETS_ROUND_SPECIAL_IDS } from '../../../constants';

/**
 * @module MI-RoundDetails/RoundResults
 */
const elementId = 'round-details';

/**
 * @typedef {object} props
 * @property {Array} selectedRound Selected round data
 */
export default class RoundResults extends Component {
  /**
   * Scroll to round details view
   *
   * @returns {void}
   */
  componentDidMount() {
    scrollTo(elementId);
  }

  /**
   * Scroll to round details view
   *
   * @param {object} nextProps
   * @returns {void}
   */
  // eslint-disable-next-line react/no-deprecated
  componentWillUpdate(nextProps) {
    if (nextProps.selectedRound.roundId !== this.props.selectedRound.roundId) {
      scrollTo(elementId);
    }
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <Section className="mt-20" heading={`Results Round #${this.props.selectedRound.roundId}`}>
        <div className="table-wrapper mt-20" id={elementId}>
          <div className="table-responsive">
            <table className="table-style table-s table-result nbb">
              <thead>
                <tr>
                  {this.props.selectedRound.leagues.map((league) => {
                    const totalGoals = league?.roundSpecialResults[MARKETS_ROUND_SPECIAL_IDS.GOALS];
                    const totalDraws = league?.roundSpecialResults[MARKETS_ROUND_SPECIAL_IDS.DRAWS];
                    const ggIce = league?.goalGaloreResults[EXTRA_BETS_MARKET_IDS.ICE];
                    const ggFire = league?.goalGaloreResults[EXTRA_BETS_MARKET_IDS.FIRE];
                    const ggMD = league?.goalGaloreResults[EXTRA_BETS_MARKET_IDS.MEGADRAW];
                    const ggAllZero = parseInt(ggIce) === 0 && parseInt(ggFire) === 0;
                    return (
                      <th key={league.name}>
                        <div>{league.name}</div>
                        {this.props.isShop && (
                          <>
                            <div className="mt-2">
                              Total Goals: {totalGoals} | Total Draws: {totalDraws}
                            </div>
                            <div className="mt-2">
                              {ggAllZero && ' Goal Galore: 0X'}
                              {ggIce && parseInt(ggIce) !== 0 && ` Goal Galore Ice: ${ggIce}X`}
                              {ggFire && parseInt(ggFire) !== 0 && ` Goal Galore Fire: ${ggFire}X`}{' '}
                            </div>
                            <div className="mt-2">
                              {ggMD && parseInt(ggMD) !== 0 && ` MegaDraw: ${ggMD}X`}
                              {ggMD && parseInt(ggMD) === 0 && ` MegaDraw: 0X`}
                            </div>
                          </>
                        )}
                      </th>
                    );
                  })}
                </tr>
              </thead>
              <tbody>
                {this.props.selectedRound.matches.map((match, i) => (
                  // eslint-disable-next-line react/no-array-index-key
                  <tr className="table-style-row" key={i}>
                    {this.props.selectedRound.leagues.map((l) => (
                      <td key={l.id}>
                        {match[l.id] && (
                          <div className="d-flex table-style-row-result">
                            <div className="text-right">{match[l.id].homeTeam}</div>
                            <div className="text-center score">{match[l.id].result || '-:-'}</div>
                            <div className="text-left">{match[l.id].awayTeam}</div>
                          </div>
                        )}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </Section>
    );
  }
}