Skip to content

Commit b2c5062

Browse files
bertho-zerobertho-zero
committed
* Use stateless functional components when possible (closes #213)
* remove useless dependencies
1 parent e3d4b00 commit b2c5062

6 files changed

Lines changed: 76 additions & 72 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,6 @@
132132
"is-promise": "^2.1.0",
133133
"js-cookie": "^2.1.3",
134134
"localforage": "^1.4.3",
135-
"localstorage-memory": "^1.0.2",
136-
"lodash.isplainobject": "^4.0.6",
137135
"lru-memoize": "^1.0.1",
138136
"morgan": "^1.8.1",
139137
"multireducer": "^3.1.0",

‎src/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import io from 'socket.io-client';
99
import superagent from 'superagent';
1010
import config from './config';
1111

12-
const storage = __SERVER__ ? require('localstorage-memory') : require('localforage');
12+
const storage = __SERVER__ ? null : require('localforage');
1313

1414
const host = clientUrl => (__SERVER__ ? `http://${config.apiHost}:${config.apiPort}` : clientUrl);
1515

‎src/components/LoginForm/LoginForm.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ import React, { Component } from 'react';
22
import { reduxForm, Field, propTypes } from 'redux-form';
33
import loginValidation from './loginValidation';
44

5+
// eslint-disable-next-line react/prop-types
6+
const Input = ({ input, label, type, meta: { touched, error } }) => (
7+
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
8+
<label htmlFor={input.name} className="col-sm-2">{label}</label>
9+
<div className="col-sm-10">
10+
<input {...input} type={type} className="form-control" />
11+
{error && touched && <span className="glyphicon glyphicon-remove form-control-feedback"></span>}
12+
{error && touched && <div className="text-danger"><strong>{error}</strong></div>}
13+
</div>
14+
</div>
15+
);
16+
517
@reduxForm({
618
form: 'login',
719
validate: loginValidation
@@ -11,24 +23,13 @@ export default class LoginForm extends Component {
1123
...propTypes
1224
}
1325

14-
renderInput = ({ input, label, type, meta: { touched, error } }) => (
15-
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
16-
<label htmlFor={input.name} className="col-sm-2">{label}</label>
17-
<div className="col-sm-10">
18-
<input {...input} type={type} className="form-control" />
19-
{error && touched && <span className="glyphicon glyphicon-remove form-control-feedback"></span>}
20-
{error && touched && <div className="text-danger"><strong>{error}</strong></div>}
21-
</div>
22-
</div>
23-
);
24-
2526
render() {
2627
const { handleSubmit, error } = this.props;
2728

2829
return (
2930
<form className="form-horizontal" onSubmit={handleSubmit}>
30-
<Field name="email" type="text" component={this.renderInput} label="Email" />
31-
<Field name="password" type="password" component={this.renderInput} label="Password" />
31+
<Field name="email" type="text" component={Input} label="Email" />
32+
<Field name="password" type="password" component={Input} label="Password" />
3233
{error && <p className="text-danger"><strong>{error}</strong></p>}
3334
<button className="btn btn-success" type="submit">
3435
<i className="fa fa-sign-in" />{' '}Log In

‎src/components/RegisterForm/RegisterForm.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ import React, { Component } from 'react';
22
import { reduxForm, Field, propTypes } from 'redux-form';
33
import registerValidation from './registerValidation';
44

5+
// eslint-disable-next-line react/prop-types
6+
const Input = ({ input, label, type, meta: { touched, error } }) => (
7+
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
8+
<label htmlFor={input.name} className="col-sm-2">{label}</label>
9+
<div className="col-sm-10">
10+
<input {...input} type={type} className="form-control" />
11+
{error && touched && <span className="glyphicon glyphicon-remove form-control-feedback"></span>}
12+
{error && touched && <div className="text-danger"><strong>{error}</strong></div>}
13+
</div>
14+
</div>
15+
);
16+
517
@reduxForm({
618
form: 'register',
719
validate: registerValidation
@@ -11,24 +23,13 @@ export default class RegisterForm extends Component {
1123
...propTypes
1224
}
1325

14-
renderInput = ({ input, label, type, meta: { touched, error } }) => (
15-
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
16-
<label htmlFor={input.name} className="col-sm-2">{label}</label>
17-
<div className="col-sm-10">
18-
<input {...input} type={type} className="form-control" />
19-
{error && touched && <span className="glyphicon glyphicon-remove form-control-feedback"></span>}
20-
{error && touched && <div className="text-danger"><strong>{error}</strong></div>}
21-
</div>
22-
</div>
23-
);
24-
2526
render() {
2627
const { handleSubmit, error } = this.props;
2728

2829
return (
2930
<form className="form-horizontal" onSubmit={handleSubmit}>
30-
<Field name="email" type="text" component={this.renderInput} label="Email" />
31-
<Field name="password" type="password" component={this.renderInput} label="Password" />
31+
<Field name="email" type="text" component={Input} label="Email" />
32+
<Field name="password" type="password" component={Input} label="Password" />
3233
<Field
3334
name="password_confirmation"
3435
type="password"

‎src/components/SurveyForm/SurveyForm.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,28 @@ function asyncValidate(data, dispatch) {
1010
return dispatch(isValidEmail(data));
1111
}
1212

13+
/* eslint-disable react/prop-types */
14+
const Input = ({
15+
input, label, type, showAsyncValidating, className, styles,
16+
meta: { touched, error, dirty, active, visited, asyncValidating }
17+
}) => (
18+
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
19+
<label htmlFor={input.name} className="col-sm-2">{label}</label>
20+
<div className={`col-sm-8 ${styles.inputGroup}`}>
21+
{showAsyncValidating && asyncValidating && <i className={`fa fa-cog fa-spin ${styles.cog}`} />}
22+
<input {...input} type={type} className={className} id={input.name} />
23+
{error && touched && <div className="text-danger">{error}</div>}
24+
<div className={styles.flags}>
25+
{dirty && <span className={styles.dirty} title="Dirty">D</span>}
26+
{active && <span className={styles.active} title="Active">A</span>}
27+
{visited && <span className={styles.visited} title="Visited">V</span>}
28+
{touched && <span className={styles.touched} title="Touched">T</span>}
29+
</div>
30+
</div>
31+
</div>
32+
);
33+
/* eslint-enable react/prop-types */
34+
1335
@reduxForm({
1436
form: 'survey',
1537
validate: surveyValidation,
@@ -41,26 +63,6 @@ class SurveyForm extends Component {
4163
active: null
4264
}
4365

44-
renderInput = ({
45-
input, label, type, showAsyncValidating, className, styles,
46-
meta: { touched, error, dirty, active, visited, asyncValidating }
47-
}) => (
48-
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
49-
<label htmlFor={input.name} className="col-sm-2">{label}</label>
50-
<div className={`col-sm-8 ${styles.inputGroup}`}>
51-
{showAsyncValidating && asyncValidating && <i className={`fa fa-cog fa-spin ${styles.cog}`} />}
52-
<input {...input} type={type} className={className} id={input.name} />
53-
{error && touched && <div className="text-danger">{error}</div>}
54-
<div className={styles.flags}>
55-
{dirty && <span className={styles.dirty} title="Dirty">D</span>}
56-
{active && <span className={styles.active} title="Active">A</span>}
57-
{visited && <span className={styles.visited} title="Visited">V</span>}
58-
{touched && <span className={styles.touched} title="Touched">T</span>}
59-
</div>
60-
</div>
61-
</div>
62-
);
63-
6466
render() {
6567
const {
6668
asyncValidating,
@@ -80,7 +82,7 @@ class SurveyForm extends Component {
8082
<Field
8183
name="name"
8284
type="text"
83-
component={this.renderInput}
85+
component={Input}
8486
label="Full Name"
8587
className="form-control"
8688
styles={styles}
@@ -89,7 +91,7 @@ class SurveyForm extends Component {
8991
<Field
9092
name="email"
9193
type="text"
92-
component={this.renderInput}
94+
component={Input}
9395
label="Email"
9496
className="form-control"
9597
styles={styles}
@@ -99,7 +101,7 @@ class SurveyForm extends Component {
99101
<Field
100102
name="occupation"
101103
type="text"
102-
component={this.renderInput}
104+
component={Input}
103105
label="Occupation"
104106
className="form-control"
105107
styles={styles}
@@ -108,7 +110,7 @@ class SurveyForm extends Component {
108110
<Field
109111
name="currentlyEmployed"
110112
type="checkbox"
111-
component={this.renderInput}
113+
component={Input}
112114
label="Currently Employed?"
113115
styles={styles}
114116
/>

‎src/components/WidgetForm/WidgetForm.js‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,24 @@ import { reduxForm, Field, getFormValues, SubmissionError } from 'redux-form';
55
import * as widgetActions from 'redux/modules/widgets';
66
import widgetValidation, { colors } from './widgetValidation';
77

8+
/* eslint-disable react/prop-types */
9+
const Input = ({ input, className, meta: { touched, error } }) => (
10+
<div>
11+
<input type="text" className={className} {...input} />
12+
{error && touched && <div className="text-danger">{error}</div>}
13+
</div>
14+
);
15+
16+
const Select = ({ options, input, className, meta: { touched, error } }) => (
17+
<div>
18+
<select className={className} {...input}>
19+
{options.map(option => <option value={option} key={option}>{option}</option>)}
20+
</select>
21+
{error && touched && <div className="text-danger">{error}</div>}
22+
</div>
23+
);
24+
/* eslint-enable react/prop-types */
25+
826
@reduxForm({
927
form: 'widget',
1028
validate: widgetValidation
@@ -29,22 +47,6 @@ export default class WidgetForm extends Component {
2947
values: PropTypes.object.isRequired
3048
};
3149

32-
renderInput = ({ input, className, meta: { touched, error } }) => (
33-
<div>
34-
<input type="text" className={className} {...input} />
35-
{error && touched && <div className="text-danger">{error}</div>}
36-
</div>
37-
);
38-
39-
renderSelect = ({ options, input, className, meta: { touched, error } }) => (
40-
<div>
41-
<select className={className} {...input}>
42-
{options.map(option => <option value={option} key={option}>{option}</option>)}
43-
</select>
44-
{error && touched && <div className="text-danger">{error}</div>}
45-
</div>
46-
);
47-
4850
render() {
4951
const {
5052
editStop, form, handleSubmit, invalid, pristine, save,
@@ -58,13 +60,13 @@ export default class WidgetForm extends Component {
5860
<Field name="id" type="hidden" component="input" />
5961
</td>
6062
<td className={styles.colorCol}>
61-
<Field name="color" className="form-control" component={this.renderSelect} options={colors} />
63+
<Field name="color" className="form-control" component={Select} options={colors} />
6264
</td>
6365
<td className={styles.sprocketsCol}>
64-
<Field name="sprocketCount" className="form-control" component={this.renderInput} />
66+
<Field name="sprocketCount" className="form-control" component={Input} />
6567
</td>
6668
<td className={styles.ownerCol}>
67-
<Field name="owner" className="form-control" component={this.renderInput} />
69+
<Field name="owner" className="form-control" component={Input} />
6870
</td>
6971
<td className={styles.buttonCol}>
7072
<button

0 commit comments

Comments
 (0)