task: implement AddCommentForm

Fix #1338

Author: bahoss

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

@@ -4,10 +4,114 @@
 //
 
 class AddCommentForm extends React.Component {
-	
+	constructor(props) {
+		super(props);
+		this.state = {
+			comment: '',
+			validationErrors: [],
+			hasServerError: false,
+			isDisabled: false
+		};
+		this.handleSubmit = this.handleSubmit.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+	}
+
+	handleChange(event) {
+		event.preventDefault();
+		this.setState({
+			comment: event.target.value
+		});
+	}
+
+	handleSubmit(event) {
+		event.preventDefault();
+
+		this.setState({
+			isDisabled: true,
+			hasServerError: false,
+			validationErrors: []
+		});
+
+		axios.patch(
+			this.props.url, [
+				{
+					op: 'add',
+					path: '/comment',
+					value: this.state.comment
+				}
+			],
+			{
+				headers: {
+					[this.props.csrfHeaderName]: this.props.csrfTokenValue,
+					'Cache-Control': 'no-store'
+				},
+				validateStatus: status => {
+					return status == 204 || status == 400;
+				}
+			})
+			.then(response => {
+				const data = response.data;
+
+				if (data.hasOwnProperty('fieldErrors')) {
+					const fieldErrors = [];
+					if (data.fieldErrors.comment) {
+						fieldErrors.push(...data.fieldErrors.comment);
+					}
+					this.setState({
+						isDisabled: false,
+						validationErrors: fieldErrors
+					});
+					return;
+				}
+
+				// no need to reset the state as page will be reloaded
+				window.location.reload();
+			})
+			.catch(error => {
+				console.error(error);
+				this.setState({ isDisabled: false, hasServerError: true });
+			});
+	}
 	render() {
+		const hasValidationErrors = this.state.validationErrors.length > 0;
 		return (
-			<div></div>
-		)
+			<div className="col-sm-12 form-group">
+				<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
+					<div
+						id="add-comment-failed-msg"
+						className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
+						{ this.props.l10n['t_server_error'] || 'Server error' }
+					</div>
+					<div className="form-group form-group-sm">
+						<label className="control-label col-sm-3">
+							{ this.props.l10n['t_comment'] || 'Comment' }
+						</label>
+						<div className="col-sm-6">
+							<textarea
+								id="comment"
+								className="form-control"
+								cols="22"
+								rows="3"
+								required="required"
+								onChange={this.handleChange}>
+							</textarea>
+						</div>
+					</div>
+					<div className="col-sm-offset-3 col-sm-4">
+						<span
+							id="comment.errors"
+							className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
+							{ this.state.validationErrors.join(', ') }
+						</span>
+						<button
+							type="submit"
+							className="btn btn-primary btn-sm"
+							disabled={ this.state.isDisabled }>
+							{ this.props.l10n['t_add'] || 'Add' }
+						</button>
+					</div>
+				</form>
+			</div>
+		);
 	}
 }

src/main/webapp/WEB-INF/views/series/info.html

@@ -894,6 +894,49 @@ <h5 th:text="#{t_add_info_who_selling_series}">Add info about selling/buying thi
 									'altCurrency' : 'CZK'
 								}
 							}
+						}						
+					};
+					var stubResponse;
+
+					switch (outcome) {
+						case 'success':
+						case 'failOnField':
+							stubResponse = possibleResponses[url][outcome];
+							break;
+						case 'failOnForm':
+						default:
+							stubResponse = {
+								status: 500,
+								statusText: 'Fake Server Error'
+							};
+					}
+
+					responseCount++;
+
+					return new Promise(function delayExecution(resolve) {
+						setTimeout(resolve, 500 /* 0.5 second */);
+
+					}).then(function returnResponse() {
+						return stubResponse.status == 500 ? Promise.reject(stubResponse) : Promise.resolve(stubResponse);
+					});
+				},
+				patch: function (url) {
+					var possibleOutcomes = ['failOnForm', 'failOnField', 'success'];
+					var outcome = possibleOutcomes[responseCount % possibleOutcomes.length];
+					var possibleResponses = {
+						'/series/100': {
+							'failOnField': {
+								status: 400,
+								data: {
+									'fieldErrors': {
+										'comment': ['Comment error'],
+									}
+								}
+							},
+							'success': {
+								status: 200,
+								data: {}
+							}
 						}
 					};
 					var stubResponse;