solved error + reusability refactor

js/components/ascribe_forms/form_share_email.js

@@ -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;

js/components/ascribe_modal/modal_share.js

@@ -1,22 +1,19 @@
-import fetch from 'isomorphic-fetch';
-
-import AppConstants from '../../constants/application_constants';
-import FetchApiUtils from '../../utils/fetch_api_utils';
-
 import React from 'react';
 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';
 
 
+
+import ShareForm from '../ascribe_forms/form_share_email'
+
 let ShareModalButton = React.createClass({
     render() {
         return (
             <OverlayTrigger delay={500} placement="left" overlay={<Tooltip>Share the artwork</Tooltip>}>
                 <ModalTrigger modal={<ShareModal edition={this.props.edition}
-                    currentUser={this.props.currentUser}/>}>
+                                                currentUser={this.props.currentUser}/>}>
                     <div className="btn btn-ascribe-inv btn-glyph-ascribe">
                         <span className="glyph-ascribe-share2"></span>
                     </div>
@@ -36,115 +33,13 @@ let ShareModal = React.createClass({
             <Modal {...this.props} title="Share artwork">
                 <div className="modal-body">
                     <ShareForm edition={this.props.edition}
-                        currentUser={this.props.currentUser}
-                        onRequestHide={this.onRequestHide}/>
+                                currentUser={this.props.currentUser}
+                                onRequestHide={this.onRequestHide}/>
                 </div>
             </Modal>
         )
     }
 });
 
-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;

js/mixins/form_alert_mixin.js

@@ -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;