components/LiveMatchStatistics/index.js

/* eslint-disable react/no-array-index-key */
/**
 * @module LiveMatchStatistics
 */
import React, { Component } from 'react';
import Constants, { SVG_ICONS } from '../../constants';
import SVGComponent from '../SVG/SVGComponent';

/**
 * @property {object} matchStatistics
 */
class LiveMatchStatistics extends Component {
  constructor() {
    super();
    /**
     * @member {object}
     * @property {boolean} leagueStandingsOpen Is League Standings open
     * @property {Array} last5Open Is Last 5 menu open
     */

    this.state = {
      leagueStandingsOpen: false,
      last5Open: false,
    };
  }

  toggleStandings = () => {
    this.setState({ leagueStandingsOpen: !this.state.leagueStandingsOpen });
  }

  toggleLast5 = () => {
    this.setState({ last5Open: !this.state.last5Open });
  }

  /**
   *
   * @param {string} name
   * @param {Array} matches
   * @param {string} shirtUrl
   * @param {string} alignClass
   * @returns {view} table
   */
  renderLast5Table = (name, matches, shirtUrl, alignClass) => (
    <table className="l-table">
      <thead>
        <tr>
          <th>
            <SVGComponent
              className="market__team-icon mr-3"
              src={`${shirtUrl}${name.toLowerCase()}-home`}
            />
            <span className="tbl-team">{name}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        {matches.length === 0 ? (<tr><td><div className="tab__content-info">No Data available</div></td></tr>) : null}
        {matches.map((match, index) => (
          <tr key={`last5-${name}-${index}`}>
            <td>
              <div className={`d-flex ${alignClass} align-items-center`}>
                <div className="d-flex align-items-center">
                  <div className="tbl-txt">{match.home}</div>
                  <div className="mx-3 tbl-score">{match.score}</div>
                  <div className="tbl-txt">{match.away}</div>
                </div>
                <div className={`tile mx-4 ${Constants.LAST_5[match.status]}`}>{match.status}</div>
              </div>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );

  /**
   * Render match statistics
   *
   * @returns {view}
   *
   */
  render() {
    if (!this.props.statistics) {
      return (
        <div className="market__row-loader" />
      );
    }

    const shirtUrl = `${SVG_ICONS.shirts}${this.props.leagueName.toLowerCase().replace(/\s/g, '')}.svg#${this.props.leagueFlag}-`;
    const stats = this.props.statistics;
    const { home, away } = this.props;
    const standings = [{ ...stats.standings[home], name: home },
      { ...stats.standings[away], name: away }];
    standings.sort((a, b) => a.position - b.position);

    const last5 = stats.last5;

    const last5Home = last5[home] ? last5[home].matches : [];
    const last5Away = last5[away] ? last5[away].matches : [];

    return (
      <div className="market__content collapse show">
        <div className="tab mt-3">
          <div className={`tab__item ${this.state.leagueStandingsOpen ? ' is-open' : ''}`}>
            <div className="tab__link" onClick={this.toggleStandings}>
              <div className="tab__link-txt">
                <span className="icon-rank mr-4" />
                <span>League Standings</span>
              </div>
              <div className="tab__link-icon">
                <SVGComponent
                  className="icon-s"
                  src={`${SVG_ICONS.utility}#icon__arrow`}
                />
              </div>
            </div>
            <div className="tab__content">
              <table className="l-table">
                <thead>
                  <tr>
                    <th className="pos">Pos</th>
                    <th className="team">Team</th>
                    <th className="points">Points</th>
                  </tr>
                </thead>
                <tbody>
                  {standings.map((team) => (
                    <tr key={`standings-${team.name}`}>
                      <td>{team.position}</td>
                      <td>
                        <SVGComponent
                          className="market__team-icon mr-3"
                          src={`${shirtUrl}${team.name.toLowerCase()}-home`}
                        />
                        <span className="tbl-team">{team.name}</span>
                      </td>
                      <td>{team.points}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
          <div className={`tab__item ${this.state.last5Open ? ' is-open' : ''}`}>
            <div className="tab__link" onClick={this.toggleLast5}>
              <div className="tab__link-txt">
                <span className="icon-match mr-4" />
                <span>Last 5 Matches</span>
              </div>
              <div className="tab__link-icon">
                <SVGComponent
                  className="icon-s"
                  src={`${SVG_ICONS.utility}#icon__arrow`}
                />
              </div>
            </div>
            <div className="tab__content">
              {last5Home.length === 0 && last5Away.length === 0 ? (<div className="tab__content-info">No previous matches available</div>)
                : (
                  <div className="d-flex">
                    {this.renderLast5Table(home, last5Home, shirtUrl, 'justify-content-end')}
                    {this.renderLast5Table(away, last5Away, shirtUrl, 'justify-content-start')}
                  </div>
                )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default LiveMatchStatistics;