ClubLogo.render - Code Metrics - Inspection of "[WIP] Design 2.0" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#21)

by Kevin Van

created 2020-03-06 13:09 UTC

ClubLogo.render B

↳ Parent: ClubLogo

Complexity

Conditions

Size

Total Lines	49
Code Lines	39

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	4
eloc	39
dl	0
loc	49
rs	8.9439
c	0
b	0
f	0

import React, { Component } from 'react'
import defaultLogo from '../images/default.png'
import { graphql, StaticQuery } from 'gatsby'
import LazyLoad from 'react-lazy-load'

import LogoFlat from '../images/logo-flat.png'

/**
 * Render club logo based on the registration number of a club.
 *
 * If Logo was not found (HTTP error) a default shield is shown as fallback.
 */
class ClubLogo extends Component {
  constructor(props) {
    super(props)

    // Retrieve endpoint of the logo's api.
    this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
  }

  render() {
    if (this.props.regNumber === '00055') {
      if (this.props.lazyload === true) {
        return (
          <LazyLoad debounce={false}>
            <img
              src={LogoFlat}
              alt="KCVV Elewijt"
              className={this.props.className}
            />
          </LazyLoad>
        )
      } else {
        return (
          <img
            src={LogoFlat}
            alt="KCVV Elewijt"
            className={this.props.className}
          />
        )
      }
    }
    const logoUrl = `${this.apiLogoUrl}/${this.props.regNumber}`

    if (this.props.lazyload === true) {
      return (
        <LazyLoad debounce={false}>
          <img
            src={logoUrl}
            onError={({ target }) => {
              target.onerror = null
              target.src = defaultLogo
            }}
            alt={this.props.title}
            className={this.props.className}
          />
        </LazyLoad>
      )
    } else {
      return (
        <img
          src={logoUrl}
          onError={({ target }) => {
            target.onerror = null
            target.src = defaultLogo
          }}
          alt={this.props.title}
          className={this.props.className}
        />
      )
    }
  }
}

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

export default ({
  // If no regnumber was given, we return the KCVV Elewijt logo by default.
  regNumber = '00055',
  title = 'KCVV Elewijt',
  className = '',
  lazyload = false,
}) => (
  <StaticQuery
    query={query}
    render={data => (
      <ClubLogo
        // Data is the result of our query.
        config={data}
        regNumber={regNumber}
        title={title}
        className={className}
        lazyload={lazyload}
      />
    )}
  />
)


1			import React, { Component } from 'react'
2			import defaultLogo from '../images/default.png'
3			import { graphql, StaticQuery } from 'gatsby'
4			import LazyLoad from 'react-lazy-load'
5
6			import LogoFlat from '../images/logo-flat.png'
7
8			/**
9			* Render club logo based on the registration number of a club.
10			*
11			* If Logo was not found (HTTP error) a default shield is shown as fallback.
12			*/
13			class ClubLogo extends Component {
14			constructor(props) {
15			super(props)
16
17			// Retrieve endpoint of the logo's api.
18			this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
19			}
20
21			render() {
22			if (this.props.regNumber === '00055') {
23			if (this.props.lazyload === true) {
24			return (
25			<LazyLoad debounce={false}>
26			<img
27			src={LogoFlat}
28			alt="KCVV Elewijt"
29			className={this.props.className}
30			/>
31			</LazyLoad>
32			)
33			} else {
34			return (
35			<img
36			src={LogoFlat}
37			alt="KCVV Elewijt"
38			className={this.props.className}
39			/>
40			)
41			}
42			}
43			const logoUrl = `${this.apiLogoUrl}/${this.props.regNumber}`
44
45			if (this.props.lazyload === true) {
46			return (
47			<LazyLoad debounce={false}>
48			<img
49			src={logoUrl}
50			onError={({ target }) => {
51			target.onerror = null
52			target.src = defaultLogo
53			}}
54			alt={this.props.title}
55			className={this.props.className}
56			/>
57			</LazyLoad>
58			)
59			} else {
60			return (
61			<img
62			src={logoUrl}
63			onError={({ target }) => {
64			target.onerror = null
65			target.src = defaultLogo
66			}}
67			alt={this.props.title}
68			className={this.props.className}
69			/>
70			)
71			}
72			}
73			}
74
75			// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
76			const query = graphql`
77			query {
78			site {
79			siteMetadata {
80			logoUrl
81			}
82			}
83			}
84			`
85
86			export default ({
87			// If no regnumber was given, we return the KCVV Elewijt logo by default.
88			regNumber = '00055',
89			title = 'KCVV Elewijt',
90			className = '',
91			lazyload = false,
92			}) => (
93			<StaticQuery
94			query={query}
95			render={data => (
96			<ClubLogo
97			// Data is the result of our query.
98			config={data}
99			regNumber={regNumber}
100			title={title}
101			className={className}
102			lazyload={lazyload}
103			/>
104			)}
105			/>
106			)
107

soniCaH / KCVV-Elewijt-Gatsby

Pull Request — master (#21)

ClubLogo.render B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like