From 4e2ef069a7fead71915bb2bd27c1161982a2edce Mon Sep 17 00:00:00 2001
From: Bakhodyr Kadyrov <bahobek@gmail.com>
Date: Sun, 24 May 2020 10:22:05 +0600
Subject: [PATCH] refactor: Split React components into logical and
 representational

Fix #1405
---
 .../src/components/AddCatalogNumbersForm.js   | 32 +++++++--
 .../src/components/AddCatalogPriceForm.js     | 66 ++++++++++++-------
 .../frontend/src/components/AddCommentForm.js | 28 ++++++--
 .../src/components/AddReleaseYearForm.js      | 47 ++++++++-----
 .../src/components/SeriesSaleImportForm.js    | 33 +++++++---
 .../web/feature/site/ResourceUrl.java         |  2 +-
 6 files changed, 147 insertions(+), 61 deletions(-)

diff --git a/src/main/frontend/src/components/AddCatalogNumbersForm.js b/src/main/frontend/src/components/AddCatalogNumbersForm.js
index a58353908a..35decea1cd 100644
--- a/src/main/frontend/src/components/AddCatalogNumbersForm.js
+++ b/src/main/frontend/src/components/AddCatalogNumbersForm.js
@@ -84,13 +84,31 @@ class AddCatalogNumbersForm extends React.PureComponent {
 			});
 	}
 	render() {
-		const hasValidationErrors = this.state.validationErrors.length > 0;
+		return (
+			<AddCatalogNumbersFormView
+				l10n={this.props.l10n}
+				handleSubmit={this.handleSubmit}
+				hasServerError={this.state.hasServerError}
+				handleChangeCatalog={this.handleChangeCatalog}
+				handleChangeNumbers={this.handleChangeNumbers}
+				validationErrors={this.state.validationErrors}
+				isDisabled={this.state.isDisabled}
+			/>
+		);
+	}
+}
+
+class AddCatalogNumbersFormView extends React.PureComponent {
+	render() {
+		const {handleSubmit, hasServerError, handleChangeCatalog, handleChangeNumbers, validationErrors, isDisabled} = this.props;
+		const hasValidationErrors = validationErrors.length > 0;
+
 		return (
 			<div className="col-sm-12 form-group">
-				<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
+				<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
 					<div
 						id="add-catalog-numbers-failed-msg"
-						className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
+						className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
 						{ this.props.l10n['t_server_error'] || 'Server error' }
 					</div>
 					<div className="form-group form-group-sm">
@@ -102,7 +120,7 @@ class AddCatalogNumbersForm extends React.PureComponent {
 								id="catalog-name"
 								name="catalogName"
 								className="form-control"
-								onChange={this.handleChangeCatalog}>
+								onChange={ handleChangeCatalog }>
 								<option value="michel">
 									{ this.props.l10n['t_michel'] || 'Michel' }
 								</option>
@@ -136,7 +154,7 @@ class AddCatalogNumbersForm extends React.PureComponent {
 									className="form-control"
 									size="5"
 									required="required"
-									onChange={ this.handleChangeNumbers } />
+									onChange={ handleChangeNumbers } />
 							</div>
 						</div>
 					</div>
@@ -144,12 +162,12 @@ class AddCatalogNumbersForm extends React.PureComponent {
 						<span
 							id="catalog-numbers.errors"
 							className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
-							{ this.state.validationErrors.join(', ') }
+							{ validationErrors.join(', ') }
 						</span>
 						<button
 							type="submit"
 							className="btn btn-primary btn-sm"
-							disabled={ this.state.isDisabled }>
+							disabled={ isDisabled }>
 							{ this.props.l10n['t_add'] || 'Add' }
 						</button>
 					</div>
diff --git a/src/main/frontend/src/components/AddCatalogPriceForm.js b/src/main/frontend/src/components/AddCatalogPriceForm.js
index 6c3532740d..c9af8f0e08 100644
--- a/src/main/frontend/src/components/AddCatalogPriceForm.js
+++ b/src/main/frontend/src/components/AddCatalogPriceForm.js
@@ -33,21 +33,6 @@ class AddCatalogPriceForm extends React.PureComponent {
 		});
 	}
 
-	getCurrencyByCatalogName(catalog) {
-		switch (catalog) {
-			case 'michel':
-			case 'yvert':
-				return ['\u20AC', 'EUR'];
-			case 'scott':
-				return ['$', 'USD'];
-			case 'gibbons':
-				return ['\u00A3', 'GBP'];
-			case 'solovyov':
-			case 'zagorski':
-				return ['\u20BD', 'RUB'];
-		}
-	}
-
 	handleSubmit(event) {
 		event.preventDefault();
 
@@ -100,15 +85,48 @@ class AddCatalogPriceForm extends React.PureComponent {
 			});
 	}
 	render() {
-		const hasValidationErrors = this.state.validationErrors.length > 0;
-		const [currencySymbol, currencyName] = this.getCurrencyByCatalogName(this.state.catalog);
-		
+				
+		return (
+			<AddCatalogPriceFormView
+				l10n={this.props.l10n}
+				handleSubmit={this.handleSubmit}
+				hasServerError={this.state.hasServerError}
+				handleChangeCatalog={this.handleChangeCatalog}
+				catalog={this.state.catalog}
+				handleChangePrice={this.handleChangePrice}
+				validationErrors={this.state.validationErrors}
+				isDisabled={this.state.isDisabled}
+			/>
+		);
+	}
+}
+
+class AddCatalogPriceFormView extends React.PureComponent {
+
+	getCurrencyByCatalogName(catalog) {
+		switch (catalog) {
+			case 'michel':
+			case 'yvert':
+				return ['\u20AC', 'EUR'];
+			case 'scott':
+				return ['$', 'USD'];
+			case 'gibbons':
+				return ['\u00A3', 'GBP'];
+			case 'solovyov':
+			case 'zagorski':
+				return ['\u20BD', 'RUB'];
+		}
+	}
+	render() {
+		const {handleSubmit, hasServerError, handleChangeCatalog, handleChangePrice, validationErrors, isDisabled, catalog} = this.props;
+		const hasValidationErrors = validationErrors.length > 0;
+		const [currencySymbol, currencyName] = this.getCurrencyByCatalogName(catalog);
 		return (
 			<div className="col-sm-12 form-group">
-				<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
+				<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
 					<div
 						id="add-catalog-price-failed-msg"
-						className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
+						className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
 						{ this.props.l10n['t_server_error'] || 'Server error' }
 					</div>
 					<div className="form-group form-group-sm">
@@ -120,7 +138,7 @@ class AddCatalogPriceForm extends React.PureComponent {
 								id="catalog-name"
 								name="catalogName"
 								className="form-control"
-								onChange={this.handleChangeCatalog}>
+								onChange={ handleChangeCatalog }>
 								<option value="michel">
 									{ this.props.l10n['t_michel'] || 'Michel' }
 								</option>
@@ -156,7 +174,7 @@ class AddCatalogPriceForm extends React.PureComponent {
 									size="5"
 									title={ currencyName }
 									required="required"
-									onChange={ this.handleChangePrice }/>
+									onChange={ handleChangePrice } />
 							</div>
 						</div>
 					</div>
@@ -164,12 +182,12 @@ class AddCatalogPriceForm extends React.PureComponent {
 						<span
 							id="catalog-price.errors"
 							className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
-							{ this.state.validationErrors.join(', ') }
+							{ validationErrors.join(', ') }
 						</span>
 						<button
 							type="submit"
 							className="btn btn-primary btn-sm"
-							disabled={ this.state.isDisabled }>
+							disabled={ isDisabled }>
 							{ this.props.l10n['t_add'] || 'Add' }
 						</button>
 					</div>
diff --git a/src/main/frontend/src/components/AddCommentForm.js b/src/main/frontend/src/components/AddCommentForm.js
index acd73b95fb..6cd42cda98 100644
--- a/src/main/frontend/src/components/AddCommentForm.js
+++ b/src/main/frontend/src/components/AddCommentForm.js
@@ -73,13 +73,29 @@ class AddCommentForm extends React.PureComponent {
 			});
 	}
 	render() {
-		const hasValidationErrors = this.state.validationErrors.length > 0;
+		return (
+			<AddCommentFormView 
+				l10n={this.props.l10n}
+				handleSubmit={this.handleSubmit}
+				hasServerError={this.state.hasServerError}
+				handleChange={this.handleChange}
+				validationErrors={this.state.validationErrors}
+				isDisabled={this.state.isDisabled}
+			/>
+		);
+	}
+}
+
+class AddCommentFormView extends React.PureComponent {
+	render() {
+		const {handleSubmit, hasServerError, handleChange, validationErrors, isDisabled} = this.props;
+		const hasValidationErrors = validationErrors.length > 0;
 		return (
 			<div className="col-sm-12 form-group">
-				<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
+				<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
 					<div
 						id="add-comment-failed-msg"
-						className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
+						className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
 						{ this.props.l10n['t_server_error'] || 'Server error' }
 					</div>
 					<div className="form-group form-group-sm">
@@ -93,7 +109,7 @@ class AddCommentForm extends React.PureComponent {
 								cols="22"
 								rows="3"
 								required="required"
-								onChange={this.handleChange}>
+								onChange={ handleChange }>
 							</textarea>
 						</div>
 					</div>
@@ -101,12 +117,12 @@ class AddCommentForm extends React.PureComponent {
 						<span
 							id="comment.errors"
 							className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
-							{ this.state.validationErrors.join(', ') }
+							{ validationErrors.join(', ') }
 						</span>
 						<button
 							type="submit"
 							className="btn btn-primary btn-sm"
-							disabled={ this.state.isDisabled }>
+							disabled={ isDisabled }>
 							{ this.props.l10n['t_add'] || 'Add' }
 						</button>
 					</div>
diff --git a/src/main/frontend/src/components/AddReleaseYearForm.js b/src/main/frontend/src/components/AddReleaseYearForm.js
index 76be6b1da4..9ce8fbbcd9 100644
--- a/src/main/frontend/src/components/AddReleaseYearForm.js
+++ b/src/main/frontend/src/components/AddReleaseYearForm.js
@@ -16,12 +16,6 @@ class AddReleaseYearForm extends React.PureComponent {
 		this.handleChange = this.handleChange.bind(this);
 	}
 
-	generateRange(start, end) {
-		return new Array(end - start + 1)
-			.fill()
-			.map((_, idx) => start + idx);
-	}
-
 	handleChange(event) {
 		event.preventDefault();
 		this.setState({
@@ -81,17 +75,40 @@ class AddReleaseYearForm extends React.PureComponent {
 	}
 
 	render() {
-		const rangeOfYears = this.generateRange(
-			this.props.sinceYear,
-			this.props.tillYear
+		return (
+			<AddReleaseYearFormView
+				l10n={this.props.l10n}
+				handleSubmit={this.handleSubmit}
+				hasServerError={this.state.hasServerError}
+				handleChange={this.handleChange}
+				validationErrors={this.state.validationErrors}
+				isDisabled={this.state.isDisabled}
+				sinceYear={this.props.sinceYear}
+				tillYear={this.props.tillYear}
+			/>
 		);
-		const hasValidationErrors = this.state.validationErrors.length > 0;
+	}
+}
+
+class AddReleaseYearFormView extends React.PureComponent {
+
+	generateRange(start, end) {
+		return new Array(end - start + 1)
+			.fill()
+			.map((_, idx) => start + idx);
+	}
+
+	render() {
+		const {handleSubmit, hasServerError, handleChange, validationErrors, isDisabled, sinceYear, tillYear} = this.props;
+		const hasValidationErrors = validationErrors.length > 0;
+		const rangeOfYears = this.generateRange(sinceYear, tillYear);
+		
 		return (
 			<div className="col-sm-12 form-group">
-				<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
+				<form className={ `form-horizontal ${hasValidationErrors ? 'has-error' : ''}` } onSubmit={ handleSubmit }>
 					<div
 						id="add-release-year-failed-msg"
-						className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${	this.state.hasServerError ? '' : 'hidden' }`}>
+						className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden' }` }>
 						{ this.props.l10n['t_server_error'] || 'Server error' }
 					</div>
 					<div className="form-group form-group-sm">
@@ -104,7 +121,7 @@ class AddReleaseYearForm extends React.PureComponent {
 								name="release-year"
 								className="form-control"
 								required="required"
-								onChange={this.handleChange}>
+								onChange={ handleChange }>
 								<option value=""></option>
 								{rangeOfYears.map(year => (
 									<option key={year.toString()} value={year}>
@@ -118,12 +135,12 @@ class AddReleaseYearForm extends React.PureComponent {
 						<span
 							id="release-year.errors"
 							className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
-							{ this.state.validationErrors.join(', ') }
+							{ validationErrors.join(', ') }
 						</span>
 						<button
 							type="submit"
 							className="btn btn-primary btn-sm"
-							disabled={ this.state.isDisabled }>
+							disabled={ isDisabled }>
 							{ this.props.l10n['t_add'] || 'Add' }
 						</button>
 					</div>
diff --git a/src/main/frontend/src/components/SeriesSaleImportForm.js b/src/main/frontend/src/components/SeriesSaleImportForm.js
index 0def30bea7..2c286a92d3 100644
--- a/src/main/frontend/src/components/SeriesSaleImportForm.js
+++ b/src/main/frontend/src/components/SeriesSaleImportForm.js
@@ -94,7 +94,24 @@ class SeriesSaleImportForm extends React.PureComponent {
 	}
 	
 	render() {
-		const hasValidationErrors = this.state.validationErrors.length > 0;
+		return (
+			<SeriesSaleImportFormView
+				l10n={this.props.l10n}
+				hasServerError={this.state.hasServerError}
+				handleSubmit={this.handleSubmit}
+				url={this.state.url}
+				handleChange={this.handleChange}
+				isDisabled={this.state.isDisabled}
+				validationErrors={this.state.validationErrors}
+			/>
+		)
+	}
+}
+
+class SeriesSaleImportFormView extends React.PureComponent {
+	render() {
+		const { hasServerError, handleSubmit, url, handleChange, isDisabled, validationErrors} = this.props;
+		const hasValidationErrors = validationErrors.length > 0;
 		
 		return (
 			<div className="row">
@@ -108,7 +125,7 @@ class SeriesSaleImportForm extends React.PureComponent {
 					</div>
 					<div className="row">
 						<div id="import-series-sale-failed-msg"
-							className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
+							className={ `alert alert-danger text-center col-sm-8 col-sm-offset-2 ${hasServerError ? '' : 'hidden'}` }>
 							{ this.props.l10n['t_could_not_import_info'] || 'Could not import information from this page' }
 						</div>
 					</div>
@@ -116,7 +133,7 @@ class SeriesSaleImportForm extends React.PureComponent {
 						<div className="col-sm-12">
 							<form id="import-series-sale-form"
 								className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`}
-								onSubmit={this.handleSubmit}>
+								onSubmit={ handleSubmit }>
 								
 								<div className="form-group form-group-sm">
 									<label htmlFor="series-sale-url" className="control-label col-sm-3">
@@ -129,12 +146,12 @@ class SeriesSaleImportForm extends React.PureComponent {
 											type="url"
 											className="form-control"
 											required="required"
-											value={this.state.url}
-											onChange={this.handleChange}
-											disabled={this.state.isDisabled} />
+											value={ url }
+											onChange={ handleChange }
+											disabled={ isDisabled } />
 										<span id="series-sale-url.errors"
 											className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
-											{ this.state.validationErrors.join(', ') }
+											{ validationErrors.join(', ') }
 										</span>
 									</div>
 								</div>
@@ -143,7 +160,7 @@ class SeriesSaleImportForm extends React.PureComponent {
 									<div className="col-sm-offset-3 col-sm-4">
 										<button type="submit"
 											className="btn btn-primary btn-sm"
-											disabled={this.state.isDisabled}>
+											disabled={ isDisabled }>
 											{ this.props.l10n['t_import_info'] || 'Import info' }
 										</button>
 									</div>
diff --git a/src/main/java/ru/mystamps/web/feature/site/ResourceUrl.java b/src/main/java/ru/mystamps/web/feature/site/ResourceUrl.java
index 2a4723f5e5..9f59e353ba 100644
--- a/src/main/java/ru/mystamps/web/feature/site/ResourceUrl.java
+++ b/src/main/java/ru/mystamps/web/feature/site/ResourceUrl.java
@@ -32,7 +32,7 @@ public final class ResourceUrl {
 	public static final String STATIC_RESOURCES_URL = "https://stamps.filezz.ru";
 	
 	// MUST be updated when any of our resources were modified
-	public static final String RESOURCES_VERSION = "v0.4.3.7";
+	public static final String RESOURCES_VERSION = "v0.4.3.8";
 
 	// CheckStyle: ignore LineLength for next 15 lines
 	private static final String CATALOG_UTILS_JS      = "/public/js/" + RESOURCES_VERSION + "/CatalogUtils.min.js";