1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

solved error + reusability refactor

This commit is contained in:
ddejongh 2015-05-28 18:18:13 +02:00
parent d4a98ce7c4
commit 0a4dae850b
3 changed files with 138 additions and 111 deletions

View File

@ -0,0 +1,57 @@
import fetch from 'isomorphic-fetch';
import React from 'react';
import AppConstants from '../../constants/application_constants';
import FetchApiUtils from '../../utils/fetch_api_utils';
import FormMixin from '../../mixins/form_alert_mixin';
let ShareForm = React.createClass({
mixins: [FormMixin],
submit(e) {
e.preventDefault();
fetch(AppConstants.baseUrl + 'ownership/shares/mail/', {
method: 'post',
headers: {
'Authorization': 'Basic ' + AppConstants.debugCredentialBase64,
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.getFormData())
})
.then(
(response) => this.handleResponse(response)
);
},
getFormData() {
return {
bitcoin_id: this.props.edition.bitcoin_id,
share_emails: this.refs.share_emails.getDOMNode().value,
share_message: this.refs.share_message.getDOMNode().value
}
},
renderMessage() {
return "" +
"Hi,\n" +
"\n" +
"I am sharing \"" + this.props.edition.title + "\" with you.\n" +
"\n" +
"Truly yours,\n" +
this.props.currentUser.username;
},
render() {
return (
<form id="share_modal_content" role="form" onSubmit={this.submit}>
{this.renderTextInput("share_emails", "email", "Comma separated emails", "required")}
{this.renderTextArea("share_message", this.renderMessage(), "")}
<div className="modal-footer">
<button type="submit" className="btn btn-ascribe-inv">SHARE</button>
<button className="btn btn-ascribe-inv" onClick={this.props.onRequestHide}>CLOSE</button>
</div>
</form>
);
}
});
export default ShareForm;

View File

@ -1,16 +1,13 @@
import fetch from 'isomorphic-fetch';
import AppConstants from '../../constants/application_constants';
import FetchApiUtils from '../../utils/fetch_api_utils';
import React from 'react'; import React from 'react';
import Modal from 'react-bootstrap/lib/Modal'; import Modal from 'react-bootstrap/lib/Modal';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import ModalTrigger from 'react-bootstrap/lib/ModalTrigger'; import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip'; import Tooltip from 'react-bootstrap/lib/Tooltip';
import Alert from 'react-bootstrap/lib/Alert';
import ShareForm from '../ascribe_forms/form_share_email'
let ShareModalButton = React.createClass({ let ShareModalButton = React.createClass({
render() { render() {
return ( return (
@ -44,107 +41,5 @@ let ShareModal = React.createClass({
} }
}); });
let ShareForm = React.createClass({
getInitialState() {
return {errors: null}
},
submit(e) {
e.preventDefault();
let url = "http://localhost:8000/api/ownership/shares/mail/";
fetch(url, {
method: 'post',
headers: {
'Authorization': 'Basic ' + AppConstants.debugCredentialBase64,
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.getFormData())
})
.then((response) => {
if (response.status >= 200 && response.status < 300)
return response
response.json().then((response) => this.setState({errors: response.errors}))
}
);
//.then(FetchApiUtils.status)
},
getFormData() {
return {
bitcoin_id: this.props.edition.bitcoin_id,
share_emails: this.refs.share_emails.getDOMNode().value,
share_message: this.refs.share_message.getDOMNode().value
}
},
renderAlert(id){
if (this.state.errors && id in this.state.errors) {
return this.state.errors[id].map(function(error) {
return <AlertDismissable error={error} key={error}/>
}
)
}
return <span />
},
renderTextInput(id, placeHolder, required) {
return (
<div className="form-group">
{this.renderAlert(id)}
<input className="form-control input-text-ascribe" name={id} ref={id}
placeholder={placeHolder} required={required} type="text" />
</div>
)
},
renderTextArea(id, placeHolder, required) {
let alert = "";
if (this.state.errors && id in this.state.errors) {
alert = <AlertDismissable error={this.state.errors.id} />
}
return (
<div className="form-group">
{alert}
<textarea className="form-control input-text-ascribe textarea-ascribe-message" name={id} ref={id}
defaultValue={placeHolder} required={required}></textarea>
</div>
)
},
render() {
let content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
"\" with you.\n\nTruly yours,\n" + this.props.currentUser.username;
return (
<form id="share_modal_content" role="form" onSubmit={this.submit}>
{this.renderTextInput("share_emails", "Comma separated emails", "required")}
{this.renderTextArea("share_message", content, "")}
<div className="modal-footer">
<button type="submit" className="btn btn-ascribe-inv">SHARE</button>
<button className="btn btn-ascribe-inv" onClick={this.props.onRequestHide}>CLOSE</button>
</div>
</form>
);
}
});
const AlertDismissable = React.createClass({
getInitialState() {
return {
alertVisible: true
};
},
render() {
if (this.state.alertVisible) {
return (
<Alert bsStyle='danger' onDismiss={this.handleAlertDismiss}>
{this.props.error}
</Alert>
);
}
return (
<span />
);
},
handleAlertDismiss() {
this.setState({alertVisible: false});
}
});
export default ShareModalButton; export default ShareModalButton;

View File

@ -0,0 +1,75 @@
import React from 'react';
import Alert from 'react-bootstrap/lib/Alert';
let FormMixin = {
getInitialState() {
return {errors: null,
retry: 0 // used for unique keying
}
},
handleResponse(response){
if (response.status >= 200 && response.status < 300)
return response;
this.handleError(response);
},
handleError(response){
response.json().then((response) => this.setState({errors: response.errors,
retry: this.state.retry + 1}))
},
renderAlert(id){
if (this.state.errors && id in this.state.errors) {
return this.state.errors[id].map(function(error) {
let key = error + this.state.retry;
return <AlertDismissable error={error} key={key} />;
}.bind(this)
)
}
return <span />
},
renderTextInput(id, type, placeHolder, required) {
return (
<div className="form-group">
{this.renderAlert(id)}
<input className="form-control input-text-ascribe" name={id} ref={id}
placeholder={placeHolder} required={required} type={type} />
</div>
)
},
renderTextArea(id, placeHolder, required) {
return (
<div className="form-group">
{this.renderAlert(id)}
<textarea className="form-control input-text-ascribe textarea-ascribe-message" name={id} ref={id}
defaultValue={placeHolder} required={required}></textarea>
</div>
)
}
};
let AlertDismissable = React.createClass({
getInitialState() {
return {
alertVisible: true
};
},
show() {
this.setState({alertVisible: true});
},
hide() {
this.setState({alertVisible: false});
},
render() {
if (this.state.alertVisible) {
return (
<Alert bsStyle='danger' onDismiss={this.hide}>
{this.props.error}
</Alert>
);
}
return (
<span />
);
}
});
export default FormMixin;