Passed
Pull Request — develop (#758)
by Kevin Van
08:39 queued 04:54
created

JeugdPage.render   B

Complexity

Conditions 1

Size

Total Lines 69
Code Lines 67

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 67
dl 0
loc 69
rs 8.08
c 0
b 0
f 0
cc 1

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
import { Link, graphql } from "gatsby"
2
import React, { Component } from "react"
3
4
import { CardImage } from "../components/Card"
5
import MatchesOverview from "../components/MatchesOverview"
6
import SEO from "../components/seo"
7
import Layout from "../layouts/index"
8
9
class JeugdPage extends Component {
10
  render() {
11
    const data = this.props.data
12
13
    return (
14
      <Layout>
15
        <SEO
16
          lang="nl-BE"
17
          title="Jeugdwerking"
18
          description="Jeugdwerking van KCVV Elewijt"
19
          path={this.props.location.pathname}
20
        />
21
22
        <section className="grid-container site-content">
23
          <div className="grid-x grid-margin-x">
24
            <section className={`cell large-12 youth_teams__overview`}>
25
              <Link to="/team/zondagsreserven/" className={`btn btn--arrow`}>
26
                Zondagsreserven
27
              </Link>
28
              <Link to="/team/veteranen/" className={`btn btn--arrow`}>
29
                Veteranen
30
              </Link>
31
            </section>
32
            <section className={`cell large-12 youth_teams__overview`}>
33
              <Link to="/jeugd/u17/" className={`btn btn--arrow`}>
34
                U17
35
              </Link>
36
              <Link to="/jeugd/u15/" className={`btn btn--arrow`}>
37
                U15
38
              </Link>
39
              <Link to="/jeugd/u13/" className={`btn btn--arrow`}>
40
                U13
41
              </Link>
42
              <Link to="/jeugd/u12/" className={`btn btn--arrow`}>
43
                U12
44
              </Link>
45
              <Link to="/jeugd/u11/" className={`btn btn--arrow`}>
46
                U11
47
              </Link>
48
              <Link to="/jeugd/u10/" className={`btn btn--arrow`}>
49
                U10
50
              </Link>
51
              <Link to="/jeugd/u9/" className={`btn btn--arrow`}>
52
                U9
53
              </Link>
54
              <Link to="/jeugd/u8/" className={`btn btn--arrow`}>
55
                U8
56
              </Link>
57
              <Link to="/jeugd/u7/" className={`btn btn--arrow`}>
58
                U7
59
              </Link>
60
              <Link to="/jeugd/u6/" className={`btn btn--arrow`}>
61
                U6
62
              </Link>
63
            </section>
64
            <section className={`cell large-12 featured-article`}>
65
              <CardImage
66
                title="Leerplannen voor de jeugdwerking"
67
                picture={data.leerplan}
68
                link="/news/2019-08-08-leerplan-kcvv-elewijt-jeugd"
69
                metadata={false}
70
              />
71
            </section>
72
            <section className={`cell large-12 featured-article`}>
73
              <h2 style={{ marginTop: `${2}rem` }}>Volgende wedstrijden</h2>
74
              <MatchesOverview exclude={[`1`, `2`]} />
75
            </section>
76
          </div>
77
        </section>
78
      </Layout>
79
    )
80
  }
81
}
82
83
export const pageQuery = graphql`
84
  query {
85
    leerplan: file(name: { eq: "leerplan_header" }) {
86
      ...KCVVFullWidth
87
    }
88
  }
89
`
90
91
export default JeugdPage
92