diff --git a/.env-template b/.env-template new file mode 100644 index 00000000..8c4fe11c --- /dev/null +++ b/.env-template @@ -0,0 +1,3 @@ +SAUCE_USERNAME=ascribe +SAUCE_ACCESS_KEY= +SAUCE_DEFAULT_URL= diff --git a/.eslintrc b/.eslintrc index d41c0a2a..5751f3ad 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,7 @@ "parser": "babel-eslint", "env": { "browser": true, - "es6": true + "es6": true, }, "rules": { "new-cap": [2, {newIsCap: true, capIsNew: false}], diff --git a/.gitignore b/.gitignore index 30c9eae9..f5bf11e8 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ node_modules/* build .DS_Store +.env diff --git a/README.md b/README.md index e07eca0d..478562d3 100644 --- a/README.md +++ b/README.md @@ -48,15 +48,18 @@ For this project, we're using: Branch names ===================== -Since we moved to Github, we cannot create branch names automatically with JIRA anymore. -To not lose context, but still be able to switch branches quickly using a ticket's number, we're recommending the following rules when naming our branches in onion. + +To allow Github and JIRA to track branches while still allowing us to switch branches quickly using a ticket's number (and keep our peace of mind), we have the following rules for naming branches: ``` +// For issues logged in Github: +AG--brief-and-sane-description-of-the-ticket + +// For issues logged in JIRA: AD--brief-and-sane-description-of-the-ticket ``` -where `brief-and-sane-description-of-the-ticket` does not need to equal to the ticket's title. -This allows JIRA to still track branches and pull-requests while allowing us to keep our peace of mind. +where `brief-and-sane-description-of-the-ticket` does not need to equal to the issue or ticket's title. Example ------------- 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..9474a418 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, orderBy, orderAsc, filterBy, pageSize: itemsToFetch }) .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..df9d41a0 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 c178fb93..b1d9c637 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() { @@ -32,13 +34,18 @@ let FurtherDetails = React.createClass({ }; }, - showNotification(){ - this.props.handleSuccess(); - let notification = new GlobalNotificationModel('Details updated', 'success'); + showNotification() { + const { handleSuccess } = this.props; + + if (typeof handleSucess === 'function') { + handleSuccess(); + } + + const notification = new GlobalNotificationModel(getLangText('Details updated'), 'success'); GlobalNotificationActions.appendGlobalNotification(notification); }, - submitFile(file){ + submitFile(file) { this.setState({ otherDataKey: file.key }); @@ -51,40 +58,42 @@ let FurtherDetails = React.createClass({ }, render() { + const { editable, extraData, otherData, pieceId } = this.props; + return ( + pieceId={pieceId} /> + pieceId={pieceId} /> + pieceId={pieceId} />
diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js index acdbe9e0..61e0724f 100644 --- a/js/components/ascribe_detail/further_details_fileuploader.js +++ b/js/components/ascribe_detail/further_details_fileuploader.js @@ -8,6 +8,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader'; import ApiUrls from '../../constants/api_urls'; import AppConstants from '../../constants/application_constants'; +import { validationTypes } from '../../constants/uploader_constants'; import { getCookie } from '../../utils/fetch_api_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -15,21 +16,26 @@ import { getLangText } from '../../utils/lang_utils'; let FurtherDetailsFileuploader = React.createClass({ propTypes: { + pieceId: React.PropTypes.number.isRequired, + + areAssetsDownloadable: React.PropTypes.bool, + editable: React.PropTypes.bool, + isReadyForFormSubmission: React.PropTypes.func, label: React.PropTypes.string, - pieceId: React.PropTypes.number, + multiple: React.PropTypes.bool, otherData: React.PropTypes.arrayOf(React.PropTypes.object), + onValidationFailed: React.PropTypes.func, setIsUploadReady: React.PropTypes.func, submitFile: React.PropTypes.func, - onValidationFailed: React.PropTypes.func, - isReadyForFormSubmission: React.PropTypes.func, - editable: React.PropTypes.bool, - multiple: React.PropTypes.bool + validation: ReactS3FineUploader.propTypes.validation }, getDefaultProps() { return { + areAssetsDownloadable: true, label: getLangText('Additional files'), - multiple: false + multiple: false, + validation: validationTypes.additionalData }; }, @@ -59,7 +65,7 @@ let FurtherDetailsFileuploader = React.createClass({ url: ApiUrls.blob_otherdatas, pieceId: this.props.pieceId }} - validation={AppConstants.fineUploader.validation.additionalData} + validation={this.props.validation} submitFile={this.props.submitFile} onValidationFailed={this.props.onValidationFailed} setIsUploadReady={this.props.setIsUploadReady} @@ -91,7 +97,7 @@ let FurtherDetailsFileuploader = React.createClass({ 'X-CSRFToken': getCookie(AppConstants.csrftoken) } }} - areAssetsDownloadable={true} + areAssetsDownloadable={this.props.areAssetsDownloadable} areAssetsEditable={this.props.editable} multiple={this.props.multiple} /> diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js index 3c1e7eb9..00ca9164 100644 --- a/js/components/ascribe_detail/media_container.js +++ b/js/components/ascribe_detail/media_container.js @@ -14,11 +14,9 @@ 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 { getLangText } from '../../utils/lang_utils'; +import { extractFileExtensionFromString } from '../../utils/file_utils'; -import { mergeOptions } from '../../utils/general_utils.js'; -import { getLangText } from '../../utils/lang_utils.js'; const EMBED_IFRAME_HEIGHT = { video: 315, @@ -28,25 +26,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 +55,26 @@ 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); + + // We want to show the file's extension as a label of the download button. + // We can however not only use `extractFileExtensionFromString` on the url for that + // as files might be saved on S3 without a file extension which leads + // `extractFileExtensionFromString` to extract everything starting from the top level + // domain: e.g. '.net/live/'. + // Therefore, we extract the file's name (last part of url, separated with a slash) + // and try to extract the file extension from there. + const fileName = content.digital_work.url.split('/').pop(); + const fileExtension = extractFileExtensionFromString(fileName); let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe; @@ -94,8 +93,11 @@ let MediaContainer = React.createClass({ embed = ( - Embed + } panel={ @@ -125,8 +127,16 @@ 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..8ee3111f 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..dc870d5a 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -205,16 +205,15 @@ let Form = React.createClass({ }, getButtons() { - if (this.state.submitted){ + if (this.state.submitted) { return this.props.spinner; } - if (this.props.buttons){ + if (this.props.buttons !== undefined) { return this.props.buttons; } - let buttons = null; - if (this.state.edited && !this.props.disabled){ - buttons = ( + if (this.state.edited && !this.props.disabled) { + return (

); - + } else { + return null; } - return buttons; }, getErrors() { diff --git a/js/components/ascribe_forms/form_create_contract.js b/js/components/ascribe_forms/form_create_contract.js index fcd874da..cbdd12c3 100644 --- a/js/components/ascribe_forms/form_create_contract.js +++ b/js/components/ascribe_forms/form_create_contract.js @@ -2,19 +2,20 @@ import React from 'react'; -import Form from '../ascribe_forms/form'; -import Property from '../ascribe_forms/property'; +import ContractListActions from '../../actions/contract_list_actions'; import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; -import ContractListActions from '../../actions/contract_list_actions'; - -import AppConstants from '../../constants/application_constants'; -import ApiUrls from '../../constants/api_urls'; - import InputFineUploader from './input_fineuploader'; +import Form from '../ascribe_forms/form'; +import Property from '../ascribe_forms/property'; + +import ApiUrls from '../../constants/api_urls'; +import AppConstants from '../../constants/application_constants'; +import { validationTypes } from '../../constants/uploader_constants'; + import { getLangText } from '../../utils/lang_utils'; import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils'; @@ -78,8 +79,8 @@ let CreateContractForm = React.createClass({ url: ApiUrls.blob_contracts }} validation={{ - itemLimit: AppConstants.fineUploader.validation.additionalData.itemLimit, - sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit, + itemLimit: validationTypes.additionalData.itemLimit, + sizeLimit: validationTypes.additionalData.sizeLimit, allowedExtensions: ['pdf'] }} areAssetsDownloadable={true} diff --git a/js/components/ascribe_forms/form_piece_extradata.js b/js/components/ascribe_forms/form_piece_extradata.js index f6ee4177..6a475fb6 100644 --- a/js/components/ascribe_forms/form_piece_extradata.js +++ b/js/components/ascribe_forms/form_piece_extradata.js @@ -13,43 +13,48 @@ 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, - editable: React.PropTypes.bool + title: React.PropTypes.string }, getFormData() { - let extradata = {}; - extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value; return { - extradata: extradata, + extradata: { + [this.props.name]: this.refs.form.refs[this.props.name].state.value + }, piece_id: this.props.pieceId }; }, - + render() { - let defaultValue = this.props.extraData[this.props.name] || ''; - if (defaultValue.length === 0 && !this.props.editable){ + const { convertLinks, editable, extraData, handleSuccess, name, pieceId, title } = this.props; + const defaultValue = (extraData && extraData[name]) || null; + + if (!defaultValue && !editable) { return null; } - let url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.pieceId}); + return (
+ handleSuccess={handleSuccess} + url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}> + name={name} + label={title}>
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js index 596f8a56..93f0ddf4 100644 --- a/js/components/ascribe_forms/form_register_piece.js +++ b/js/components/ascribe_forms/form_register_piece.js @@ -8,12 +8,16 @@ import UserActions from '../../actions/user_actions'; import Form from './form'; import Property from './property'; import InputFineUploader from './input_fineuploader'; -import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button'; + import FormSubmitButton from '../ascribe_buttons/form_submit_button'; +import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button'; + +import AscribeSpinner from '../ascribe_spinner'; + import ApiUrls from '../../constants/api_urls'; import AppConstants from '../../constants/application_constants'; -import AscribeSpinner from '../ascribe_spinner'; +import { validationParts, validationTypes } from '../../constants/uploader_constants'; import { getLangText } from '../../utils/lang_utils'; import { mergeOptions } from '../../utils/general_utils'; @@ -180,7 +184,7 @@ let RegisterPieceForm = React.createClass({ createBlobRoutine={{ url: ApiUrls.blob_digitalworks }} - validation={AppConstants.fineUploader.validation.registerWork} + validation={validationTypes.registerWork} setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isFineUploaderActive={isFineUploaderActive} @@ -206,9 +210,9 @@ let RegisterPieceForm = React.createClass({ fileClass: 'thumbnail' }} validation={{ - itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit, - sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit, - allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'] + itemLimit: validationTypes.workThumbnail.itemLimit, + sizeLimit: validationTypes.workThumbnail.sizeLimit, + allowedExtensions: validationParts.allowedExtensions.images }} setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')} fileClassToUpload={{ @@ -216,9 +220,7 @@ let RegisterPieceForm = React.createClass({ plural: getLangText('Select representative images') }} isFineUploaderActive={isFineUploaderActive} - disabled={!isFineUploaderEditable} - enableLocalHashing={enableLocalHashing} - uploadMethod={location.query.method} /> + disabled={!isFineUploaderEditable} /> + onBlur={onBlur} + placeholder={placeholder} /> ); } else { - textarea = 
{this.state.value}
; + // Can only convert links when not editable, as textarea does not support anchors + return 
{convertLinks ? anchorize(value) : value}
; } - - return textarea; } }); 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: validationTypes.registerWork.itemLimit, + sizeLimit: validationTypes.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_file_drag_and_drop/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js index ca1be2d2..0f95427d 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js @@ -23,6 +23,7 @@ const FileDragAndDropPreview = React.createClass({ s3Url: string, s3UrlSafe: string }).isRequired, + handleDeleteFile: func, handleCancelFile: func, handlePauseFile: func, @@ -33,9 +34,9 @@ const FileDragAndDropPreview = React.createClass({ }, toggleUploadProcess() { - if(this.props.file.status === 'uploading') { + if (this.props.file.status === 'uploading') { this.props.handlePauseFile(this.props.file.id); - } else if(this.props.file.status === 'paused') { + } else if (this.props.file.status === 'paused') { this.props.handleResumeFile(this.props.file.id); } }, @@ -54,13 +55,13 @@ const FileDragAndDropPreview = React.createClass({ (file.status === 'upload successful' || file.status === 'online') && file.s3UrlSafe) { handleDeleteFile(file.id); - } else if(handleCancelFile) { + } else if (handleCancelFile) { handleCancelFile(file.id); } }, handleDownloadFile() { - if(this.props.file.s3Url) { + if (this.props.file.s3Url) { // This simply opens a new browser tab with the url provided open(this.props.file.s3Url); } @@ -69,7 +70,7 @@ const FileDragAndDropPreview = React.createClass({ getFileName() { const { numberOfDisplayedFiles, file } = this.props; - if(numberOfDisplayedFiles === 1) { + if (numberOfDisplayedFiles === 1) { return ( {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))} @@ -81,7 +82,7 @@ const FileDragAndDropPreview = React.createClass({ }, getRemoveButton() { - if(this.props.areAssetsEditable) { + if (this.props.areAssetsEditable) { return (
    @@ -66,22 +66,19 @@ const FileDragAndDropPreviewOther = React.createClass({ ); } else { actionSymbol = ( - + ); } return ( -
    +
    -
    -
    - {actionSymbol} -

    {'.' + type}

    -
    + className="ascribe-progress-bar ascribe-progress-bar-xs" /> +
    + {actionSymbol} +

    {'.' + (type ? type : 'file')}

    ); 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..447b76ea 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -13,9 +13,9 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import AppConstants from '../../constants/application_constants'; -import { computeHashOfFile } from '../../utils/file_utils'; import { displayValidFilesFilter, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils'; import { getCookie } from '../../utils/fetch_api_utils'; +import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -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 @@ -97,7 +91,7 @@ const ReactS3FineUploader = React.createClass({ }), validation: shape({ itemLimit: number, - sizeLimit: string, + sizeLimit: number, allowedExtensions: arrayOf(string) }), messages: shape({ @@ -284,22 +278,6 @@ const ReactS3FineUploader = React.createClass({ this.setState(this.getInitialState()); }, - // Cancel uploads and clear previously selected files on the input element - cancelUploads(id) { - typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll(); - - // Reset the file input element to clear the previously selected files so that - // the user can reselect them again. - this.clearFileSelection(); - }, - - clearFileSelection() { - const { fileInput } = this.refs; - if (fileInput && typeof fileInput.clearSelection === 'function') { - fileInput.clearSelection(); - } - }, - requestKey(fileId) { let filename = this.state.uploader.getName(fileId); let uuid = this.state.uploader.getUuid(fileId); @@ -390,6 +368,107 @@ const ReactS3FineUploader = React.createClass({ }); }, + // Cancel uploads and clear previously selected files on the input element + cancelUploads(id) { + typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll(); + + // Reset the file input element to clear the previously selected files so that + // the user can reselect them again. + this.clearFileSelection(); + }, + + clearFileSelection() { + const { fileInput } = this.refs; + if (fileInput && typeof fileInput.clearSelection === 'function') { + fileInput.clearSelection(); + } + }, + + getAllowedExtensions() { + const { validation: { allowedExtensions } = {} } = this.props; + + if (allowedExtensions && allowedExtensions.length) { + return transformAllowedExtensionsToInputAcceptProp(allowedExtensions); + } else { + return null; + } + }, + + getXhrErrorComment(xhr) { + if (xhr) { + return { + response: xhr.response, + url: xhr.responseURL, + status: xhr.status, + statusText: xhr.statusText + }; + } + }, + + isDropzoneInactive() { + const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1); + + if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) { + return true; + } else { + return false; + } + }, + + isFileValid(file) { + const { validation: { allowedExtensions, sizeLimit = 0 }, onValidationFailed } = this.props; + const fileExt = extractFileExtensionFromString(file.name); + + if (file.size > sizeLimit) { + const fileSizeInMegaBytes = sizeLimit / 1000000; + + const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000); + GlobalNotificationActions.appendGlobalNotification(notification); + + if (typeof onValidationFailed === 'function') { + onValidationFailed(file); + } + + return false; + } else if (allowedExtensions && !allowedExtensions.includes(fileExt)) { + const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${allowedExtensions.join(', ')}`), 'danger', 5000); + GlobalNotificationActions.appendGlobalNotification(notification); + + return false; + } else { + return true; + } + }, + + selectValidFiles(files) { + return Array.from(files).reduce((validFiles, file) => { + if (this.isFileValid(file)) { + validFiles.push(file); + } + return validFiles; + }, []); + }, + + // This method has been made promise-based to immediately afterwards + // call a callback function (instantly after this.setState went through) + // This is e.g. needed when showing/hiding the optional thumbnail upload + // field in the registration form + setStatusOfFile(fileId, status) { + return Q.Promise((resolve) => { + let changeSet = {}; + + if(status === 'deleted' || status === 'canceled') { + changeSet.progress = { $set: 0 }; + } + + changeSet.status = { $set: status }; + + let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet }); + + this.setState({ filesToUpload }, resolve); + }); + }, + setThumbnailForFileId(fileId, url) { const { filesToUpload } = this.state; @@ -512,34 +591,6 @@ const ReactS3FineUploader = React.createClass({ GlobalNotificationActions.appendGlobalNotification(notification); }, - getXhrErrorComment(xhr) { - if (xhr) { - return { - response: xhr.response, - url: xhr.responseURL, - status: xhr.status, - statusText: xhr.statusText - }; - } - }, - - isFileValid(file) { - if (file.size > this.props.validation.sizeLimit) { - const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000; - - const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000); - GlobalNotificationActions.appendGlobalNotification(notification); - - if (typeof this.props.onValidationFailed === 'function') { - this.props.onValidationFailed(file); - } - - return false; - } else { - return true; - } - }, - onCancel(id) { // when a upload is canceled, we need to update this components file array this.setStatusOfFile(id, 'canceled') @@ -676,6 +727,13 @@ const ReactS3FineUploader = React.createClass({ this.cancelUploads(fileId); }, + handleCancelHashing() { + // Every progress tick of the hashing function in handleUploadFile there is a + // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels + // the hashing of all files immediately. + this.setState({ hashingProgress: -1 }); + }, + handlePauseFile(fileId) { if(this.state.uploader.pauseUpload(fileId)) { this.setStatusOfFile(fileId, 'paused'); @@ -704,15 +762,8 @@ const ReactS3FineUploader = React.createClass({ return; } - // validate each submitted file if it fits the file size - let validFiles = []; - for(let i = 0; i < files.length; i++) { - if(this.isFileValid(files[i])) { - validFiles.push(files[i]); - } - } - // override standard files list with only valid files - files = validFiles; + // Select only the submitted files that fit the file size and allowed extensions + files = this.selectValidFiles(files); // if multiple is set to false and user drops multiple files into the dropzone, // take the first one and notify user that only one file can be submitted @@ -823,13 +874,6 @@ const ReactS3FineUploader = React.createClass({ } }, - handleCancelHashing() { - // Every progress tick of the hashing function in handleUploadFile there is a - // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels - // the hashing of all files immediately. - this.setState({ hashingProgress: -1 }); - }, - // ReactFineUploader is essentially just a react layer around s3 fineuploader. // However, since we need to display the status of a file (progress, uploading) as well as // be able to execute actions on a currently uploading file we need to exactly sync the file list @@ -899,46 +943,6 @@ const ReactS3FineUploader = React.createClass({ }); }, - // This method has been made promise-based to immediately afterwards - // call a callback function (instantly after this.setState went through) - // This is e.g. needed when showing/hiding the optional thumbnail upload - // field in the registration form - setStatusOfFile(fileId, status) { - return Q.Promise((resolve) => { - let changeSet = {}; - - if(status === 'deleted' || status === 'canceled') { - changeSet.progress = { $set: 0 }; - } - - changeSet.status = { $set: status }; - - let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet }); - - this.setState({ filesToUpload }, resolve); - }); - }, - - isDropzoneInactive() { - const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1); - - if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) { - return true; - } else { - return false; - } - }, - - getAllowedExtensions() { - let { validation } = this.props; - - if(validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) { - return transformAllowedExtensionsToInputAcceptProp(validation.allowedExtensions); - } else { - return null; - } - }, - render() { const { multiple, 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/header.js b/js/components/header.js index c16cba86..d2ecb76b 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -18,6 +18,8 @@ import AclProxy from './acl_proxy'; import EventActions from '../actions/event_actions'; +import PieceListStore from '../stores/piece_list_store'; + import UserActions from '../actions/user_actions'; import UserStore from '../stores/user_store'; @@ -43,12 +45,17 @@ let Header = React.createClass({ getInitialState() { return mergeOptions( + PieceListStore.getState(), WhitelabelStore.getState(), UserStore.getState() ); }, componentDidMount() { + // Listen to the piece list store, but don't fetch immediately to avoid + // conflicts with routes that may need to wait to load the piece list + PieceListStore.listen(this.onChange); + UserStore.listen(this.onChange); UserActions.fetchCurrentUser.defer(); @@ -75,11 +82,16 @@ let Header = React.createClass({ }, componentWillUnmount() { + PieceListStore.unlisten(this.onChange); UserStore.unlisten(this.onChange); WhitelabelStore.unlisten(this.onChange); //history.unlisten(this.onRouteChange); }, + onChange(state) { + this.setState(state); + }, + getLogo() { let { whitelabel } = this.state; @@ -93,16 +105,16 @@ let Header = React.createClass({ Whitelabel brand ); + } else { + return ( + + + + ); } - - return ( - - - - ); }, - getPoweredBy(){ + getPoweredBy() { return ( + title={currentUser.username}> @@ -174,7 +184,7 @@ let Header = React.createClass({ ); - navRoutesLinks = ; - } - else { + + // Let's assume that if the piece list hasn't loaded yet (ie. when unfilteredPieceListCount === -1) + // then the user has pieces + // FIXME: this doesn't work that well as the user may not load their piece list + // until much later, so we would show the 'Collection' header as available until + // they actually click on it and get redirected to piece registration. + navRoutesLinks = ( + + ); + } else { account = ( diff --git a/js/components/nav_routes_links.js b/js/components/nav_routes_links.js index b2c9d9c3..676a9896 100644 --- a/js/components/nav_routes_links.js +++ b/js/components/nav_routes_links.js @@ -11,14 +11,33 @@ import AclProxy from './acl_proxy'; import { sanitizeList } from '../utils/general_utils'; +const DISABLE_ENUM = ['hasPieces', 'noPieces']; + let NavRoutesLinks = React.createClass({ propTypes: { + hasPieces: React.PropTypes.bool, routes: React.PropTypes.arrayOf(React.PropTypes.object), userAcl: React.PropTypes.object }, + isRouteDisabled(disableOn) { + const { hasPieces } = this.props; + + if (disableOn) { + if (!DISABLE_ENUM.includes(disableOn)) { + throw new Error(`"disableOn" must be one of: [${DISABLE_ENUM.join(', ')}] got "${disableOn}" instead`); + } + + if (disableOn === 'hasPieces') { + return hasPieces; + } else if (disableOn === 'noPieces') { + return !hasPieces; + } + } + }, + /** - * This method generales a bunch of react-bootstrap specific links + * This method generates a bunch of react-bootstrap specific links * from the routes we defined in one of the specific routes.js file * * We can define a headerTitle as well as a aclName and according to that the @@ -29,48 +48,50 @@ let NavRoutesLinks = React.createClass({ * @return {Array} Array of ReactElements that can be displayed to the user */ extractLinksFromRoutes(node, userAcl, i) { - if(!node) { + if (!node) { return; } - let links = node.childRoutes.map((child, j) => { - let childrenFn = null; - let { aclName, headerTitle, path, childRoutes } = child; - - // If the node has children that could be rendered, then we want - // to execute this function again with the child as the root - // - // Otherwise we'll just pass childrenFn as false - if(child.childRoutes && child.childRoutes.length > 0) { - childrenFn = this.extractLinksFromRoutes(child, userAcl, i++); - } + const links = node.childRoutes.map((child, j) => { + const { aclName, disableOn, headerTitle, path, childRoutes } = child; // We validate if the user has set the title correctly, // otherwise we're not going to render his route - if(headerTitle && typeof headerTitle === 'string') { + if (headerTitle && typeof headerTitle === 'string') { + let nestedChildren = null; + + // If the node has children that could be rendered, then we want + // to execute this function again with the child as the root + // + // Otherwise we'll just pass nestedChildren as false + if (child.childRoutes && child.childRoutes.length) { + nestedChildren = this.extractLinksFromRoutes(child, userAcl, i++); + } + + const navLinkProps = { + headerTitle, + children: nestedChildren, + depth: i, + disabled: this.isRouteDisabled(disableOn), + routePath: `/${path}` + }; + // if there is an aclName present on the route definition, // we evaluate it against the user's acl - if(aclName && typeof aclName !== 'undefined') { + if (aclName && typeof aclName !== 'undefined') { return ( - + ); } else { return ( + {...navLinkProps} /> ); } } else { @@ -84,7 +105,7 @@ let NavRoutesLinks = React.createClass({ }, render() { - let {routes, userAcl} = this.props; + const {routes, userAcl} = this.props; return (
    ); + } 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/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js index 23cdbb23..bd2b9f06 100644 --- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js +++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js @@ -75,7 +75,6 @@ let PrizePieceList = React.createClass({
    -

    {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..c41caa76 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}> + convertLinks + 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 5f7cfeeb..4588867b 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..49ead8ec 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}> + convertLinks + defaultValue={extraData.artist_website} + placeholder={getLangText('The artist\'s website if present...')} /> + expanded={!disabled || !!extraData.gallery_website}> + convertLinks + defaultValue={extraData.gallery_website} + placeholder={getLangText('The website of any related Gallery or Museum')} /> + expanded={!disabled || !!extraData.additional_websites}> + convertLinks + 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 = (