diff --git a/js/actions/contract_list_actions.js b/js/actions/contract_list_actions.js index 1c5c0913..d368ac73 100644 --- a/js/actions/contract_list_actions.js +++ b/js/actions/contract_list_actions.js @@ -28,12 +28,10 @@ class ContractListActions { } - changeContract(contract){ + changeContract(contract) { return Q.Promise((resolve, reject) => { OwnershipFetcher.changeContract(contract) - .then((res) => { - resolve(res); - }) + .then(resolve) .catch((err)=> { console.logGlobal(err); reject(err); @@ -41,13 +39,11 @@ class ContractListActions { }); } - removeContract(contractId){ - return Q.Promise( (resolve, reject) => { + removeContract(contractId) { + return Q.Promise((resolve, reject) => { OwnershipFetcher.deleteContract(contractId) - .then((res) => { - resolve(res); - }) - .catch( (err) => { + .then(resolve) + .catch((err) => { console.logGlobal(err); reject(err); }); diff --git a/js/actions/edition_actions.js b/js/actions/edition_actions.js index 1727deff..1feee0dd 100644 --- a/js/actions/edition_actions.js +++ b/js/actions/edition_actions.js @@ -7,11 +7,11 @@ class EditionActions { constructor() { this.generateActions( 'fetchEdition', - 'successFetchEdition', 'successFetchCoa', - 'flushEdition', + 'successFetchEdition', 'errorCoa', - 'errorEdition' + 'errorEdition', + 'flushEdition' ); } } diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js index 6f9881ee..a52e32b9 100644 --- a/js/actions/edition_list_actions.js +++ b/js/actions/edition_list_actions.js @@ -17,23 +17,31 @@ class EditionListActions { ); } - fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc, filterBy) { - if((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) { + fetchEditionList({ pieceId, page, pageSize, orderBy, orderAsc, filterBy, maxEdition }) { + if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) { orderBy = 'edition_number'; orderAsc = true; } // Taken from: http://stackoverflow.com/a/519157/1263876 - if((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) { + if ((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) { page = 1; pageSize = 10; } + let itemsToFetch = pageSize; + // If we only want to fetch up to a specified edition, fetch all pages up to it + // as one page and adjust afterwards + if (typeof maxEdition === 'number') { + itemsToFetch = Math.ceil(maxEdition / pageSize) * pageSize; + page = 1; + } + return Q.Promise((resolve, reject) => { EditionListFetcher - .fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy) + .fetch({ pieceId, page, itemsToFetch, orderBy, orderAsc, filterBy }) .then((res) => { - if(res && !res.editions) { + if (res && !res.editions) { throw new Error('Piece has no editions to fetch.'); } @@ -44,8 +52,9 @@ class EditionListActions { orderBy, orderAsc, filterBy, - 'editionListOfPiece': res.editions, - 'count': res.count + maxEdition, + count: res.count, + editionListOfPiece: res.editions }); resolve(res); }) @@ -54,7 +63,6 @@ class EditionListActions { reject(err); }); }); - } } diff --git a/js/actions/facebook_actions.js b/js/actions/facebook_actions.js new file mode 100644 index 00000000..2e784fba --- /dev/null +++ b/js/actions/facebook_actions.js @@ -0,0 +1,14 @@ +'use strict'; + +import { altThirdParty } from '../alt'; + + +class FacebookActions { + constructor() { + this.generateActions( + 'sdkReady' + ); + } +} + +export default altThirdParty.createActions(FacebookActions); diff --git a/js/actions/piece_actions.js b/js/actions/piece_actions.js index 9002e8c5..7ad3ae29 100644 --- a/js/actions/piece_actions.js +++ b/js/actions/piece_actions.js @@ -1,28 +1,19 @@ 'use strict'; import { alt } from '../alt'; -import PieceFetcher from '../fetchers/piece_fetcher'; class PieceActions { constructor() { this.generateActions( + 'fetchPiece', + 'successFetchPiece', + 'errorPiece', + 'flushPiece', 'updatePiece', - 'updateProperty', - 'pieceFailed' + 'updateProperty' ); } - - fetchOne(pieceId) { - PieceFetcher.fetchOne(pieceId) - .then((res) => { - this.actions.updatePiece(res.piece); - }) - .catch((err) => { - console.logGlobal(err); - this.actions.pieceFailed(err.json); - }); - } } export default alt.createActions(PieceActions); diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index 7ef9cb59..c52ef5e2 100644 --- a/js/actions/piece_list_actions.js +++ b/js/actions/piece_list_actions.js @@ -15,7 +15,7 @@ class PieceListActions { ); } - fetchPieceList(page, pageSize, search, orderBy, orderAsc, filterBy) { + fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }) { // To prevent flickering on a pagination request, // we overwrite the piecelist with an empty list before // pieceListCount === -1 defines the loading state @@ -34,7 +34,7 @@ class PieceListActions { // afterwards, we can load the list return Q.Promise((resolve, reject) => { PieceListFetcher - .fetch(page, pageSize, search, orderBy, orderAsc, filterBy) + .fetch({ page, pageSize, search, orderBy, orderAsc, filterBy }) .then((res) => { this.actions.updatePieceList({ page, diff --git a/js/actions/prize_list_actions.js b/js/actions/prize_list_actions.js deleted file mode 100644 index da2f97df..00000000 --- a/js/actions/prize_list_actions.js +++ /dev/null @@ -1,34 +0,0 @@ -'use strict'; - -import { alt } from '../alt'; -import Q from 'q'; - -import PrizeListFetcher from '../fetchers/prize_list_fetcher'; - -class PrizeListActions { - constructor() { - this.generateActions( - 'updatePrizeList' - ); - } - - fetchPrizeList() { - return Q.Promise((resolve, reject) => { - PrizeListFetcher - .fetch() - .then((res) => { - this.actions.updatePrizeList({ - prizeList: res.prizes, - prizeListCount: res.count - }); - resolve(res); - }) - .catch((err) => { - console.logGlobal(err); - reject(err); - }); - }); - } -} - -export default alt.createActions(PrizeListActions); \ No newline at end of file diff --git a/js/app.js b/js/app.js index dc8204cf..dc8e3d62 100644 --- a/js/app.js +++ b/js/app.js @@ -1,14 +1,13 @@ 'use strict'; import 'babel/polyfill'; +import 'classlist-polyfill'; import React from 'react'; import { Router, Redirect } from 'react-router'; import history from './history'; -/* eslint-disable */ import fetch from 'isomorphic-fetch'; -/* eslint-enable */ import ApiUrls from './constants/api_urls'; @@ -17,44 +16,27 @@ import getRoutes from './routes'; import requests from './utils/requests'; import { updateApiUrls } from './constants/api_urls'; -import { getSubdomainSettings } from './utils/constants_utils'; +import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants_utils'; import { initLogging } from './utils/error_utils'; import { getSubdomain } from './utils/general_utils'; import EventActions from './actions/event_actions'; -/* eslint-disable */ // You can comment out the modules you don't need -// import DebugHandler from './third_party/debug'; -import GoogleAnalyticsHandler from './third_party/ga'; -import RavenHandler from './third_party/raven'; -import IntercomHandler from './third_party/intercom'; -import NotificationsHandler from './third_party/notifications'; -import FacebookHandler from './third_party/facebook'; -/* eslint-enable */ +// import DebugHandler from './third_party/debug_handler'; +import FacebookHandler from './third_party/facebook_handler'; +import GoogleAnalyticsHandler from './third_party/ga_handler'; +import IntercomHandler from './third_party/intercom_handler'; +import NotificationsHandler from './third_party/notifications_handler'; +import RavenHandler from './third_party/raven_handler'; -initLogging(); -let headers = { - 'Accept': 'application/json', - 'Content-Type': 'application/json' -}; - -requests.defaults({ - urlMap: ApiUrls, - http: { - headers: headers, - credentials: 'include' - } -}); - -class AppGateway { +const AppGateway = { start() { - let settings; - let subdomain = getSubdomain(); - try { - settings = getSubdomainSettings(subdomain); + const subdomain = getSubdomain(); + const settings = getSubdomainSettings(subdomain); + AppConstants.whitelabel = settings; updateApiUrls(settings.type, subdomain); this.load(settings); @@ -62,28 +44,25 @@ class AppGateway { // if there are no matching subdomains, we're routing // to the default frontend console.logGlobal(err); - this.load(); + this.load(getDefaultSubdomainSettings()); } - } + }, load(settings) { - let type = 'default'; - let subdomain = 'www'; + const { subdomain, type } = settings; let redirectRoute = (); - if (settings) { - type = settings.type; - subdomain = settings.subdomain; - } + if (subdomain) { + // Some whitelabels have landing pages so we should not automatically redirect from / to /collection. + // Only www and cc do not have a landing page. + if (subdomain !== 'cc') { + redirectRoute = null; + } - // www and cc do not have a landing page - if(subdomain && subdomain !== 'cc') { - redirectRoute = null; + // Adds a client specific class to the body for whitelabel styling + window.document.body.classList.add('client--' + subdomain); } - // Adds a client specific class to the body for whitelabel styling - window.document.body.classList.add('client--' + subdomain); - // Send the applicationWillBoot event to the third-party stores EventActions.applicationWillBoot(settings); @@ -101,8 +80,21 @@ class AppGateway { // Send the applicationDidBoot event to the third-party stores EventActions.applicationDidBoot(settings); } -} +}; -let ag = new AppGateway(); -ag.start(); +// Initialize pre-start components +initLogging(); +requests.defaults({ + urlMap: ApiUrls, + http: { + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + credentials: 'include' + } +}); + +// And bootstrap app +AppGateway.start(); diff --git a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js index 27657e04..2bb8b2d0 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js @@ -19,9 +19,10 @@ import { getLangText } from '../../utils/lang_utils'; let AccordionListItemEditionWidget = React.createClass({ propTypes: { - className: React.PropTypes.string, piece: React.PropTypes.object.isRequired, toggleCreateEditionsDialog: React.PropTypes.func.isRequired, + + className: React.PropTypes.string, onPollingSuccess: React.PropTypes.func }, @@ -50,14 +51,15 @@ let AccordionListItemEditionWidget = React.createClass({ * Calls the store to either show or hide the editionListTable */ toggleTable() { - let pieceId = this.props.piece.id; - let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false; + const { piece: { id: pieceId } } = this.props; + const { filterBy, isEditionListOpenForPieceId } = this.state; + const isEditionListOpen = isEditionListOpenForPieceId[pieceId] ? isEditionListOpenForPieceId[pieceId].show : false; - if(isEditionListOpen) { + if (isEditionListOpen) { EditionListActions.toggleEditionList(pieceId); } else { EditionListActions.toggleEditionList(pieceId); - EditionListActions.fetchEditionList(pieceId, null, null, null, null, this.state.filterBy); + EditionListActions.fetchEditionList({ pieceId, filterBy }); } }, diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 23cfb239..3b0bb02e 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -66,22 +66,34 @@ let AccordionListItemTableEditions = React.createClass({ }, filterSelectedEditions() { - let selectedEditions = this.state.editionList[this.props.parentId] - .filter((edition) => edition.selected); - return selectedEditions; + return this.state + .editionList[this.props.parentId] + .filter((edition) => edition.selected); }, loadFurtherEditions() { + const { parentId: pieceId } = this.props; + const { page, pageSize, orderBy, orderAsc, filterBy } = this.state.editionList[pieceId]; + // trigger loading animation this.setState({ showMoreLoading: true }); - let editionList = this.state.editionList[this.props.parentId]; - EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize, - editionList.orderBy, editionList.orderAsc, editionList.filterBy); + EditionListActions.fetchEditionList({ + pieceId, + pageSize, + orderBy, + orderAsc, + filterBy, + page: page + 1 + }); }, render() { + const { className, parentId } = this.props; + const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state; + const editionsForPiece = editionList[parentId]; + let selectedEditionsCount = 0; let allEditionsCount = 0; let orderBy; @@ -89,95 +101,97 @@ let AccordionListItemTableEditions = React.createClass({ let show = false; let showExpandOption = false; - let editionsForPiece = this.state.editionList[this.props.parentId]; - let loadingSpinner = ; - // here we need to check if all editions of a specific // piece are already defined. Otherwise .length will throw an error and we'll not // be notified about it. - if(editionsForPiece) { + if (editionsForPiece) { selectedEditionsCount = this.filterSelectedEditions().length; allEditionsCount = editionsForPiece.length; orderBy = editionsForPiece.orderBy; orderAsc = editionsForPiece.orderAsc; } - if(this.props.parentId in this.state.isEditionListOpenForPieceId) { - show = this.state.isEditionListOpenForPieceId[this.props.parentId].show; + if (parentId in isEditionListOpenForPieceId) { + show = isEditionListOpenForPieceId[parentId].show; } // if the number of editions in the array is equal to the maximum number of editions, // then the "Show me more" dialog should be hidden from the user's view - if(editionsForPiece && editionsForPiece.count > editionsForPiece.length) { + if (editionsForPiece && editionsForPiece.count > editionsForPiece.length) { showExpandOption = true; } - let transition = new TransitionModel('editions', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() ); + const transition = new TransitionModel({ + to: 'editions', + queryKey: 'editionId', + valueKey: 'bitcoin_id', + callback: (e) => e.stopPropagation() + }); - let columnList = [ - new ColumnModel( - (item) => { + const columnList = [ + new ColumnModel({ + transformFn: (item) => { return { 'editionId': item.id, - 'pieceId': this.props.parentId, + 'pieceId': parentId, 'selectItem': this.selectItem, 'selected': item.selected - }; }, - '', + }; + }, + displayElement: ( , - TableItemCheckbox, - 1, - false - ), - new ColumnModel( - (item) => { + numOfAllEditions={allEditionsCount}/> + ), + displayType: TableItemCheckbox, + rowWidth: 1 + }), + new ColumnModel({ + transition, + transformFn: (item) => { return { 'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions - }; }, - 'edition_number', - getLangText('Edition'), - TableItemText, - 1, - false, - transition - ), - new ColumnModel( - (item) => { + }; + }, + columnName: 'edition_number', + displayElement: getLangText('Edition'), + displayType: TableItemText, + rowWidth: 1 + }), + new ColumnModel({ + transition, + transformFn: (item) => { return { 'content': item.bitcoin_id - }; }, - 'bitcoin_id', - getLangText('ID'), - TableItemText, - 5, - false, - transition, - 'hidden-xs visible-sm visible-md visible-lg' - ), - new ColumnModel( - (item) => { - let content = item.acl; + }; + }, + columnName: 'bitcoin_id', + displayElement: getLangText('ID'), + displayType: TableItemText, + rowWidth: 5, + className: 'hidden-xs visible-sm visible-md visible-lg' + }), + new ColumnModel({ + transition, + transformFn: (item) => { return { - 'content': content, + 'content': item.acl, 'notifications': item.notifications - }; }, - 'acl', - getLangText('Actions'), - TableItemAclFiltered, - 4, - false, - transition - ) + }; + }, + columnName: 'acl', + displayElement: getLangText('Actions'), + displayType: TableItemAclFiltered, + rowWidth: 4 + }) ]; - if(show && editionsForPiece && editionsForPiece.length > 0) { + if (show && editionsForPiece && editionsForPiece.length) { return ( -
+
{this.state.showMoreLoading ? loadingSpinner : : null} /> + message={show && showExpandOption ? ( + + {showMoreLoading ? + : + ) : null + } />
); } else { diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js index a8cab166..f6712d37 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js @@ -88,11 +88,12 @@ let AccordionListItemWallet = React.createClass({ }, onPollingSuccess(pieceId) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); EditionListActions.toggleEditionList(pieceId); - let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); + const notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, diff --git a/js/components/ascribe_buttons/create_editions_button.js b/js/components/ascribe_buttons/create_editions_button.js index 08fb76ce..c78b0d63 100644 --- a/js/components/ascribe_buttons/create_editions_button.js +++ b/js/components/ascribe_buttons/create_editions_button.js @@ -28,6 +28,12 @@ let CreateEditionsButton = React.createClass({ EditionListStore.listen(this.onChange); }, + componentDidUpdate() { + if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') { + this.startPolling(); + } + }, + componentWillUnmount() { EditionListStore.unlisten(this.onChange); clearInterval(this.state.pollingIntervalIndex); @@ -37,28 +43,24 @@ let CreateEditionsButton = React.createClass({ this.setState(state); }, - componentDidUpdate() { - if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') { - this.startPolling(); - } - }, - startPolling() { // start polling until editions are defined let pollingIntervalIndex = setInterval(() => { // requests, will try to merge the filterBy parameter with other parameters (mergeOptions). // Therefore it can't but null but instead has to be an empty object - EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, {}) - .then((res) => { - - clearInterval(this.state.pollingIntervalIndex); - this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions); - - }) - .catch((err) => { - /* Ignore and keep going */ - }); + EditionListActions + .fetchEditionList({ + pieceId: this.props.piece.id, + filterBy: {} + }) + .then((res) => { + clearInterval(this.state.pollingIntervalIndex); + this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions); + }) + .catch((err) => { + /* Ignore and keep going */ + }); }, 5000); this.setState({ diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 0879dea0..803d73bb 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -1,7 +1,7 @@ 'use strict'; import React from 'react'; -import { Link, History } from 'react-router'; +import { Link } from 'react-router'; import Moment from 'moment'; import Row from 'react-bootstrap/lib/Row'; @@ -44,8 +44,6 @@ let Edition = React.createClass({ loadEdition: React.PropTypes.func }, - mixins: [History], - getDefaultProps() { return { furtherDetailsType: FurtherDetails @@ -53,98 +51,103 @@ let Edition = React.createClass({ }, render() { - let FurtherDetailsType = this.props.furtherDetailsType; + const { + actionPanelButtonListType, + coaError, + currentUser, + edition, + furtherDetailsType: FurtherDetailsType, + loadEdition } = this.props; return ( + content={edition} + currentUser={currentUser} />

-

{this.props.edition.title}

- - +

{edition.title}

+ +
+ actionPanelButtonListType={actionPanelButtonListType} + edition={edition} + currentUser={currentUser} + handleSuccess={loadEdition}/> + show={edition.acl.acl_coa === true}> + coa={edition.coa} + coaError={coaError} + editionId={edition.bitcoin_id}/> 0}> + show={edition.ownership_history && edition.ownership_history.length > 0}> + history={edition.ownership_history} /> 0}> + show={edition.consign_history && edition.consign_history.length > 0}> + history={edition.consign_history} /> 0}> + show={edition.loan_history && edition.loan_history.length > 0}> + history={edition.loan_history} /> + show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}> {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} + id={() => {return {'bitcoin_id': edition.bitcoin_id}; }} label={getLangText('Personal note (private)')} - defaultValue={this.props.edition.private_note ? this.props.edition.private_note : null} + defaultValue={edition.private_note ? edition.private_note : null} placeholder={getLangText('Enter your comments ...')} editable={true} successMessage={getLangText('Private note saved')} url={ApiUrls.note_private_edition} - currentUser={this.props.currentUser}/> + currentUser={currentUser}/> {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} + id={() => {return {'bitcoin_id': edition.bitcoin_id}; }} label={getLangText('Personal note (public)')} - defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null} + defaultValue={edition.public_note ? edition.public_note : null} placeholder={getLangText('Enter your comments ...')} - editable={!!this.props.edition.acl.acl_edit} - show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit} + editable={!!edition.acl.acl_edit} + show={!!edition.public_note || !!edition.acl.acl_edit} successMessage={getLangText('Public edition note saved')} url={ApiUrls.note_public_edition} - currentUser={this.props.currentUser}/> + currentUser={currentUser}/> 0 - || this.props.edition.other_data.length > 0}> + show={edition.acl.acl_edit || + Object.keys(edition.extra_data).length > 0 || + edition.other_data.length > 0}> + editable={edition.acl.acl_edit} + pieceId={edition.parent} + extraData={edition.extra_data} + otherData={edition.other_data} + handleSuccess={loadEdition} /> + edition={edition} />
@@ -221,7 +224,11 @@ let EditionSummary = React.createClass({ let CoaDetails = React.createClass({ propTypes: { editionId: React.PropTypes.string, - coa: React.PropTypes.object, + coa: React.PropTypes.oneOfType([ + React.PropTypes.number, + React.PropTypes.string, + React.PropTypes.object + ]), coaError: React.PropTypes.object }, diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js index 36a79e7c..71bf38fe 100644 --- a/js/components/ascribe_detail/edition_action_panel.js +++ b/js/components/ascribe_detail/edition_action_panel.js @@ -72,19 +72,20 @@ let EditionActionPanel = React.createClass({ EditionListActions.closeAllEditionLists(); EditionListActions.clearAllEditionSelections(); - let notification = new GlobalNotificationModel(response.notification, 'success'); + const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.pushState(null, '/collection'); + this.history.push('/collection'); }, refreshCollection() { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); - EditionListActions.refreshEditionList({pieceId: this.props.edition.parent}); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); + EditionListActions.refreshEditionList({ pieceId: this.props.edition.parent }); }, - handleSuccess(response){ + handleSuccess(response) { this.refreshCollection(); this.props.handleSuccess(); if (response){ @@ -93,7 +94,7 @@ let EditionActionPanel = React.createClass({ } }, - render(){ + render() { const { actionPanelButtonListType: ActionPanelButtonListType, edition, diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js index ee53f0e1..d0adadf0 100644 --- a/js/components/ascribe_detail/edition_container.js +++ b/js/components/ascribe_detail/edition_container.js @@ -35,7 +35,7 @@ let EditionContainer = React.createClass({ getInitialState() { return mergeOptions( - EditionStore.getState(), + EditionStore.getInitialState(), UserStore.getState() ); }, @@ -44,27 +44,23 @@ let EditionContainer = React.createClass({ EditionStore.listen(this.onChange); UserStore.listen(this.onChange); - // Every time we're entering the edition detail page, - // just reset the edition that is saved in the edition store - // as it will otherwise display wrong/old data once the user loads - // the edition detail a second time - EditionActions.flushEdition(); - EditionActions.fetchEdition(this.props.params.editionId); - + this.loadEdition(); UserActions.fetchCurrentUser(); }, // This is done to update the container when the user clicks on the prev or next // button to update the URL parameter (and therefore to switch pieces) componentWillReceiveProps(nextProps) { - if(this.props.params.editionId !== nextProps.params.editionId) { - EditionActions.fetchEdition(this.props.params.editionId); + if (this.props.params.editionId !== nextProps.params.editionId) { + EditionActions.flushEdition(); + this.loadEdition(nextProps.params.editionId); } }, componentDidUpdate() { - const { editionMeta } = this.state; - if(editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) { + const { err: editionErr } = this.state.editionMeta; + + if (editionErr && editionErr.json && editionErr.json.status === 404) { this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist."))); } }, @@ -81,18 +77,22 @@ let EditionContainer = React.createClass({ if(state && state.edition && state.edition.digital_work) { let isEncoding = state.edition.digital_work.isEncoding; if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { - let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000); + let timerId = window.setInterval(() => EditionActions.fetchEdition(this.props.params.editionId), 10000); this.setState({timerId: timerId}); } } }, + loadEdition(editionId = this.props.params.editionId) { + EditionActions.fetchEdition(editionId); + }, + render() { const { edition, currentUser, coaMeta } = this.state; const { actionPanelButtonListType, furtherDetailsType } = this.props; - if (Object.keys(edition).length && edition.id) { - setDocumentTitle([edition.artist_name, edition.title].join(', ')); + if (edition.id) { + setDocumentTitle(`${edition.artist_name}, ${edition.title}`); return ( EditionActions.fetchEdition(this.props.params.editionId)} /> + loadEdition={this.loadEdition} /> ); } else { return ( diff --git a/js/components/ascribe_detail/further_details.js b/js/components/ascribe_detail/further_details.js index 387398b5..846385a6 100644 --- a/js/components/ascribe_detail/further_details.js +++ b/js/components/ascribe_detail/further_details.js @@ -5,25 +5,27 @@ 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'; +import { getLangText } from '../../utils/lang_utils'; + let FurtherDetails = React.createClass({ propTypes: { + pieceId: React.PropTypes.number.isRequired, + editable: React.PropTypes.bool, - pieceId: React.PropTypes.number, extraData: React.PropTypes.object, + handleSuccess: React.PropTypes.func, otherData: React.PropTypes.arrayOf(React.PropTypes.object), - handleSuccess: React.PropTypes.func }, getInitialState() { @@ -33,8 +35,13 @@ let FurtherDetails = React.createClass({ }, showNotification() { - this.props.handleSuccess(); - const notification = new GlobalNotificationModel('Details updated', 'success'); + const { handleSuccess } = this.props; + + if (typeof handleSucess === 'function') { + handleSuccess(); + } + + const notification = new GlobalNotificationModel(getLangText('Details updated'), 'success'); GlobalNotificationActions.appendGlobalNotification(notification); }, @@ -60,10 +67,10 @@ let FurtherDetails = React.createClass({ name='artist_contact_info' title='Artist Contact Info' handleSuccess={this.showNotification} + convertLinks editable={editable} - pieceId={pieceId} extraData={extraData} - convertLinks /> + pieceId={pieceId} /> diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js index 3c1e7eb9..e4270132 100644 --- a/js/components/ascribe_detail/media_container.js +++ b/js/components/ascribe_detail/media_container.js @@ -14,10 +14,6 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button'; import AclProxy from '../acl_proxy'; -import UserActions from '../../actions/user_actions'; -import UserStore from '../../stores/user_store'; - -import { mergeOptions } from '../../utils/general_utils.js'; import { getLangText } from '../../utils/lang_utils.js'; const EMBED_IFRAME_HEIGHT = { @@ -28,25 +24,22 @@ const EMBED_IFRAME_HEIGHT = { let MediaContainer = React.createClass({ propTypes: { content: React.PropTypes.object, + currentUser: React.PropTypes.object, refreshObject: React.PropTypes.func }, getInitialState() { - return mergeOptions( - UserStore.getState(), - { - timerId: null - }); + return { + timerId: null + }; }, componentDidMount() { - UserStore.listen(this.onChange); - UserActions.fetchCurrentUser(); - if (!this.props.content.digital_work) { return; } - let isEncoding = this.props.content.digital_work.isEncoding; + + const isEncoding = this.props.content.digital_work.isEncoding; if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { let timerId = window.setInterval(this.props.refreshObject, 10000); this.setState({timerId: timerId}); @@ -60,22 +53,16 @@ let MediaContainer = React.createClass({ }, componentWillUnmount() { - UserStore.unlisten(this.onChange); - window.clearInterval(this.state.timerId); }, - onChange(state) { - this.setState(state); - }, - render() { - const { content } = this.props; + const { content, currentUser } = this.props; // Pieces and editions are joined to the user by a foreign key in the database, so // the information in content will be updated if a user updates their username. // We also force uniqueness of usernames, so this check is safe to dtermine if the // content was registered by the current user. - const didUserRegisterContent = this.state.currentUser && (this.state.currentUser.username === content.user_registered); + const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered); let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe; @@ -94,8 +81,11 @@ let MediaContainer = React.createClass({ embed = ( - Embed + } panel={ @@ -125,8 +115,12 @@ let MediaContainer = React.createClass({ show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download} aclObject={content.acl} aclName="acl_download"> - {embed} diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js index 4108d98f..e4ff4ea7 100644 --- a/js/components/ascribe_detail/piece.js +++ b/js/components/ascribe_detail/piece.js @@ -16,10 +16,10 @@ import MediaContainer from './media_container'; let Piece = React.createClass({ propTypes: { piece: React.PropTypes.object, + currentUser: React.PropTypes.object, header: React.PropTypes.object, subheader: React.PropTypes.object, buttons: React.PropTypes.object, - loadPiece: React.PropTypes.func, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element @@ -28,24 +28,26 @@ let Piece = React.createClass({ updateObject() { - return PieceActions.fetchOne(this.props.piece.id); + return PieceActions.fetchPiece(this.props.piece.id); }, render() { + const { buttons, children, currentUser, header, piece, subheader } = this.props; + return ( + content={piece} + currentUser={currentUser} + refreshObject={this.updateObject} /> - {this.props.header} - {this.props.subheader} - {this.props.buttons} - - {this.props.children} + {header} + {subheader} + {buttons} + {children} ); diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js index 1aebff75..f7ef024f 100644 --- a/js/components/ascribe_detail/piece_container.js +++ b/js/components/ascribe_detail/piece_container.js @@ -69,7 +69,7 @@ let PieceContainer = React.createClass({ return mergeOptions( UserStore.getState(), PieceListStore.getState(), - PieceStore.getState(), + PieceStore.getInitialState(), { showCreateEditionsDialog: false } @@ -81,19 +81,24 @@ let PieceContainer = React.createClass({ PieceListStore.listen(this.onChange); PieceStore.listen(this.onChange); - // Every time we enter the piece detail page, just reset the piece - // store as it will otherwise display wrong/old data once the user loads - // the piece detail a second time - PieceActions.updatePiece({}); - this.loadPiece(); UserActions.fetchCurrentUser(); }, - componentDidUpdate() { - const { pieceError } = this.state; + // This is done to update the container when the user clicks on the prev or next + // button to update the URL parameter (and therefore to switch pieces) or + // when the user clicks on a notification while being in another piece view + componentWillReceiveProps(nextProps) { + if (this.props.params.pieceId !== nextProps.params.pieceId) { + PieceActions.flushPiece(); + this.loadPiece(nextProps.params.pieceId); + } + }, - if (pieceError && pieceError.status === 404) { + componentDidUpdate() { + const { err: pieceErr } = this.state.pieceMeta; + + if (pieceErr && pieceErr.json && pieceErr.json.status === 404) { this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist."))); } }, @@ -116,8 +121,7 @@ let PieceContainer = React.createClass({ ALSO, WE ENABLED THE LOAN BUTTON FOR IKONOTV TO LET THEM LOAN ON A PIECE LEVEL */ - if(state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') { - + if (state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') { let pieceState = mergeOptions({}, state.piece); pieceState.acl.acl_loan = false; this.setState({ @@ -129,11 +133,10 @@ let PieceContainer = React.createClass({ } }, - loadPiece() { - PieceActions.fetchOne(this.props.params.pieceId); + loadPiece(pieceId = this.props.params.pieceId) { + PieceActions.fetchPiece(pieceId); }, - toggleCreateEditionsDialog() { this.setState({ showCreateEditionsDialog: !this.state.showCreateEditionsDialog @@ -141,43 +144,47 @@ let PieceContainer = React.createClass({ }, handleEditionCreationSuccess() { - PieceActions.updateProperty({key: 'num_editions', value: 0}); - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceActions.updateProperty({ key: 'num_editions', value: 0 }); + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); + this.toggleCreateEditionsDialog(); }, handleDeleteSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); // since we're deleting a piece, we just need to close // all editions dialogs and not reload them EditionListActions.closeAllEditionLists(); EditionListActions.clearAllEditionSelections(); - let notification = new GlobalNotificationModel(response.notification, 'success'); + const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.pushState(null, '/collection'); + this.history.push('/collection'); }, getCreateEditionsDialog() { - if(this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) { + if (this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) { return (
-
+
); } else { - return (
); + return (
); } }, handlePollingSuccess(pieceId, numEditions) { + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; // we need to refresh the num_editions property of the actual piece we're looking at PieceActions.updateProperty({ @@ -189,27 +196,26 @@ let PieceContainer = React.createClass({ // btw.: It's not sufficient to just set num_editions to numEditions, since a single accordion // list item also uses the firstEdition property which we can only get from the server in that case. // Therefore we need to at least refetch the changed piece from the server or on our case simply all - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); - let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); + const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, getId() { - return {'id': this.state.piece.id}; + return { 'id': this.state.piece.id }; }, getActions() { const { piece, currentUser } = this.state; - if (piece && piece.notifications && piece.notifications.length > 0) { + if (piece.notifications && piece.notifications.length > 0) { return ( ); + notifications={piece.notifications} />); } else { return ( + piece={piece} /> + aclObject={piece.acl} /> @@ -249,76 +255,76 @@ let PieceContainer = React.createClass({ }, render() { - if (this.state.piece && this.state.piece.id) { - let FurtherDetailsType = this.props.furtherDetailsType; - setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', ')); + const { furtherDetailsType: FurtherDetailsType } = this.props; + const { currentUser, piece } = this.state; + + if (piece.id) { + setDocumentTitle(`${piece.artist_name}, ${piece.title}`); return ( -
-

{this.state.piece.title}

- - - {this.state.piece.num_editions > 0 ? : null} +
+

{piece.title}

+ + + {piece.num_editions > 0 ? : null}
} subheader={
- - - + + +
} buttons={this.getActions()}> {this.getCreateEditionsDialog()} 0}> + show={piece.loan_history && piece.loan_history.length > 0}> + history={piece.loan_history} /> + show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}> + currentUser={currentUser} /> + currentUser={currentUser} /> 0 - || this.state.piece.other_data.length > 0} + show={piece.acl.acl_edit + || Object.keys(piece.extra_data).length > 0 + || piece.other_data.length > 0} defaultExpanded={true}> diff --git a/js/components/ascribe_forms/create_editions_form.js b/js/components/ascribe_forms/create_editions_form.js index 1e8ac23e..b2bf3c1c 100644 --- a/js/components/ascribe_forms/create_editions_form.js +++ b/js/components/ascribe_forms/create_editions_form.js @@ -19,7 +19,7 @@ let CreateEditionsForm = React.createClass({ pieceId: React.PropTypes.number }, - getFormData(){ + getFormData() { return { piece_id: parseInt(this.props.pieceId, 10) }; @@ -58,11 +58,12 @@ let CreateEditionsForm = React.createClass({ + min={1} + max={100} /> ); } }); -export default CreateEditionsForm; \ No newline at end of file +export default CreateEditionsForm; diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 91d00f65..148b2e2d 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -208,7 +208,7 @@ let Form = React.createClass({ if (this.state.submitted){ return this.props.spinner; } - if (this.props.buttons){ + if ('buttons' in this.props) { return this.props.buttons; } let buttons = null; diff --git a/js/components/ascribe_forms/form_piece_extradata.js b/js/components/ascribe_forms/form_piece_extradata.js index 3e45f509..9ba53f3b 100644 --- a/js/components/ascribe_forms/form_piece_extradata.js +++ b/js/components/ascribe_forms/form_piece_extradata.js @@ -13,13 +13,15 @@ import InputTextAreaToggable from './input_textarea_toggable'; let PieceExtraDataForm = React.createClass({ propTypes: { - pieceId: React.PropTypes.number, + name: React.PropTypes.string.isRequired, + pieceId: React.PropTypes.number.isRequired, + + convertLinks: React.PropTypes.bool, + editable: React.PropTypes.bool, extraData: React.PropTypes.object, handleSuccess: React.PropTypes.func, name: React.PropTypes.string, - title: React.PropTypes.string, - convertLinks: React.PropTypes.bool, - editable: React.PropTypes.bool + title: React.PropTypes.string }, getFormData() { @@ -33,20 +35,19 @@ let PieceExtraDataForm = React.createClass({ render() { const { convertLinks, editable, extraData, handleSuccess, name, pieceId, title } = this.props; - const defaultValue = this.props.extraData[this.props.name] || ''; + const defaultValue = (extraData && extraData[name]) || null; - if (defaultValue.length === 0 && !editable){ + if (!defaultValue && !editable) { return null; } - const url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: pieceId}); return (
+ handleSuccess={handleSuccess} + url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}> diff --git a/js/components/ascribe_forms/form_send_contract_agreement.js b/js/components/ascribe_forms/form_send_contract_agreement.js index 6f5f74d7..043c0361 100644 --- a/js/components/ascribe_forms/form_send_contract_agreement.js +++ b/js/components/ascribe_forms/form_send_contract_agreement.js @@ -58,7 +58,7 @@ let SendContractAgreementForm = React.createClass({ notification = new GlobalNotificationModel(notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.pushState(null, '/collection'); + this.history.push('/collection'); }, getFormData() { diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 432591bf..6d46a9d3 100644 --- a/js/components/ascribe_forms/property.js +++ b/js/components/ascribe_forms/property.js @@ -240,7 +240,17 @@ const Property = React.createClass({ }, handleCheckboxToggle() { - this.setExpanded(!this.state.expanded); + const expanded = !this.state.expanded; + + this.setExpanded(expanded); + + // Reset the value to be the initial value when the checkbox is unticked since the + // user doesn't want to specify their own value. + if (!expanded) { + this.setState({ + value: this.state.initialValue + }); + } }, renderChildren(style) { diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js index 2a23f2ed..1552b44c 100644 --- a/js/components/ascribe_media/media_player.js +++ b/js/components/ascribe_media/media_player.js @@ -184,7 +184,7 @@ let Video = React.createClass({ ); } else { return ( - + ); } } diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js index fd77e5ae..511e7f8c 100644 --- a/js/components/ascribe_modal/modal_wrapper.js +++ b/js/components/ascribe_modal/modal_wrapper.js @@ -1,19 +1,20 @@ 'use strict'; import React from 'react'; -import ReactAddons from 'react/addons'; import Modal from 'react-bootstrap/lib/Modal'; let ModalWrapper = React.createClass({ propTypes: { - trigger: React.PropTypes.element, title: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element, React.PropTypes.string ]).isRequired, - handleSuccess: React.PropTypes.func.isRequired, + + handleCancel: React.PropTypes.func, + handleSuccess: React.PropTypes.func, + trigger: React.PropTypes.element, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element @@ -38,14 +39,25 @@ let ModalWrapper = React.createClass({ }); }, + handleCancel() { + if (typeof this.props.handleCancel === 'function') { + this.props.handleCancel(); + } + + this.hide(); + }, + handleSuccess(response) { - this.props.handleSuccess(response); + if (typeof this.props.handleSuccess === 'function') { + this.props.handleSuccess(response); + } + this.hide(); }, renderChildren() { - return ReactAddons.Children.map(this.props.children, (child) => { - return ReactAddons.addons.cloneWithProps(child, { + return React.Children.map(this.props.children, (child) => { + return React.cloneElement(child, { handleSuccess: (response) => { if (typeof child.props.handleSuccess === 'function') { child.props.handleSuccess(response); @@ -60,14 +72,23 @@ let ModalWrapper = React.createClass({ render() { const { trigger, title } = this.props; - // If the trigger component exists, we add the ModalWrapper's show() as its onClick method. + // If the trigger component exists, we add the ModalWrapper's show() to its onClick method. // The trigger component should, in most cases, be a button. - const clonedTrigger = React.isValidElement(trigger) ? React.cloneElement(trigger, {onClick: this.show}) - : null; + const clonedTrigger = React.isValidElement(trigger) ? + React.cloneElement(trigger, { + onClick: (...params) => { + if (typeof trigger.props.onClick === 'function') { + trigger.props.onClick(...params); + } + + this.show(); + } + }) : null; + return ( {clonedTrigger} - + {title} diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js index 75a2d9a9..edb29e85 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js @@ -91,13 +91,13 @@ let PieceListToolbarFilterWidget = React.createClass({ label also iterate over its items, to get all filterable options */} {this.props.filterParams.map(({ label, items }, i) => { return ( -
-
  • +
    +
  • {label}:
  • - {items.map((param, j) => { + {items.map((paramItem) => { + let itemLabel; + let param; // As can be seen in the PropTypes, a param can either // be a string or an object of the shape: @@ -108,22 +108,22 @@ let PieceListToolbarFilterWidget = React.createClass({ // } // // This is why we need to distinguish between both here. - if (typeof param !== 'string') { - label = param.label; - param = param.key; + if (typeof paramItem !== 'string') { + param = paramItem.key; + itemLabel = paramItem.label; } else { - param = param; - label = param.split('acl_')[1].replace(/_/g, ' '); + param = paramItem; + itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' '); } return (
  • - {getLangText(label)} + {getLangText(itemLabel)} {this.props.orderParams.map((param) => { return ( -
    -
  • -
    - - {getLangText(param.replace('_', ' '))} - - -1} /> -
    -
  • -
    +
  • +
    + + {getLangText(param.replace('_', ' '))} + + -1} /> +
    +
  • ); })} @@ -89,4 +87,4 @@ let PieceListToolbarOrderWidget = React.createClass({ } }); -export default PieceListToolbarOrderWidget; \ No newline at end of file +export default PieceListToolbarOrderWidget; diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js index 228f0f62..7752912a 100644 --- a/js/components/ascribe_routes/proxy_handler.js +++ b/js/components/ascribe_routes/proxy_handler.js @@ -40,7 +40,7 @@ export function AuthRedirect({to, when}) { // and redirect if `true`. if(exprToValidate) { - window.setTimeout(() => history.replaceState(null, to, query)); + window.setTimeout(() => history.replace({ query, pathname: to })); return true; // Otherwise there can also be the case that the backend @@ -48,7 +48,7 @@ export function AuthRedirect({to, when}) { } else if(!exprToValidate && when === 'loggedIn' && redirect) { delete query.redirect; - window.setTimeout(() => history.replaceState(null, '/' + redirect, query)); + window.setTimeout(() => history.replace({ query, pathname: '/' + redirect })); return true; } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) { diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 71d97542..be723295 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -28,11 +28,7 @@ import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils let ContractSettings = React.createClass({ - propTypes: { - location: React.PropTypes.object - }, - - getInitialState(){ + getInitialState() { return mergeOptions( ContractListStore.getState(), UserStore.getState() @@ -64,40 +60,39 @@ let ContractSettings = React.createClass({ ContractListActions.removeContract(contract.id) .then((response) => { ContractListActions.fetchContractList(true); - let notification = new GlobalNotificationModel(response.notification, 'success', 4000); + const notification = new GlobalNotificationModel(response.notification, 'success', 4000); GlobalNotificationActions.appendGlobalNotification(notification); }) .catch((err) => { - let notification = new GlobalNotificationModel(err, 'danger', 10000); + const notification = new GlobalNotificationModel(err, 'danger', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }); }; }, - getPublicContracts(){ + getPublicContracts() { return this.state.contractList.filter((contract) => contract.is_public); }, - getPrivateContracts(){ + getPrivateContracts() { return this.state.contractList.filter((contract) => !contract.is_public); }, render() { - let publicContracts = this.getPublicContracts(); - let privateContracts = this.getPrivateContracts(); + const publicContracts = this.getPublicContracts(); + const privateContracts = this.getPrivateContracts(); let createPublicContractForm = null; setDocumentTitle(getLangText('Contracts settings')); - if(publicContracts.length === 0) { + if (publicContracts.length === 0) { createPublicContractForm = ( + }} /> ); } @@ -114,7 +109,7 @@ let ContractSettings = React.createClass({ {publicContracts.map((contract, i) => { return ( + contract={contract} /> + }} /> {privateContracts.map((contract, i) => { return ( + contract={contract} /> { - // Display feedback to the user - let notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', res.name), 'success', 5000); + const notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', contract.name), 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); // and refresh the contract list to get the updated contracs - return ContractListActions.fetchContractList(true); - }) - .then(() => { - // Also, reset the fineuploader component so that the user can again 'update' his contract - this.refs.fineuploader.reset(); - }) - .catch((err) => { - console.logGlobal(err); - let notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'success', 5000); + return ContractListActions + .fetchContractList(true) + // Also, reset the fineuploader component if fetch is successful so that the user can again 'update' his contract + .then(this.refs.fineuploader.reset) + .catch((err) => { + const notification = new GlobalNotificationModel(getLangText('Latest contract failed to load'), 'danger', 5000); + GlobalNotificationActions.appendGlobalNotification(notification); + + return Promise.reject(err); + }); + }, (err) => { + const notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'danger', 5000); GlobalNotificationActions.appendGlobalNotification(notification); - }); + + return Promise.reject(err); + }) + .catch(console.logGlobal); }, render() { return ( {/* So that ReactS3FineUploader is not complaining */}} - signature={{ - endpoint: AppConstants.serverUrl + 's3/signature/', - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } - }} - deleteFile={{ - enabled: true, - method: 'DELETE', - endpoint: AppConstants.serverUrl + 's3/delete', - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } - }} - fileClassToUpload={{ - singular: getLangText('UPDATE'), - plural: getLangText('UPDATE') - }} - isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} - submitFile={this.submitFile} /> + ref='fineuploader' + fileInputElement={UploadButton({ showLabel: false })} + keyRoutine={{ + url: AppConstants.serverUrl + 's3/key/', + fileClass: 'contract' + }} + createBlobRoutine={{ + url: ApiUrls.blob_contracts + }} + validation={{ + itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, + sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit, + allowedExtensions: ['pdf'] + }} + setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}} + signature={{ + endpoint: AppConstants.serverUrl + 's3/signature/', + customHeaders: { + 'X-CSRFToken': getCookie(AppConstants.csrftoken) + } + }} + deleteFile={{ + enabled: true, + method: 'DELETE', + endpoint: AppConstants.serverUrl + 's3/delete', + customHeaders: { + 'X-CSRFToken': getCookie(AppConstants.csrftoken) + } + }} + fileClassToUpload={{ + singular: getLangText('UPDATE'), + plural: getLangText('UPDATE') + }} + isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} + submitFile={this.submitFile} /> ); } }); diff --git a/js/components/ascribe_settings/webhook_settings.js b/js/components/ascribe_settings/webhook_settings.js index 9deecbcd..4928c408 100644 --- a/js/components/ascribe_settings/webhook_settings.js +++ b/js/components/ascribe_settings/webhook_settings.js @@ -34,7 +34,6 @@ let WebhookSettings = React.createClass({ componentDidMount() { WebhookStore.listen(this.onChange); WebhookActions.fetchWebhooks(); - WebhookActions.fetchWebhookEvents(); }, componentWillUnmount() { @@ -49,7 +48,7 @@ let WebhookSettings = React.createClass({ return (event) => { WebhookActions.removeWebhook(webhookId); - let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000); + const notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000); GlobalNotificationActions.appendGlobalNotification(notification); }; }, @@ -57,16 +56,16 @@ let WebhookSettings = React.createClass({ handleCreateSuccess() { this.refs.webhookCreateForm.reset(); WebhookActions.fetchWebhooks(true); - let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000); + + const notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); }, - getWebhooks(){ - let content = ; - + getWebhooks() { if (this.state.webhooks) { - content = this.state.webhooks.map(function(webhook, i) { + return this.state.webhooks.map(function(webhook, i) { const event = webhook.event.split('.')[0]; + return ( - }/> + } /> ); }, this); + } else { + return ( + + ); } - return content; }, getEvents() { @@ -110,18 +112,18 @@ let WebhookSettings = React.createClass({ ); })}
    ); + } else { + return null; } - return null; }, - render() { return ( - + - { this.getEvents() } + {this.getEvents()} + required />
    @@ -162,4 +163,4 @@ let WebhookSettings = React.createClass({ } }); -export default WebhookSettings; \ No newline at end of file +export default WebhookSettings; diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js index 39d515a3..109bbae7 100644 --- a/js/components/ascribe_slides_container/slides_container.js +++ b/js/components/ascribe_slides_container/slides_container.js @@ -57,21 +57,21 @@ const SlidesContainer = React.createClass({ // When the start_from parameter is used, this.setSlideNum can not simply be used anymore. nextSlide(additionalQueryParams) { const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0; - let nextSlide = slideNum + 1; - this.setSlideNum(nextSlide, additionalQueryParams); + this.setSlideNum(slideNum + 1, additionalQueryParams); }, setSlideNum(nextSlideNum, additionalQueryParams = {}) { - let queryParams = Object.assign(this.props.location.query, additionalQueryParams); - queryParams.slide_num = nextSlideNum; - this.history.pushState(null, this.props.location.pathname, queryParams); + const { location: { pathname } } = this.props; + const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum }); + + this.history.push({ pathname, query }); }, // breadcrumbs are defined as attributes of the slides. // To extract them we have to read the DOM element's attributes extractBreadcrumbs() { const startFrom = parseInt(this.props.location.query.start_from, 10) || -1; - let breadcrumbs = []; + const breadcrumbs = []; React.Children.map(this.props.children, (child, i) => { if(child && i >= startFrom && child.props['data-slide-title']) { @@ -179,4 +179,4 @@ const SlidesContainer = React.createClass({ } }); -export default SlidesContainer; \ No newline at end of file +export default SlidesContainer; diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js index aa0b6691..d5fbf699 100644 --- a/js/components/ascribe_social_share/facebook_share_button.js +++ b/js/components/ascribe_social_share/facebook_share_button.js @@ -2,6 +2,8 @@ import React from 'react'; +import FacebookHandler from '../../third_party/facebook_handler'; + import AppConstants from '../../constants/application_constants'; import { InjectInHeadUtils } from '../../utils/inject_utils'; @@ -17,24 +19,40 @@ let FacebookShareButton = React.createClass({ }; }, - componentDidMount() { - /** - * Ideally we would only use FB.XFBML.parse() on the component that we're - * mounting, but doing this when we first load the FB sdk causes unpredictable behaviour. - * The button sometimes doesn't get initialized, likely because FB hasn't properly - * been initialized yet. - * - * To circumvent this, we always have the sdk parse the entire DOM on the initial load - * (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later. - */ - - InjectInHeadUtils - .inject(AppConstants.facebook.sdkUrl) - .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) }); + getInitialState() { + return FacebookHandler.getState(); }, - shouldComponentUpdate(nextProps) { - return this.props.type !== nextProps.type; + componentDidMount() { + FacebookHandler.listen(this.onChange); + + this.loadFacebook(); + }, + + shouldComponentUpdate(nextProps, nextState) { + // Don't update if the props haven't changed or the FB SDK loading status is still the same + return this.props.type !== nextProps.type || nextState.loaded !== this.state.loaded; + }, + + componentDidUpdate() { + // If the component changes, we need to reparse the share button's XFBML. + // To prevent cases where the Facebook SDK hasn't been loaded yet at this stage, + // let's make sure that it's injected before trying to reparse. + this.loadFacebook(); + }, + + onChange(state) { + this.setState(state); + }, + + loadFacebook() { + InjectInHeadUtils + .inject(AppConstants.facebook.sdkUrl) + .then(() => { + if (this.state.loaded) { + FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parent) + } + }); }, render() { diff --git a/js/components/ascribe_table/models/table_models.js b/js/components/ascribe_table/models/table_models.js index b675d14e..99cf7e64 100644 --- a/js/components/ascribe_table/models/table_models.js +++ b/js/components/ascribe_table/models/table_models.js @@ -2,15 +2,15 @@ export class ColumnModel { // ToDo: Add validation for all passed-in parameters - constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition, className) { + constructor({ transformFn, columnName = '', displayElement, displayType, rowWidth, canBeOrdered, transition, className = '' }) { this.transformFn = transformFn; this.columnName = columnName; - this.displayName = displayName; + this.displayElement = displayElement; this.displayType = displayType; this.rowWidth = rowWidth; this.canBeOrdered = canBeOrdered; this.transition = transition; - this.className = className ? className : ''; + this.className = className; } } @@ -28,7 +28,7 @@ export class ColumnModel { * our selfes, using this TransitionModel. */ export class TransitionModel { - constructor(to, queryKey, valueKey, callback) { + constructor({ to, queryKey, valueKey, callback }) { this.to = to; this.queryKey = queryKey; this.valueKey = valueKey; @@ -38,4 +38,4 @@ export class TransitionModel { toReactRouterLink(queryValue) { return '/' + this.to + '/' + queryValue; } -} \ No newline at end of file +} diff --git a/js/components/ascribe_table/table_header.js b/js/components/ascribe_table/table_header.js index f807627b..78a31681 100644 --- a/js/components/ascribe_table/table_header.js +++ b/js/components/ascribe_table/table_header.js @@ -1,5 +1,5 @@ -'use strict'; +'use strict'; import React from 'react'; import TableHeaderItem from './table_header_item'; @@ -29,7 +29,7 @@ let TableHeader = React.createClass({ - {this.props.displayName} + {displayElement} ); } else { return ( - {this.props.displayName} + {displayElement} ); } } else { return ( - + - {this.props.displayName} + {displayElement} ); diff --git a/js/components/ascribe_table/table_item_acl_filtered.js b/js/components/ascribe_table/table_item_acl_filtered.js index 22a28130..9ca91bcf 100644 --- a/js/components/ascribe_table/table_item_acl_filtered.js +++ b/js/components/ascribe_table/table_item_acl_filtered.js @@ -3,15 +3,15 @@ import React from 'react'; -let TableItemAclFiltered = React.createClass({ +const TableItemAclFiltered = React.createClass({ propTypes: { content: React.PropTypes.object, - notifications: React.PropTypes.string + notifications: React.PropTypes.array }, render() { - var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete']; - if (this.props.notifications && this.props.notifications.length > 0){ + const availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete']; + if (this.props.notifications && this.props.notifications.length) { return ( {this.props.notifications[0].action_str} @@ -19,15 +19,14 @@ let TableItemAclFiltered = React.createClass({ ); } - let filteredAcls = Object.keys(this.props.content).filter((key) => { - return availableAcls.indexOf(key) > -1 && this.props.content[key]; - }); - - filteredAcls = filteredAcls.map((acl) => acl.split('acl_')[1]); + const filteredAcls = Object.keys(this.props.content) + .filter((key) => availableAcls.indexOf(key) > -1 && this.props.content[key]) + .map((acl) => acl.split('acl_')[1]) + .join('/'); return ( - {filteredAcls.join('/')} + {filteredAcls} ); } diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js index 6612f968..ffd26a13 100644 --- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js +++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import classNames from 'classnames'; import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils'; import { getLangText } from '../../../utils/lang_utils'; @@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils'; const { func, array, bool, shape, string } = React.PropTypes; -export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) { +export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) { return React.createClass({ displayName: 'UploadButton', @@ -119,28 +120,28 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } = }, getUploadedFileLabel() { - const uploadedFile = this.getUploadedFile(); - const uploadingFiles = this.getUploadingFiles(); + if (showLabel) { + const uploadedFile = this.getUploadedFile(); + const uploadingFiles = this.getUploadingFiles(); - if(uploadingFiles.length) { - return ( - - {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '} - [
    {getLangText('cancel upload')}] - - ); - } else if(uploadedFile) { - return ( - - - {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '} - [{getLangText('remove')}] - - ); - } else { - return ( - {getLangText('No file chosen')} - ); + if (uploadingFiles.length) { + return ( + + {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '} + [{getLangText('cancel upload')}] + + ); + } else if (uploadedFile) { + return ( + + + {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '} + [{getLangText('remove')}] + + ); + } else { + return {getLangText('No file chosen')}; + } } }, @@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } = * Therefore the wrapping component needs to be an `anchor` tag instead of a `button` */ return ( -
    +
    {/* The button needs to be of `type="button"` as it would otherwise submit the form its in. diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 877146a5..feb0479d 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -36,17 +36,11 @@ const ReactS3FineUploader = React.createClass({ keyRoutine: shape({ url: string, fileClass: string, - pieceId: oneOfType([ - string, - number - ]) + pieceId: number }), createBlobRoutine: shape({ url: string, - pieceId: oneOfType([ - string, - number - ]) + pieceId: number }), handleChangedFile: func, // is for when a file is dropped or selected submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile diff --git a/js/components/global_action.js b/js/components/global_action.js deleted file mode 100644 index 80df0c75..00000000 --- a/js/components/global_action.js +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -import React from 'react'; - -let GlobalAction = React.createClass({ - propTypes: { - requestActions: React.PropTypes.object - }, - - render() { - let pieceActions = null; - if (this.props.requestActions && this.props.requestActions.pieces){ - pieceActions = this.props.requestActions.pieces.map((item) => { - return ( -
    - {item} -
    ); - }); - } - let editionActions = null; - if (this.props.requestActions && this.props.requestActions.editions){ - editionActions = Object.keys(this.props.requestActions.editions).map((pieceId) => { - return this.props.requestActions.editions[pieceId].map((item) => { - return ( -
    - {item} -
    ); - }); - }); - } - - if (pieceActions || editionActions) { - return ( -
    - {pieceActions} - {editionActions} -
    ); - } - return null; - } -}); - -export default GlobalAction; \ No newline at end of file diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js index 31275a08..6d2d089e 100644 --- a/js/components/password_reset_container.js +++ b/js/components/password_reset_container.js @@ -130,8 +130,9 @@ let PasswordResetForm = React.createClass({ }, handleSuccess() { - this.history.pushState(null, '/collection'); - let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000); + this.history.push('/collection'); + + const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, diff --git a/js/components/piece_list.js b/js/components/piece_list.js index de979e65..666d1b54 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -115,13 +115,13 @@ let PieceList = React.createClass({ }, componentDidUpdate() { - const { redirectTo, shouldRedirect } = this.props; + const { location: { query }, redirectTo, shouldRedirect } = this.props; const { unfilteredPieceListCount } = this.state; if (redirectTo && unfilteredPieceListCount === 0 && (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) { // FIXME: hack to redirect out of the dispatch cycle - window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0); + window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0); } }, @@ -174,15 +174,16 @@ let PieceList = React.createClass({ } }, - searchFor(searchTerm) { - this.loadPieceList({ - page: 1, - search: searchTerm - }); - this.history.pushState(null, this.props.location.pathname, {page: 1}); + searchFor(search) { + const { location: { pathname } } = this.props; + + this.loadPieceList({ search, page: 1 }); + this.history.push({ pathname, query: { page: 1 } }); }, - applyFilterBy(filterBy){ + applyFilterBy(filterBy) { + const { location: { pathname } } = this.props; + this.setState({ isFilterDirty: true }); @@ -195,31 +196,32 @@ let PieceList = React.createClass({ this.state.pieceList .forEach((piece) => { // but only if they're actually open - if(this.state.isEditionListOpenForPieceId[piece.id].show) { + const isEditionListOpenForPiece = this.state.isEditionListOpenForPieceId[piece.id]; + + if (isEditionListOpenForPiece && isEditionListOpenForPiece.show) { EditionListActions.refreshEditionList({ pieceId: piece.id, filterBy }); } - }); }); // we have to redirect the user always to page one as it could be that there is no page two // for filtered pieces - this.history.pushState(null, this.props.location.pathname, {page: 1}); + this.history.push({ pathname, query: { page: 1 } }); }, applyOrderBy(orderBy) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, page, pageSize, search } = this.state; + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); }, loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) { + const { orderAsc, pageSize } = this.state; const orderBy = this.state.orderBy || this.props.orderBy; - return PieceListActions.fetchPieceList(page, this.state.pageSize, search, - orderBy, this.state.orderAsc, filterBy); + return PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); }, fetchSelectedPieceEditionList() { @@ -245,8 +247,9 @@ let PieceList = React.createClass({ }, handleAclSuccess() { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderBy, orderAsc, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); this.fetchSelectedPieceEditionList() .forEach((pieceId) => { diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 8211e91e..3f268760 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -65,26 +65,21 @@ let RegisterPiece = React.createClass( { this.setState(state); }, - handleSuccess(response){ - let notification = new GlobalNotificationModel(response.notification, 'success', 10000); + handleSuccess(response) { + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + const notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); // once the user was able to register a piece successfully, we need to make sure to keep // the piece list up to date - PieceListActions.fetchPieceList( - this.state.page, - this.state.pageSize, - this.state.searchTerm, - this.state.orderBy, - this.state.orderAsc, - this.state.filterBy - ); + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); - this.history.pushState(null, `/pieces/${response.piece.id}`); + this.history.push(`/pieces/${response.piece.id}`); }, getSpecifyEditions() { - if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) { + if (this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) { return ( + min={1} + max={100} /> ); } diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js index e3d5ab93..2ef96661 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js @@ -106,7 +106,7 @@ const PRRegisterPieceForm = React.createClass({ GlobalNotificationActions.appendGlobalNotification(notificationMessage); }); }) - .then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`)) + .then(() => this.history.push(`/pieces/${this.state.piece.id}`)) .catch((err) => { const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) + getLangText(' Please contact support@ascribe.io'); @@ -193,11 +193,12 @@ const PRRegisterPieceForm = React.createClass({ render() { const { location } = this.props; + const maxThumbnailSize = AppConstants.fineUploader.validation.workThumbnail.sizeLimit / 1000000; return (
    + label={`${getLangText('Featured Cover photo')} max ${maxThumbnailSize}MB`}>
    this.history.replaceState(null, `/${location.query.redirect}`, queryCopy)); + if (location && location.query && location.query.redirect) { + window.setTimeout(() => this.history.replace({ + pathname: `/${location.query.redirect}`, + query: omitFromObject(location.query, ['redirect']) + })); } }, @@ -125,4 +128,4 @@ const PRLanding = React.createClass({ } }); -export default PRLanding; \ No newline at end of file +export default PRLanding; diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js index d7aa1aa8..99c9a401 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js @@ -39,7 +39,7 @@ const PRRegisterPiece = React.createClass({ if(currentUser && currentUser.email) { const submittedPieceId = getCookie(currentUser.email); if(submittedPieceId) { - this.history.pushState(null, `/pieces/${submittedPieceId}`); + this.history.push(`/pieces/${submittedPieceId}`); } } }, diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js b/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js index 04ff8ce6..f81c4539 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js @@ -17,7 +17,7 @@ export function AuthPrizeRoleRedirect({ to, when }) { .reduce((a, b) => a || b); if (exprToValidate) { - window.setTimeout(() => history.replaceState(null, to, query)); + window.setTimeout(() => history.replace({ query, pathname: to })); return true; } else { return false; diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js index 3fc3f5fd..e34f8347 100644 --- a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js +++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js @@ -58,8 +58,9 @@ let AccordionListItemPrize = React.createClass({ }, handleSubmitPrizeSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); let notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); @@ -138,8 +139,9 @@ let AccordionListItemPrize = React.createClass({ }, refreshPieceData() { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); }, onSelectChange(){ diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js index c5ab2c81..bdaf385d 100644 --- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js +++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js @@ -60,16 +60,10 @@ let PrizePieceContainer = React.createClass({ mixins: [ReactError], getInitialState() { - //FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data - // It should instead use something like getInitialState() where that call also resets the state. - return UserStore.getState(); - }, - - componentWillMount() { - // Every time we enter the piece detail page, just reset the piece - // store as it will otherwise display wrong/old data once the user loads - // the piece detail a second time - PieceActions.updatePiece({}); + return mergeOptions( + PieceStore.getInitialState(), + UserStore.getState() + ); }, componentDidMount() { @@ -81,18 +75,19 @@ let PrizePieceContainer = React.createClass({ }, // This is done to update the container when the user clicks on the prev or next - // button to update the URL parameter (and therefore to switch pieces) + // button to update the URL parameter (and therefore to switch pieces) or + // when the user clicks on a notification while being in another piece view componentWillReceiveProps(nextProps) { if (this.props.params.pieceId !== nextProps.params.pieceId) { - PieceActions.updatePiece({}); + PieceActions.flushPiece(); this.loadPiece(nextProps.params.pieceId); } }, componentDidUpdate() { - const { pieceError } = this.state; + const { pieceMeta: { err: pieceErr } } = this.state; - if (pieceError && pieceError.status === 404) { + if (pieceErr && pieceErr.status === 404) { this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist."))); } }, @@ -109,25 +104,25 @@ let PrizePieceContainer = React.createClass({ getActions() { const { currentUser, piece } = this.state; - if (piece && piece.notifications && piece.notifications.length > 0) { + if (piece.notifications && piece.notifications.length > 0) { return ( ); + notifications={piece.notifications} />); } }, loadPiece(pieceId = this.props.params.pieceId) { - PieceActions.fetchOne(pieceId); + PieceActions.fetchPiece(pieceId); }, render() { const { selectedPrizeActionButton } = this.props; const { currentUser, piece } = this.state; - if (piece && piece.id) { + if (piece.id) { /* This really needs a refactor! @@ -138,16 +133,19 @@ let PrizePieceContainer = React.createClass({ // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted let artistName; if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) { - artistName =
    - } + } subheader={ @@ -218,17 +215,19 @@ let NavigationHeader = React.createClass({
    ); + } else { + return null; } - return null; } }); let PrizePieceRatings = React.createClass({ propTypes: { - loadPiece: React.PropTypes.func, - piece: React.PropTypes.object, - currentUser: React.PropTypes.object, + currentUser: React.PropTypes.object.isRequired, + loadPiece: React.PropTypes.func.isRequired, + piece: React.PropTypes.object.isRequired, + selectedPrizeActionButton: React.PropTypes.func }, @@ -241,12 +240,18 @@ let PrizePieceRatings = React.createClass({ }, componentDidMount() { - PieceListStore.listen(this.onChange); - PrizeStore.listen(this.onChange); PrizeRatingStore.listen(this.onChange); + PrizeStore.listen(this.onChange); + PieceListStore.listen(this.onChange); PrizeActions.fetchPrize(); - this.fetchPrizeRatings(); + this.fetchRatingsIfAuthorized(); + }, + + componentWillReceiveProps(nextProps) { + if (nextProps.currentUser.email !== this.props.currentUser.email) { + this.fetchRatingsIfAuthorized(); + } }, componentWillUnmount() { @@ -261,7 +266,7 @@ let PrizePieceRatings = React.createClass({ // with the problem. onChange(state) { if (state.prize && state.prize.active_round != this.state.prize.active_round) { - this.fetchPrizeRatings(state); + this.fetchRatingsIfAuthorized(state); } this.setState(state); @@ -276,9 +281,19 @@ let PrizePieceRatings = React.createClass({ } }, - fetchPrizeRatings(state = this.state) { - PrizeRatingActions.fetchOne(this.props.piece.id, state.prize.active_round); - PrizeRatingActions.fetchAverage(this.props.piece.id, state.prize.active_round); + fetchRatingsIfAuthorized(state = this.state) { + const { + currentUser: { + is_admin: isAdmin, + is_judge: isJudge, + is_jury: isJury + }, + piece: { id: pieceId } } = this.props; + + if (state.prize && 'active_round' in state.prize && (isAdmin || isJudge || isJury)) { + PrizeRatingActions.fetchOne(pieceId, state.prize.active_round); + PrizeRatingActions.fetchAverage(pieceId, state.prize.active_round); + } }, onRatingClick(event, args) { @@ -303,9 +318,10 @@ let PrizePieceRatings = React.createClass({ }, refreshPieceData() { + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + this.props.loadPiece(); - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); }, onSelectChange() { @@ -322,7 +338,7 @@ let PrizePieceRatings = React.createClass({ }, render() { - if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) { + if (this.props.piece.id && this.props.currentUser.is_judge && this.state.average) { // Judge sees shortlisting, average and per-jury notes return (
    @@ -354,7 +370,7 @@ let PrizePieceRatings = React.createClass({ size='md' step={0.5} rating={this.state.average} - ratingAmount={5}/> + ratingAmount={5} />

    {this.state.ratings.map((item, i) => { @@ -379,7 +395,7 @@ let PrizePieceRatings = React.createClass({ size='sm' step={0.5} rating={item.rating} - ratingAmount={5}/> + ratingAmount={5} /> {item.user} {note} @@ -390,7 +406,7 @@ let PrizePieceRatings = React.createClass({
    ); - } else if (this.props.currentUser && this.props.currentUser.is_jury) { + } else if (this.props.currentUser.is_jury) { // Jury can set rating and note return ( {return {'piece_id': this.props.piece.id}; }} + id={() => ({ 'piece_id': this.props.piece.id })} label={getLangText('Jury note')} - defaultValue={this.props.piece && this.props.piece.note_from_user ? this.props.piece.note_from_user.note : null} + defaultValue={this.props.piece.note_from_user || null} placeholder={getLangText('Enter your comments ...')} editable={true} successMessage={getLangText('Jury note saved')} url={ApiUrls.notes} - currentUser={this.props.currentUser}/> + currentUser={this.props.currentUser} /> ); } else { return null; @@ -426,39 +442,40 @@ let PrizePieceRatings = React.createClass({ let PrizePieceDetails = React.createClass({ propTypes: { - piece: React.PropTypes.object + piece: React.PropTypes.object.isRequired }, render() { const { piece } = this.props; - if (piece && - piece.prize && - piece.prize.name && - Object.keys(piece.extra_data).length !== 0) { + if (piece.prize && piece.prize.name && Object.keys(piece.extra_data).length) { return ( - - {Object.keys(piece.extra_data).sort().map((data) => { - // Remove leading number (for sorting), if any, and underscores with spaces - let label = data.replace(/^\d-/, '').replace(/_/g, ' '); - const value = piece.extra_data[data] || 'N/A'; + + {Object + .keys(piece.extra_data) + .sort() + .map((data) => { + // Remove leading number (for sorting), if any, and underscores with spaces + const label = data.replace(/^\d-/, '').replace(/_/g, ' '); + const value = piece.extra_data[data] || 'N/A'; - return ( - - - - ); - })} + return ( + + + + ); + }) + } {}} setIsUploadReady={() => {}} @@ -471,8 +488,9 @@ let PrizePieceDetails = React.createClass({ ); + } else { + return null; } - return null; } }); diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_landing.js b/js/components/whitelabel/prize/simple_prize/components/prize_landing.js index e26a05b5..82a21eab 100644 --- a/js/components/whitelabel/prize/simple_prize/components/prize_landing.js +++ b/js/components/whitelabel/prize/simple_prize/components/prize_landing.js @@ -46,7 +46,7 @@ let Landing = React.createClass({ // if user is already logged in, redirect him to piece list if(this.state.currentUser && this.state.currentUser.email) { // FIXME: hack to redirect out of the dispatch cycle - window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); + window.setTimeout(() => this.history.replace('/collection'), 0); } }, diff --git a/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js b/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js index 6c478f3c..d3544f71 100644 --- a/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js +++ b/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js @@ -14,6 +14,18 @@ class PrizeRatingStore { }); } + getInitialState() { + this.ratings = []; + this.currentRating = null; + this.average = null; + + return { + ratings: this.ratings, + currentRating: this.currentRating, + average: this.average + }; + } + onUpdatePrizeRatings(ratings) { this.ratings = ratings; } @@ -30,18 +42,6 @@ class PrizeRatingStore { onResetPrizeRatings() { this.getInitialState(); } - - getInitialState() { - this.ratings = []; - this.currentRating = null; - this.average = null; - - return { - ratings: this.ratings, - currentRating: this.currentRating, - average: this.average - }; - } } -export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore'); \ No newline at end of file +export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore'); diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js index 4be15b04..ed8da83b 100644 --- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js +++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js @@ -32,55 +32,62 @@ let WalletPieceContainer = React.createClass({ ]) }, - render() { - if (this.props.piece && this.props.piece.id) { + const { + children, + currentUser, + handleDeleteSuccess, + loadPiece, + piece, + submitButtonType } = this.props; + + if (piece && piece.id) { return (
    -

    {this.props.piece.title}

    - - +

    {piece.title}

    + +
    } subheader={
    - - + +
    }> + piece={piece} + currentUser={currentUser} + loadPiece={loadPiece} + handleDeleteSuccess={handleDeleteSuccess} + submitButtonType={submitButtonType}/> 0}> + show={piece.loan_history && piece.loan_history.length > 0}> + history={piece.loan_history}/> + show={!!(currentUser.username || piece.public_note)}> {return {'id': this.props.piece.id}; }} + id={() => {return {'id': piece.id}; }} label={getLangText('Personal note (private)')} - defaultValue={this.props.piece.private_note || null} + defaultValue={piece.private_note || null} placeholder={getLangText('Enter your comments ...')} editable={true} successMessage={getLangText('Private note saved')} url={ApiUrls.note_private_piece} - currentUser={this.props.currentUser}/> + currentUser={currentUser}/> - {this.props.children} + {children}
    ); } else { diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js index 9d88408f..ebdef4f4 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js @@ -52,8 +52,9 @@ let CylandAccordionListItem = React.createClass({ }, handleSubmitSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); let notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js index d211d3e8..5fc3901f 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js @@ -40,7 +40,7 @@ let CylandPieceContainer = React.createClass({ getInitialState() { return mergeOptions( - PieceStore.getState(), + PieceStore.getInitialState(), UserStore.getState(), PieceListStore.getState() ); @@ -51,14 +51,17 @@ let CylandPieceContainer = React.createClass({ UserStore.listen(this.onChange); PieceListStore.listen(this.onChange); - // Every time we enter the piece detail page, just reset the piece - // store as it will otherwise display wrong/old data once the user loads - // the piece detail a second time - PieceActions.updatePiece({}); - this.loadPiece(); }, + // We need this for when the user clicks on a notification while being in another piece view + componentWillReceiveProps(nextProps) { + if (this.props.params.pieceId !== nextProps.params.pieceId) { + PieceActions.flushPiece(); + this.loadPiece(); + } + }, + componentWillUnmount() { PieceStore.unlisten(this.onChange); UserStore.unlisten(this.onChange); @@ -70,31 +73,34 @@ let CylandPieceContainer = React.createClass({ }, loadPiece() { - PieceActions.fetchOne(this.props.params.pieceId); + PieceActions.fetchPiece(this.props.params.pieceId); }, handleDeleteSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); // since we're deleting a piece, we just need to close // all editions dialogs and not reload them EditionListActions.closeAllEditionLists(); EditionListActions.clearAllEditionSelections(); - let notification = new GlobalNotificationModel(response.notification, 'success'); + const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.pushState(null, '/collection'); + this.history.push('/collection'); }, render() { - if(this.state.piece && this.state.piece.id) { - setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', ')); + const { piece } = this.state; + + if (piece.id) { + setDocumentTitle(`${piece.artist_name}, ${piece.title}`); return ( ); - } - else { + } else { return (
    diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js index 93cc515a..6e643134 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js @@ -23,9 +23,10 @@ import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_ let CylandAdditionalDataForm = React.createClass({ propTypes: { - handleSuccess: React.PropTypes.func, piece: React.PropTypes.object.isRequired, + disabled: React.PropTypes.bool, + handleSuccess: React.PropTypes.func, isInline: React.PropTypes.bool }, @@ -42,13 +43,13 @@ let CylandAdditionalDataForm = React.createClass({ }, handleSuccess() { - let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000); + const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, getFormData() { - let extradata = {}; - let formRefs = this.refs.form.refs; + const extradata = {}; + const formRefs = this.refs.form.refs; // Put additional fields in extra data object Object @@ -71,10 +72,13 @@ let CylandAdditionalDataForm = React.createClass({ }, render() { - let { piece, isInline, disabled, handleSuccess, location } = this.props; - let buttons, spinner, heading; + const { disabled, handleSuccess, isInline, piece } = this.props; - if(!isInline) { + let buttons; + let spinner; + let heading; + + if (!isInline) { buttons = (
    ); @@ -101,13 +105,15 @@ let CylandAdditionalDataForm = React.createClass({ ); } - if(piece && piece.id) { + if (piece.id) { + const { extra_data: extraData = {} } = piece; + return (
    + expanded={!disabled || !!extraData.artist_bio}> + defaultValue={extraData.artist_bio} + placeholder={getLangText('Enter the artist\'s biography...')} /> + expanded={!disabled || !!extraData.artist_contact_information}> + defaultValue={extraData.artist_contact_information} + placeholder={getLangText('Enter the artist\'s contact information...')} /> + expanded={!disabled || !!extraData.conceptual_overview}> + defaultValue={extraData.conceptual_overview} + placeholder={getLangText('Enter a conceptual overview...')} /> + expanded={!disabled || !!extraData.medium}> + defaultValue={extraData.medium} + placeholder={getLangText('Enter the medium (and other technical specifications)...')} /> + expanded={!disabled || !!extraData.size_duration}> + defaultValue={extraData.size_duration} + placeholder={getLangText('Enter the size / duration...')} /> + expanded={!disabled || !!extraData.display_instructions}> + defaultValue={extraData.display_instructions} + placeholder={getLangText('Enter the display instructions...')} /> + expanded={!disabled || !!extraData.additional_details}> + defaultValue={extraData.additional_details} + placeholder={getLangText('Enter additional details...')} /> - + ); } diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js index 21f8835a..0a8dadd1 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js @@ -49,7 +49,7 @@ let CylandLanding = React.createClass({ // if user is already logged in, redirect him to piece list if(this.state.currentUser && this.state.currentUser.email) { // FIXME: hack to redirect out of the dispatch cycle - window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); + window.setTimeout(() => this.history.replace('/collection'), 0); } }, diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js index fabed011..88088e9d 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js @@ -52,7 +52,7 @@ let CylandRegisterPiece = React.createClass({ return mergeOptions( UserStore.getState(), PieceListStore.getState(), - PieceStore.getState(), + PieceStore.getInitialState(), WhitelabelStore.getState(), { step: 0 @@ -67,7 +67,7 @@ let CylandRegisterPiece = React.createClass({ UserActions.fetchCurrentUser(); WhitelabelActions.fetchWhitelabel(); - let queryParams = this.props.location.query; + const queryParams = this.props.location.query; // Since every step of this register process is atomic, // we may need to enter the process at step 1 or 2. @@ -76,8 +76,8 @@ let CylandRegisterPiece = React.createClass({ // // We're using 'in' here as we want to know if 'piece_id' is present in the url, // we don't care about the value. - if(queryParams && 'piece_id' in queryParams) { - PieceActions.fetchOne(queryParams.piece_id); + if ('piece_id' in queryParams) { + PieceActions.fetchPiece(queryParams.piece_id); } }, @@ -92,64 +92,50 @@ let CylandRegisterPiece = React.createClass({ this.setState(state); }, - handleRegisterSuccess(response){ - + handleRegisterSuccess(response) { this.refreshPieceList(); - // also start loading the piece for the next step - if(response && response.piece) { - PieceActions.updatePiece({}); + // Also load the newly registered piece for the next step + if (response && response.piece) { PieceActions.updatePiece(response.piece); } - this.incrementStep(); - - this.refs.slidesContainer.nextSlide({ piece_id: response.piece.id }); + this.nextSlide({ piece_id: response.piece.id }); }, handleAdditionalDataSuccess() { - // We need to refetch the piece again after submitting the additional data - // since we want it's otherData to be displayed when the user choses to click + // since we want its otherData to be displayed when the user choses to click // on the browsers back button. - PieceActions.fetchOne(this.state.piece.id); + PieceActions.fetchPiece(this.state.piece.id); this.refreshPieceList(); - this.incrementStep(); - - this.refs.slidesContainer.nextSlide(); + this.nextSlide(); }, handleLoanSuccess(response) { - let notification = new GlobalNotificationModel(response.notification, 'success', 10000); + const notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); this.refreshPieceList(); - PieceActions.fetchOne(this.state.piece.id); - - this.history.pushState(null, `/pieces/${this.state.piece.id}`); + this.history.push(`/pieces/${this.state.piece.id}`); }, - // We need to increase the step to lock the forms that are already filled out - incrementStep() { - // also increase step - let newStep = this.state.step + 1; + nextSlide(queryParams) { + // We need to increase the step to lock the forms that are already filled out this.setState({ - step: newStep + step: this.state.step + 1 }); + + this.refs.slidesContainer.nextSlide(queryParams); }, refreshPieceList() { - PieceListActions.fetchPieceList( - this.state.page, - this.state.pageSize, - this.state.searchTerm, - this.state.orderBy, - this.state.orderAsc, - this.state.filterBy - ); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); }, render() { @@ -157,8 +143,7 @@ let CylandRegisterPiece = React.createClass({ const { currentUser, piece, step, whitelabel } = this.state; const today = new Moment(); - const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment(); - datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain.add(1000, 'years'); + const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment().add(1000, 'years'); const loanHeading = getLangText('Loan to Cyland archive'); const loanButtons = ( @@ -201,7 +186,7 @@ let CylandRegisterPiece = React.createClass({ submitMessage={getLangText('Submit')} isFineUploaderActive={true} handleSuccess={this.handleRegisterSuccess} - location={location}/> + location={location} /> diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js index ce8cebf5..46763e2b 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js @@ -53,8 +53,9 @@ let IkonotvAccordionListItem = React.createClass({ }, handleSubmitSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); let notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js index 7975c1f3..4f6a88a1 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js @@ -119,7 +119,7 @@ let IkonotvContractNotifications = React.createClass({ NotificationActions.flushContractAgreementListNotifications(); NotificationActions.fetchContractAgreementListNotifications(); - this.history.pushState(null, '/collection'); + this.history.push('/collection'); }, handleDeny() { @@ -132,7 +132,7 @@ let IkonotvContractNotifications = React.createClass({ handleDenySuccess() { let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.pushState(null, '/collection'); + this.history.push('/collection'); }, getCopyrightAssociationForm(){ diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js index df58b7c7..a1280cc8 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js @@ -41,7 +41,7 @@ let IkonotvPieceContainer = React.createClass({ getInitialState() { return mergeOptions( - PieceStore.getState(), + PieceStore.getInitialState(), UserStore.getState(), PieceListStore.getState() ); @@ -52,19 +52,14 @@ let IkonotvPieceContainer = React.createClass({ UserStore.listen(this.onChange); PieceListStore.listen(this.onChange); - // Every time we enter the piece detail page, just reset the piece - // store as it will otherwise display wrong/old data once the user loads - // the piece detail a second time - PieceActions.updatePiece({}); - this.loadPiece(); }, - // We need this for when the user clicks on a notification while being in another piece view + // We need this for when the user clicks on a notification while being in another piece view componentWillReceiveProps(nextProps) { - if(this.props.params.pieceId !== nextProps.params.pieceId) { - PieceActions.updatePiece({}); - PieceActions.fetchOne(nextProps.params.pieceId); + if (this.props.params.pieceId !== nextProps.params.pieceId) { + PieceActions.flushPiece(); + this.loadPiece(); } }, @@ -79,25 +74,28 @@ let IkonotvPieceContainer = React.createClass({ }, loadPiece() { - PieceActions.fetchOne(this.props.params.pieceId); + PieceActions.fetchPiece(this.props.params.pieceId); }, handleDeleteSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); // since we're deleting a piece, we just need to close // all editions dialogs and not reload them EditionListActions.closeAllEditionLists(); EditionListActions.clearAllEditionSelections(); - let notification = new GlobalNotificationModel(response.notification, 'success'); + const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.pushState(null, '/collection'); + this.history.push('/collection'); }, render() { + const { piece } = this.state; + let furtherDetails = ( ); - if(this.state.piece.extra_data && Object.keys(this.state.piece.extra_data).length > 0 && this.state.piece.acl) { + if (piece.extra_data && Object.keys(piece.extra_data).length && piece.acl) { furtherDetails = ( + disabled={!piece.acl.acl_edit} /> + disabled={!piece.acl.acl_edit} /> ); } - if(this.state.piece && this.state.piece.id) { - setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', ')); + if (piece.id) { + setDocumentTitle(`${piece.artist_name}, ${piece.title}`); + return ( ); - } - else { + } else { return (
    diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js index 0b97c8dd..598f5bd0 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js @@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils'; let IkonotvArtistDetailsForm = React.createClass({ propTypes: { - handleSuccess: React.PropTypes.func, piece: React.PropTypes.object.isRequired, disabled: React.PropTypes.bool, - + handleSuccess: React.PropTypes.func, isInline: React.PropTypes.bool }, @@ -35,8 +34,8 @@ let IkonotvArtistDetailsForm = React.createClass({ }, getFormData() { - let extradata = {}; - let formRefs = this.refs.form.refs; + const extradata = {}; + const formRefs = this.refs.form.refs; // Put additional fields in extra data object Object @@ -53,20 +52,23 @@ let IkonotvArtistDetailsForm = React.createClass({ }, handleSuccess() { - let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000); + const notification = new GlobalNotificationModel(getLangText('Artist details successfully updated'), 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, render() { - let buttons, spinner, heading; - let { isInline, handleSuccess } = this.props; + const { disabled, isInline, handleSuccess, piece } = this.props; + + let buttons; + let spinner; + let heading; if (!isInline) { buttons = ( ); @@ -74,7 +76,7 @@ let IkonotvArtistDetailsForm = React.createClass({ spinner = (

    - +

    ); @@ -88,13 +90,15 @@ let IkonotvArtistDetailsForm = React.createClass({ ); } - if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) { + if (piece.id) { + const { extra_data: extraData = {} } = piece; + return ( + expanded={!disabled || !!extraData.artist_website}> + defaultValue={extraData.artist_website} + placeholder={getLangText('The artist\'s website if present...')} /> + expanded={!disabled || !!extraData.gallery_website}> + defaultValue={extraData.gallery_website} + placeholder={getLangText('The website of any related Gallery or Museum')} /> + expanded={!disabled || !!extraData.additional_websites}> + defaultValue={extraData.additional_websites} + placeholder={getLangText('Enter additional Websites/Publications if any')} /> + expanded={!disabled || !!extraData.conceptual_overview}> + defaultValue={extraData.conceptual_overview} + placeholder={getLangText('Enter a short bio about the Artist')} /> ); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js index bcf6830d..28c67c94 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js @@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils'; let IkonotvArtworkDetailsForm = React.createClass({ propTypes: { - handleSuccess: React.PropTypes.func, piece: React.PropTypes.object.isRequired, disabled: React.PropTypes.bool, - + handleSuccess: React.PropTypes.func, isInline: React.PropTypes.bool }, @@ -35,8 +34,8 @@ let IkonotvArtworkDetailsForm = React.createClass({ }, getFormData() { - let extradata = {}; - let formRefs = this.refs.form.refs; + const extradata = {}; + const formRefs = this.refs.form.refs; // Put additional fields in extra data object Object @@ -53,20 +52,23 @@ let IkonotvArtworkDetailsForm = React.createClass({ }, handleSuccess() { - let notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000); + const notification = new GlobalNotificationModel(getLangText('Artwork details successfully updated'), 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, render() { - let buttons, spinner, heading; - let { isInline, handleSuccess } = this.props; + const { disabled, isInline, handleSuccess, piece } = this.props; + + let buttons; + let spinner; + let heading; if (!isInline) { buttons = ( ); @@ -74,7 +76,7 @@ let IkonotvArtworkDetailsForm = React.createClass({ spinner = (

    - +

    ); @@ -88,13 +90,15 @@ let IkonotvArtworkDetailsForm = React.createClass({ ); } - if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) { + if (piece.id && piece.extra_data) { + const { extra_data: extraData = {} } = piece; + return (
    + expanded={!disabled || !!extraData.medium}> + defaultValue={extraData.medium} + placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')} /> + expanded={!disabled || !!extraData.size_duration}> + defaultValue={extraData.size_duration} + placeholder={getLangText('Size in centimeters. Duration in minutes.')} /> + expanded={!disabled || !!extraData.copyright}> + defaultValue={extraData.copyright} + placeholder={getLangText('Which copyright is attached to this work?')} /> + expanded={!disabled || !!extraData.courtesy_of}> + defaultValue={extraData.courtesy_of} + placeholder={getLangText('The current owner of the artwork')} /> + expanded={!disabled || !!extraData.copyright_of_photography}> + defaultValue={extraData.copyright_of_photography} + placeholder={getLangText('Who should be attributed for the photography?')} /> + expanded={!disabled || !!extraData.additional_details}> + defaultValue={extraData.additional_details} + placeholder={getLangText('Insert artwork overview')} /> ); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js index c40d779d..d2e3ac99 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js @@ -49,7 +49,7 @@ let IkonotvRegisterPiece = React.createClass({ return mergeOptions( UserStore.getState(), PieceListStore.getState(), - PieceStore.getState(), + PieceStore.getInitialState(), WhitelabelStore.getState(), { step: 0, @@ -65,11 +65,7 @@ let IkonotvRegisterPiece = React.createClass({ UserActions.fetchCurrentUser(); WhitelabelActions.fetchWhitelabel(); - // Before we load the new piece, we reset the piece store to delete old data that we do - // not want to display to the user. - PieceActions.updatePiece({}); - - let queryParams = this.props.location.query; + const queryParams = this.props.location.query; // Since every step of this register process is atomic, // we may need to enter the process at step 1 or 2. @@ -78,8 +74,8 @@ let IkonotvRegisterPiece = React.createClass({ // // We're using 'in' here as we want to know if 'piece_id' is present in the url, // we don't care about the value. - if (queryParams && 'piece_id' in queryParams) { - PieceActions.fetchOne(queryParams.piece_id); + if ('piece_id' in queryParams) { + PieceActions.fetchPiece(queryParams.piece_id); } }, @@ -95,72 +91,62 @@ let IkonotvRegisterPiece = React.createClass({ }, - handleRegisterSuccess(response){ + handleRegisterSuccess(response) { this.refreshPieceList(); - // also start loading the piece for the next step - if(response && response.piece) { + // Also load the newly registered piece for the next step + if (response && response.piece) { PieceActions.updatePiece(response.piece); } + if (!this.canSubmit()) { - this.history.pushState(null, '/collection'); - } - else { - this.incrementStep(); - this.refs.slidesContainer.nextSlide(); + this.history.push('/collection'); + } else { + this.nextSlide({ piece_id: response.piece.id }); } }, handleAdditionalDataSuccess() { - // We need to refetch the piece again after submitting the additional data // since we want it's otherData to be displayed when the user choses to click // on the browsers back button. - PieceActions.fetchOne(this.state.piece.id); + PieceActions.fetchPiece(this.state.piece.id); this.refreshPieceList(); - this.incrementStep(); - - this.refs.slidesContainer.nextSlide(); + this.nextSlide(); }, handleLoanSuccess(response) { this.setState({ pageExitWarning: null }); - let notification = new GlobalNotificationModel(response.notification, 'success', 10000); + const notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); this.refreshPieceList(); - PieceActions.fetchOne(this.state.piece.id); - this.history.pushState(null, `/pieces/${this.state.piece.id}`); + this.history.push(`/pieces/${this.state.piece.id}`); }, - // We need to increase the step to lock the forms that are already filled out - incrementStep() { - // also increase step - let newStep = this.state.step + 1; + nextSlide(queryParams) { + // We need to increase the step to lock the forms that are already filled out this.setState({ - step: newStep + step: this.state.step + 1 }); + + this.refs.slidesContainer.nextSlide(queryParams); }, refreshPieceList() { - PieceListActions.fetchPieceList( - this.state.page, - this.state.pageSize, - this.state.searchTerm, - this.state.orderBy, - this.state.orderAsc, - this.state.filterBy - ); + const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; + + PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); }, canSubmit() { let currentUser = this.state.currentUser; let whitelabel = this.state.whitelabel; - return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user; + return currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel.user; }, getSlideArtistDetails() { @@ -171,13 +157,14 @@ let IkonotvRegisterPiece = React.createClass({ + piece={this.state.piece} />
    ); + } else { + return null; } - return null; }, getSlideArtworkDetails() { @@ -188,21 +175,21 @@ let IkonotvRegisterPiece = React.createClass({ + piece={this.state.piece} /> ); + } else { + return null; } - return null; }, getSlideLoan() { if (this.canSubmit()) { const { piece, whitelabel } = this.state; - let today = new Moment(); - let endDate = new Moment(); - endDate.add(2, 'years'); + const today = new Moment(); + const endDate = new Moment().add(2, 'years'); return (
    @@ -225,8 +212,9 @@ let IkonotvRegisterPiece = React.createClass({
    ); + } else { + return null; } - return null; }, render() { @@ -252,7 +240,7 @@ let IkonotvRegisterPiece = React.createClass({ submitMessage={getLangText('Register')} isFineUploaderActive={true} handleSuccess={this.handleRegisterSuccess} - location={this.props.location}/> + location={this.props.location} /> 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 d8ef4c41..c839dea0 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 EditionActions from '../../../../../../actions/edition_actions'; + +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,10 +16,7 @@ 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'; @@ -26,8 +28,9 @@ let MarketSubmitButton = React.createClass({ availableAcls: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object, editions: React.PropTypes.array.isRequired, - handleSuccess: React.PropTypes.func.isRequired, + className: React.PropTypes.string, + handleSuccess: React.PropTypes.func }, getInitialState() { @@ -50,22 +53,21 @@ let MarketSubmitButton = React.createClass({ canEditionBeSubmitted(edition) { if (edition && edition.extra_data && edition.other_data) { - const { extra_data, other_data } = edition; + const { + extra_data: { + artist_bio: artistBio, + display_instructions: displayInstructions, + technology_details: technologyDetails, + work_description: workDescription + }, + other_data: otherData } = edition; - if (extra_data.artist_bio && extra_data.work_description && - extra_data.technology_details && extra_data.display_instructions && - other_data.length > 0) { - return true; - } + return artistBio && displayInstructions && technologyDetails && workDescription && otherData.length; } return false; }, - getFormDataId() { - return getAclFormDataId(false, this.props.editions); - }, - getAggregateEditionDetails() { const { editions } = this.props; @@ -82,13 +84,20 @@ let MarketSubmitButton = React.createClass({ }); }, - handleAdditionalDataSuccess(pieceId) { - // Fetch newly updated piece to update the views - PieceActions.fetchOne(pieceId); + getFormDataId() { + return getAclFormDataId(false, this.props.editions); + }, + handleAdditionalDataSuccess() { this.refs.consignModal.show(); }, + refreshEdition() { + if (this.props.editions.length === 1) { + EditionActions.fetchEdition(this.props.editions[0].bitcoin_id); + } + }, + render() { const { availableAcls, currentUser, className, editions, handleSuccess } = this.props; const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state; @@ -101,6 +110,10 @@ let MarketSubmitButton = React.createClass({ senderName: currentUser.username }); + // If only a single piece is selected, all the edition's extra_data and other_data will + // be the same, so we just take the first edition's + const { extra_data: extraData, other_data: otherData } = solePieceId ? editions[0] : {}; + const triggerButton = (