separate polling-success functionality

js/actions/piece_actions.js

@@ -7,7 +7,8 @@ import PieceFetcher from '../fetchers/piece_fetcher';
 class PieceActions {
     constructor() {
         this.generateActions(
-            'updatePiece'
+            'updatePiece',
+            'updateProperty'
         );
     }
 

js/components/ascribe_buttons/create_editions_button.js

@@ -3,18 +3,35 @@
 import React from 'react';
 
 import EditionListActions from '../../actions/edition_list_actions';
-import PieceListActions from '../../actions/piece_list_actions';
+import EditionListStore from '../../stores/edition_list_store';
 
 import { getAvailableAcls } from '../../utils/acl_utils';
 
+import classNames from 'classnames';
+
 let CreateEditionsButton = React.createClass({
     propTypes: {
+        className: React.PropTypes.string,
         piece: React.PropTypes.object.isRequired,
-        toggleCreateEditionsDialog: React.PropTypes.func.isRequired
+        toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
+        onPollingSuccess: React.PropTypes.func
     },
 
     getInitialState() {
-        return {};
+        return EditionListStore.getState();
+    },
+
+    componentDidMount() {
+        EditionListStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        EditionListStore.unlisten(this.onChange);
+        clearInterval(this.state.pollingIntervalIndex);
+    },
+
+    onChange(state) {
+        this.setState(state);
     },
 
     componentDidUpdate() {
@@ -23,10 +40,6 @@ let CreateEditionsButton = React.createClass({
         }
     },
 
-    componentWillUnmount() {
-        clearInterval(this.state.pollingIntervalIndex);
-    },
-
     startPolling() {
         // start polling until editions are defined
         let pollingIntervalIndex = setInterval(() => {
@@ -35,13 +48,7 @@ let CreateEditionsButton = React.createClass({
 
                 clearInterval(this.state.pollingIntervalIndex);
 
-                PieceListActions.updatePropertyForPiece({
-                    pieceId: this.props.piece.id,
-                    key: 'num_editions',
-                    value: res.editions[0].num_editions
-                });
-
-                EditionListActions.toggleEditionList(this.props.piece.id);
+                this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
 
             })
             .catch(() => {
@@ -58,20 +65,23 @@ let CreateEditionsButton = React.createClass({
         let piece = this.props.piece;
 
         let availableAcls = getAvailableAcls(piece);
+
         if (availableAcls.indexOf('editions') < -1 || piece.num_editions > 0){
             return null;
         }
 
-        if(piece.num_editions === 0) {
+        if(piece.num_editions === 0 && typeof this.state.editionList[piece.id] === 'undefined') {
             return (
-                <button disabled className="btn btn-default btn-sm">
+                <button
+                    disabled
+                    className={classNames('btn', 'btn-default', this.props.className)}>
                     CREATING EDITIONS <span className="glyph-ascribe-spool-chunked spin"/>
                 </button>
             );
         } else {
             return (
-                <button 
-                    className="btn btn-default btn-sm"
+                <button
+                    className={classNames('btn', 'btn-default', this.props.className)}
                     onClick={this.props.toggleCreateEditionsDialog}>
                     CREATE EDITIONS
                 </button>

js/components/ascribe_detail/piece.js

@@ -10,9 +10,12 @@ import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph
 import DetailProperty from './detail_property';
 
 import FurtherDetails from './further_details';
+
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
 
+import PieceActions from '../../actions/piece_actions';
+
 import MediaContainer from './media_container';
 
 import EditionDetailProperty from './detail_property';
@@ -61,6 +64,11 @@ let Piece = React.createClass({
         });
     },
 
+    handleEditionCreationSuccess() {
+        PieceActions.updateProperty({key: 'num_editions', value: 0});
+        this.toggleCreateEditionsDialog();
+    },
+
     getCreateEditionsDialog() {
         if(this.props.piece.num_editions < 1 && this.state.showCreateEditionsDialog) {
             return (
@@ -76,6 +84,13 @@ let Piece = React.createClass({
         }
     },
 
+    handlePollingSuccess(pieceId, numEditions) {
+        PieceActions.updateProperty({
+            key: 'num_editions',
+            value: numEditions
+        });
+    },
+
     render() {
         return (
             <Row>
@@ -101,8 +116,10 @@ let Piece = React.createClass({
                         editions={this.props.piece}
                         handleSuccess={this.props.handleSuccess}>
                             <CreateEditionsButton
+                                className="btn-sm"
                                 piece={this.props.piece}
-                                toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}/>
+                                toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
+                                onPollingSuccess={this.handlePollingSuccess}/>
                     </AclButtonList>
 
                     {this.getCreateEditionsDialog()}

js/components/ascribe_forms/create_editions_form.js

@@ -5,6 +5,9 @@ import React from 'react';
 import Form from '../ascribe_forms/form';
 import Property from '../ascribe_forms/property';
 
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
 import apiUrls from '../../constants/api_urls';
 
 import { getLangText } from '../../utils/lang_utils';
@@ -22,13 +25,22 @@ let CreateEditionsForm = React.createClass({
         };
     },
 
+    handleSuccess(response) {
+        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+
+        if(this.props.handleSuccess) {
+            this.props.handleSuccess();
+        }
+    },
+
     render() {
         return (
             <Form
                 ref='form'
                 url={apiUrls.editions}
                 getFormData={this.getFormData}
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={this.handleSuccess}
                 spinner={
                     <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />

js/stores/piece_store.js

@@ -13,6 +13,14 @@ class PieceStore {
     onUpdatePiece(piece) {
         this.piece = piece;
     }
+
+    onUpdateProperty({key, value}) {
+        if(this.piece && key in this.piece) {
+            this.piece[key] = value;
+        } else {
+            throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
+        }
+    }
 }
 
 export default alt.createStore(PieceStore, 'PieceStore');