TeamStats.renderTeamStats - Code Metrics - Inspection of "Merge branch 'feature/player-stats' into develop" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Cancelled

Push — release/2.1.0 ( 9888ea )

by Kevin Van

created 2021-03-25 10:15 UTC

TeamStats.renderTeamStats B

↳ Parent: TeamStats

Complexity

Conditions

Size

Total Lines	62
Code Lines	58

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	58
dl	0
loc	62
rs	8.3745
c	0
b	0
f	0
cc	3

How to fix Long Method

import React 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 = props.teamId
  }

  updateData(): void {
    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(): void {
    this.updateData()
  }

  renderTeamStats = (): JSX.Element => {
    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>
      )
    } else {
      return <div>Loading</div>
    }
  }

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

soniCaH / KCVV-Elewijt-Gatsby

Push — release/2.1.0 ( 9888ea )

TeamStats.renderTeamStats B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like