2015-06-05 11:06:36 +02:00
|
|
|
'use strict';
|
|
|
|
|
2015-06-01 17:43:38 +02:00
|
|
|
import fetch from '../utils/fetch';
|
2015-05-29 01:54:56 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
2015-06-05 11:06:36 +02:00
|
|
|
import AlertDismissable from '../components/ascribe_forms/alert';
|
2015-05-29 01:54:56 +02:00
|
|
|
|
|
|
|
export const FormMixin = {
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
2015-06-03 11:49:39 +02:00
|
|
|
submitted: false,
|
|
|
|
errors: []
|
2015-06-05 11:06:36 +02:00
|
|
|
};
|
2015-05-29 01:54:56 +02:00
|
|
|
},
|
2015-06-01 18:00:34 +02:00
|
|
|
|
2015-05-29 01:54:56 +02:00
|
|
|
submit(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.setState({submitted: true});
|
2015-06-02 18:43:37 +02:00
|
|
|
this.clearErrors();
|
2015-06-01 17:43:38 +02:00
|
|
|
fetch
|
|
|
|
.post(this.url(), { body: this.getFormData() })
|
2015-06-08 14:51:13 +02:00
|
|
|
.then(() => this.props.handleSuccess())
|
2015-06-01 17:43:38 +02:00
|
|
|
.catch(this.handleError);
|
2015-05-29 01:54:56 +02:00
|
|
|
},
|
2015-06-08 13:55:55 +02:00
|
|
|
|
2015-06-02 18:43:37 +02:00
|
|
|
clearErrors(){
|
|
|
|
for (var ref in this.refs){
|
|
|
|
this.refs[ref].clearAlerts();
|
|
|
|
}
|
2015-06-08 13:55:55 +02:00
|
|
|
this.setState({errors: []});
|
2015-06-02 18:43:37 +02:00
|
|
|
},
|
2015-06-08 13:55:55 +02:00
|
|
|
|
2015-06-01 17:43:38 +02:00
|
|
|
handleError(err){
|
|
|
|
if (err.json) {
|
2015-06-02 18:16:18 +02:00
|
|
|
for (var input in err.json.errors){
|
2015-06-01 17:43:38 +02:00
|
|
|
if (this.refs && this.refs[input] && this.refs[input].state) {
|
2015-06-02 18:16:18 +02:00
|
|
|
this.refs[input].setAlerts( err.json.errors[input]);
|
2015-06-02 17:32:38 +02:00
|
|
|
} else {
|
2015-06-02 18:16:18 +02:00
|
|
|
this.setState({errors: this.state.errors.concat(err.json.errors[input])});
|
2015-06-01 17:43:38 +02:00
|
|
|
}
|
2015-05-29 01:54:56 +02:00
|
|
|
}
|
|
|
|
}
|
2015-06-08 13:55:55 +02:00
|
|
|
else {
|
|
|
|
this.setState({errors: ['Something went wrong, please try again later']});
|
2015-06-02 18:16:18 +02:00
|
|
|
}
|
|
|
|
this.setState({submitted: false});
|
2015-05-29 01:54:56 +02:00
|
|
|
},
|
2015-06-01 18:00:34 +02:00
|
|
|
|
2015-06-02 11:38:18 +02:00
|
|
|
getBitcoinIds(){
|
|
|
|
return this.props.editions.map(function(edition){
|
2015-06-05 11:06:36 +02:00
|
|
|
return edition.bitcoin_id;
|
|
|
|
});
|
2015-06-02 11:38:18 +02:00
|
|
|
},
|
2015-06-02 17:32:38 +02:00
|
|
|
|
2015-06-02 11:38:18 +02:00
|
|
|
getTitlesString(){
|
|
|
|
return this.props.editions.map(function(edition){
|
2015-06-05 11:06:36 +02:00
|
|
|
return '- \"' + edition.title + ', edition ' + edition.edition_number + '\"\n';
|
|
|
|
});
|
2015-06-02 11:38:18 +02:00
|
|
|
},
|
2015-06-02 17:32:38 +02:00
|
|
|
|
2015-05-29 01:54:56 +02:00
|
|
|
render(){
|
|
|
|
let alert = null;
|
2015-05-29 15:16:42 +02:00
|
|
|
if (this.state.errors.length > 0){
|
2015-06-05 11:06:36 +02:00
|
|
|
alert = this.state.errors.map((error) => {
|
|
|
|
return <AlertDismissable error={error} key={error}/>;
|
|
|
|
});
|
2015-05-29 15:16:42 +02:00
|
|
|
}
|
2015-06-05 11:40:49 +02:00
|
|
|
|
2015-05-29 01:54:56 +02:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{alert}
|
|
|
|
{this.renderForm()}
|
|
|
|
</div>
|
2015-06-05 11:06:36 +02:00
|
|
|
);
|
2015-05-29 01:54:56 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FormMixin;
|
|
|
|
|