soniCaH / KCVV-Elewijt-Gatsby

import React, { Fragment } from "react"

import { useStaticQuery, graphql } from "gatsby"

import { translateGameResult } from "../scripts/helper"

import Icon from "../components/icon"

import iconCleansheet from "../images/i_cleansheet.png"

import iconCardRed from "../images/i_card_red.png"

import iconCardYellow from "../images/i_card_yellow.png"

import iconGoal from "../images/i_goal.png"

import "./TeamStats.scss"

import Card from "./Card"

class TeamStats extends React.Component<TeamStatsProps, TeamStatsState> {

  public static defaultProps = {

    teamId: 1

  }

  teamId: number

  kcvvPsdApi: string

  constructor(props: TeamStatsProps) {

    super(props);

    this.state = {

      data: {

        squadPlayerStatistics: [],

        goalsScored: [],

        goalsAgainst: [],

        extraStats: {

          gamesPlayed: 0,

          gamesWon: 0,

          gamesEqual: 0,

          gamesLost: 0,

          goalsScored: 0,

          goalsAgainst: 0,

          cleanSheets: 0,

          yellowCards: 0,

          redCards: 0,

          notScored: 0,

          biggestWin: {},

          biggestLoss: {},

          mostGoals: {},

          topscorers: [],

          gameStreak: [],

        },

      },

      loading: true,

    }

    this.kcvvPsdApi = '';

    this.teamId = this.props.teamId;

  }

  updateData() {

    if (this.teamId === null || this.kcvvPsdApi === '') {

      return

    }

    const apiUrl = `${this.kcvvPsdApi}/stats/team/${this.teamId}`

    fetch(apiUrl)

      .then((response) => response.json())

      .then((json) => this.setState({ data: json, loading: false }))

  }

  componentDidMount() {

    this.updateData()

  }

  renderTeamStats = () => {

    if (this.state.loading === false && this.state.data) {

      const { extraStats } = this.state.data

      return (

        <Card

          className={"team_stats__team"}

          title="Statistieken"

        >

          <span className={"team_stats__label"}>Gespeeld</span>

          <span>{extraStats.gamesPlayed}</span>

          <span className={"team_stats__label"}>Gewonnen</span>

          <span>{extraStats.gamesWon}</span>

          <span className={"team_stats__label"}>Gelijk</span>

          <span>{extraStats.gamesEqual}</span>

          <span className={"team_stats__label"}>Verloren</span>

          <span>{extraStats.gamesLost}</span>

          <span className={"team_stats__label"}>Doelpunten</span>

          <span>

            {extraStats.goalsScored} voor / {extraStats.goalsAgainst} tegen

          </span>

          <span className={"team_stats__label"}>Cleansheets</span>

          <span>{extraStats.cleanSheets}</span>

          <span className={"team_stats__label"}>Gele kaarten</span>

          <span>{extraStats.yellowCards}</span>

          <span className={"team_stats__label"}>Rode kaarten</span>

          <span>{extraStats.redCards}</span>

          <span className={"team_stats__label"}>Wedstrijden niet gescoord</span>

          <span>{extraStats.notScored}</span>

          <span className={"team_stats__label"}>Grootste overwinning</span>

          <span>

            {extraStats.biggestWin.result} tegen{" "}

            {extraStats.biggestWin.opponent}

          </span>

          <span className={"team_stats__label"}>Grootste verlies</span>

          <span>

            {extraStats.biggestLoss.result} tegen{" "}

            {extraStats.biggestLoss.opponent}

          </span>

          <span className={"team_stats__label"}>Meeste doelpunten</span>

          <span>

            {extraStats.mostGoals.result} tegen {extraStats.mostGoals.opponent}

          </span>

          <span className={"team_stats__label"}>Topschutters</span>

          <ul className={"team_stats__list"}>

            {extraStats.topscorers

              .sort((a, b) => b.value - a.value)

              .map((player, i) => (

                <li key={i}>

                  {player.firstName} {player.lastName} ({player.value})

                </li>

              ))}

          </ul>

          <span className={"team_stats__label"}>Laatste wedstrijden</span>

          <span>

            {extraStats.gameStreak.map((game, i) => (

              <span

                className={`team_stats__streak team_stats__streak--${game.result.toLowerCase()}`}

                title={`${translateGameResult(game.result)}`}

              >

                {game.result.charAt(0) !== "E" ? game.result.charAt(0) : "D"}

              </span>

            ))}

          </span>

        </Card>

      )

    }

  }

  renderTeamSquadStats = () => {

    if (this.state.loading === false && this.state.data) {

      const { squadPlayerStatistics } = this.state.data

      squadPlayerStatistics.sort((a, b) => b.minutes - a.minutes)

      return (

        <Card className="team_stats__players" title="Spelers" hasTable={true}>

          <table>

            <thead>

              <tr>

                <th className={"table__column__string"}>Speler</th>

                <th className={"table__column__number show-for-medium"}>

                  <span title="Wedstrijden gespeeld">P</span>

                </th>

                <th className={"table__column__number"}>

                  <span title="Wedstrijden gewonnen">W</span>

                </th>

                <th

                  className={"table__column__number"}

                >

                  <span title="Wedstrijden gelijkgespeeld">D</span>

                </th>

                <th

                  className={"table__column__number"}

                >

                  <span title="Wedstrijden verloren">L</span>

                </th>

                <th

                  className={"table__column__number"}

                >

                  <img

                    src={iconCardYellow}

                    title="Gele kaart"

                    alt="Gele kaart"

                    className="table__header__icon"

                  />

                </th>

                <th

                  className={"table__column__number"}

                >

                  <img

                    src={iconCardRed}

                    title="Rode kaart"

                    alt="Rode kaart"

                    className="table__header__icon"

                  />

                </th>

                <th

                  className={"table__column__number"}

                >

                  <img

                    src={iconGoal}

                    title="Doelpunt(en) gescoord"

                    alt="Doelpunt(en) gescoord"

                    className="table__header__icon"

                  />

                </th>

                <th

                  className={"table__column__number show-for-medium"}

                >

                  <img

                    src={iconCleansheet}

                    title="Cleansheets"

                    alt="Cleansheets"

                    className="table__header__icon"

                  />

                </th>

                <th

                  className={"table__column__number"}

                >

                  <span title="Minuten gespeeld">

                    <Icon icon="fa-clock-o" />

                  </span>

                </th>

              </tr>

            </thead>

            <tbody>

              {squadPlayerStatistics.map(function (player) {

                return (

                  <tr>

                    <td className={"table__column__string"}>

                      {player.firstName} {player.lastName}

                    </td>

                    <td className={"table__column__number show-for-medium"}>

                      {player.gamesPlayed}

                    </td>

                    <td className={"table__column__number"}>

                      {player.gamesWon}

                    </td>

                    <td className={"table__column__number"}>

                      {player.gamesEqual}

                    </td>

                    <td className={"table__column__number"}>

                      {player.gamesLost}

                    </td>

                    <td className={"table__column__number"}>

                      {player.yellowCards}

                    </td>

                    <td className={"table__column__number"}>

                      {player.redCards}

                    </td>

                    <td className={"table__column__number"}>{player.goals}</td>

                    <td className={"table__column__number show-for-medium"}>

                      {player.cleanSheets}

                    </td>

                    <td className={"table__column__number"}>

                      {player.minutes || "0"}'

                    </td>

                  </tr>

                )

              })}

            </tbody>

          </table>

        </Card>

      )

    }

  }

  render() {

    const config: TeamStatsData = useStaticQuery(graphql`

      query {

        site {

          siteMetadata {

            kcvvPsdApi

          }

        }

      }

    `)

    this.kcvvPsdApi = config.site.siteMetadata.kcvvPsdApi

    return (

      <section className={"team__stats__wrapper"}>

        {this.renderTeamStats()}

        {this.renderTeamSquadStats()}

      </section>

    )

  }

}

export default TeamStats;