diff --git a/js/actions/piece_actions.js b/js/actions/piece_actions.js index cd78569d..d52b8d43 100644 --- a/js/actions/piece_actions.js +++ b/js/actions/piece_actions.js @@ -7,7 +7,8 @@ import PieceFetcher from '../fetchers/piece_fetcher'; class PieceActions { constructor() { this.generateActions( - 'updatePiece' + 'updatePiece', + 'updateProperty' ); } diff --git a/js/components/ascribe_buttons/create_editions_button.js b/js/components/ascribe_buttons/create_editions_button.js index 9ccb52cf..9c161a7d 100644 --- a/js/components/ascribe_buttons/create_editions_button.js +++ b/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 ( - ); } else { return ( - diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js index ec2bcb5a..8414656b 100644 --- a/js/components/ascribe_detail/piece.js +++ b/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 ( @@ -101,8 +116,10 @@ let Piece = React.createClass({ editions={this.props.piece} handleSuccess={this.props.handleSuccess}> + toggleCreateEditionsDialog={this.toggleCreateEditionsDialog} + onPollingSuccess={this.handlePollingSuccess}/> {this.getCreateEditionsDialog()} diff --git a/js/components/ascribe_forms/create_editions_form.js b/js/components/ascribe_forms/create_editions_form.js index 335851f9..5f52cf17 100644 --- a/js/components/ascribe_forms/create_editions_form.js +++ b/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 (
diff --git a/js/stores/piece_store.js b/js/stores/piece_store.js index 5d2651ad..0bebab10 100644 --- a/js/stores/piece_store.js +++ b/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');