Skip to content

Commit 4e2ef06

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

File tree

6 files changed

+147
-61
lines changed

6 files changed

+147
-61
lines changed

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

+25-7
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,20 +154,20 @@ 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>

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

+42-24
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

+22-6
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

+32-15
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,40 @@ class AddReleaseYearForm extends React.PureComponent {
8175
}
8276

8377
render() {
84-
const rangeOfYears = this.generateRange(
85-
this.props.sinceYear,
86-
this.props.tillYear
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+
/>
8789
);
88-
const hasValidationErrors = this.state.validationErrors.length > 0;
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;
104+
const rangeOfYears = this.generateRange(sinceYear, tillYear);
105+
89106
return (
90107
<div className="col-sm-12 form-group">
91-
<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
108+
<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
92109
<div
93110
id="add-release-year-failed-msg"
94-
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' }` }>
95112
{ this.props.l10n['t_server_error'] || 'Server error' }
96113
</div>
97114
<div className="form-group form-group-sm">
@@ -104,7 +121,7 @@ class AddReleaseYearForm extends React.PureComponent {
104121
name="release-year"
105122
className="form-control"
106123
required="required"
107-
onChange={this.handleChange}>
124+
onChange={ handleChange }>
108125
<option value=""></option>
109126
{rangeOfYears.map(year => (
110127
<option key={year.toString()} value={year}>
@@ -118,12 +135,12 @@ class AddReleaseYearForm extends React.PureComponent {
118135
<span
119136
id="release-year.errors"
120137
className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
121-
{ this.state.validationErrors.join(', ') }
138+
{ validationErrors.join(', ') }
122139
</span>
123140
<button
124141
type="submit"
125142
className="btn btn-primary btn-sm"
126-
disabled={ this.state.isDisabled }>
143+
disabled={ isDisabled }>
127144
{ this.props.l10n['t_add'] || 'Add' }
128145
</button>
129146
</div>

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

+25-8
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,24 @@ class SeriesSaleImportForm extends React.PureComponent {
9494
}
9595

9696
render() {
97-
const hasValidationErrors = this.state.validationErrors.length > 0;
97+
return (
98+
<SeriesSaleImportFormView
99+
l10n={this.props.l10n}
100+
hasServerError={this.state.hasServerError}
101+
handleSubmit={this.handleSubmit}
102+
url={this.state.url}
103+
handleChange={this.handleChange}
104+
isDisabled={this.state.isDisabled}
105+
validationErrors={this.state.validationErrors}
106+
/>
107+
)
108+
}
109+
}
110+
111+
class SeriesSaleImportFormView extends React.PureComponent {
112+
render() {
113+
const { hasServerError, handleSubmit, url, handleChange, isDisabled, validationErrors} = this.props;
114+
const hasValidationErrors = validationErrors.length > 0;
98115

99116
return (
100117
<div className="row">
@@ -108,15 +125,15 @@ class SeriesSaleImportForm extends React.PureComponent {
108125
</div>
109126
<div className="row">
110127
<div id="import-series-sale-failed-msg"
111-
className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
128+
className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
112129
{ this.props.l10n['t_could_not_import_info'] || 'Could not import information from this page' }
113130
</div>
114131
</div>
115132
<div className="row">
116133
<div className="col-sm-12">
117134
<form id="import-series-sale-form"
118135
className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`}
119-
onSubmit={this.handleSubmit}>
136+
onSubmit={ handleSubmit }>
120137

121138
<div className="form-group form-group-sm">
122139
<label htmlFor="series-sale-url" className="control-label col-sm-3">
@@ -129,12 +146,12 @@ class SeriesSaleImportForm extends React.PureComponent {
129146
type="url"
130147
className="form-control"
131148
required="required"
132-
value={this.state.url}
133-
onChange={this.handleChange}
134-
disabled={this.state.isDisabled} />
149+
value={ url }
150+
onChange={ handleChange }
151+
disabled={ isDisabled } />
135152
<span id="series-sale-url.errors"
136153
className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
137-
{ this.state.validationErrors.join(', ') }
154+
{ validationErrors.join(', ') }
138155
</span>
139156
</div>
140157
</div>
@@ -143,7 +160,7 @@ class SeriesSaleImportForm extends React.PureComponent {
143160
<div className="col-sm-offset-3 col-sm-4">
144161
<button type="submit"
145162
className="btn btn-primary btn-sm"
146-
disabled={this.state.isDisabled}>
163+
disabled={ isDisabled }>
147164
{ this.props.l10n['t_import_info'] || 'Import info' }
148165
</button>
149166
</div>

‎src/main/java/ru/mystamps/web/feature/site/ResourceUrl.java

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ public final class ResourceUrl {
3232
public static final String STATIC_RESOURCES_URL = "https://stamps.filezz.ru";
3333

3434
// MUST be updated when any of our resources were modified
35-
public static final String RESOURCES_VERSION = "v0.4.3.7";
35+
public static final String RESOURCES_VERSION = "v0.4.3.8";
3636

3737
// CheckStyle: ignore LineLength for next 15 lines
3838
private static final String CATALOG_UTILS_JS = "/public/js/" + RESOURCES_VERSION + "/CatalogUtils.min.js";

0 commit comments

Comments
 (0)