GamePage.render - Code Metrics - Inspection of "Merge branch 'develop' into feature/typescript" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/typescript ( 497e7e...7bdc89 )

by Kevin Van

created 2021-03-17 12:30 UTC

GamePage.render F

↳ Parent: GamePage

Complexity

Conditions

Size

Total Lines	114
Code Lines	98

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	98
dl	0
loc	114
rs	3.0054
c	0
b	0
f	0
cc	13

How to fix Long Method Complexity

import React, { Component } from "react"
import LazyLoad from "react-lazy-load"

import { graphql } from "gatsby"

import moment from "moment"
import "moment/locale/nl-be"

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

import Layout from "../layouts/index"
import SEO from "../components/seo"
import Icon from "../components/icon"

import iconBench from "../images/i_bench_2.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"

class GamePage extends Component {
  constructor(props) {
    super(props)

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

    const {
      data: {
        site: {
          siteMetadata: { kcvvPsdApi },
        },
      },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.matchId = this.props.id || null
  }

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

    const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`

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

  componentDidMount() {
    this.updateData()
  }

  render() {
    if (this.matchId === null) {
      return (
        <Layout>
          <section className="grid-container site-content">
            Geen match beschikbaar...
          </section>
        </Layout>
      )
    }

    moment.locale("nl-be")

    if (this.state.loading === false && this.state.data) {
      const {
        general = {},
        substitutes = {},
        lineup = {},
        events = [],
      } = this.state.data
      const homeTeamId = general.homeClub.id
      const ogImage = {
        src: general?.homeClub.logo,
        width: 180,
        height: 180,
      }

      const { home: homeLineup = [], away: awayLineup = [] } = lineup || {}
      const { home: homeSubs = [], away: awaySubs = [] } = substitutes || {}

      const matchTime = moment(general.date)

      return (
        <Layout>
          <SEO
            lang="nl-BE"
            title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            path={`/game/${general?.id}`}
            image={ogImage}
          />

          <section className="grid-container game-stats">
            <div className="grid-x grid-margin-x">
              <div className={"cell large-12 center game__details"}>
                <div className="game__teams">
                  <div className={"game__teams-inner"}>
                    <LazyLoad debounce={false}>
                      <img
                        src={general.homeClub.logo}
                        alt={general.homeClub.name}
                        title={general.homeClub.name}
                      />
                    </LazyLoad>
                  </div>
                  {this.renderScore(
                    general.goalsHomeTeam,
                    general.goalsAwayTeam
                  )}
                  <div className={"game__teams-inner"}>
                    <LazyLoad debounce={false}>
                      <img
                        src={general.awayClub.logo}
                        alt={general.awayClub.name}
                        title={general.awayClub.name}
                      />
                    </LazyLoad>
                  </div>
                </div>
                <h1>{`${general.homeClub.name} - ${general.awayClub.name}`}</h1>
                <h4>{general.competitionType}</h4>
                <time dateTime={matchTime.format("YYYY-MM-DD - H:mm")}>
                  {matchTime.format("dddd DD MMMM YYYY - H:mm")}
                </time>
                <br />
                {general.status !== 0 && mapPsdStatus(general.status)}
                <br />
              </div>

              {(homeLineup.length !== 0 || awayLineup.length !== 0) && (
                <div
                  className={
                    "lineup__wrapper grid-x grid-margin-x cell large-12"
                  }
                >
                  <div className={"cell large-6 lineup__wrapper--home"}>
                    <h3>{general.homeClub.name}</h3>
                    {homeLineup && this.renderLineup(homeLineup, homeSubs)}
                  </div>
                  <div className={"cell large-6 lineup__wrapper--away"}>
                    <h3>{general.awayClub.name}</h3>
                    {awayLineup && this.renderLineup(awayLineup, awaySubs)}
                  </div>
                </div>
              )}

              {events.length !== 0 && (
                <div className={"cell large-12 event__wrapper"}>
                  <h3>Gebeurtenissen</h3>
                  {events && this.renderEvents(events, homeTeamId)}
                </div>
              )}
            </div>
          </section>
        </Layout>
      )
    } else {
      return (
        <Layout>
          <section className="grid-container site-content">
            Matchverslag inladen...
          </section>
        </Layout>
      )
    }
  }

  renderScore = (resultHome, resultAway) => {
    return resultHome !== null && resultAway !== null ? (
      <div className={"match-details__vs match-details__vs--score"}>
        {this.renderScoreWithWinnerIndicator(resultHome, resultAway, "home")}
        <span className={"match-details__divider"}> - </span>
        {this.renderScoreWithWinnerIndicator(resultAway, resultHome, "away")}
      </div>
    ) : (
      <div className={"match-details__vs"}>VS</div>
    )
  }

  renderScoreWithWinnerIndicator = (result1, result2, extraClass) => {
    return result1 > result2 ? (
      <span
        className={`match-details__winner match-details__winner--${extraClass}`}
      >
        {result1}
      </span>
    ) : (
      <span className={"match-details__loser"}>{result1}</span>
    )
  }

  renderEvents(events, homeTeamId) {
    return (
      <>
        {events.map((element, i) =>
          this.renderEventLine(i, element, homeTeamId)
        )}
      </>
    )
  }

  renderEventLine(i, element, homeTeamId) {
    const homeTeam = element.clubId == homeTeamId
    let actionIcon = null
    let actionMessage = ""
    let actionText = ""

    switch (element.action) {
      case "geel":
        actionIcon = iconCardYellow
        actionText = "Gele kaart voor"
        actionMessage = "Gele kaart"
        break
      case "rood":
        actionIcon = iconCardRed
        actionText = "Rode kaart voor"
        actionMessage = "Rode kaart"
        break
      case "tweedegeel":
        actionIcon = iconCardYellowRed
        actionText = "Tweede gele kaart voor"
        actionMessage = "Tweede gele kaart"
        break
      case "doelpunt":
        actionIcon = iconGoal
        actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
        actionMessage = "Doelpunt"
        break
    }

    return (
      <div
        className={`event__row ${
          homeTeam ? "event__row--home" : "event__row--away"
        } grid-x grid-margin-x`}
        key={i}
      >
        {homeTeam && (
          <span
            className={
              "event__row__item event__row__item--home lineup__item--name cell small-10 large-4"
            }
          >
            {actionText} {element.playerName}
          </span>
        )}
        {homeTeam && (
          <span
            className={
              "event__row__item event__row__item--home lineup__item--action cell small-1 center"
            }
            style={{ backgroundImage: `url(${actionIcon})` }}
            title={actionMessage}
          ></span>
        )}
        <span
          className={
            "event__row__item lineup__item--time cell small-1 large-2 center"
          }
        >
          {element.minute}'
        </span>
        {homeTeam || (
          <span
            className={
              "event__row__item event__row__item--away lineup__item--action cell small-1 center"
            }
            style={{ backgroundImage: `url(${actionIcon})` }}
            title={actionMessage}
          ></span>
        )}
        {homeTeam || (
          <span
            className={
              "event__row__item event__row__item--away lineup__item--name cell small-10 large-4"
            }
          >
            {actionText} {element.playerName}
          </span>
        )}
      </div>
    )
  }
  renderLineup(lineup, substitutes) {
    return (
      <>
        {this.renderLineupHeader()}
        {lineup.map((element, i) => this.renderLineupLine(i, element))}
        <hr />
        {substitutes.map((element, i) => this.renderSubLine(i, element))}
      </>
    )
  }

  renderLineupHeader() {
    return (
      <div className={"lineup__header grid-x grid-margin-x"}>
        <span
          className={"lineup__header__item lineup__item--status cell small-1"}
        ></span>
        <span
          className={"lineup__header__item lineup__item--number cell small-1"}
        >
          #
        </span>
        <span
          className={"lineup__header__item lineup__item--name cell small-9"}
        >
          Name
        </span>
        <span
          className={"lineup__header__item lineup__item--time cell small-1"}
        >
          <Icon icon="fa-clock-o" />
        </span>
      </div>
    )
  }

  renderSubLine(i, element) {
    return (
      <div
        className={"lineup__row lineup__row--substitute grid-x grid-margin-x"}
        key={i}
      >
        <span
          className={"lineup__row__item lineup__item--status cell small-1"}
          style={{
            backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
          }}
          title={`${element.changed ? "Wisselspeler ingevallen" : "Wisselspeler"}`}
        ></span>
        <span className={"lineup__row__item lineup__item--number cell small-1"}>
          {element.number}
        </span>
        <span className={"lineup__row__item lineup__item--name cell small-9"}>
          {element.playerName}
        </span>
        <span className={"lineup__row__item lineup__item--time cell small-1"}>
          {element.minutesPlayed}'
        </span>
      </div>
    )
  }

  renderLineupLine(i, element) {
    return (
      <div
        className={"lineup__row lineup__row--lineup grid-x grid-margin-x"}
        key={i}
      >
        <span
          className={"lineup__row__item lineup__item--status cell small-1"}
          style={{
            backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`
          }}
          title={`${element.changed ? "Basisspeler gewisseld" : "Basisspeler"}`}
        ></span>
        <span className={"lineup__row__item lineup__item--number cell small-1"}>
          {element.number}
        </span>
        <span className={"lineup__row__item lineup__item--name cell small-9"}>
          {element.playerName} {element.captain && `(C)`}
        </span>
        <span className={"lineup__row__item lineup__item--time cell small-1"}>
          {element.minutesPlayed}'
        </span>
      </div>
    )
  }
}

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        kcvvPsdApi
      }
    }
  }
`

export default GamePage


1			import React, { Component } from "react"
2			import LazyLoad from "react-lazy-load"
3
4			import { graphql } from "gatsby"
5
6			import moment from "moment"
7			import "moment/locale/nl-be"
8
9			import { mapPsdStatus } from "../scripts/helper"
10
11			import Layout from "../layouts/index"
12			import SEO from "../components/seo"
13			import Icon from "../components/icon"
14
15			import iconBench from "../images/i_bench_2.png"
16			import iconCardRed from "../images/i_card_red.png"
17			import iconCardYellowRed from "../images/i_card_yellow_red.png"
18			import iconCardYellow from "../images/i_card_yellow.png"
19			import iconGoal from "../images/i_goal.png"
20			import iconStart from "../images/i_start.png"
21			import iconSubIn from "../images/i_sub_in.png"
22			import iconSubOut from "../images/i_sub_out.png"
23
24			class GamePage extends Component {
25			constructor(props) {
26			super(props)
27
28			this.state = {
29			data: [],
30			loading: true,
31			}
32
33			const {
34			data: {
35			site: {
36			siteMetadata: { kcvvPsdApi },
37			},
38			},
39			} = this.props
40
41			this.kcvvPsdApi = kcvvPsdApi
42			this.matchId = this.props.id \|\| null
43			}
44
45			updateData() {
46			if (this.matchId === null) {
47			return
48			}
49
50			const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`
51
52			fetch(apiUrl)
53			.then((response) => response.json())
54			.then((json) => this.setState({ data: json, loading: false }))
55			}
56
57			componentDidMount() {
58			this.updateData()
59			}
60
61			render() {
62			if (this.matchId === null) {
63			return (
64			<Layout>
65			<section className="grid-container site-content">
66			Geen match beschikbaar...
67			</section>
68			</Layout>
69			)
70			}
71
72			moment.locale("nl-be")
73
74			if (this.state.loading === false && this.state.data) {
75			const {
76			general = {},
77			substitutes = {},
78			lineup = {},
79			events = [],
80			} = this.state.data
81			const homeTeamId = general.homeClub.id
82			const ogImage = {
83			src: general?.homeClub.logo,
84			width: 180,
85			height: 180,
86			}
87
88			const { home: homeLineup = [], away: awayLineup = [] } = lineup \|\| {}
89			const { home: homeSubs = [], away: awaySubs = [] } = substitutes \|\| {}
90
91			const matchTime = moment(general.date)
92
93			return (
94			<Layout>
95			<SEO
96			lang="nl-BE"
97			title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
98			description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
99			path={`/game/${general?.id}`}
100			image={ogImage}
101			/>
102
103			<section className="grid-container game-stats">
104			<div className="grid-x grid-margin-x">
105			<div className={"cell large-12 center game__details"}>
106			<div className="game__teams">
107			<div className={"game__teams-inner"}>
108			<LazyLoad debounce={false}>
109			<img
110			src={general.homeClub.logo}
111			alt={general.homeClub.name}
112			title={general.homeClub.name}
113			/>
114			</LazyLoad>
115			</div>
116			{this.renderScore(
117			general.goalsHomeTeam,
118			general.goalsAwayTeam
119			)}
120			<div className={"game__teams-inner"}>
121			<LazyLoad debounce={false}>
122			<img
123			src={general.awayClub.logo}
124			alt={general.awayClub.name}
125			title={general.awayClub.name}
126			/>
127			</LazyLoad>
128			</div>
129			</div>
130			<h1>{`${general.homeClub.name} - ${general.awayClub.name}`}</h1>
131			<h4>{general.competitionType}</h4>
132			<time dateTime={matchTime.format("YYYY-MM-DD - H:mm")}>
133			{matchTime.format("dddd DD MMMM YYYY - H:mm")}
134			</time>
135			<br />
136			{general.status !== 0 && mapPsdStatus(general.status)}
137			<br />
138			</div>
139
140			{(homeLineup.length !== 0 \|\| awayLineup.length !== 0) && (
141			<div
142			className={
143			"lineup__wrapper grid-x grid-margin-x cell large-12"
144			}
145			>
146			<div className={"cell large-6 lineup__wrapper--home"}>
147			<h3>{general.homeClub.name}</h3>
148			{homeLineup && this.renderLineup(homeLineup, homeSubs)}
149			</div>
150			<div className={"cell large-6 lineup__wrapper--away"}>
151			<h3>{general.awayClub.name}</h3>
152			{awayLineup && this.renderLineup(awayLineup, awaySubs)}
153			</div>
154			</div>
155			)}
156
157			{events.length !== 0 && (
158			<div className={"cell large-12 event__wrapper"}>
159			<h3>Gebeurtenissen</h3>
160			{events && this.renderEvents(events, homeTeamId)}
161			</div>
162			)}
163			</div>
164			</section>
165			</Layout>
166			)
167			} else {
168			return (
169			<Layout>
170			<section className="grid-container site-content">
171			Matchverslag inladen...
172			</section>
173			</Layout>
174			)
175			}
176			}
177
178			renderScore = (resultHome, resultAway) => {
179			return resultHome !== null && resultAway !== null ? (
180			<div className={"match-details__vs match-details__vs--score"}>
181			{this.renderScoreWithWinnerIndicator(resultHome, resultAway, "home")}
182			<span className={"match-details__divider"}> - </span>
183			{this.renderScoreWithWinnerIndicator(resultAway, resultHome, "away")}
184			</div>
185			) : (
186			<div className={"match-details__vs"}>VS</div>
187			)
188			}
189
190			renderScoreWithWinnerIndicator = (result1, result2, extraClass) => {
191			return result1 > result2 ? (
192			<span
193			className={`match-details__winner match-details__winner--${extraClass}`}
194			>
195			{result1}
196			</span>
197			) : (
198			<span className={"match-details__loser"}>{result1}</span>
199			)
200			}
201
202			renderEvents(events, homeTeamId) {
203			return (
204			<>
205			{events.map((element, i) =>
206			this.renderEventLine(i, element, homeTeamId)
207			)}
208			</>
209			)
210			}
211
212			renderEventLine(i, element, homeTeamId) {
213			const homeTeam = element.clubId == homeTeamId
214			let actionIcon = null
215			let actionMessage = ""
216			let actionText = ""
217
218			switch (element.action) {
219			case "geel":
220			actionIcon = iconCardYellow
221			actionText = "Gele kaart voor"
222			actionMessage = "Gele kaart"
223			break
224			case "rood":
225			actionIcon = iconCardRed
226			actionText = "Rode kaart voor"
227			actionMessage = "Rode kaart"
228			break
229			case "tweedegeel":
230			actionIcon = iconCardYellowRed
231			actionText = "Tweede gele kaart voor"
232			actionMessage = "Tweede gele kaart"
233			break
234			case "doelpunt":
235			actionIcon = iconGoal
236			actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
237			actionMessage = "Doelpunt"
238			break
239			}
240
241			return (
242			<div
243			className={`event__row ${
244			homeTeam ? "event__row--home" : "event__row--away"
245			} grid-x grid-margin-x`}
246			key={i}
247			>
248			{homeTeam && (
249			<span
250			className={
251			"event__row__item event__row__item--home lineup__item--name cell small-10 large-4"
252			}
253			>
254			{actionText} {element.playerName}
255			</span>
256			)}
257			{homeTeam && (
258			<span
259			className={
260			"event__row__item event__row__item--home lineup__item--action cell small-1 center"
261			}
262			style={{ backgroundImage: `url(${actionIcon})` }}
263			title={actionMessage}
264			></span>
265			)}
266			<span
267			className={
268			"event__row__item lineup__item--time cell small-1 large-2 center"
269			}
270			>
271			{element.minute}'
272			</span>
273			{homeTeam \|\| (
274			<span
275			className={
276			"event__row__item event__row__item--away lineup__item--action cell small-1 center"
277			}
278			style={{ backgroundImage: `url(${actionIcon})` }}
279			title={actionMessage}
280			></span>
281			)}
282			{homeTeam \|\| (
283			<span
284			className={
285			"event__row__item event__row__item--away lineup__item--name cell small-10 large-4"
286			}
287			>
288			{actionText} {element.playerName}
289			</span>
290			)}
291			</div>
292			)
293			}
294			renderLineup(lineup, substitutes) {
295			return (
296			<>
297			{this.renderLineupHeader()}
298			{lineup.map((element, i) => this.renderLineupLine(i, element))}
299			<hr />
300			{substitutes.map((element, i) => this.renderSubLine(i, element))}
301			</>
302			)
303			}
304
305			renderLineupHeader() {
306			return (
307			<div className={"lineup__header grid-x grid-margin-x"}>
308			<span
309			className={"lineup__header__item lineup__item--status cell small-1"}
310			></span>
311			<span
312			className={"lineup__header__item lineup__item--number cell small-1"}
313			>
314			#
315			</span>
316			<span
317			className={"lineup__header__item lineup__item--name cell small-9"}
318			>
319			Name
320			</span>
321			<span
322			className={"lineup__header__item lineup__item--time cell small-1"}
323			>
324			<Icon icon="fa-clock-o" />
325			</span>
326			</div>
327			)
328			}
329
330			renderSubLine(i, element) {
331			return (
332			<div
333			className={"lineup__row lineup__row--substitute grid-x grid-margin-x"}
334			key={i}
335			>
336			<span
337			className={"lineup__row__item lineup__item--status cell small-1"}
338			style={{
339			backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
340			}}
341			title={`${element.changed ? "Wisselspeler ingevallen" : "Wisselspeler"}`}
342			></span>
343			<span className={"lineup__row__item lineup__item--number cell small-1"}>
344			{element.number}
345			</span>
346			<span className={"lineup__row__item lineup__item--name cell small-9"}>
347			{element.playerName}
348			</span>
349			<span className={"lineup__row__item lineup__item--time cell small-1"}>
350			{element.minutesPlayed}'
351			</span>
352			</div>
353			)
354			}
355
356			renderLineupLine(i, element) {
357			return (
358			<div
359			className={"lineup__row lineup__row--lineup grid-x grid-margin-x"}
360			key={i}
361			>
362			<span
363			className={"lineup__row__item lineup__item--status cell small-1"}
364			style={{
365			backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`
366			}}
367			title={`${element.changed ? "Basisspeler gewisseld" : "Basisspeler"}`}
368			></span>
369			<span className={"lineup__row__item lineup__item--number cell small-1"}>
370			{element.number}
371			</span>
372			<span className={"lineup__row__item lineup__item--name cell small-9"}>
373			{element.playerName} {element.captain && `(C)`}
374			</span>
375			<span className={"lineup__row__item lineup__item--time cell small-1"}>
376			{element.minutesPlayed}'
377			</span>
378			</div>
379			)
380			}
381			}
382
383			export const pageQuery = graphql`
384			query {
385			site {
386			siteMetadata {
387			kcvvPsdApi
388			}
389			}
390			}
391			`
392
393			export default GamePage
394

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/typescript ( 497e7e...7bdc89 )

GamePage.render F

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like