GamePage.render - Code Metrics - Inspection of "Basic match detail page." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/game-reports ( 6dfcfc...812aeb )

by Kevin Van

created 2021-03-12 08:50 UTC

GamePage.render D

↳ Parent: GamePage

Complexity

Conditions

Size

Total Lines	61
Code Lines	58

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	58
dl	0
loc	61
rs	4.7345
c	0
b	0
f	0
cc	12

How to fix Long Method Complexity

import React, { Component } from "react"

import { graphql } from "gatsby"

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

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

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

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

    this.kcvvPsdApi = kcvvPsdApi
    this.apiRefreshRate = refreshRate
    this.timeout = {}
    this.matchId = this.props.id || null
  }

  updateData() {
    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.state.loading === false && this.state.data) {
      const { general, substitutes, lineup, events } = this.state.data
      const homeTeamId = general.homeClub.id
      const awayTeamId = general.awayClub.id
      const ogImage = {
        src: general?.homeClub.logo,
        width: 180,
        height: 180,
      }

      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 site-content">
            <div className="grid-x grid-margin-x">
              <div className={"cell large-12 center"}>
                {general.date}
                <br />
                {general.status}
                <br />
                {general.homeClub.name}
                <img src={general.homeClub.logo} alt={general.homeClub.name} />
                {general.goalsHomeTeam} - {general.goalsAwayTeam}
                {general.awayClub.name}
                <img src={general.awayClub.logo} alt={general.awayClub.name} />
                <br />
                {general.competitionType}
              </div>

              <div className={"cell large-6"}>
                <strong>{general.homeClub.name}</strong>
                {this.renderLineup(lineup.home, substitutes.home)}
              </div>
              <div className={"cell large-6"}>
                <strong>{general.awayClub.name}</strong>
                {this.renderLineup(lineup.away, substitutes.away)}
              </div>

              <div className={"cell large-12"}>
                <strong>Events</strong>
                {this.renderEvents(events, homeTeamId)}
              </div>
            </div>
          </section>
        </Layout>
      )
    } else {
      return (
        <Layout>
          <section className="grid-container site-content">
            Matchverslag inladen...
          </section>
        </Layout>
      )
    }
  }

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

  renderEventLine(i, element, homeTeamId) {
    return (
      <div
        className={`event__row ${element.clubId == homeTeamId ? 'event__row--home' : 'event__row--away'} grid-x grid-margin-x`}
        key={i}
      >
        <span className={"event__row__item event__row__item--home lineup__item--name cell small-10 large-4"}>
          {element.playerName}
        </span>
        <span className={"event__row__item event__row__item--home lineup__item--number cell small-1 center"}>
          {element.action}
        </span>
        <span className={"event__row__item lineup__item--time cell small-1 large-2 center"}>
          {element.minute}'
        </span>
        <span className={"event__row__item event__row__item--away lineup__item--number cell small-1 center"}>
          {element.action}
        </span>
        <span className={"event__row__item event__row__item--away lineup__item--name cell small-10 large-4"}>
          {element.playerName}
        </span>
      </div>
    )
  }
  renderLineup(lineup, substitutes) {
    return (
      <div className={"lineup__wrapper"}>
        {this.renderLineupHeader()}
        {lineup.map((element, i) => this.renderLineupLine(i, element))}
        {substitutes.map((element, i) => this.renderSubLine(i, element))}
      </div>
    )
  }

  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"}>
          {element.status}
        </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 right"}>
          {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"}>
          {element.status}
        </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 right"}>
          {element.minutesPlayed}'
        </span>
      </div>
    )
  }
}

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

export default GamePage


1			import React, { Component } from "react"
2
3			import { graphql } from "gatsby"
4
5			import Layout from "../layouts/index"
6			import SEO from "../components/seo"
7			import Icon from "../components/icon"
8
9			class GamePage extends Component {
10			constructor(props) {
11			super(props)
12
13			this.state = {
14			data: [],
15			loading: true,
16			}
17
18			const {
19			data: {
20			site: {
21			siteMetadata: { kcvvPsdApi, refreshRate },
22			},
23			},
24			} = this.props
25
26			this.kcvvPsdApi = kcvvPsdApi
27			this.apiRefreshRate = refreshRate
28			this.timeout = {}
29			this.matchId = this.props.id \|\| null
30			}
31
32			updateData() {
33			const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`
34
35			fetch(apiUrl)
36			.then((response) => response.json())
37			.then((json) => this.setState({ data: json, loading: false }))
38			}
39
40			componentDidMount() {
41			this.updateData()
42			}
43
44			render() {
45			if (this.state.loading === false && this.state.data) {
46			const { general, substitutes, lineup, events } = this.state.data
47			const homeTeamId = general.homeClub.id
48			const awayTeamId = general.awayClub.id
49			const ogImage = {
50			src: general?.homeClub.logo,
51			width: 180,
52			height: 180,
53			}
54
55			return (
56			<Layout>
57			<SEO
58			lang="nl-BE"
59			title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
60			description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
61			path={`/game/${general?.id}`}
62			image={ogImage}
63			/>
64			<section className="grid-container site-content">
65			<div className="grid-x grid-margin-x">
66			<div className={"cell large-12 center"}>
67			{general.date}
68			<br />
69			{general.status}
70			<br />
71			{general.homeClub.name}
72			<img src={general.homeClub.logo} alt={general.homeClub.name} />
73			{general.goalsHomeTeam} - {general.goalsAwayTeam}
74			{general.awayClub.name}
75			<img src={general.awayClub.logo} alt={general.awayClub.name} />
76			<br />
77			{general.competitionType}
78			</div>
79
80			<div className={"cell large-6"}>
81			<strong>{general.homeClub.name}</strong>
82			{this.renderLineup(lineup.home, substitutes.home)}
83			</div>
84			<div className={"cell large-6"}>
85			<strong>{general.awayClub.name}</strong>
86			{this.renderLineup(lineup.away, substitutes.away)}
87			</div>
88
89			<div className={"cell large-12"}>
90			<strong>Events</strong>
91			{this.renderEvents(events, homeTeamId)}
92			</div>
93			</div>
94			</section>
95			</Layout>
96			)
97			} else {
98			return (
99			<Layout>
100			<section className="grid-container site-content">
101			Matchverslag inladen...
102			</section>
103			</Layout>
104			)
105			}
106			}
107
108			renderEvents(events, homeTeamId) {
109			return (
110			<div className={"event__wrapper"}>
111			{events.map((element, i) => this.renderEventLine(i, element, homeTeamId))}
112			</div>
113			)
114			}
115
116			renderEventLine(i, element, homeTeamId) {
117			return (
118			<div
119			className={`event__row ${element.clubId == homeTeamId ? 'event__row--home' : 'event__row--away'} grid-x grid-margin-x`}
120			key={i}
121			>
122			<span className={"event__row__item event__row__item--home lineup__item--name cell small-10 large-4"}>
123			{element.playerName}
124			</span>
125			<span className={"event__row__item event__row__item--home lineup__item--number cell small-1 center"}>
126			{element.action}
127			</span>
128			<span className={"event__row__item lineup__item--time cell small-1 large-2 center"}>
129			{element.minute}'
130			</span>
131			<span className={"event__row__item event__row__item--away lineup__item--number cell small-1 center"}>
132			{element.action}
133			</span>
134			<span className={"event__row__item event__row__item--away lineup__item--name cell small-10 large-4"}>
135			{element.playerName}
136			</span>
137			</div>
138			)
139			}
140			renderLineup(lineup, substitutes) {
141			return (
142			<div className={"lineup__wrapper"}>
143			{this.renderLineupHeader()}
144			{lineup.map((element, i) => this.renderLineupLine(i, element))}
145			{substitutes.map((element, i) => this.renderSubLine(i, element))}
146			</div>
147			)
148			}
149
150			renderLineupHeader() {
151			return (
152			<div className={"lineup__header grid-x grid-margin-x"}>
153			<span
154			className={"lineup__header__item lineup__item--status cell small-1"}
155			></span>
156			<span
157			className={"lineup__header__item lineup__item--number cell small-1"}
158			>
159			#
160			</span>
161			<span
162			className={"lineup__header__item lineup__item--name cell small-9"}
163			>
164			Name
165			</span>
166			<span
167			className={"lineup__header__item lineup__item--time cell small-1"}
168			>
169			<Icon icon="fa-clock-o" />
170			</span>
171			</div>
172			)
173			}
174
175			renderSubLine(i, element) {
176			return (
177			<div
178			className={"lineup__row lineup__row--substitute grid-x grid-margin-x"}
179			key={i}
180			>
181			<span className={"lineup__row__item lineup__item--status cell small-1"}>
182			{element.status}
183			</span>
184			<span className={"lineup__row__item lineup__item--number cell small-1"}>
185			{element.number}
186			</span>
187			<span className={"lineup__row__item lineup__item--name cell small-9"}>
188			{element.playerName}
189			</span>
190			<span className={"lineup__row__item lineup__item--time cell small-1 right"}>
191			{element.minutesPlayed}'
192			</span>
193			</div>
194			)
195			}
196
197			renderLineupLine(i, element) {
198			return (
199			<div
200			className={"lineup__row lineup__row--lineup grid-x grid-margin-x"}
201			key={i}
202			>
203			<span className={"lineup__row__item lineup__item--status cell small-1"}>
204			{element.status}
205			</span>
206			<span className={"lineup__row__item lineup__item--number cell small-1"}>
207			{element.number}
208			</span>
209			<span className={"lineup__row__item lineup__item--name cell small-9"}>
210			{element.playerName} {element.captain && `(C)`}
211			</span>
212			<span className={"lineup__row__item lineup__item--time cell small-1 right"}>
213			{element.minutesPlayed}'
214			</span>
215			</div>
216			)
217			}
218			}
219
220			export const pageQuery = graphql`
221			query {
222			site {
223			siteMetadata {
224			siteUrl
225			kcvvPsdApi
226			refreshRate
227			}
228			}
229			}
230			`
231
232			export default GamePage
233

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/game-reports ( 6dfcfc...812aeb )

GamePage.render D

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like