Skip to content

Commit 52442dd

Browse files
bahossbahoss
committed
refactor: Split React components into logical and representational
Fix #1405
1 parent d29390e commit 52442dd

File tree

6 files changed

+154
-63
lines changed

6 files changed

+154
-63
lines changed

‎src/main/frontend/src/components/AddCatalogNumbersForm.js

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -84,13 +84,31 @@ class AddCatalogNumbersForm extends React.PureComponent {
8484
});
8585
}
8686
render() {
87-
const hasValidationErrors = this.state.validationErrors.length > 0;
87+
return (
88+
<AddCatalogNumbersFormView
89+
l10n={this.props.l10n}
90+
handleSubmit={this.handleSubmit}
91+
hasServerError={this.state.hasServerError}
92+
handleChangeCatalog={this.handleChangeCatalog}
93+
handleChangeNumbers={this.handleChangeNumbers}
94+
validationErrors={this.state.validationErrors}
95+
isDisabled={this.state.isDisabled}
96+
/>
97+
);
98+
}
99+
}
100+
101+
class AddCatalogNumbersFormView extends React.PureComponent {
102+
render() {
103+
const {handleSubmit, hasServerError, handleChangeCatalog, handleChangeNumbers, validationErrors, isDisabled} = this.props;
104+
const hasValidationErrors = validationErrors.length > 0;
105+
88106
return (
89107
<div className="col-sm-12 form-group">
90-
<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
108+
<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
91109
<div
92110
id="add-catalog-numbers-failed-msg"
93-
className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
111+
className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
94112
{ this.props.l10n['t_server_error'] || 'Server error' }
95113
</div>
96114
<div className="form-group form-group-sm">
@@ -102,7 +120,7 @@ class AddCatalogNumbersForm extends React.PureComponent {
102120
id="catalog-name"
103121
name="catalogName"
104122
className="form-control"
105-
onChange={this.handleChangeCatalog}>
123+
onChange={ handleChangeCatalog }>
106124
<option value="michel">
107125
{ this.props.l10n['t_michel'] || 'Michel' }
108126
</option>
@@ -136,25 +154,25 @@ class AddCatalogNumbersForm extends React.PureComponent {
136154
className="form-control"
137155
size="5"
138156
required="required"
139-
onChange={ this.handleChangeNumbers } />
157+
onChange={ handleChangeNumbers } />
140158
</div>
141159
</div>
142160
</div>
143161
<div className="col-sm-offset-3 col-sm-4">
144162
<span
145163
id="catalog-numbers.errors"
146164
className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
147-
{ this.state.validationErrors.join(', ') }
165+
{ validationErrors.join(', ') }
148166
</span>
149167
<button
150168
type="submit"
151169
className="btn btn-primary btn-sm"
152-
disabled={ this.state.isDisabled }>
170+
disabled={ isDisabled }>
153171
{ this.props.l10n['t_add'] || 'Add' }
154172
</button>
155173
</div>
156174
</form>
157175
</div>
158176
);
159177
}
160-
}
178+
}¥¦¨¬ ¢ë¢®¤  ª®¬ ­¤ ­  íªà ­ (ECHO) ¢ª«î祭.

‎src/main/frontend/src/components/AddCatalogPriceForm.js

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,6 @@ class AddCatalogPriceForm extends React.PureComponent {
3333
});
3434
}
3535

36-
getCurrencyByCatalogName(catalog) {
37-
switch (catalog) {
38-
case 'michel':
39-
case 'yvert':
40-
return ['\u20AC', 'EUR'];
41-
case 'scott':
42-
return ['$', 'USD'];
43-
case 'gibbons':
44-
return ['\u00A3', 'GBP'];
45-
case 'solovyov':
46-
case 'zagorski':
47-
return ['\u20BD', 'RUB'];
48-
}
49-
}
50-
5136
handleSubmit(event) {
5237
event.preventDefault();
5338

@@ -100,15 +85,48 @@ class AddCatalogPriceForm extends React.PureComponent {
10085
});
10186
}
10287
render() {
103-
const hasValidationErrors = this.state.validationErrors.length > 0;
104-
const [currencySymbol, currencyName] = this.getCurrencyByCatalogName(this.state.catalog);
105-
88+
89+
return (
90+
<AddCatalogPriceFormView
91+
l10n={this.props.l10n}
92+
handleSubmit={this.handleSubmit}
93+
hasServerError={this.state.hasServerError}
94+
handleChangeCatalog={this.handleChangeCatalog}
95+
catalog={this.state.catalog}
96+
handleChangePrice={this.handleChangePrice}
97+
validationErrors={this.state.validationErrors}
98+
isDisabled={this.state.isDisabled}
99+
/>
100+
);
101+
}
102+
}
103+
104+
class AddCatalogPriceFormView extends React.PureComponent {
105+
106+
getCurrencyByCatalogName(catalog) {
107+
switch (catalog) {
108+
case 'michel':
109+
case 'yvert':
110+
return ['\u20AC', 'EUR'];
111+
case 'scott':
112+
return ['$', 'USD'];
113+
case 'gibbons':
114+
return ['\u00A3', 'GBP'];
115+
case 'solovyov':
116+
case 'zagorski':
117+
return ['\u20BD', 'RUB'];
118+
}
119+
}
120+
render() {
121+
const {handleSubmit, hasServerError, handleChangeCatalog, handleChangePrice, validationErrors, isDisabled, catalog} = this.props;
122+
const hasValidationErrors = validationErrors.length > 0;
123+
const [currencySymbol, currencyName] = this.getCurrencyByCatalogName(catalog);
106124
return (
107125
<div className="col-sm-12 form-group">
108-
<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
126+
<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
109127
<div
110128
id="add-catalog-price-failed-msg"
111-
className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
129+
className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
112130
{ this.props.l10n['t_server_error'] || 'Server error' }
113131
</div>
114132
<div className="form-group form-group-sm">
@@ -120,7 +138,7 @@ class AddCatalogPriceForm extends React.PureComponent {
120138
id="catalog-name"
121139
name="catalogName"
122140
className="form-control"
123-
onChange={this.handleChangeCatalog}>
141+
onChange={ handleChangeCatalog }>
124142
<option value="michel">
125143
{ this.props.l10n['t_michel'] || 'Michel' }
126144
</option>
@@ -156,20 +174,20 @@ class AddCatalogPriceForm extends React.PureComponent {
156174
size="5"
157175
title={ currencyName }
158176
required="required"
159-
onChange={ this.handleChangePrice }/>
177+
onChange={ handleChangePrice } />
160178
</div>
161179
</div>
162180
</div>
163181
<div className="col-sm-offset-3 col-sm-4">
164182
<span
165183
id="catalog-price.errors"
166184
className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
167-
{ this.state.validationErrors.join(', ') }
185+
{ validationErrors.join(', ') }
168186
</span>
169187
<button
170188
type="submit"
171189
className="btn btn-primary btn-sm"
172-
disabled={ this.state.isDisabled }>
190+
disabled={ isDisabled }>
173191
{ this.props.l10n['t_add'] || 'Add' }
174192
</button>
175193
</div>

‎src/main/frontend/src/components/AddCommentForm.js

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,29 @@ class AddCommentForm extends React.PureComponent {
7373
});
7474
}
7575
render() {
76-
const hasValidationErrors = this.state.validationErrors.length > 0;
76+
return (
77+
<AddCommentFormView
78+
l10n={this.props.l10n}
79+
handleSubmit={this.handleSubmit}
80+
hasServerError={this.state.hasServerError}
81+
handleChange={this.handleChange}
82+
validationErrors={this.state.validationErrors}
83+
isDisabled={this.state.isDisabled}
84+
/>
85+
);
86+
}
87+
}
88+
89+
class AddCommentFormView extends React.PureComponent {
90+
render() {
91+
const {handleSubmit, hasServerError, handleChange, validationErrors, isDisabled} = this.props;
92+
const hasValidationErrors = validationErrors.length > 0;
7793
return (
7894
<div className="col-sm-12 form-group">
79-
<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
95+
<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
8096
<div
8197
id="add-comment-failed-msg"
82-
className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
98+
className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
8399
{ this.props.l10n['t_server_error'] || 'Server error' }
84100
</div>
85101
<div className="form-group form-group-sm">
@@ -93,20 +109,20 @@ class AddCommentForm extends React.PureComponent {
93109
cols="22"
94110
rows="3"
95111
required="required"
96-
onChange={this.handleChange}>
112+
onChange={ handleChange }>
97113
</textarea>
98114
</div>
99115
</div>
100116
<div className="col-sm-offset-3 col-sm-4">
101117
<span
102118
id="comment.errors"
103119
className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
104-
{ this.state.validationErrors.join(', ') }
120+
{ validationErrors.join(', ') }
105121
</span>
106122
<button
107123
type="submit"
108124
className="btn btn-primary btn-sm"
109-
disabled={ this.state.isDisabled }>
125+
disabled={ isDisabled }>
110126
{ this.props.l10n['t_add'] || 'Add' }
111127
</button>
112128
</div>

‎src/main/frontend/src/components/AddReleaseYearForm.js

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,6 @@ class AddReleaseYearForm extends React.PureComponent {
1616
this.handleChange = this.handleChange.bind(this);
1717
}
1818

19-
generateRange(start, end) {
20-
return new Array(end - start + 1)
21-
.fill()
22-
.map((_, idx) => start + idx);
23-
}
24-
2519
handleChange(event) {
2620
event.preventDefault();
2721
this.setState({
@@ -81,17 +75,43 @@ class AddReleaseYearForm extends React.PureComponent {
8175
}
8276

8377
render() {
78+
return (
79+
<AddReleaseYearFormView
80+
l10n={this.props.l10n}
81+
handleSubmit={this.handleSubmit}
82+
hasServerError={this.state.hasServerError}
83+
handleChange={this.handleChange}
84+
validationErrors={this.state.validationErrors}
85+
isDisabled={this.state.isDisabled}
86+
sinceYear={this.props.sinceYear}
87+
tillYear={this.props.tillYear}
88+
/>
89+
);
90+
}
91+
}
92+
93+
class AddReleaseYearFormView extends React.PureComponent {
94+
95+
generateRange(start, end) {
96+
return new Array(end - start + 1)
97+
.fill()
98+
.map((_, idx) => start + idx);
99+
}
100+
101+
render() {
102+
const {handleSubmit, hasServerError, handleChange, validationErrors, isDisabled, sinceYear, tillYear} = this.props;
103+
const hasValidationErrors = validationErrors.length > 0;
84104
const rangeOfYears = this.generateRange(
85-
this.props.sinceYear,
86-
this.props.tillYear
105+
sinceYear,
106+
tillYear
87107
);
88-
const hasValidationErrors = this.state.validationErrors.length > 0;
108+
89109
return (
90110
<div className="col-sm-12 form-group">
91-
<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
111+
<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
92112
<div
93113
id="add-release-year-failed-msg"
94-
className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${ this.state.hasServerError ? '' : 'hidden' }`}>
114+
className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden' }` }>
95115
{ this.props.l10n['t_server_error'] || 'Server error' }
96116
</div>
97117
<div className="form-group form-group-sm">
@@ -104,7 +124,7 @@ class AddReleaseYearForm extends React.PureComponent {
104124
name="release-year"
105125
className="form-control"
106126
required="required"
107-
onChange={this.handleChange}>
127+
onChange={ handleChange }>
108128
<option value=""></option>
109129
{rangeOfYears.map(year => (
110130
<option key={year.toString()} value={year}>
@@ -118,17 +138,18 @@ class AddReleaseYearForm extends React.PureComponent {
118138
<span
119139
id="release-year.errors"
120140
className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
121-
{ this.state.validationErrors.join(', ') }
141+
{ validationErrors.join(', ') }
122142
</span>
123143
<button
124144
type="submit"
125145
className="btn btn-primary btn-sm"
126-
disabled={ this.state.isDisabled }>
146+
disabled={ isDisabled }>
127147
{ this.props.l10n['t_add'] || 'Add' }
128148
</button>
129149
</div>
130150
</form>
131151
</div>
132152
);
133153
}
134-
}
154+
}¥¦¨¬ ¢ë¢®¤  ª®¬ ­¤ ­  íªà ­ (ECHO) ¢ª«î祭.
155+
¥¦¨¬ ¢ë¢®¤  ª®¬ ­¤ ­  íªà ­ (ECHO) ¢ª«î祭.

0 commit comments

Comments
 (0)