components/Results/RoundsTable.js

/**
 * @module Results/RoundsTable
 */
import React, { Component } from 'react';
import { parseCompetitors } from '../../utils/parser';
import { LEAGUE_NOT_STARTED } from '../../constants';
/**
 * @typedef {object} props
 * @property {object} selectedLeague
 * @property {Array} results
 * @property {Function} getResults
 */
export default class RoundsTable extends Component {
  /**
   * Get all results for selected league
   *
   * @returns {void}
   */
  componentDidMount() {
    if (!this.props.results) {
      this.props.getResults({ league: this.props.selectedLeague.id });
    }
  }

  /**
   * Get results when league change
   *
   * @param {object} prevProps
   * @returns {void}
   */
  componentDidUpdate(prevProps) {
    if (this.props.selectedLeague.id !== prevProps.selectedLeague.id) {
      this.props.resetResultsData();
      this.props.getResults({ league: this.props.selectedLeague.id });
    }

    // Auto scrool to the last element with results

    // if (this.props.results !== prevProps.results) {
    //   let lastRoundIndex = this.props.results.findIndex(r => r.results.length === 0);

    //   lastRoundIndex = lastRoundIndex > 1 ? lastRoundIndex - 1
    //     : lastRoundIndex === -1 ? this.props.results.length - 1
    //       : lastRoundIndex;
    //   const element = document.getElementById('round-' + lastRoundIndex);
    //   const scrollElement = document.getElementsByClassName('scroll-area')[0];
    //   if (element) {
    //     if (scrollElement.scrollBy) {
    //       scrollElement.scrollBy({
    //             top: element.getBoundingClientRect().top - 130, left: 0, behavior: 'smooth' });
    //     }
    //     else {
    //       scrollElement.scrollTop = element.offsetTop - 130;
    //     }
    //   }
    // }
  }

  /** Render result row in a table view
   *
   * @function
   * @param {object} round
   * @returns {view}
   */
  getRoundResults = (round) => (
    round.matches.map((match, i) => {
      const competitorsPerMatch = parseCompetitors(match);
      return (
        <div className="result__box-row" key={match}>
          <div>{competitorsPerMatch[0]}</div>
          <div>{round.results[i] || '-:-'}</div>
          <div>{competitorsPerMatch[1]}</div>
        </div>
      );
    })
  )

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="result">
        <div className="result__wrap">
          {this.props.results?.length
            ? this.props.results.map((round, i) => (
              <div className="result__box" id={`round-${i}`} key={round.week}>
                <div className="result__box-heading">
                  <div>
                    Week
                    {' '}
                    {round.week}
                  </div>
                  <div>{round.time}</div>
                </div>
                <div className="result__box-content">
                  {this.getRoundResults(round)}
                </div>
              </div>
            ))
            : (
              <div>
                <div className="scroll-area__txt">
                  <div className="scroll-area__icon mr-4" />
                  <span>{LEAGUE_NOT_STARTED.RESULT}</span>
                </div>
              </div>
            )}
        </div>
      </div>
    );
  }
}