From dbd0e14a649ca8c824eae0b9191c095c558158ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 6 Aug 2015 10:09:25 +0200
Subject: [PATCH] add DELETE http support to form

---
 js/components/ascribe_forms/form.js           | 51 ++++++++++++++++---
 js/components/ascribe_forms/form_consign.js   |  1 -
 .../ascribe_forms/form_delete_edition.js      |  7 ++-
 .../ascribe_forms/form_request_action.js      |  3 +-
 js/utils/requests.js                          |  2 +-
 5 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index 0f022a0d..23ace605 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -15,13 +15,25 @@ import { mergeOptionsWithDuplicates } from '../../utils/general_utils';
 let Form = React.createClass({
     propTypes: {
         url: React.PropTypes.string,
+        method: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
         getFormData: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]),
-        className: React.PropTypes.string
+        className: React.PropTypes.string,
+        spinner: React.PropTypes.element,
+        buttons: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.arrayOf(React.PropTypes.element)
+        ])
+    },
+
+    getDefaultProps() {
+        return {
+            method: 'post'
+        };
     },
 
     getInitialState() {
@@ -31,6 +43,7 @@ let Form = React.createClass({
             errors: []
         };
     },
+
     reset(){
         for (let ref in this.refs){
             if (typeof this.refs[ref].reset === 'function'){
@@ -39,22 +52,38 @@ let Form = React.createClass({
         }
         this.setState(this.getInitialState());
     },
+
     submit(event){
-        if (event) {
+        
+        if(event) {
             event.preventDefault();
         }
+
         this.setState({submitted: true});
         this.clearErrors();
-        let action = (this.httpVerb && this.httpVerb()) || 'post';
-        window.setTimeout(() => this[action](), 100);
+
+        // selecting http method based on props
+        if(this[this.props.method]) {
+            window.setTimeout(() => this[this.props.method](), 100);
+        } else {
+            throw new Error('This HTTP method is not supported by form.js (' + this.props.method + ')');
+        }
     },
-    post(){
+
+    post() {
         requests
             .post(this.props.url, { body: this.getFormData() })
             .then(this.handleSuccess)
             .catch(this.handleError);
     },
 
+    delete() {
+        requests
+            .delete(this.props.url, this.getFormData())
+            .then(this.handleSuccess)
+            .catch(this.handleError);
+    },
+
     getFormData(){
         let data = {};
         for (let ref in this.refs){
@@ -70,6 +99,7 @@ let Form = React.createClass({
     handleChangeChild(){
         this.setState({edited: true});
     },
+
     handleSuccess(response){
         if ('handleSuccess' in this.props){
             this.props.handleSuccess(response);
@@ -79,8 +109,12 @@ let Form = React.createClass({
                 this.refs[ref].handleSuccess();
             }
         }
-        this.setState({edited: false, submitted: false});
+        this.setState({
+            edited: false,
+            submitted: false
+        });
     },
+
     handleError(err){
         if (err.json) {
             for (var input in err.json.errors){
@@ -104,6 +138,7 @@ let Form = React.createClass({
         }
         this.setState({submitted: false});
     },
+
     clearErrors(){
         for (var ref in this.refs){
             if ('clearErrors' in this.refs[ref]){
@@ -112,6 +147,7 @@ let Form = React.createClass({
         }
         this.setState({errors: []});
     },
+
     getButtons() {
         if (this.state.submitted){
             return this.props.spinner;
@@ -134,6 +170,7 @@ let Form = React.createClass({
         }
         return buttons;
     },
+
     getErrors() {
         let errors = null;
         if (this.state.errors.length > 0){
@@ -143,6 +180,7 @@ let Form = React.createClass({
         }
         return errors;
     },
+
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             if (child) {
@@ -153,6 +191,7 @@ let Form = React.createClass({
             }
         });
     },
+
     render() {
         let className = 'ascribe-form';
 
diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index 875b6ddd..9b3f0c9c 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -26,7 +26,6 @@ let ConsignForm = React.createClass({
     },
 
     render() {
-
         return (
             <Form
                 ref='form'
diff --git a/js/components/ascribe_forms/form_delete_edition.js b/js/components/ascribe_forms/form_delete_edition.js
index 7f051cf2..0cb31703 100644
--- a/js/components/ascribe_forms/form_delete_edition.js
+++ b/js/components/ascribe_forms/form_delete_edition.js
@@ -17,15 +17,17 @@ let EditionDeleteForm = React.createClass({
         handleSuccess: React.PropTypes.func
     },
 
-    getBitcoinIds(){
+    getBitcoinIds() {
         return this.props.editions.map(function(edition){
             return edition.bitcoin_id;
         });
     },
 
+    // Since this form can be used for either deleting a single edition or multiple
+    // we need to call getBitcoinIds to get the value of edition_id
     getFormData() {
         return {
-            edition_id: this.getBitcoinIds().join()
+            edition_id: this.getBitcoinIds().join(',')
         };
     },
 
@@ -35,6 +37,7 @@ let EditionDeleteForm = React.createClass({
                 ref='form'
                 url={ApiUrls.edition_delete}
                 getFormData={this.getFormData}
+                method="delete"
                 handleSuccess={this.props.handleSuccess}
                 buttons={
                     <div className="modal-footer">
diff --git a/js/components/ascribe_forms/form_request_action.js b/js/components/ascribe_forms/form_request_action.js
index 622aa02f..9bd1b4c9 100644
--- a/js/components/ascribe_forms/form_request_action.js
+++ b/js/components/ascribe_forms/form_request_action.js
@@ -59,8 +59,7 @@ let RequestActionForm = React.createClass({
                 onClick={this.handleRequest}
                 className='btn btn-default btn-sm ascribe-margin-1px'>{getLangText('ACCEPT')}
             </div>);
-        if (edition.request_action === 'unconsign'){
-            console.log(this.props)
+        if (edition.request_action === 'unconsign') {
             buttonAccept = (
                 <AclButton
                     availableAcls={{'acl_unconsign': true}}
diff --git a/js/utils/requests.js b/js/utils/requests.js
index 8705bc0f..793e1f21 100644
--- a/js/utils/requests.js
+++ b/js/utils/requests.js
@@ -91,7 +91,7 @@ class Requests {
         } catch(err) {
             throw err;
         }
-        
+
         newUrl = newUrl.replace(re, (match, key) => {
             let val = params[key];
             if (!val) {