TeamStats.renderTeamSquadStats - Code Metrics - Inspection of "Team stats." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/player-stats ( ea44e6...56b8d9 )

by Kevin Van

created 2021-03-19 09:39 UTC

TeamStats.renderTeamSquadStats B

↳ Parent: TeamStats

Complexity

Conditions

Size

Total Lines	115
Code Lines	102

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	102
dl	0
loc	115
c	0
b	0
f	0
rs	7
cc	2

How to fix Long Method

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;


1			import React, { Fragment } from "react"
2			import { useStaticQuery, graphql } from "gatsby"
3
4			import { translateGameResult } from "../scripts/helper"
5			import Icon from "../components/icon"
6
7			import iconCleansheet from "../images/i_cleansheet.png"
8			import iconCardRed from "../images/i_card_red.png"
9			import iconCardYellow from "../images/i_card_yellow.png"
10			import iconGoal from "../images/i_goal.png"
11
12			import "./TeamStats.scss"
13			import Card from "./Card"
14
15
16			class TeamStats extends React.Component<TeamStatsProps, TeamStatsState> {
17			public static defaultProps = {
18			teamId: 1
19			}
20
21			teamId: number
22			kcvvPsdApi: string
23
24			constructor(props: TeamStatsProps) {
25			super(props);
26
27			this.state = {
28			data: {
29			squadPlayerStatistics: [],
30			goalsScored: [],
31			goalsAgainst: [],
32			extraStats: {
33			gamesPlayed: 0,
34			gamesWon: 0,
35			gamesEqual: 0,
36			gamesLost: 0,
37			goalsScored: 0,
38			goalsAgainst: 0,
39			cleanSheets: 0,
40			yellowCards: 0,
41			redCards: 0,
42			notScored: 0,
43			biggestWin: {},
44			biggestLoss: {},
45			mostGoals: {},
46			topscorers: [],
47			gameStreak: [],
48			},
49			},
50			loading: true,
51			}
52
53			this.kcvvPsdApi = '';
54			this.teamId = this.props.teamId;
55			}
56
57			updateData() {
58			if (this.teamId === null \|\| this.kcvvPsdApi === '') {
59			return
60			}
61
62			const apiUrl = `${this.kcvvPsdApi}/stats/team/${this.teamId}`
63
64			fetch(apiUrl)
65			.then((response) => response.json())
66			.then((json) => this.setState({ data: json, loading: false }))
67			}
68
69			componentDidMount() {
70			this.updateData()
71			}
72
73
74			renderTeamStats = () => {
75			if (this.state.loading === false && this.state.data) {
76			const { extraStats } = this.state.data
77			return (
78			<Card
79			className={"team_stats__team"}
80			title="Statistieken"
81			>
82			<span className={"team_stats__label"}>Gespeeld</span>
83			<span>{extraStats.gamesPlayed}</span>
84			<span className={"team_stats__label"}>Gewonnen</span>
85			<span>{extraStats.gamesWon}</span>
86			<span className={"team_stats__label"}>Gelijk</span>
87			<span>{extraStats.gamesEqual}</span>
88			<span className={"team_stats__label"}>Verloren</span>
89			<span>{extraStats.gamesLost}</span>
90			<span className={"team_stats__label"}>Doelpunten</span>
91			<span>
92			{extraStats.goalsScored} voor / {extraStats.goalsAgainst} tegen
93			</span>
94			<span className={"team_stats__label"}>Cleansheets</span>
95			<span>{extraStats.cleanSheets}</span>
96			<span className={"team_stats__label"}>Gele kaarten</span>
97			<span>{extraStats.yellowCards}</span>
98			<span className={"team_stats__label"}>Rode kaarten</span>
99			<span>{extraStats.redCards}</span>
100			<span className={"team_stats__label"}>Wedstrijden niet gescoord</span>
101			<span>{extraStats.notScored}</span>
102			<span className={"team_stats__label"}>Grootste overwinning</span>
103			<span>
104			{extraStats.biggestWin.result} tegen{" "}
105			{extraStats.biggestWin.opponent}
106			</span>
107			<span className={"team_stats__label"}>Grootste verlies</span>
108			<span>
109			{extraStats.biggestLoss.result} tegen{" "}
110			{extraStats.biggestLoss.opponent}
111			</span>
112			<span className={"team_stats__label"}>Meeste doelpunten</span>
113			<span>
114			{extraStats.mostGoals.result} tegen {extraStats.mostGoals.opponent}
115			</span>
116			<span className={"team_stats__label"}>Topschutters</span>
117			<ul className={"team_stats__list"}>
118			{extraStats.topscorers
119			.sort((a, b) => b.value - a.value)
120			.map((player, i) => (
121			<li key={i}>
122			{player.firstName} {player.lastName} ({player.value})
123			</li>
124			))}
125			</ul>
126			<span className={"team_stats__label"}>Laatste wedstrijden</span>
127			<span>
128			{extraStats.gameStreak.map((game, i) => (
129			<span
130			className={`team_stats__streak team_stats__streak--${game.result.toLowerCase()}`}
131			title={`${translateGameResult(game.result)}`}
132			>
133			{game.result.charAt(0) !== "E" ? game.result.charAt(0) : "D"}
134			</span>
135			))}
136			</span>
137			</Card>
138			)
139			}
140			}
141
142			renderTeamSquadStats = () => {
143			if (this.state.loading === false && this.state.data) {
144			const { squadPlayerStatistics } = this.state.data
145
146			squadPlayerStatistics.sort((a, b) => b.minutes - a.minutes)
147
148			return (
149			<Card className="team_stats__players" title="Spelers" hasTable={true}>
150			<table>
151			<thead>
152			<tr>
153			<th className={"table__column__string"}>Speler</th>
154			<th className={"table__column__number show-for-medium"}>
155			<span title="Wedstrijden gespeeld">P</span>
156			</th>
157			<th className={"table__column__number"}>
158			<span title="Wedstrijden gewonnen">W</span>
159			</th>
160			<th
161			className={"table__column__number"}
162			>
163			<span title="Wedstrijden gelijkgespeeld">D</span>
164			</th>
165			<th
166			className={"table__column__number"}
167			>
168			<span title="Wedstrijden verloren">L</span>
169			</th>
170			<th
171			className={"table__column__number"}
172			>
173			<img
174			src={iconCardYellow}
175			title="Gele kaart"
176			alt="Gele kaart"
177			className="table__header__icon"
178			/>
179			</th>
180			<th
181			className={"table__column__number"}
182			>
183			<img
184			src={iconCardRed}
185			title="Rode kaart"
186			alt="Rode kaart"
187			className="table__header__icon"
188			/>
189			</th>
190			<th
191			className={"table__column__number"}
192			>
193			<img
194			src={iconGoal}
195			title="Doelpunt(en) gescoord"
196			alt="Doelpunt(en) gescoord"
197			className="table__header__icon"
198			/>
199			</th>
200			<th
201			className={"table__column__number show-for-medium"}
202			>
203			<img
204			src={iconCleansheet}
205			title="Cleansheets"
206			alt="Cleansheets"
207			className="table__header__icon"
208			/>
209			</th>
210			<th
211			className={"table__column__number"}
212			>
213			<span title="Minuten gespeeld">
214			<Icon icon="fa-clock-o" />
215			</span>
216			</th>
217			</tr>
218			</thead>
219			<tbody>
220			{squadPlayerStatistics.map(function (player) {
221			return (
222			<tr>
223			<td className={"table__column__string"}>
224			{player.firstName} {player.lastName}
225			</td>
226			<td className={"table__column__number show-for-medium"}>
227			{player.gamesPlayed}
228			</td>
229			<td className={"table__column__number"}>
230			{player.gamesWon}
231			</td>
232			<td className={"table__column__number"}>
233			{player.gamesEqual}
234			</td>
235			<td className={"table__column__number"}>
236			{player.gamesLost}
237			</td>
238			<td className={"table__column__number"}>
239			{player.yellowCards}
240			</td>
241			<td className={"table__column__number"}>
242			{player.redCards}
243			</td>
244			<td className={"table__column__number"}>{player.goals}</td>
245			<td className={"table__column__number show-for-medium"}>
246			{player.cleanSheets}
247			</td>
248			<td className={"table__column__number"}>
249			{player.minutes \|\| "0"}'
250			</td>
251			</tr>
252			)
253			})}
254			</tbody>
255			</table>
256			</Card>
257			)
258			}
259			}
260
261			render() {
262			const config: TeamStatsData = useStaticQuery(graphql`
263			query {
264			site {
265			siteMetadata {
266			kcvvPsdApi
267			}
268			}
269			}
270			`)
271
272			this.kcvvPsdApi = config.site.siteMetadata.kcvvPsdApi
273
274			return (
275			<section className={"team__stats__wrapper"}>
276			{this.renderTeamStats()}
277			{this.renderTeamSquadStats()}
278			</section>
279			)
280			}
281
282			}
283
284			export default TeamStats;
285

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/player-stats ( ea44e6...56b8d9 )

TeamStats.renderTeamSquadStats B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like