refactored buttons

js/components/ascribe_buttons/acl_button.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import ConsignForm from './ascribe_forms/form_consign';
+import ConsignForm from '../ascribe_forms/form_consign';
-import TransferForm from './ascribe_forms/form_transfer';
+import TransferForm from '../ascribe_forms/form_transfer';
-import LoanForm from './ascribe_forms/form_loan';
+import LoanForm from '../ascribe_forms/form_loan';
-import ShareForm from './ascribe_forms/form_share_email';
+import ShareForm from '../ascribe_forms/form_share_email';
-import ModalWrapper from './ascribe_modal/modal_wrapper';
+import ModalWrapper from '../ascribe_modal/modal_wrapper';
-import AppConstants from '../constants/application_constants';
+import AppConstants from '../../constants/application_constants';
 
 let AclButton = React.createClass({
     propTypes: {

js/components/ascribe_buttons/acl_button_list.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import UserActions from '../../actions/user_actions';
+import UserStore from '../../stores/user_store';
+
+import AclButton from '../ascribe_buttons/acl_button';
+
+let AclButtonList = React.createClass({
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        UserActions.fetchCurrentUser();
+        UserStore.listen(this.onChange);
+    },
+
+    componentDidUnmount() {
+        UserStore.unlisten(this.onChange);
+    },
+    render() {
+        return (<div className="text-center">
+            <AclButton
+                availableAcls={this.props.availableAcls}
+                action="transfer"
+                editions={this.props.editions}
+                currentUser={this.state.currentUser}
+                handleSuccess={this.props.handleSuccess} />
+            <AclButton
+                availableAcls={this.props.availableAcls}
+                action="consign"
+                editions={this.props.editions}
+                currentUser={this.state.currentUser}
+                handleSuccess={this.props.handleSuccess} />
+            <AclButton
+                availableAcls={this.props.availableAcls}
+                action="loan"
+                editions={this.props.editions}
+                currentUser={this.state.currentUser}
+                handleSuccess={this.props.handleSuccess} />
+            <AclButton
+                availableAcls={this.props.availableAcls}
+                action="share"
+                editions={this.props.editions}
+                currentUser={this.state.currentUser}
+                handleSuccess={this.props.handleSuccess} />
+        </div>)
+    }
+});
+
+export default AclButtonList;

js/components/ascribe_buttons/button_submit_close.js

@@ -3,11 +3,11 @@ import React from 'react';
 let ButtonSubmitOrClose = React.createClass({
     render() {
         if (this.props.submitted){
-            //return (
+            return (
-            //    <div className="modal-footer">
+                <div className="modal-footer">
-            //        Loading
+                    <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-            //    </div>
+                </div>
-            //)
+            )
         }
         return (
             <div className="modal-footer">

js/components/ascribe_forms/form_consign.js

@@ -6,7 +6,7 @@ import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
-import ButtonSubmitOrClose from './button_submit_close';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 let ConsignForm = React.createClass({
     mixins: [FormMixin],

js/components/ascribe_forms/form_loan.js

@@ -10,7 +10,7 @@ import InputCheckbox from './input_checkbox';
 import InputDate from './input_date';
 import InputTextArea from './input_textarea';
 import OwnershipFetcher from '../../fetchers/ownership_fetcher'
-import ButtonSubmitOrClose from './button_submit_close';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 let LoanForm = React.createClass({
     mixins: [FormMixin],

js/components/ascribe_forms/form_share_email.js

@@ -6,7 +6,7 @@ import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
-import ButtonSubmitOrClose from './button_submit_close';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 let ShareForm = React.createClass({
     mixins: [FormMixin],

js/components/ascribe_forms/form_transfer.js

@@ -6,7 +6,7 @@ import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
-import ButtonSubmitOrClose from './button_submit_close';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 
 

js/components/ascribe_forms/form_unconsign.js

@@ -6,7 +6,7 @@ import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
-import ButtonSubmitOrClose from './button_submit_close';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 let UnConsignForm = React.createClass({
     mixins: [FormMixin],

js/components/ascribe_forms/form_unconsign_request.js

@@ -6,7 +6,7 @@ import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
-import ButtonSubmitOrClose from './button_submit_close';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 let UnConsignRequestForm = React.createClass({
     mixins: [FormMixin],

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -3,11 +3,9 @@ import React from 'react';
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
-import AclButton from '../acl_button';
 import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
+import AclButtonList from '../ascribe_buttons/acl_button_list';
+
 
 let PieceListBulkModal = React.createClass({
     propTypes: {
@@ -23,14 +21,11 @@ let PieceListBulkModal = React.createClass({
     },
 
     componentDidMount() {
-        UserActions.fetchCurrentUser();
         EditionListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
     },
 
     componentDidUnmount() {
         EditionListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     filterForSelected(edition) {
@@ -107,32 +102,10 @@ let PieceListBulkModal = React.createClass({
                             </div>
                             <p></p>
                             <div className="row">
-                                <div className="text-center">
+                                <AclButtonList
-                                    <AclButton
+                                    availableAcls={availableAcls}
-                                        availableAcls={availableAcls}
+                                    editions={selectedEditions}
-                                        action="transfer"
+                                    handleSuccess={this.handleSuccess} />
-                                        editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
-                                        handleSuccess={this.handleSuccess} />
-                                    <AclButton
-                                        availableAcls={availableAcls}
-                                        action="consign"
-                                        editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
-                                        handleSuccess={this.handleSuccess} />
-                                    <AclButton
-                                        availableAcls={availableAcls}
-                                        action="loan"
-                                        editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
-                                        handleSuccess={this.handleSuccess} />
-                                    <AclButton
-                                        availableAcls={availableAcls}
-                                        action="share"
-                                        editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
-                                        handleSuccess={this.handleSuccess} />
-                                </div>
                             </div>
                         </div>
                     </div>

js/components/edition.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ResourceViewer from './ascribe_media/resource_viewer';
 
 import EditionActions from '../actions/edition_actions'
-import AclButton from './acl_button'
+import AclButton from './ascribe_buttons/acl_button'
 
 /**
  * This is the component that implements display-specific functionality
@@ -15,12 +15,12 @@ let Edition = React.createClass({
 
         return (
             <div>
-                <div className="col-md-7">
+                <div className="col-sm-6">
                     <ResourceViewer thumbnail={thumbnail}
                                     mimetype={mimetype}
                                     />
                 </div>
-                <div className="col-md-5">
+                <div className="col-sm-6">
                     <EditionHeader edition={this.props.edition}/>
                     <EditionDetails edition={this.props.edition} currentUser={ this.props.currentUser }/>
                 </div>

js/mixins/form_mixin.js

@@ -58,11 +58,10 @@ export const FormMixin = {
     render(){
         let alert = null;
         if (this.state.errors.length > 0){
-            alert = this.state.errors.map(
+            alert =
-                    function(error) {
+                this.state.errors.map(function(error) {
-                        return <AlertDismissable error={error} key={error}/>;
+                    return <AlertDismissable error={error} key={error}/>;
-                    }.bind(this)
+                }.bind(this));
-                );
         }
         return (
             <div>