From 50129b9d0c02c5d883a2a226c08ee051e1d321b7 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Fri, 15 Jan 2016 14:22:28 +0100 Subject: [PATCH] Refactor MarketSubmitButton to pull the piece as necessary rather than always fetching it in MarketAdditionalDataForm --- .../ascribe_detail/further_details.js | 7 +- .../market_buttons/market_acl_button_list.js | 2 +- .../market_buttons/market_submit_button.js | 70 +++++- .../market_detail/market_further_details.js | 6 +- .../market_additional_data_form.js | 236 ++++++++---------- .../market/market_register_piece.js | 10 +- js/sources/piece_source.js | 4 +- js/stores/piece_store.js | 16 +- .../wallet/23vivi/23vivi_custom_style.scss | 2 +- 9 files changed, 194 insertions(+), 159 deletions(-) diff --git a/js/components/ascribe_detail/further_details.js b/js/components/ascribe_detail/further_details.js index 9caee1b9..edbdfdcf 100644 --- a/js/components/ascribe_detail/further_details.js +++ b/js/components/ascribe_detail/further_details.js @@ -5,15 +5,14 @@ import React from 'react'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; -import Form from './../ascribe_forms/form'; - -import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata'; - import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; import FurtherDetailsFileuploader from './further_details_fileuploader'; +import Form from './../ascribe_forms/form'; +import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata'; + import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils'; diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js index 1dcdd4e5..4d4f8918 100644 --- a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js +++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js @@ -30,7 +30,7 @@ let MarketAclButtonList = React.createClass({ componentDidMount() { UserStore.listen(this.onChange); - UserActions.fetchCurrentUser(); + UserActions.fetchCurrentUser.defer(); }, componentWillUnmount() { diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js index d2f824a4..32b0c033 100644 --- a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js +++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js @@ -3,6 +3,11 @@ import React from 'react'; import classNames from 'classnames'; +import PieceActions from '../../../../../../actions/piece_actions'; +import PieceStore from '../../../../../../stores/piece_store'; +import WhitelabelActions from '../../../../../../actions/whitelabel_actions'; +import WhitelabelStore from '../../../../../../stores/whitelabel_store'; + import MarketAdditionalDataForm from '../market_forms/market_additional_data_form'; import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory'; @@ -11,15 +16,14 @@ import ConsignForm from '../../../../../ascribe_forms/form_consign'; import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper'; import AclProxy from '../../../../../acl_proxy'; - -import PieceActions from '../../../../../../actions/piece_actions'; -import WhitelabelActions from '../../../../../../actions/whitelabel_actions'; -import WhitelabelStore from '../../../../../../stores/whitelabel_store'; +import AscribeSpinner from '../../../../../ascribe_spinner'; import ApiUrls from '../../../../../../constants/api_urls'; import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils'; +import { mergeOptions } from '../../../../../../utils/general_utils'; import { getLangText } from '../../../../../../utils/lang_utils'; +import { onChangeOnce } from '../../../../../../utils/store_utils'; let MarketSubmitButton = React.createClass({ propTypes: { @@ -27,11 +31,19 @@ let MarketSubmitButton = React.createClass({ currentUser: React.PropTypes.object, editions: React.PropTypes.array.isRequired, handleSuccess: React.PropTypes.func.isRequired, - className: React.PropTypes.string, + + className: React.PropTypes.string }, + // This component may eventually need to use the + // PieceStore, but we don't need it initially getInitialState() { - return WhitelabelStore.getState(); + return mergeOptions( + WhitelabelStore.getState(), + { + piece: {} + } + ); }, componentDidMount() { @@ -41,6 +53,7 @@ let MarketSubmitButton = React.createClass({ }, componentWillUnmount() { + PieceStore.unlisten(this.onChange); WhitelabelStore.unlisten(this.onChange); }, @@ -62,8 +75,24 @@ let MarketSubmitButton = React.createClass({ return false; }, - getFormDataId() { - return getAclFormDataId(false, this.props.editions); + getAdditionalDataForm() { + const { piece } = this.state; + + if (piece.id) { + return ( + + ); + } else { + return ( +
+ +
+ ); + } }, getAggregateEditionDetails() { @@ -82,6 +111,10 @@ let MarketSubmitButton = React.createClass({ }); }, + getFormDataId() { + return getAclFormDataId(false, this.props.editions); + }, + handleAdditionalDataSuccess(pieceId) { // Fetch newly updated piece to update the views PieceActions.fetchPiece(pieceId); @@ -89,6 +122,19 @@ let MarketSubmitButton = React.createClass({ this.refs.consignModal.show(); }, + loadPieceIfNeeded(neededPieceId) { + if (neededPieceId) { + const pieceStore = PieceStore.getState(); + + if (pieceStore.piece.id === neededPieceId) { + this.setState(pieceStore); + } else { + onChangeOnce(this, PieceStore); + PieceActions.fetchPiece(neededPieceId); + } + } + }, + render() { const { availableAcls, currentUser, className, editions, handleSuccess } = this.props; const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state; @@ -102,7 +148,9 @@ let MarketSubmitButton = React.createClass({ }); const triggerButton = ( - ); @@ -128,9 +176,7 @@ let MarketSubmitButton = React.createClass({ trigger={triggerButton} handleSuccess={() => this.handleAdditionalDataSuccess(solePieceId)} title={getLangText('Add additional information')}> - + {this.getAdditionalDataForm()} 0; + isUploadReadyOnChange() { + return this.props.otherData && this.props.otherData.length; }, handleSuccessWithNotification() { @@ -123,10 +107,18 @@ let MarketAdditionalDataForm = React.createClass({ }, render() { - const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props; - const { piece } = this.state; - let buttons, heading; + const { + editable, + extraData, + isInline, + handleSuccess, + otherData, + pieceId, + showHeading, + showNotification, + submitLabel } = this.props; + let buttons, heading; let spinner = ; if (!isInline) { @@ -156,76 +148,68 @@ let MarketAdditionalDataForm = React.createClass({ ) : null; } - if (piece.id) { - return ( -
- {heading} - - - - - - - - - - - - - - - ); - } else { - return ( -
- {spinner} -
- ); - } + return ( +
+ {heading} + + + + + + + + + + + + + + + ); } }); diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js index f879ede3..858fb469 100644 --- a/js/components/whitelabel/wallet/components/market/market_register_piece.js +++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js @@ -6,11 +6,6 @@ import { History } from 'react-router'; import Col from 'react-bootstrap/lib/Col'; import Row from 'react-bootstrap/lib/Row'; -import MarketAdditionalDataForm from './market_forms/market_additional_data_form'; - -import Property from '../../../../ascribe_forms/property'; -import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece'; - import PieceActions from '../../../../../actions/piece_actions'; import PieceListStore from '../../../../../stores/piece_list_store'; import PieceListActions from '../../../../../actions/piece_list_actions'; @@ -19,6 +14,11 @@ import UserActions from '../../../../../actions/user_actions'; import WhitelabelActions from '../../../../../actions/whitelabel_actions'; import WhitelabelStore from '../../../../../stores/whitelabel_store'; +import MarketAdditionalDataForm from './market_forms/market_additional_data_form'; + +import Property from '../../../../ascribe_forms/property'; +import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece'; + import SlidesContainer from '../../../../ascribe_slides_container/slides_container'; import { getLangText } from '../../../../../utils/lang_utils'; diff --git a/js/sources/piece_source.js b/js/sources/piece_source.js index 5f93c2f8..393c844c 100644 --- a/js/sources/piece_source.js +++ b/js/sources/piece_source.js @@ -7,8 +7,8 @@ import PieceActions from '../actions/piece_actions'; const PieceSource = { lookupPiece: { - remote(state) { - return requests.get('piece', { piece_id: state.pieceMeta.idToFetch }); + remote(state, pieceId) { + return requests.get('piece', { piece_id: pieceId }); }, success: PieceActions.successFetchPiece, diff --git a/js/stores/piece_store.js b/js/stores/piece_store.js index ff19b05a..5ae80e74 100644 --- a/js/stores/piece_store.js +++ b/js/stores/piece_store.js @@ -21,8 +21,7 @@ class PieceStore { getInitialState() { this.piece = {}; this.pieceMeta = { - err: null, - idToFetch: null + err: null }; return { @@ -31,10 +30,12 @@ class PieceStore { } } - onFetchPiece(idToFetch) { - this.pieceMeta.idToFetch = idToFetch; + onFetchPiece(pieceId) { + this.getInstance().lookupPiece(pieceId); - this.getInstance().lookupPiece(); + // Prevent alt from sending an empty change event when a request is sent + // off to the source + this.preventDefault(); } onSuccessFetchPiece({ piece }) { @@ -42,10 +43,12 @@ class PieceStore { this.onUpdatePiece(piece); } else { this.pieceMeta.err = new Error('Problem fetching the piece'); + console.logGlobal(this.pieceMeta.err); } } onErrorPiece(err) { + console.logGlobal(err); this.pieceMeta.err = err; } @@ -56,11 +59,10 @@ class PieceStore { onUpdatePiece(piece) { this.piece = piece; this.pieceMeta.err = null; - this.pieceMeta.idToFetch = null; } onUpdateProperty({ key, value }) { - if(this.piece && key in this.piece) { + 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.'); diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss index a5026272..8bf729a8 100644 --- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss +++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss @@ -238,7 +238,7 @@ $vivi23--highlight-color: #de2600; &.active:hover{ background-color: $vivi23--highlight-color; border-color: $vivi23--highlight-color; - color: $vivi23--highlight-color; + color: $vivi23--bg-color; } }