PageFooter.renderContactTable - Code Metrics - Inspection of "#93: Update components/search-container.js code qu..." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/93-optimize-scrutinize... ( acdaff...a7e399 )

by Kevin Van

created 2020-03-21 12:30 UTC

PageFooter.renderContactTable B

↳ Parent: PageFooter

Complexity

Conditions

Size

Total Lines	69
Code Lines	69

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	69
dl	0
loc	69
rs	8.0145
c	0
b	0
f	0
cc	1

How to fix Long Method

import React, { Component } from "react"

import "./page-footer.scss"
import logo from "../images/logo-flat.png"
import SponsorsBlock from "./sponsors-block"

class PageFooter extends Component {
  renderSocialLinks = () => (
    <div className={"page-footer__contact--social"}>
      <ul className="social-links social-links--circle">
        <li className="social-links__item">
          <a
            href="https://facebook.com/KCVVElewijt/"
            className="social-links__link"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa fa-facebook" />
          </a>
        </li>
        <li className="social-links__item">
          <a
            href="https://twitter.com/kcvve"
            className="social-links__link"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa fa-twitter" />
          </a>
        </li>
        <li className="social-links__item">
          <a
            href="https://www.instagram.com/kcvve"
            className="social-links__link"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa fa-instagram" />
          </a>
        </li>
      </ul>
    </div>
  )
  renderContactTable = () => (
    <table className="page-footer__contact-details">
      <tbody>
        <tr>
          <th className="page-footer__contact-details__label">KCVV Elewijt</th>
          <td className="page-footer__contact-details__value">
            Driesstraat 30, 1982 Elewijt
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Voorzitter</th>
          <td className="page-footer__contact-details__value">Rudy Bautmans</td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">GC</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={"rich-link"}>
              John De Ron
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">
            Algemeen contact
          </th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={"rich-link"}>
              [email protected]
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Jeugdwerking</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={"rich-link"}>
              [email protected]
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">
            Verhuur kantine
          </th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={"rich-link"}>
              Ann Walgraef
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Website</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={"rich-link"}>
              Kevin Van Ransbeeck
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">
            Privacy &amp; cookies
          </th>
          <td className="page-footer__contact-details__value">
            <a href="/privacy" className={"rich-link"}>
              Privacyverklaring
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  )
  render() {
    return (
      <footer className="page-footer">
        <div className="page-footer--widgets grid-container grid-x">
          <div className="small-12 large-6 cell page-footer__contact">
            <div className="page-footer__contact-top">
              <div className={"page-footer__contact--logo"}>
                <img src={logo} alt="KCVV Elewijt" />
              </div>

              {this.renderSocialLinks()}
            </div>
            <div className="page-footer__contact-middle">
              {this.renderContactTable()}
            </div>
          </div>

          <div className="small-12 large-6 cell page-footer__sponsors">
            <SponsorsBlock />
          </div>
        </div>
      </footer>
    )
  }
}

export default PageFooter


1			import React, { Component } from "react"
2
3			import "./page-footer.scss"
4			import logo from "../images/logo-flat.png"
5			import SponsorsBlock from "./sponsors-block"
6
7			class PageFooter extends Component {
8			renderSocialLinks = () => (
9			<div className={"page-footer__contact--social"}>
10			<ul className="social-links social-links--circle">
11			<li className="social-links__item">
12			<a
13			href="https://facebook.com/KCVVElewijt/"
14			className="social-links__link"
15			target="_blank"
16			rel="noopener noreferrer"
17			>
18			<i className="fa fa-facebook" />
19			</a>
20			</li>
21			<li className="social-links__item">
22			<a
23			href="https://twitter.com/kcvve"
24			className="social-links__link"
25			target="_blank"
26			rel="noopener noreferrer"
27			>
28			<i className="fa fa-twitter" />
29			</a>
30			</li>
31			<li className="social-links__item">
32			<a
33			href="https://www.instagram.com/kcvve"
34			className="social-links__link"
35			target="_blank"
36			rel="noopener noreferrer"
37			>
38			<i className="fa fa-instagram" />
39			</a>
40			</li>
41			</ul>
42			</div>
43			)
44			renderContactTable = () => (
45			<table className="page-footer__contact-details">
46			<tbody>
47			<tr>
48			<th className="page-footer__contact-details__label">KCVV Elewijt</th>
49			<td className="page-footer__contact-details__value">
50			Driesstraat 30, 1982 Elewijt
51			</td>
52			</tr>
53			<tr>
54			<th className="page-footer__contact-details__label">Voorzitter</th>
55			<td className="page-footer__contact-details__value">Rudy Bautmans</td>
56			</tr>
57			<tr>
58			<th className="page-footer__contact-details__label">GC</th>
59			<td className="page-footer__contact-details__value">
60			<a href="mailto:[email protected]" className={"rich-link"}>
61			John De Ron
62			</a>
63			</td>
64			</tr>
65			<tr>
66			<th className="page-footer__contact-details__label">
67			Algemeen contact
68			</th>
69			<td className="page-footer__contact-details__value">
70			<a href="mailto:[email protected]" className={"rich-link"}>
71			[email protected]
72			</a>
73			</td>
74			</tr>
75			<tr>
76			<th className="page-footer__contact-details__label">Jeugdwerking</th>
77			<td className="page-footer__contact-details__value">
78			<a href="mailto:[email protected]" className={"rich-link"}>
79			[email protected]
80			</a>
81			</td>
82			</tr>
83			<tr>
84			<th className="page-footer__contact-details__label">
85			Verhuur kantine
86			</th>
87			<td className="page-footer__contact-details__value">
88			<a href="mailto:[email protected]" className={"rich-link"}>
89			Ann Walgraef
90			</a>
91			</td>
92			</tr>
93			<tr>
94			<th className="page-footer__contact-details__label">Website</th>
95			<td className="page-footer__contact-details__value">
96			<a href="mailto:[email protected]" className={"rich-link"}>
97			Kevin Van Ransbeeck
98			</a>
99			</td>
100			</tr>
101			<tr>
102			<th className="page-footer__contact-details__label">
103			Privacy & cookies
104			</th>
105			<td className="page-footer__contact-details__value">
106			<a href="/privacy" className={"rich-link"}>
107			Privacyverklaring
108			</a>
109			</td>
110			</tr>
111			</tbody>
112			</table>
113			)
114			render() {
115			return (
116			<footer className="page-footer">
117			<div className="page-footer--widgets grid-container grid-x">
118			<div className="small-12 large-6 cell page-footer__contact">
119			<div className="page-footer__contact-top">
120			<div className={"page-footer__contact--logo"}>
121			<img src={logo} alt="KCVV Elewijt" />
122			</div>
123
124			{this.renderSocialLinks()}
125			</div>
126			<div className="page-footer__contact-middle">
127			{this.renderContactTable()}
128			</div>
129			</div>
130
131			<div className="small-12 large-6 cell page-footer__sponsors">
132			<SponsorsBlock />
133			</div>
134			</div>
135			</footer>
136			)
137			}
138			}
139
140			export default PageFooter
141

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/93-optimize-scrutinize... ( acdaff...a7e399 )

PageFooter.renderContactTable B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like