From 76317dcdcae2f1469822f1a71f8e1ce704f52ec7 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Wed, 27 May 2015 15:53:26 +0200
Subject: [PATCH] modal + forms

---
 js/components/ascribe_modal/modal_share.js | 77 +++++++++++++++++-----
 js/components/edition.js                   |  1 +
 2 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/js/components/ascribe_modal/modal_share.js b/js/components/ascribe_modal/modal_share.js
index ca148fa2..235e4ad5 100644
--- a/js/components/ascribe_modal/modal_share.js
+++ b/js/components/ascribe_modal/modal_share.js
@@ -1,3 +1,8 @@
+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';
@@ -22,28 +27,66 @@ let ShareModalButton = React.createClass({
 
 let ShareModal = React.createClass({
     render() {
-        var content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
-                    "\" with you.\n\nTruly yours,\n" + this.props.currentUser.username;
         return (
             <Modal {...this.props} title="Share artwork">
                 <div className="modal-body">
-                    <form id="share_modal_content" role="form">
-                        <div className="form-group">
-                            <input className="form-control input-text-ascribe" name="share_emails"
-                                placeholder="Comma separated emails" required="required" type="text" />
-                        </div>
-                        <div className="form-group">
-                            <textarea className="form-control input-text-ascribe textarea-ascribe-message"
-                                name="share_message"
-                                defaultValue={content}></textarea>
-                        </div>
-                        <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>
+                    <ShareForm edition={this.props.edition}
+                               currentUser={this.props.currentUser}/>
                 </div>
             </Modal>
+        )
+    }
+});
+
+let ShareForm = React.createClass({
+    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())
+        })
+    },
+    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
+        }
+    },
+    renderTextInput(id, placeHolder, required){
+        return(
+            <div className="form-group">
+                <input className="form-control input-text-ascribe" name={id} ref={id}
+                    placeholder={placeHolder} required={required} type="text" />
+            </div>
+        )
+    },
+    renderTextArea(id, placeHolder, required){
+        return(
+            <div className="form-group">
+                <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>
         );
     }
 });
diff --git a/js/components/edition.js b/js/components/edition.js
index b64ccc3b..3c4827cf 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -46,6 +46,7 @@ let EditionDetails = React.createClass({
                     value={this.props.edition.edition_number + " of " + this.props.edition.num_editions} />
                 <EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } />
                 <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
+                <br/>
                 <ShareModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <hr/>
             </div>