RankingRow.render - Code Metrics - Inspection of "Update dependency node-sass to v5" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — renovate/node-sass-5.x ( 23d564...eb69a0 )

by Kevin Van

created 2021-03-11 09:57 UTC

RankingRow.render B

↳ Parent: RankingRow

Complexity

Conditions

Size

Total Lines	67
Code Lines	52

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	52
dl	0
loc	67
c	0
b	0
f	0
rs	8.5709
cc	2

How to fix Long Method

import React, { Component } from "react"
import { graphql, StaticQuery } from "gatsby"

import "./ranking.scss"

class RankingRow extends Component {
  render() {
    return (
      <tr
        className={
          this.props.result.team === this.props.highlight
            ? "team-ranking__row--highlight team-ranking__row"
            : "team-ranking__row"
        }
      >
        <td
          className={
            "team-ranking__column team-ranking__column--number team-ranking__column--ranking"
          }
        >
          {this.props.result.position}
        </td>
        <td
          className={`team-ranking__column team-ranking__column--string team-ranking__column--team
            ${
              this.props.result.team.includes("Elewijt") &&
              "team-ranking__winner"
            }`}
        >
          {this.props.result.team}
        </td>
        <td className={"team-ranking__column team-ranking__column--number"}>
          {this.props.result.matches}
        </td>
        <td className={"team-ranking__column team-ranking__column--number"}>
          {this.props.result.wins}
        </td>
        <td className={"team-ranking__column team-ranking__column--number"}>
          {this.props.result.draws}
        </td>
        <td className={"team-ranking__column team-ranking__column--number"}>
          {this.props.result.losses}
        </td>
        <td
          className={
            "team-ranking__column team-ranking__column--number team-ranking__column--goals-pro"
          }
        >
          {this.props.result.goalsPro}
        </td>
        <td
          className={
            "team-ranking__column team-ranking__column--number team-ranking__column--goals-against"
          }
        >
          {" "}
          {this.props.result.goalsAgainst}
        </td>
        <td
          className={
            "team-ranking__column team-ranking__column--number team-ranking__column--goals-difference"
          }
        >
          {this.props.result.goalsPro - this.props.result.goalsAgainst}
        </td>
        <td
          className={
            "team-ranking__column team-ranking__column--number team-ranking__column--points"
          }
        >
          {this.props.result.points}
        </td>
      </tr>
    )
  }
}

class Ranking extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      loading: true,
    }

    this.apiServerUrl = props.config.site.siteMetadata.serverUrl
    this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
    this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
    this.timeout = {}
  }

  updateData() {
    let { season, region, division } = this.props

    fetch(
      `${this.apiServerUrl}/seasons/${season}/regions/${region}/rankings/${division}`
    )
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))

    this.timeout = setTimeout(() => {
      this.updateData(() => {})
    }, this.apiRefreshRate)
  }

  componentDidMount() {
    this.updateData()
  }

  componentWillUnmount() {
    clearInterval(this.timeout)
  }

  render() {
    if (this.state.loading === false && this.state.data) {
      this.state.data.sort((a, b) => {
        return a.position - b.position !== 0
          ? a.position - b.position
          : b.goalsPro - b.goalsAgainst - (a.goalsPro - a.goalsAgainst)
      })

      return (
        <div className={"team-ranking"}>
          <table className={"team-ranking__table"}>
            <thead className={"team-ranking__header"}>
              <tr className={"team-ranking__row"}>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number team-ranking__column--ranking"
                  }
                >
                  #
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--string team-ranking__column--team"
                  }
                >
                  Team
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number"
                  }
                >
                  M
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number"
                  }
                >
                  W
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number"
                  }
                >
                  D
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number"
                  }
                >
                  L
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number team-ranking__column--goals-pro"
                  }
                >
                  G+
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number team-ranking__column--goals-against"
                  }
                >
                  G-
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number team-ranking__column--goals-difference"
                  }
                >
                  +/-
                </th>
                <th
                  className={
                    "team-ranking__column team-ranking__column--number team-ranking__column--points"
                  }
                >
                  Pts
                </th>
              </tr>
            </thead>
            <tbody>
              {this.state.data.map((result, i) => (
                <RankingRow
                  result={result}
                  key={i}
                  highlight={this.props.highlight}
                />
              ))}
            </tbody>
          </table>
        </div>
      )
    } else {
      return <div>Loading...</div>
    }
  }
}

const query = graphql`
  query {
    site {
      siteMetadata {
        serverUrl
        refreshRate
      }
    }
  }
`

export default ({ season, region, division, highlight }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <Ranking
        config={data}
        season={season}
        region={region}
        division={division}
        highlight={highlight}
      />
    )}
  />
)


1			import React, { Component } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3
4			import "./ranking.scss"
5
6			class RankingRow extends Component {
7			render() {
8			return (
9			<tr
10			className={
11			this.props.result.team === this.props.highlight
12			? "team-ranking__row--highlight team-ranking__row"
13			: "team-ranking__row"
14			}
15			>
16			<td
17			className={
18			"team-ranking__column team-ranking__column--number team-ranking__column--ranking"
19			}
20			>
21			{this.props.result.position}
22			</td>
23			<td
24			className={`team-ranking__column team-ranking__column--string team-ranking__column--team
25			${
26			this.props.result.team.includes("Elewijt") &&
27			"team-ranking__winner"
28			}`}
29			>
30			{this.props.result.team}
31			</td>
32			<td className={"team-ranking__column team-ranking__column--number"}>
33			{this.props.result.matches}
34			</td>
35			<td className={"team-ranking__column team-ranking__column--number"}>
36			{this.props.result.wins}
37			</td>
38			<td className={"team-ranking__column team-ranking__column--number"}>
39			{this.props.result.draws}
40			</td>
41			<td className={"team-ranking__column team-ranking__column--number"}>
42			{this.props.result.losses}
43			</td>
44			<td
45			className={
46			"team-ranking__column team-ranking__column--number team-ranking__column--goals-pro"
47			}
48			>
49			{this.props.result.goalsPro}
50			</td>
51			<td
52			className={
53			"team-ranking__column team-ranking__column--number team-ranking__column--goals-against"
54			}
55			>
56			{" "}
57			{this.props.result.goalsAgainst}
58			</td>
59			<td
60			className={
61			"team-ranking__column team-ranking__column--number team-ranking__column--goals-difference"
62			}
63			>
64			{this.props.result.goalsPro - this.props.result.goalsAgainst}
65			</td>
66			<td
67			className={
68			"team-ranking__column team-ranking__column--number team-ranking__column--points"
69			}
70			>
71			{this.props.result.points}
72			</td>
73			</tr>
74			)
75			}
76			}
77
78			class Ranking extends Component {
79			constructor(props) {
80			super(props)
81			this.state = {
82			data: [],
83			loading: true,
84			}
85
86			this.apiServerUrl = props.config.site.siteMetadata.serverUrl
87			this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
88			this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
89			this.timeout = {}
90			}
91
92			updateData() {
93			let { season, region, division } = this.props
94
95			fetch(
96			`${this.apiServerUrl}/seasons/${season}/regions/${region}/rankings/${division}`
97			)
98			.then((response) => response.json())
99			.then((json) => this.setState({ data: json, loading: false }))
100
101			this.timeout = setTimeout(() => {
102			this.updateData(() => {})
103			}, this.apiRefreshRate)
104			}
105
106			componentDidMount() {
107			this.updateData()
108			}
109
110			componentWillUnmount() {
111			clearInterval(this.timeout)
112			}
113
114			render() {
115			if (this.state.loading === false && this.state.data) {
116			this.state.data.sort((a, b) => {
117			return a.position - b.position !== 0
118			? a.position - b.position
119			: b.goalsPro - b.goalsAgainst - (a.goalsPro - a.goalsAgainst)
120			})
121
122			return (
123			<div className={"team-ranking"}>
124			<table className={"team-ranking__table"}>
125			<thead className={"team-ranking__header"}>
126			<tr className={"team-ranking__row"}>
127			<th
128			className={
129			"team-ranking__column team-ranking__column--number team-ranking__column--ranking"
130			}
131			>
132			#
133			</th>
134			<th
135			className={
136			"team-ranking__column team-ranking__column--string team-ranking__column--team"
137			}
138			>
139			Team
140			</th>
141			<th
142			className={
143			"team-ranking__column team-ranking__column--number"
144			}
145			>
146			M
147			</th>
148			<th
149			className={
150			"team-ranking__column team-ranking__column--number"
151			}
152			>
153			W
154			</th>
155			<th
156			className={
157			"team-ranking__column team-ranking__column--number"
158			}
159			>
160			D
161			</th>
162			<th
163			className={
164			"team-ranking__column team-ranking__column--number"
165			}
166			>
167			L
168			</th>
169			<th
170			className={
171			"team-ranking__column team-ranking__column--number team-ranking__column--goals-pro"
172			}
173			>
174			G+
175			</th>
176			<th
177			className={
178			"team-ranking__column team-ranking__column--number team-ranking__column--goals-against"
179			}
180			>
181			G-
182			</th>
183			<th
184			className={
185			"team-ranking__column team-ranking__column--number team-ranking__column--goals-difference"
186			}
187			>
188			+/-
189			</th>
190			<th
191			className={
192			"team-ranking__column team-ranking__column--number team-ranking__column--points"
193			}
194			>
195			Pts
196			</th>
197			</tr>
198			</thead>
199			<tbody>
200			{this.state.data.map((result, i) => (
201			<RankingRow
202			result={result}
203			key={i}
204			highlight={this.props.highlight}
205			/>
206			))}
207			</tbody>
208			</table>
209			</div>
210			)
211			} else {
212			return <div>Loading...</div>
213			}
214			}
215			}
216
217			const query = graphql`
218			query {
219			site {
220			siteMetadata {
221			serverUrl
222			refreshRate
223			}
224			}
225			}
226			`
227
228			export default ({ season, region, division, highlight }) => (
229			<StaticQuery
230			query={query}
231			render={(data) => (
232			<Ranking
233			config={data}
234			season={season}
235			region={region}
236			division={division}
237			highlight={highlight}
238			/>
239			)}
240			/>
241			)
242

soniCaH / KCVV-Elewijt-Gatsby

Push — renovate/node-sass-5.x ( 23d564...eb69a0 )

RankingRow.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like