MetaMatches.render - Code Metrics - Inspection of "Team stats." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/player-stats ( 32be2a )

by Kevin Van

created 2021-03-18 13:20 UTC

MetaMatches.render B

↳ Parent: MetaMatches

Complexity

Conditions

Size

Total Lines	73
Code Lines	67

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	2
eloc	67
dl	0
loc	73
rs	8.08
c	0
b	0
f	0

How to fix Long Method

import React, { Component, Fragment } from "react"
import { graphql, StaticQuery } from "gatsby"
// import './meta-matches.scss'
import MatchWithLogo from "./match-with-logo"
import MiniRanking from "./mini-ranking"

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

    this.state = {
      data: [],
      globalRanking: [],
      loading1: true,
      loading2: true,
    }

    this.uuid = props.division.toLowerCase()

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

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

    fetch(
      `${this.apiServerUrl}/meta/${season}/${region}/${division}/${regnumber}`
    )
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading1: false }))

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

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

  componentDidMount() {
    this.updateData()
  }

  componentWillUnmount() {
    clearInterval(this.timeout)
  }

  render() {
    if (
      this.state.loading1 === false &&
      this.state.loading2 === false &&
      this.state.data
    ) {
      const { next, previous, ranking } = this.state.data
      return (
        <Fragment>
          <ul className="widget__filter" data-tabs id={`matches-${this.uuid}`}>
            <li className="tabs-title">
              <a href={`#matches-${this.uuid}-prev`}>Vorige</a>
            </li>
            <li className="tabs-title is-active">
              <a href={`#matches-${this.uuid}-next`}>Volgende</a>
            </li>
            <li className="tabs-title">
              <a href={`#matches-${this.uuid}-rank`}>Ranking</a>
            </li>
          </ul>
          <div data-tabs-content={`matches-${this.uuid}`}>
            <div className="tabs-panel" id={`matches-${this.uuid}-prev`}>
              {previous && (
                <MatchWithLogo match={previous.match} lazyload={true} />
              )}
              {previous && (
                <MiniRanking ranking={[previous.opponent.ranking, ranking]} />
              )}

              {!previous && <div className="matches_overview__wrapper">Geen vorige wedstrijden gevonden</div>}
            </div>
            <div
              className="tabs-panel is-active"
              id={`matches-${this.uuid}-next`}
            >
              {next && <MatchWithLogo match={next.match} lazyload={true} />}
              {next && (
                <MiniRanking ranking={[next.opponent.ranking, ranking]} />
              )}
              {!next && <div className="matches_overview__wrapper">Geen volgende wedstrijden gevonden</div>}
            </div>
            <div className="tabs-panel" id={`matches-${this.uuid}-rank`}>
              <MiniRanking ranking={this.state.globalRanking} />
            </div>
          </div>
        </Fragment>
      )
    } else {
      return (
        <Fragment>
          <ul className="widget__filter" data-tabs id={`matches-${this.uuid}`}>
            <li className="tabs-title">
              <a href={`#matches-${this.uuid}-prev`}>Vorige</a>
            </li>
            <li className="tabs-title is-active">
              <a href={`#matches-${this.uuid}-next`}>Volgende</a>
            </li>
            <li className="tabs-title">
              <a href={`#matches-${this.uuid}-rank`}>Ranking</a>
            </li>
          </ul>
          <div data-tabs-content={`matches-${this.uuid}`}>
            <div className="tabs-panel" id={`matches-${this.uuid}-prev`} />
            <div
              className="tabs-panel is-active"
              id={`matches-${this.uuid}-next`}
            >
              Nog geen wedstrijden gekend
            </div>
            <div className="tabs-panel" id={`matches-${this.uuid}-rank`} />
          </div>
        </Fragment>
      )
    }
  }
}

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

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


1			import React, { Component, Fragment } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3			// import './meta-matches.scss'
4			import MatchWithLogo from "./match-with-logo"
5			import MiniRanking from "./mini-ranking"
6
7			class MetaMatches extends Component {
8			constructor(props) {
9			super(props)
10
11			this.state = {
12			data: [],
13			globalRanking: [],
14			loading1: true,
15			loading2: true,
16			}
17
18			this.uuid = props.division.toLowerCase()
19
20			this.apiServerUrl = props.config.site.siteMetadata.serverUrl
21			this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
22			this.timeout = {}
23			}
24
25			updateData() {
26			const { season, region, division, regnumber } = this.props
27
28			fetch(
29			`${this.apiServerUrl}/meta/${season}/${region}/${division}/${regnumber}`
30			)
31			.then((response) => response.json())
32			.then((json) => this.setState({ data: json, loading1: false }))
33
34			fetch(
35			`${this.apiServerUrl}/seasons/${season}/regions/${region}/rankings/${division}`
36			)
37			.then((response) => response.json())
38			.then((json) => this.setState({ globalRanking: json, loading2: false }))
39
40			this.timeout = setTimeout(() => {
41			this.updateData(() => {})
42			}, this.apiRefreshRate)
43			}
44
45			componentDidMount() {
46			this.updateData()
47			}
48
49			componentWillUnmount() {
50			clearInterval(this.timeout)
51			}
52
53			render() {
54			if (
55			this.state.loading1 === false &&
56			this.state.loading2 === false &&
57			this.state.data
58			) {
59			const { next, previous, ranking } = this.state.data
60			return (
61			<Fragment>
62			<ul className="widget__filter" data-tabs id={`matches-${this.uuid}`}>
63			<li className="tabs-title">
64			<a href={`#matches-${this.uuid}-prev`}>Vorige</a>
65			</li>
66			<li className="tabs-title is-active">
67			<a href={`#matches-${this.uuid}-next`}>Volgende</a>
68			</li>
69			<li className="tabs-title">
70			<a href={`#matches-${this.uuid}-rank`}>Ranking</a>
71			</li>
72			</ul>
73			<div data-tabs-content={`matches-${this.uuid}`}>
74			<div className="tabs-panel" id={`matches-${this.uuid}-prev`}>
75			{previous && (
76			<MatchWithLogo match={previous.match} lazyload={true} />
77			)}
78			{previous && (
79			<MiniRanking ranking={[previous.opponent.ranking, ranking]} />
80			)}
81
82			{!previous && <div className="matches_overview__wrapper">Geen vorige wedstrijden gevonden</div>}
83			</div>
84			<div
85			className="tabs-panel is-active"
86			id={`matches-${this.uuid}-next`}
87			>
88			{next && <MatchWithLogo match={next.match} lazyload={true} />}
89			{next && (
90			<MiniRanking ranking={[next.opponent.ranking, ranking]} />
91			)}
92			{!next && <div className="matches_overview__wrapper">Geen volgende wedstrijden gevonden</div>}
93			</div>
94			<div className="tabs-panel" id={`matches-${this.uuid}-rank`}>
95			<MiniRanking ranking={this.state.globalRanking} />
96			</div>
97			</div>
98			</Fragment>
99			)
100			} else {
101			return (
102			<Fragment>
103			<ul className="widget__filter" data-tabs id={`matches-${this.uuid}`}>
104			<li className="tabs-title">
105			<a href={`#matches-${this.uuid}-prev`}>Vorige</a>
106			</li>
107			<li className="tabs-title is-active">
108			<a href={`#matches-${this.uuid}-next`}>Volgende</a>
109			</li>
110			<li className="tabs-title">
111			<a href={`#matches-${this.uuid}-rank`}>Ranking</a>
112			</li>
113			</ul>
114			<div data-tabs-content={`matches-${this.uuid}`}>
115			<div className="tabs-panel" id={`matches-${this.uuid}-prev`} />
116			<div
117			className="tabs-panel is-active"
118			id={`matches-${this.uuid}-next`}
119			>
120			Nog geen wedstrijden gekend
121			</div>
122			<div className="tabs-panel" id={`matches-${this.uuid}-rank`} />
123			</div>
124			</Fragment>
125			)
126			}
127			}
128			}
129
130			const query = graphql`
131			query {
132			site {
133			siteMetadata {
134			serverUrl
135			refreshRate
136			}
137			}
138			}
139			`
140
141			export default ({ season, region, division, regnumber }) => (
142			<StaticQuery
143			query={query}
144			render={(data) => (
145			<MetaMatches
146			config={data}
147			season={season}
148			region={region}
149			division={division}
150			regnumber={regnumber}
151			/>
152			)}
153			/>
154			)
155

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/player-stats ( 32be2a )

MetaMatches.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like