diff --git a/js/components/ascribe_modal/modal_share.js b/js/components/ascribe_modal/modal_share.js index 33a9d04c..a3a4141d 100644 --- a/js/components/ascribe_modal/modal_share.js +++ b/js/components/ascribe_modal/modal_share.js @@ -8,6 +8,7 @@ import Modal from 'react-bootstrap/lib/Modal'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; import ModalTrigger from 'react-bootstrap/lib/ModalTrigger'; import Tooltip from 'react-bootstrap/lib/Tooltip'; +import Alert from 'react-bootstrap/lib/Alert'; let ShareModalButton = React.createClass({ @@ -15,7 +16,7 @@ let ShareModalButton = React.createClass({ return ( Share the artwork}> }> + currentUser={this.props.currentUser}/>}>
@@ -26,12 +27,17 @@ let ShareModalButton = React.createClass({ }); let ShareModal = React.createClass({ + onRequestHide(e){ + e.preventDefault(); + this.props.onRequestHide(); + }, render() { return (
+ currentUser={this.props.currentUser} + onRequestHide={this.onRequestHide}/>
) @@ -39,8 +45,8 @@ let ShareModal = React.createClass({ }); let ShareForm = React.createClass({ - getInitialState(){ - return {errors: []} + getInitialState() { + return {errors: null} }, submit(e) { e.preventDefault(); @@ -54,10 +60,10 @@ let ShareForm = React.createClass({ }, 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((response) => { + if (response.status >= 200 && response.status < 300) + return response + response.json().then((response) => this.setState({errors: response.errors})) } ); //.then(FetchApiUtils.status) @@ -70,17 +76,33 @@ let ShareForm = React.createClass({ share_message: this.refs.share_message.getDOMNode().value } }, - renderTextInput(id, placeHolder, required){ - return( + renderAlert(id){ + if (this.state.errors && id in this.state.errors) { + return this.state.errors[id].map(function(error) { + return + } + ) + } + return + }, + renderTextInput(id, placeHolder, required) { + + return (
+ {this.renderAlert(id)}
) }, - renderTextArea(id, placeHolder, required){ - return( + renderTextArea(id, placeHolder, required) { + let alert = ""; + if (this.state.errors && id in this.state.errors) { + alert = + } + return (
+ {alert}
@@ -88,7 +110,7 @@ let ShareForm = React.createClass({ }, render() { let content = "Hi,\n\nI am sharing \"" + this.props.edition.title + - "\" with you.\n\nTruly yours,\n" + this.props.currentUser.username; + "\" with you.\n\nTruly yours,\n" + this.props.currentUser.username; return (
{this.renderTextInput("share_emails", "Comma separated emails", "required")} @@ -102,4 +124,27 @@ let ShareForm = React.createClass({ } }); +const AlertDismissable = React.createClass({ + getInitialState() { + return { + alertVisible: true + }; + }, + render() { + if (this.state.alertVisible) { + return ( + + {this.props.error} + + ); + } + return ( + + ); + }, + handleAlertDismiss() { + this.setState({alertVisible: false}); + } +}); + export default ShareModalButton;