From a3bfda186aa46af29872e916c1bf586225679867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 6 Aug 2015 10:15:02 +0200
Subject: [PATCH] refactor form_delete_piece

---
 .../ascribe_forms/form_delete_edition.js      |  2 +
 .../ascribe_forms/form_delete_piece.js        | 59 ++++++++++++-------
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/js/components/ascribe_forms/form_delete_edition.js b/js/components/ascribe_forms/form_delete_edition.js
index 0cb31703..9eb721f6 100644
--- a/js/components/ascribe_forms/form_delete_edition.js
+++ b/js/components/ascribe_forms/form_delete_edition.js
@@ -14,6 +14,8 @@ let EditionDeleteForm = React.createClass({
 
     propTypes: {
         editions: React.PropTypes.arrayOf(React.PropTypes.object),
+
+        // Propagated by ModalWrapper in most cases
         handleSuccess: React.PropTypes.func
     },
 
diff --git a/js/components/ascribe_forms/form_delete_piece.js b/js/components/ascribe_forms/form_delete_piece.js
index 31a3e5c9..1ac073fd 100644
--- a/js/components/ascribe_forms/form_delete_piece.js
+++ b/js/components/ascribe_forms/form_delete_piece.js
@@ -2,40 +2,55 @@
 
 import React from 'react';
 
-import requests from '../../utils/requests';
+import Form from '../ascribe_forms/form';
+
 import ApiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+import AppConstants from '../../constants/application_constants';
+
 import { getLangText } from '../../utils/lang_utils';
 
 let PieceDeleteForm = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.number
+        pieceId: React.PropTypes.number,
+
+        // Propagated by ModalWrapper in most cases
+        handleSuccess: React.PropTypes.func
     },
 
-    mixins: [FormMixin],
-
-    url() {
-        return requests.prepareUrl(ApiUrls.piece, {piece_id: this.props.pieceId});
+    getFormData() {
+        return {
+            piece_id: this.props.pieceId
+        };
     },
 
-    httpVerb() {
-        return 'delete';
-    },
-
-    renderForm () {
+    render() {
         return (
-            <div className="modal-body">
+            <Form
+                ref='form'
+                url={ApiUrls.piece}
+                getFormData={this.getFormData}
+                method="delete"
+                handleSuccess={this.props.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <button
+                                type="submit"
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                onClick={this.submit}>
+                                {getLangText('YES, DELETE')}
+                            </button>
+                        </p>
+                    </div>
+                }
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>
+                }>
                 <p>{getLangText('Are you sure you would like to permanently delete this piece')}&#63;</p>
                 <p>{getLangText('This is an irrevocable action%s', '.')}</p>
-                <div className="modal-footer">
-                    <button
-                        type="submit" 
-                        className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" 
-                        onClick={this.submit}>
-                        {getLangText('YES, DELETE')}
-                    </button>
-                </div>
-            </div>
+            </Form>
         );
     }
 });