PlayerDetail.renderPlayerStats - Code Metrics - Inspection of "Basic player stats aligned." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/player-stats ( aaa03b...b52d24 )

by Kevin Van

created 2021-03-15 16:10 UTC

PlayerDetail.renderPlayerStats C

↳ Parent: PlayerDetail

Complexity

Conditions

Size

Total Lines	56
Code Lines	53

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	53
dl	0
loc	56
rs	6.6715
c	0
b	0
f	0
cc	8

How to fix Long Method

import React, { Component } from "react"
import { graphql, StaticQuery } from "gatsby"
import { mapPositionCode } from "../scripts/helper"

import moment from "moment"

import "./player.scss"
import { Link } from "gatsby"

import Icon from "../components/icon"

import iconBench from "../images/i_bench_2.png"
import iconCleansheet from "../images/i_cleansheet.png"
import iconCardRed from "../images/i_card_red.png"
import iconCardYellowRed from "../images/i_card_yellow_red.png"
import iconCardYellow from "../images/i_card_yellow.png"
import iconGoal from "../images/i_goal.png"
import iconStart from "../images/i_start.png"
import iconSubIn from "../images/i_sub_in.png"
import iconSubOut from "../images/i_sub_out.png"

// eslint-disable-next-line
String.prototype.replaceAll = function (search, replacement) {
  var target = this
  return target.replace(new RegExp(search, "g"), replacement)
}

/**
 */
class PlayerDetail extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    const {
      config: {
        site: {
          siteMetadata: { kcvvPsdApi },
        },
      },
      player: { field_vv_id: playerId },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.playerId = playerId
  }

  updateData() {
    if (this.matchId === null) {
      return
    }

    const apiUrl = `${this.kcvvPsdApi}/stats/player/${this.playerId}`

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

  componentDidMount() {
    this.updateData()
  }

  renderPlayerName = (player) => (
    <h1 className={"player-detail__name"}>
      <span className={"player-detail__name-first"}>
        {player.field_firstname}
      </span>
      <span className={"player-detail__name-last"}>
        {player.field_lastname}
      </span>
    </h1>
  )
  renderPlayerImage = (player) => (
    <div className={"bg-green-mask"}>
      <div
        className={"player-detail__bg-avatar"}
        style={
          player.relationships.field_image && {
            backgroundImage: `url(${player.relationships.field_image.localFile.childImageSharp.fixed.src})`,
          }
        }
      />
      <div className={"bg-white-end"} />
    </div>
  )
  renderPlayerHeader = (player) => (
    <header className={"player-detail__header"}>
      {this.renderPlayerName(player)}
      {this.renderPlayerImage(player)}

      <div className={"player-detail__bg-shirt-number"} aria-hidden="true">
        {player.field_shirtnumber || ""}
      </div>
    </header>
  )
  renderPlayerStats = (player) => {
    if (this.state.loading === false && this.state.data) {
      const {
        playerStatistics = [],
      } = this.state.data

      console.log(playerStatistics.reduce((a, b) => a + b?.gamesPlayed, 0))

      return (
        <aside className={"player-detail__statistics"}>
          <section className={"player-detail__statistics-item"}>
            <div className={"player-detail__statistics-item__number"}>
              {playerStatistics.reduce((a, b) => a + (b?.gamesPlayed || 0), 0) || "0"}
            </div>
            <div className={"player-detail__statistics-item__label"}>
              Wedstrijden
            </div>
          </section>

          {(player.field_position === "k" || player.field_position === "d") && (
            <section className={"player-detail__statistics-item"}>
              <div className={"player-detail__statistics-item__number"}>
              {playerStatistics.reduce((a, b) => a + (b?.cleanSheets || 0), 0) || "0"}
              </div>
              <div className={"player-detail__statistics-item__label"}>
                Cleansheets
              </div>
            </section>
          )}
          {player.field_position !== "k" && (
            <section className={"player-detail__statistics-item"}>
              <div className={"player-detail__statistics-item__number"}>
              {playerStatistics.reduce((a, b) => a + (b?.goals || 0), 0) || "0"}
              </div>
              <div className={"player-detail__statistics-item__label"}>
                Doelpunten
              </div>
            </section>
          )}
          <section className={"player-detail__statistics-item"}>
            <div className={"player-detail__statistics-item__number"}>
            {playerStatistics.reduce((a, b) => a + (b?.yellowCards || 0), 0) || "0"}
            </div>
            <div className={"player-detail__statistics-item__label"}>
              Gele kaarten
            </div>
          </section>
          <section className={"player-detail__statistics-item"}>
            <div className={"player-detail__statistics-item__number"}>
            {playerStatistics.reduce((a, b) => a + (b?.redCards || 0), 0) || "0"}
            </div>
            <div className={"player-detail__statistics-item__label"}>
              Rode kaarten
            </div>
          </section>
        </aside>
      )
    }
  }

  renderPlayerStatsFull = (player) => {
    if (this.state.loading === false && this.state.data) {
      const {
        playerStatistics = [],
      } = this.state.data

      return (
        <article className={"player-detail__stats card"}>
          <header className={"card__header"}>
            <h4>Statistieken</h4>
          </header>
          <div className={"card__content"}>
            <table className={"player-detail__stats__table"}>
              <thead>
                <tr>
                  <th
                    className={
                      "player-detail__column player-detail__column--string"
                    }
                  >
                    Team
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <span title="Wedstrijden gespeeld">P</span>
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <span title="Wedstrijden gewonnen">W</span>
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <span title="Wedstrijden gelijkgespeeld">D</span>
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <span title="Wedstrijden verloren">L</span>
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <img
                      src={iconCardYellow}
                      title="Gele kaart"
                      alt="Gele kaart"
                      className="player-detail__stats--header_icon"
                    />
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <img
                      src={iconCardRed}
                      title="Rode kaart"
                      alt="Rode kaart"
                      className="player-detail__stats--header_icon"
                    />
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <img
                      src={iconGoal}
                      title="Doelpunt(en) gescoord"
                      alt="Doelpunt(en) gescoord"
                      className="player-detail__stats--header_icon"
                    />
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <img
                      src={iconCleansheet}
                      title="Cleansheets"
                      alt="Cleansheets"
                      className="player-detail__stats--header_icon"
                    />
                  </th>
                  <th
                    className={
                      "player-detail__column player-detail__column--number"
                    }
                  >
                    <span title="Minuten gespeeld">
                      <Icon icon="fa-clock-o" />
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody>
                {playerStatistics.map(function (stats) {
                  return (
                    <tr>
                      <td
                        className={
                          "player-detail__column player-detail__column--string"
                        }
                      >
                        {stats.team.replace("Voetbal : ", "")}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.gamesPlayed}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.gamesWon}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.gamesEqual}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.gamesLost}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.yellowCards}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.redCards}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.goals}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.cleanSheets}
                      </td>
                      <td
                        className={
                          "player-detail__column player-detail__column--number"
                        }
                      >
                        {stats.minutes}'
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </article>
      )
    }
  }
  renderPlayerGamesFull = (player) => {
    if (this.state.loading === false && this.state.data) {
      const {
        gameReports = [],
      } = this.state.data

      return (
        <article
          className={"player-detail__games card"}
        >
          <header className={"card__header"}>
            <h4>Wedstrijden</h4>
          </header>
          <div className={"card__content"}>
            <table className={"player-detail__games__table responsive-card-table"}>
              <thead>
                <tr>
                  <th className={"player-detail__column player-detail__column--string"}>Team</th>
                  <th className={"player-detail__column player-detail__column--string"}>Type</th>
                  <th className={"player-detail__column player-detail__column--string"}>Datum</th>
                  <th className={"player-detail__column player-detail__column--number"}><span title="Thuis/uit">H/A</span></th>
                  <th className={"player-detail__column player-detail__column--score"}>Score</th>
                  <th className={"player-detail__column player-detail__column--string"}>Tegenstander</th>
                  <th className={"player-detail__column player-detail__column--number"}>
                    <img
                      src={iconCardYellow}
                      title="Gele kaart"
                      alt="Gele kaart"
                      className="player-detail__stats--header_icon"
                    />
                  </th>
                  <th className={"player-detail__column player-detail__column--number"}>
                    <img
                      src={iconCardRed}
                      title="Rode kaart"
                      alt="Rode kaart"
                      className="player-detail__stats--header_icon"
                    />
                  </th>
                  <th className={"player-detail__column player-detail__column--number"}>
                    <img
                      src={iconGoal}
                      title="Doelpunten gescoord"
                      alt="Rode kaart"
                      className="player-detail__stats--header_icon"
                    />
                  </th>
                  <th className={"player-detail__column player-detail__column--number"}>
                    <span title="Minuten gespeeld">
                      <Icon icon="fa-clock-o" />
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody>
                {gameReports.map(function (game) {
                  return (
                    <tr>
                      <td data-label="Team" className={"player-detail__column player-detail__column--string"}>{game.team.replace("Voetbal : ", "")}</td>
                      <td data-label="Type" className={"player-detail__column player-detail__column--string"}>{game.competition}</td>
                      <td data-label="Datum" className={"player-detail__column player-detail__column--string"}>{moment(game.date).format("DD/MM/YYYY")}</td>
                      <td data-label="Thuis/uit" className={"player-detail__column player-detail__column--number"}>
                        {game.home ? (
                          <span
                            className={"player-detail__games__home"}
                            title="Thuiswedstrijd"
                          >
                            H
                          </span>
                        ) : (
                          <span
                            className={"player-detail__games__away"}
                            title="Uitwedstrijd"
                          >
                            A
                          </span>
                        )}
                      </td>
                      <td data-label="Score" className={"player-detail__column player-detail__column--score"}>
                        {game.goalsHomeTeam}&nbsp;-&nbsp;{game.goalsAwayTeam}
                      </td>
                      <td data-label="Tegenstander" className={"player-detail__column player-detail__column--string"}>{game.opponent}</td>
                      <td data-label="Gele kaart(en)" className={"player-detail__column player-detail__column--number"}>{game.yellowCards}</td>
                      <td  data-label="Rode kaart(en)" className={"player-detail__column player-detail__column--number"}>{game.redCards}</td>
                      <td data-label="Doelpunten" className={"player-detail__column player-detail__column--number"}>{game.goals}</td>
                      <td data-label="Speeltijd" className={"player-detail__column player-detail__column--number"}>{game.minutesPlayed}'</td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </article>
      )
    }
  }

  renderPlayerBirthdate = (player) => (
    <div
      className={"player-detail__data-item player-detail__data-item--birthdate"}
    >
      <span className={"player-detail__data-item__label"}>Geboortedatum</span>
      <span className={"player-detail__data-item__data"}>
        {player.field_birth_date || "Onbekend"}
      </span>
    </div>
  )
  renderPlayerPosition = (player) => (
    <div
      className={"player-detail__data-item player-detail__data-item--position"}
    >
      <span className={"player-detail__date-item__data"}>
        {player.field_position && mapPositionCode(player.field_position)}
      </span>
      <span className={"player-detail__data-item__label"}>
        {player.relationships.node__team && (
          <Link to={player.relationships.node__team[0].path.alias}>
            {player.relationships.node__team[0].title}
          </Link>
        )}
      </span>
    </div>
  )
  renderPlayerJoinDate = (player) => {
    const currentlyPlaying = !player.field_date_leave
    return (
      <div
        className={
          "player-detail__data-item player-detail__data-item--joindate"
        }
      >
        <span className={"player-detail__data-item__label"}>
          {currentlyPlaying && "Speler bij KCVV sinds"}
          {!currentlyPlaying && "Speler tussen"}
        </span>
        <span className={"player-detail__data-item__data"}>
          {player.field_join_date || "Onbekend"}
          {!currentlyPlaying && (
            <>
              <span className={"text--regular"}> en </span>{" "}
              {player.field_date_leave}
            </>
          )}
        </span>
      </div>
    )
  }
  renderPlayerData = (player) => (
    <section className={"player-detail__data"}>
      {this.renderPlayerBirthdate(player)}
      {this.renderPlayerPosition(player)}
      {this.renderPlayerJoinDate(player)}
    </section>
  )
  renderPlayerBody = (player) => {
    const cleanBody =
      (player.body &&
        player.body.processed.replaceAll(
          "/sites/default/",
          `${process.env.GATSBY_API_DOMAIN}/sites/default/`
        )) ||
      ""

    return (
      <section className={"player-detail__body"}>
        <div dangerouslySetInnerHTML={{ __html: cleanBody }} />
      </section>
    )
  }
  render() {
    const { player } = this.props

    return (
      <article className={"player-detail"}>
        {this.renderPlayerHeader(player)}
        {this.renderPlayerStats(player)}
        <div className={"player-break"}></div>
        {this.renderPlayerData(player)}
        {this.renderPlayerBody(player)}
        {this.renderPlayerStatsFull(player)}
        {this.renderPlayerGamesFull(player)}
      </article>
    )
  }
}

// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
const query = graphql`
  query {
    site {
      siteMetadata {
        kcvvPsdApi
      }
    }
  }
`

export default ({ player }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <PlayerDetail
        // Data is the result of our query.
        config={data}
        player={player}
      />
    )}
  />
)


1			import React, { Component } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3			import { mapPositionCode } from "../scripts/helper"
4
5			import moment from "moment"
6
7			import "./player.scss"
8			import { Link } from "gatsby"
9
10			import Icon from "../components/icon"
11
12			import iconBench from "../images/i_bench_2.png"
13			import iconCleansheet from "../images/i_cleansheet.png"
14			import iconCardRed from "../images/i_card_red.png"
15			import iconCardYellowRed from "../images/i_card_yellow_red.png"
16			import iconCardYellow from "../images/i_card_yellow.png"
17			import iconGoal from "../images/i_goal.png"
18			import iconStart from "../images/i_start.png"
19			import iconSubIn from "../images/i_sub_in.png"
20			import iconSubOut from "../images/i_sub_out.png"
21
22			// eslint-disable-next-line
23			String.prototype.replaceAll = function (search, replacement) {
24			var target = this
25			return target.replace(new RegExp(search, "g"), replacement)
26			}
27
28			/**
29			*/
30			class PlayerDetail extends Component {
31			constructor(props) {
32			super(props)
33
34			this.state = {
35			data: [],
36			loading: true,
37			}
38
39			const {
40			config: {
41			site: {
42			siteMetadata: { kcvvPsdApi },
43			},
44			},
45			player: { field_vv_id: playerId },
46			} = this.props
47
48			this.kcvvPsdApi = kcvvPsdApi
49			this.playerId = playerId
50			}
51
52			updateData() {
53			if (this.matchId === null) {
54			return
55			}
56
57			const apiUrl = `${this.kcvvPsdApi}/stats/player/${this.playerId}`
58
59			fetch(apiUrl)
60			.then((response) => response.json())
61			.then((json) => this.setState({ data: json, loading: false }))
62			}
63
64			componentDidMount() {
65			this.updateData()
66			}
67
68			renderPlayerName = (player) => (
69			<h1 className={"player-detail__name"}>
70			<span className={"player-detail__name-first"}>
71			{player.field_firstname}
72			</span>
73			<span className={"player-detail__name-last"}>
74			{player.field_lastname}
75			</span>
76			</h1>
77			)
78			renderPlayerImage = (player) => (
79			<div className={"bg-green-mask"}>
80			<div
81			className={"player-detail__bg-avatar"}
82			style={
83			player.relationships.field_image && {
84			backgroundImage: `url(${player.relationships.field_image.localFile.childImageSharp.fixed.src})`,
85			}
86			}
87			/>
88			<div className={"bg-white-end"} />
89			</div>
90			)
91			renderPlayerHeader = (player) => (
92			<header className={"player-detail__header"}>
93			{this.renderPlayerName(player)}
94			{this.renderPlayerImage(player)}
95
96			<div className={"player-detail__bg-shirt-number"} aria-hidden="true">
97			{player.field_shirtnumber \|\| ""}
98			</div>
99			</header>
100			)
101			renderPlayerStats = (player) => {
102			if (this.state.loading === false && this.state.data) {
103			const {
104			playerStatistics = [],
105			} = this.state.data
106
107			console.log(playerStatistics.reduce((a, b) => a + b?.gamesPlayed, 0))
108
109			return (
110			<aside className={"player-detail__statistics"}>
111			<section className={"player-detail__statistics-item"}>
112			<div className={"player-detail__statistics-item__number"}>
113			{playerStatistics.reduce((a, b) => a + (b?.gamesPlayed \|\| 0), 0) \|\| "0"}
114			</div>
115			<div className={"player-detail__statistics-item__label"}>
116			Wedstrijden
117			</div>
118			</section>
119
120			{(player.field_position === "k" \|\| player.field_position === "d") && (
121			<section className={"player-detail__statistics-item"}>
122			<div className={"player-detail__statistics-item__number"}>
123			{playerStatistics.reduce((a, b) => a + (b?.cleanSheets \|\| 0), 0) \|\| "0"}
124			</div>
125			<div className={"player-detail__statistics-item__label"}>
126			Cleansheets
127			</div>
128			</section>
129			)}
130			{player.field_position !== "k" && (
131			<section className={"player-detail__statistics-item"}>
132			<div className={"player-detail__statistics-item__number"}>
133			{playerStatistics.reduce((a, b) => a + (b?.goals \|\| 0), 0) \|\| "0"}
134			</div>
135			<div className={"player-detail__statistics-item__label"}>
136			Doelpunten
137			</div>
138			</section>
139			)}
140			<section className={"player-detail__statistics-item"}>
141			<div className={"player-detail__statistics-item__number"}>
142			{playerStatistics.reduce((a, b) => a + (b?.yellowCards \|\| 0), 0) \|\| "0"}
143			</div>
144			<div className={"player-detail__statistics-item__label"}>
145			Gele kaarten
146			</div>
147			</section>
148			<section className={"player-detail__statistics-item"}>
149			<div className={"player-detail__statistics-item__number"}>
150			{playerStatistics.reduce((a, b) => a + (b?.redCards \|\| 0), 0) \|\| "0"}
151			</div>
152			<div className={"player-detail__statistics-item__label"}>
153			Rode kaarten
154			</div>
155			</section>
156			</aside>
157			)
158			}
159			}
160
161			renderPlayerStatsFull = (player) => {
162			if (this.state.loading === false && this.state.data) {
163			const {
164			playerStatistics = [],
165			} = this.state.data
166
167			return (
168			<article className={"player-detail__stats card"}>
169			<header className={"card__header"}>
170			<h4>Statistieken</h4>
171			</header>
172			<div className={"card__content"}>
173			<table className={"player-detail__stats__table"}>
174			<thead>
175			<tr>
176			<th
177			className={
178			"player-detail__column player-detail__column--string"
179			}
180			>
181			Team
182			</th>
183			<th
184			className={
185			"player-detail__column player-detail__column--number"
186			}
187			>
188			<span title="Wedstrijden gespeeld">P</span>
189			</th>
190			<th
191			className={
192			"player-detail__column player-detail__column--number"
193			}
194			>
195			<span title="Wedstrijden gewonnen">W</span>
196			</th>
197			<th
198			className={
199			"player-detail__column player-detail__column--number"
200			}
201			>
202			<span title="Wedstrijden gelijkgespeeld">D</span>
203			</th>
204			<th
205			className={
206			"player-detail__column player-detail__column--number"
207			}
208			>
209			<span title="Wedstrijden verloren">L</span>
210			</th>
211			<th
212			className={
213			"player-detail__column player-detail__column--number"
214			}
215			>
216			<img
217			src={iconCardYellow}
218			title="Gele kaart"
219			alt="Gele kaart"
220			className="player-detail__stats--header_icon"
221			/>
222			</th>
223			<th
224			className={
225			"player-detail__column player-detail__column--number"
226			}
227			>
228			<img
229			src={iconCardRed}
230			title="Rode kaart"
231			alt="Rode kaart"
232			className="player-detail__stats--header_icon"
233			/>
234			</th>
235			<th
236			className={
237			"player-detail__column player-detail__column--number"
238			}
239			>
240			<img
241			src={iconGoal}
242			title="Doelpunt(en) gescoord"
243			alt="Doelpunt(en) gescoord"
244			className="player-detail__stats--header_icon"
245			/>
246			</th>
247			<th
248			className={
249			"player-detail__column player-detail__column--number"
250			}
251			>
252			<img
253			src={iconCleansheet}
254			title="Cleansheets"
255			alt="Cleansheets"
256			className="player-detail__stats--header_icon"
257			/>
258			</th>
259			<th
260			className={
261			"player-detail__column player-detail__column--number"
262			}
263			>
264			<span title="Minuten gespeeld">
265			<Icon icon="fa-clock-o" />
266			</span>
267			</th>
268			</tr>
269			</thead>
270			<tbody>
271			{playerStatistics.map(function (stats) {
272			return (
273			<tr>
274			<td
275			className={
276			"player-detail__column player-detail__column--string"
277			}
278			>
279			{stats.team.replace("Voetbal : ", "")}
280			</td>
281			<td
282			className={
283			"player-detail__column player-detail__column--number"
284			}
285			>
286			{stats.gamesPlayed}
287			</td>
288			<td
289			className={
290			"player-detail__column player-detail__column--number"
291			}
292			>
293			{stats.gamesWon}
294			</td>
295			<td
296			className={
297			"player-detail__column player-detail__column--number"
298			}
299			>
300			{stats.gamesEqual}
301			</td>
302			<td
303			className={
304			"player-detail__column player-detail__column--number"
305			}
306			>
307			{stats.gamesLost}
308			</td>
309			<td
310			className={
311			"player-detail__column player-detail__column--number"
312			}
313			>
314			{stats.yellowCards}
315			</td>
316			<td
317			className={
318			"player-detail__column player-detail__column--number"
319			}
320			>
321			{stats.redCards}
322			</td>
323			<td
324			className={
325			"player-detail__column player-detail__column--number"
326			}
327			>
328			{stats.goals}
329			</td>
330			<td
331			className={
332			"player-detail__column player-detail__column--number"
333			}
334			>
335			{stats.cleanSheets}
336			</td>
337			<td
338			className={
339			"player-detail__column player-detail__column--number"
340			}
341			>
342			{stats.minutes}'
343			</td>
344			</tr>
345			)
346			})}
347			</tbody>
348			</table>
349			</div>
350			</article>
351			)
352			}
353			}
354			renderPlayerGamesFull = (player) => {
355			if (this.state.loading === false && this.state.data) {
356			const {
357			gameReports = [],
358			} = this.state.data
359
360			return (
361			<article
362			className={"player-detail__games card"}
363			>
364			<header className={"card__header"}>
365			<h4>Wedstrijden</h4>
366			</header>
367			<div className={"card__content"}>
368			<table className={"player-detail__games__table responsive-card-table"}>
369			<thead>
370			<tr>
371			<th className={"player-detail__column player-detail__column--string"}>Team</th>
372			<th className={"player-detail__column player-detail__column--string"}>Type</th>
373			<th className={"player-detail__column player-detail__column--string"}>Datum</th>
374			<th className={"player-detail__column player-detail__column--number"}><span title="Thuis/uit">H/A</span></th>
375			<th className={"player-detail__column player-detail__column--score"}>Score</th>
376			<th className={"player-detail__column player-detail__column--string"}>Tegenstander</th>
377			<th className={"player-detail__column player-detail__column--number"}>
378			<img
379			src={iconCardYellow}
380			title="Gele kaart"
381			alt="Gele kaart"
382			className="player-detail__stats--header_icon"
383			/>
384			</th>
385			<th className={"player-detail__column player-detail__column--number"}>
386			<img
387			src={iconCardRed}
388			title="Rode kaart"
389			alt="Rode kaart"
390			className="player-detail__stats--header_icon"
391			/>
392			</th>
393			<th className={"player-detail__column player-detail__column--number"}>
394			<img
395			src={iconGoal}
396			title="Doelpunten gescoord"
397			alt="Rode kaart"
398			className="player-detail__stats--header_icon"
399			/>
400			</th>
401			<th className={"player-detail__column player-detail__column--number"}>
402			<span title="Minuten gespeeld">
403			<Icon icon="fa-clock-o" />
404			</span>
405			</th>
406			</tr>
407			</thead>
408			<tbody>
409			{gameReports.map(function (game) {
410			return (
411			<tr>
412			<td data-label="Team" className={"player-detail__column player-detail__column--string"}>{game.team.replace("Voetbal : ", "")}</td>
413			<td data-label="Type" className={"player-detail__column player-detail__column--string"}>{game.competition}</td>
414			<td data-label="Datum" className={"player-detail__column player-detail__column--string"}>{moment(game.date).format("DD/MM/YYYY")}</td>
415			<td data-label="Thuis/uit" className={"player-detail__column player-detail__column--number"}>
416			{game.home ? (
417			<span
418			className={"player-detail__games__home"}
419			title="Thuiswedstrijd"
420			>
421			H
422			</span>
423			) : (
424			<span
425			className={"player-detail__games__away"}
426			title="Uitwedstrijd"
427			>
428			A
429			</span>
430			)}
431			</td>
432			<td data-label="Score" className={"player-detail__column player-detail__column--score"}>
433			{game.goalsHomeTeam} - {game.goalsAwayTeam}
434			</td>
435			<td data-label="Tegenstander" className={"player-detail__column player-detail__column--string"}>{game.opponent}</td>
436			<td data-label="Gele kaart(en)" className={"player-detail__column player-detail__column--number"}>{game.yellowCards}</td>
437			<td data-label="Rode kaart(en)" className={"player-detail__column player-detail__column--number"}>{game.redCards}</td>
438			<td data-label="Doelpunten" className={"player-detail__column player-detail__column--number"}>{game.goals}</td>
439			<td data-label="Speeltijd" className={"player-detail__column player-detail__column--number"}>{game.minutesPlayed}'</td>
440			</tr>
441			)
442			})}
443			</tbody>
444			</table>
445			</div>
446			</article>
447			)
448			}
449			}
450
451			renderPlayerBirthdate = (player) => (
452			<div
453			className={"player-detail__data-item player-detail__data-item--birthdate"}
454			>
455			<span className={"player-detail__data-item__label"}>Geboortedatum</span>
456			<span className={"player-detail__data-item__data"}>
457			{player.field_birth_date \|\| "Onbekend"}
458			</span>
459			</div>
460			)
461			renderPlayerPosition = (player) => (
462			<div
463			className={"player-detail__data-item player-detail__data-item--position"}
464			>
465			<span className={"player-detail__date-item__data"}>
466			{player.field_position && mapPositionCode(player.field_position)}
467			</span>
468			<span className={"player-detail__data-item__label"}>
469			{player.relationships.node__team && (
470			<Link to={player.relationships.node__team[0].path.alias}>
471			{player.relationships.node__team[0].title}
472			</Link>
473			)}
474			</span>
475			</div>
476			)
477			renderPlayerJoinDate = (player) => {
478			const currentlyPlaying = !player.field_date_leave
479			return (
480			<div
481			className={
482			"player-detail__data-item player-detail__data-item--joindate"
483			}
484			>
485			<span className={"player-detail__data-item__label"}>
486			{currentlyPlaying && "Speler bij KCVV sinds"}
487			{!currentlyPlaying && "Speler tussen"}
488			</span>
489			<span className={"player-detail__data-item__data"}>
490			{player.field_join_date \|\| "Onbekend"}
491			{!currentlyPlaying && (
492			<>
493			<span className={"text--regular"}> en </span>{" "}
494			{player.field_date_leave}
495			</>
496			)}
497			</span>
498			</div>
499			)
500			}
501			renderPlayerData = (player) => (
502			<section className={"player-detail__data"}>
503			{this.renderPlayerBirthdate(player)}
504			{this.renderPlayerPosition(player)}
505			{this.renderPlayerJoinDate(player)}
506			</section>
507			)
508			renderPlayerBody = (player) => {
509			const cleanBody =
510			(player.body &&
511			player.body.processed.replaceAll(
512			"/sites/default/",
513			`${process.env.GATSBY_API_DOMAIN}/sites/default/`
514			)) \|\|
515			""
516
517			return (
518			<section className={"player-detail__body"}>
519			<div dangerouslySetInnerHTML={{ __html: cleanBody }} />
520			</section>
521			)
522			}
523			render() {
524			const { player } = this.props
525
526			return (
527			<article className={"player-detail"}>
528			{this.renderPlayerHeader(player)}
529			{this.renderPlayerStats(player)}
530			<div className={"player-break"}></div>
531			{this.renderPlayerData(player)}
532			{this.renderPlayerBody(player)}
533			{this.renderPlayerStatsFull(player)}
534			{this.renderPlayerGamesFull(player)}
535			</article>
536			)
537			}
538			}
539
540			// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
541			const query = graphql`
542			query {
543			site {
544			siteMetadata {
545			kcvvPsdApi
546			}
547			}
548			}
549			`
550
551			export default ({ player }) => (
552			<StaticQuery
553			query={query}
554			render={(data) => (
555			<PlayerDetail
556			// Data is the result of our query.
557			config={data}
558			player={player}
559			/>
560			)}
561			/>
562			)
563

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/player-stats ( aaa03b...b52d24 )

PlayerDetail.renderPlayerStats C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like