components/Results/LeagueTable.js

/**
 * @module Results/LeagueTable
 */
import React, { Component } from 'react';
import SVGComponent from '../SVG/SVGComponent';
import Constants, { SVG_ICONS, LEAGUE_NOT_STARTED } from '../../constants';
/**
 * @typedef {object} props
 * @property {object} selectedLeague
 * @property {Array} teams
 * @property {number} leagueTableWeek
 * @property {Function} getLeagueTable
 */
export default class LeagueTable extends Component {
  /**
   * Get statistic for selected league
   *
   * @returns {void}
   */
  componentDidMount() {
    if (!this.props.teams) {
      this.props.getLeagueTable({ league: this.props.selectedLeague.id });
    }
  }

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

  /**
   * Render statistic for all teams view
   *
   * @function
   * @returns {view}
   */
  renderTeams = () => (
    this.props.teams
    && this.props.teams.map((team, index) => (
      <tr key={team.name}>
        <td>
          {index + 1}
        </td>
        <td>
          <SVGComponent
            className="live__matches-team-flag"
            src={`${SVG_ICONS.shirts}${this.props.selectedLeague.name.toLowerCase().replace(/\s/g, '')}.svg#${this.props.selectedLeague.flag}-${team.name.toLowerCase()}-home`}
          />
          <span className="tbl-team">
            {team.name}
          </span>
        </td>
        <td>{team.points}</td>
        <td className="l-table__match">
          {team.lastFive.map((status, i) => (
            // eslint-disable-next-line react/no-array-index-key
            <div className={`tile ${Constants.LAST_5[status.toUpperCase()]}`} key={i}>
              {status}
            </div>
          ))}
        </td>
      </tr>
    ))
  )

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      this.props.teams?.length
        ? (
          <>
            <div className="week-nav">
              <div className="week-nav__info">
                Week
                {' '}
                {this.props.leagueTableWeek}
              </div>
            </div>
            <table className="l-table">
              <thead>
                <tr>
                  <th className="pos">Pos</th>
                  <th className="team">Team</th>
                  <th className="points">Points</th>
                  <th className="latest">Last 5</th>
                </tr>
              </thead>
              <tbody>{this.renderTeams()}</tbody>
            </table>
          </>
        )
        : (
          <div>
            <div className="scroll-area__txt">
              <div className="scroll-area__icon mr-4" />
              <span>{LEAGUE_NOT_STARTED.TABLE_LEAGUE}</span>
            </div>
          </div>
        )
    );
  }
}