refactor request action form

js/components/ascribe_forms/form_request_action.js

@@ -2,49 +2,50 @@
 
 import React from 'react';
 
-import Alert from 'react-bootstrap/lib/Alert';
-
-import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 
 import AclButton from './../ascribe_buttons/acl_button';
 import ActionPanel from '../ascribe_panel/action_panel';
+import Form from './form';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import ApiUrls from '../../constants/api_urls';
 
-import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
 
-let RequestActionForm = React.createClass({
-    mixins: [FormMixin],
 
-    url(e){
-        let edition = this.props.editions[0];
-        if (e.target.id === 'request_accept'){
-            if (edition.request_action === 'consign'){
-                return ApiUrls.ownership_consigns_confirm;
-            }
-            else if (edition.request_action === 'unconsign'){
-                return ApiUrls.ownership_unconsigns;
-            }
-            else if (edition.request_action === 'loan'){
-                return ApiUrls.ownership_loans_confirm;
-            }
-        }
-        else if(e.target.id === 'request_deny'){
-            if (edition.request_action === 'consign') {
-                return ApiUrls.ownership_consigns_deny;
-            }
-            else if (edition.request_action === 'unconsign') {
-                return ApiUrls.ownership_unconsigns_deny;
-            }
-            else if (edition.request_action === 'loan') {
-                return ApiUrls.ownership_loans_deny;
-            }
-        }
+let RequestActionForm = React.createClass({
+    propTypes: {
+        editions: React.PropTypes.arrayOf(React.PropTypes.object),
+        currentUser: React.PropTypes.object,
+        handleSuccess: React.PropTypes.func
     },
 
-    handleRequest: function(e){
-        e.preventDefault();
-        this.submit(e);
+    getUrls() {
+        let edition = this.props.editions[0];
+        let urls = {};
+
+
+        if (edition.request_action === 'consign'){
+            urls.accept = ApiUrls.ownership_consigns_confirm;
+            urls.deny = ApiUrls.ownership_consigns_deny;
+        } else if (edition.request_action === 'unconsign'){
+            urls.accept = ApiUrls.ownership_unconsigns;
+            urls.deny = ApiUrls.ownership_unconsigns_deny;
+        } else if (edition.request_action === 'loan'){
+            urls.accept = ApiUrls.ownership_loans_confirm;
+            urls.deny = ApiUrls.ownership_loans_deny;
+        }
+
+        return urls;
+    },
+
+    getBitcoinIds(){
+        return this.props.editions.map(function(edition){
+            return edition.bitcoin_id;
+        });
     },
 
     getFormData() {
@@ -53,6 +54,19 @@ let RequestActionForm = React.createClass({
         };
     },
 
+    showNotification(option, action, owner) {
+        return () => {
+            let message = getLangText('You have successfully') + ' ' + option + ' ' + action + ' ' + getLangText('to') + ' ' + owner;
+
+            let notification = new GlobalNotificationModel(message, 'success');
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            if(this.props.handleSuccess) {
+                this.props.handleSuccess();
+            }
+        };
+    },
+
     getContent() {
         let edition = this.props.editions[0];
         let message = edition.owner + ' ' + getLangText('requests you') + ' ' + edition.request_action + ' ' + getLangText('this edition%s', '.');
@@ -64,15 +78,11 @@ let RequestActionForm = React.createClass({
         );
     },
 
-    renderForm() {
+    getAcceptButton() {
         let edition = this.props.editions[0];
-        let buttonAccept = (
-            <div id="request_accept"
-                onClick={this.handleRequest}
-                className='btn btn-default btn-sm ascribe-margin-1px'>{getLangText('ACCEPT')}
-            </div>);
-        if (edition.request_action === 'unconsign') {
-            buttonAccept = (
+
+        if(edition.request_action === 'unconsign') {
+            return (
                 <AclButton
                     availableAcls={{'acl_unconsign': true}}
                     action="acl_unconsign"
@@ -80,31 +90,52 @@ let RequestActionForm = React.createClass({
                     currentUser={this.props.currentUser}
                     handleSuccess={this.props.handleSuccess} />
                 );
-        }
-        let buttons = (
-            <span>
-                <span>
-                    {buttonAccept}
-                </span>
-                <span>
-                    <div id="request_deny" onClick={this.handleRequest} className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>{getLangText('REJECT')}</div>
-                </span>
-            </span>
-        );
-        if (this.state.submitted){
-            buttons = (
-                <span>
-                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
-                </span>
+        } else {
+            return (
+                <button
+                    type="submit"
+                    className='btn btn-default btn-sm ascribe-margin-1px'>
+                    {getLangText('ACCEPT')}
+                </button>
             );
         }
+    },
 
-        
+    getButtonForm() {
+        let edition = this.props.editions[0];
 
+        let urls = this.getUrls();
+        let acceptButton = this.getAcceptButton();
+
+        return (
+            <div>
+                <Form
+                    url={urls.deny}
+                    getFormData={this.getFormData}
+                    handleSuccess={this.showNotification(getLangText('accepted'), edition.request_action, edition.owner)}
+                    className='inline pull-right'>
+                    <button
+                        type="submit"
+                        className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>
+                            {getLangText('REJECT')}
+                    </button>
+                </Form>
+                <Form
+                    url={urls.accept}
+                    getFormData={this.getFormData}
+                    handleSuccess={this.showNotification(getLangText('denied'), edition.request_action, edition.owner)}
+                    className='inline pull-right'>
+                    {acceptButton}
+                </Form>
+            </div>
+        );
+    },
+
+    render() {
         return (
             <ActionPanel
                 content={this.getContent()}
-                buttons={buttons}/>
+                buttons={this.getButtonForm()}/>
         );
     }
 });

js/components/ascribe_panel/action_panel.js

@@ -6,7 +6,10 @@ import classnames from 'classnames';
 let ActionPanel = React.createClass({
     propTypes: {
         title: React.PropTypes.string,
-        content: React.PropTypes.string,
+        content: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
         buttons: React.PropTypes.element,
         onClick: React.PropTypes.func,
         ignoreFocus: React.PropTypes.bool