Skip to content
This repository was archived by the owner on Sep 6, 2022. It is now read-only.

Commit 4a600fe

Browse files
mxstbrmxstbr
committed
Implement react/prefer-stateless-function
Ref #212
1 parent be611bb commit 4a600fe

File tree

14 files changed

+150
-175
lines changed

14 files changed

+150
-175
lines changed

‎app/components/A/index.js‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,17 @@ import React, { PropTypes } from 'react';
66

77
import styles from './styles.css';
88

9-
class A extends React.Component {
10-
render() {
11-
return (
12-
<a
13-
className={
14-
this.props.className || styles.link
15-
}
16-
href={ this.props.href }
17-
target={ this.props.target }
18-
>
19-
{ this.props.children }
20-
</a>
21-
);
22-
}
9+
function A(props) {
10+
return (
11+
<a
12+
className={
13+
props.className || styles.link
14+
}
15+
{ ...props }
16+
>
17+
{ props.children }
18+
</a>
19+
);
2320
}
2421

2522
A.propTypes = {

‎app/components/Footer/index.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,17 @@ import React from 'react';
33
import A from 'A';
44
import styles from './styles.css';
55

6-
class Footer extends React.Component {
7-
render() {
8-
return (
9-
<footer className={ styles.footer }>
10-
<section>
11-
<p>This project is licensed under the MIT license.</p>
12-
</section>
13-
<section>
14-
<p>Made with love by <A href="https://twitter.com/mxstbr">Max Stoiber</A>.</p>
15-
</section>
16-
</footer>
17-
);
18-
}
6+
function Footer() {
7+
return (
8+
<footer className={ styles.footer }>
9+
<section>
10+
<p>This project is licensed under the MIT license.</p>
11+
</section>
12+
<section>
13+
<p>Made with love by <A href="https://twitter.com/mxstbr">Max Stoiber</A>.</p>
14+
</section>
15+
</footer>
16+
);
1917
}
2018

2119
export default Footer;

‎app/components/H1/index.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ import React from 'react';
22

33
import styles from './styles.css';
44

5-
class H1 extends React.Component {
6-
render() {
7-
return (
8-
<h1 className={ styles.heading1 }>{ this.props.children }</h1>
9-
);
10-
}
5+
function H1(props) {
6+
return (
7+
<h1 className={ styles.heading1 } { ...props } />
8+
);
119
}
1210

1311
export default H1;

‎app/components/H2/index.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ import React from 'react';
22

33
import styles from './styles.css';
44

5-
class H2 extends React.Component {
6-
render() {
7-
return (
8-
<h2 className={ this.props.className || styles.heading2 }>{ this.props.children }</h2>
9-
);
10-
}
5+
function H2(props) {
6+
return (
7+
<h2 className={ styles.heading2 } { ...props } />
8+
);
119
}
1210

1311
export default H2;

‎app/components/H3/index.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22

3-
class H3 extends React.Component {
4-
render() {
5-
return (
6-
<h3>{ this.props.children }</h3>
7-
);
8-
}
3+
function H3(props) {
4+
return (
5+
<h3 { ...props } />
6+
);
97
}
108

119
export default H3;

‎app/components/IssueIcon/index.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import React from 'react';
22

3-
class IssueIcon extends React.Component {
4-
render() {
5-
return (
6-
<svg
7-
height="1em"
8-
width="0.875em"
9-
className={ this.props.className }
10-
>
11-
<path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7S10.14 13.7 7 13.7 1.3 11.14 1.3 8s2.56-5.7 5.7-5.7m0-1.3C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7S10.86 1 7 1z m1 3H6v5h2V4z m0 6H6v2h2V10z" />
12-
</svg>
13-
);
14-
}
3+
function IssueIcon(props) {
4+
return (
5+
<svg
6+
height="1em"
7+
width="0.875em"
8+
className={ props.className }
9+
>
10+
<path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7S10.14 13.7 7 13.7 1.3 11.14 1.3 8s2.56-5.7 5.7-5.7m0-1.3C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7S10.86 1 7 1z m1 3H6v5h2V4z m0 6H6v2h2V10z" />
11+
</svg>
12+
);
1513
}
1614

1715
export default IssueIcon;

‎app/components/List/index.js‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,26 @@ import React from 'react';
22

33
import styles from './styles.css';
44

5-
class List extends React.Component {
6-
render() {
7-
const ComponentToRender = this.props.component;
8-
let content = (<div></div>);
9-
// If we have items, render them
10-
if (this.props.items) {
11-
content = this.props.items.map((item, index) => (
12-
<ComponentToRender key={'item-' + index } item={item} />
13-
));
14-
} else {
15-
// Otherwise render a single component
16-
content = (<ComponentToRender />);
17-
}
18-
19-
return (
20-
<div className={ styles.listWrapper }>
21-
<ul className={ styles.list }>
22-
{ content }
23-
</ul>
24-
</div>
25-
);
5+
function List(props) {
6+
const ComponentToRender = props.component;
7+
let content = (<div></div>);
8+
// If we have items, render them
9+
if (props.items) {
10+
content = props.items.map((item, index) => (
11+
<ComponentToRender key={'item-' + index } item={item} />
12+
));
13+
} else {
14+
// Otherwise render a single component
15+
content = (<ComponentToRender />);
2616
}
17+
18+
return (
19+
<div className={ styles.listWrapper }>
20+
<ul className={ styles.list }>
21+
{ content }
22+
</ul>
23+
</div>
24+
);
2725
}
2826

2927
export default List;

‎app/components/ListItem/index.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,14 @@ import React from 'react';
22

33
import styles from './styles.css';
44

5-
class ListItem extends React.Component {
6-
render() {
7-
return (
8-
<li className={ this.props.className || styles.item }>
9-
<div className={ styles.itemContent }>
10-
{ this.props.content }
11-
</div>
12-
</li>
13-
);
14-
}
5+
function ListItem(props) {
6+
return (
7+
<li className={ props.className || styles.item }>
8+
<div className={ styles.itemContent }>
9+
{ props.content }
10+
</div>
11+
</li>
12+
);
1513
}
1614

1715
export default ListItem;

‎app/components/LoadingIndicator/index.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,25 @@ import React from 'react';
22

33
import styles from './styles.css';
44

5-
class LoadingIndicator extends React.Component {
6-
render() {
7-
return (
8-
<div>
9-
<div className={ styles['sk-fading-circle'] }>
10-
<div className={ styles.skCircle }></div>
11-
<div className={ styles['sk-circle2'] }></div>
12-
<div className={ styles['sk-circle3'] }></div>
13-
<div className={ styles['sk-circle4'] }></div>
14-
<div className={ styles['sk-circle5'] }></div>
15-
<div className={ styles['sk-circle6'] }></div>
16-
<div className={ styles['sk-circle7'] }></div>
17-
<div className={ styles['sk-circle8'] }></div>
18-
<div className={ styles['sk-circle9'] }></div>
19-
<div className={ styles['sk-circle10'] }></div>
20-
<div className={ styles['sk-circle11'] }></div>
21-
<div className={ styles['sk-circle12'] }></div>
22-
</div>
5+
function LoadingIndicator() {
6+
return (
7+
<div>
8+
<div className={ styles['sk-fading-circle'] }>
9+
<div className={ styles.skCircle }></div>
10+
<div className={ styles['sk-circle2'] }></div>
11+
<div className={ styles['sk-circle3'] }></div>
12+
<div className={ styles['sk-circle4'] }></div>
13+
<div className={ styles['sk-circle5'] }></div>
14+
<div className={ styles['sk-circle6'] }></div>
15+
<div className={ styles['sk-circle7'] }></div>
16+
<div className={ styles['sk-circle8'] }></div>
17+
<div className={ styles['sk-circle9'] }></div>
18+
<div className={ styles['sk-circle10'] }></div>
19+
<div className={ styles['sk-circle11'] }></div>
20+
<div className={ styles['sk-circle12'] }></div>
2321
</div>
24-
);
25-
}
22+
</div>
23+
);
2624
}
2725

2826
export default LoadingIndicator;

‎app/containers/App/index.js‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,23 @@ import A from 'A';
1515

1616
import styles from './styles.css';
1717

18-
class App extends React.Component {
19-
render() {
20-
return (
21-
<div className={ styles.wrapper }>
22-
<A
23-
className={ styles.logoWrapper }
24-
href="https://twitter.com/mxstbr"
25-
>
26-
<Img
27-
className={styles.logo}
28-
src={Logo}
29-
alt="Max Stoiber - Logo"
30-
/>
31-
</A>
32-
{ this.props.children }
33-
<Footer />
34-
</div>
35-
);
36-
}
18+
function App(props) {
19+
return (
20+
<div className={ styles.wrapper }>
21+
<A
22+
className={ styles.logoWrapper }
23+
href="https://twitter.com/mxstbr"
24+
>
25+
<Img
26+
className={ styles.logo }
27+
src={ Logo }
28+
alt="Max Stoiber - Logo"
29+
/>
30+
</A>
31+
{ props.children }
32+
<Footer />
33+
</div>
34+
);
3735
}
3836

3937
export default App;

0 commit comments

Comments
 (0)