ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2016-01-11 17:52:32 +01:00
parent d4bb00168c
commit 8531b77633
34 changed files with 322 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -82,6 +82,10 @@ let AccordionListItemTableEditions = React.createClass({
editionList.orderBy, editionList.orderAsc, editionList.filterBy); editionList.orderBy, editionList.orderAsc, editionList.filterBy);
}, },
render() { render() {
const { className, parentId } = this.props;
const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state;
const editionsForPiece = editionList[parentId];
let selectedEditionsCount = 0; let selectedEditionsCount = 0;
let allEditionsCount = 0; let allEditionsCount = 0;
let orderBy; let orderBy;
@ -89,95 +93,97 @@ let AccordionListItemTableEditions = React.createClass({
let show = false; let show = false;
let showExpandOption = false; let showExpandOption = false;
let editionsForPiece = this.state.editionList[this.props.parentId];
let loadingSpinner = <AscribeSpinner size="sm" color="dark-blue" />;
// here we need to check if all editions of a specific // 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 // piece are already defined. Otherwise .length will throw an error and we'll not
// be notified about it. // be notified about it.
if(editionsForPiece) { if (editionsForPiece) {
selectedEditionsCount = this.filterSelectedEditions().length; selectedEditionsCount = this.filterSelectedEditions().length;
allEditionsCount = editionsForPiece.length; allEditionsCount = editionsForPiece.length;
orderBy = editionsForPiece.orderBy; orderBy = editionsForPiece.orderBy;
orderAsc = editionsForPiece.orderAsc; orderAsc = editionsForPiece.orderAsc;
} }
if(this.props.parentId in this.state.isEditionListOpenForPieceId) { if (parentId in isEditionListOpenForPieceId) {
show = this.state.isEditionListOpenForPieceId[this.props.parentId].show; show = isEditionListOpenForPieceId[parentId].show;
} }
// if the number of editions in the array is equal to the maximum number of editions, // 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 // 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; 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 = [ const columnList = [
new ColumnModel( new ColumnModel({
(item) => { transformFn: (item) => {
return { return {
'editionId': item.id, 'editionId': item.id,
'pieceId': this.props.parentId, 'pieceId': parentId,
'selectItem': this.selectItem, 'selectItem': this.selectItem,
'selected': item.selected 'selected': item.selected
}; }, };
'', },
displayElement: (
<AccordionListItemTableSelectAllEditionsCheckbox <AccordionListItemTableSelectAllEditionsCheckbox
onChange={this.toggleAllItems} onChange={this.toggleAllItems}
numOfSelectedEditions={selectedEditionsCount} numOfSelectedEditions={selectedEditionsCount}
numOfAllEditions={allEditionsCount}/>, numOfAllEditions={allEditionsCount}/>
TableItemCheckbox,
1,
false
), ),
new ColumnModel( displayType: TableItemCheckbox,
(item) => { rowWidth: 1
}),
new ColumnModel({
transition,
transformFn: (item) => {
return { return {
'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions 'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
}; }, };
'edition_number', },
getLangText('Edition'), columnName: 'edition_number',
TableItemText, displayElement: getLangText('Edition'),
1, displayType: TableItemText,
false, rowWidth: 1
transition }),
), new ColumnModel({
new ColumnModel( transition,
(item) => { transformFn: (item) => {
return { return {
'content': item.bitcoin_id 'content': item.bitcoin_id
}; }, };
'bitcoin_id', },
getLangText('ID'), columnName: 'bitcoin_id',
TableItemText, displayElement: getLangText('ID'),
5, displayType: TableItemText,
false, rowWidth: 5,
className: 'hidden-xs visible-sm visible-md visible-lg'
}),
new ColumnModel({
transition, transition,
'hidden-xs visible-sm visible-md visible-lg' transformFn: (item) => {
),
new ColumnModel(
(item) => {
let content = item.acl;
return { return {
'content': content, 'content': item.acl,
'notifications': item.notifications 'notifications': item.notifications
}; }, };
'acl', },
getLangText('Actions'), columnName: 'acl',
TableItemAclFiltered, displayElement: getLangText('Actions'),
4, displayType: TableItemAclFiltered,
false, rowWidth: 4
transition })
)
]; ];
if(show && editionsForPiece && editionsForPiece.length > 0) { if (show && editionsForPiece && editionsForPiece.length) {
return ( return (
<div className={this.props.className}> <div className={className}>
<AccordionListItemTable <AccordionListItemTable
parentId={this.props.parentId} parentId={parentId}
itemList={editionsForPiece} itemList={editionsForPiece}
columnList={columnList} columnList={columnList}
show={show} show={show}
@ -188,7 +194,14 @@ let AccordionListItemTableEditions = React.createClass({
<AccordionListItemTableToggle <AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle" className="ascribe-accordion-list-table-toggle"
onClick={this.loadFurtherEditions} onClick={this.loadFurtherEditions}
message={show && showExpandOption ? <span>{this.state.showMoreLoading ? loadingSpinner : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />} Show me more</span> : null} /> message={show && showExpandOption ? (
<span>
{showMoreLoading ? <AscribeSpinner size="sm" color="dark-blue" />
: <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />}
{getLangText('Show me more')}
</span>
) : null
} />
</div> </div>
); );
} else { } else {

93
js/components/ascribe_detail/edition.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { Link, History } from 'react-router'; import { Link } from 'react-router';
import Moment from 'moment'; import Moment from 'moment';
import Row from 'react-bootstrap/lib/Row'; import Row from 'react-bootstrap/lib/Row';
@ -44,8 +44,6 @@ let Edition = React.createClass({
loadEdition: React.PropTypes.func loadEdition: React.PropTypes.func
}, },
mixins: [History],
getDefaultProps() { getDefaultProps() {
return { return {
furtherDetailsType: FurtherDetails furtherDetailsType: FurtherDetails
@ -53,98 +51,103 @@ let Edition = React.createClass({
}, },
render() { render() {
let FurtherDetailsType = this.props.furtherDetailsType; const {
actionPanelButtonListType,
coaError,
currentUser,
edition,
furtherDetailsType: FurtherDetailsType,
loadEdition } = this.props;
return ( return (
<Row> <Row>
<Col md={6} className="ascribe-print-col-left"> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
content={this.props.edition}/> content={edition}
currentUser={currentUser} />
</Col> </Col>
<Col md={6} className="ascribe-edition-details ascribe-print-col-right"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr className="hidden-print" style={{marginTop: 0}}/> <hr className="hidden-print" style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1> <h1 className="ascribe-detail-title">{edition.title}</h1>
<DetailProperty label="BY" value={this.props.edition.artist_name} /> <DetailProperty label="BY" value={edition.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
<hr/> <hr/>
</div> </div>
<EditionSummary <EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType} actionPanelButtonListType={actionPanelButtonListType}
edition={this.props.edition} edition={edition}
currentUser={this.props.currentUser} currentUser={currentUser}
handleSuccess={this.props.loadEdition}/> handleSuccess={loadEdition}/>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Certificate of Authenticity')} title={getLangText('Certificate of Authenticity')}
show={this.props.edition.acl.acl_coa === true}> show={edition.acl.acl_coa === true}>
<CoaDetails <CoaDetails
coa={this.props.edition.coa} coa={edition.coa}
coaError={this.props.coaError} coaError={coaError}
editionId={this.props.edition.bitcoin_id}/> editionId={edition.bitcoin_id}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Provenance/Ownership History')} title={getLangText('Provenance/Ownership History')}
show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}> show={edition.ownership_history && edition.ownership_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.ownership_history} /> history={edition.ownership_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Consignment History')} title={getLangText('Consignment History')}
show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}> show={edition.consign_history && edition.consign_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.consign_history} /> history={edition.consign_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}> show={edition.loan_history && edition.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.loan_history} /> history={edition.loan_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title="Notes" title="Notes"
show={!!(this.props.currentUser.username show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
|| this.props.edition.acl.acl_edit
|| this.props.edition.public_note)}>
<Note <Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (private)')} 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 ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_edition} url={ApiUrls.note_private_edition}
currentUser={this.props.currentUser}/> currentUser={currentUser}/>
<Note <Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (public)')} 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 ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.props.edition.acl.acl_edit} editable={!!edition.acl.acl_edit}
show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit} show={!!edition.public_note || !!edition.acl.acl_edit}
successMessage={getLangText('Public edition note saved')} successMessage={getLangText('Public edition note saved')}
url={ApiUrls.note_public_edition} url={ApiUrls.note_public_edition}
currentUser={this.props.currentUser}/> currentUser={currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
show={this.props.edition.acl.acl_edit show={edition.acl.acl_edit ||
|| Object.keys(this.props.edition.extra_data).length > 0 Object.keys(edition.extra_data).length > 0 ||
|| this.props.edition.other_data.length > 0}> edition.other_data.length > 0}>
<FurtherDetailsType <FurtherDetailsType
editable={this.props.edition.acl.acl_edit} editable={edition.acl.acl_edit}
pieceId={this.props.edition.parent} pieceId={edition.parent}
extraData={this.props.edition.extra_data} extraData={edition.extra_data}
otherData={this.props.edition.other_data} otherData={edition.other_data}
handleSuccess={this.props.loadEdition} /> handleSuccess={loadEdition} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('SPOOL Details')}> title={getLangText('SPOOL Details')}>
<SpoolDetails <SpoolDetails
edition={this.props.edition} /> edition={edition} />
</CollapsibleParagraph> </CollapsibleParagraph>
</Col> </Col>
</Row> </Row>
@ -221,7 +224,11 @@ let EditionSummary = React.createClass({
let CoaDetails = React.createClass({ let CoaDetails = React.createClass({
propTypes: { propTypes: {
editionId: React.PropTypes.string, 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 coaError: React.PropTypes.object
}, },

6
js/components/ascribe_detail/edition_action_panel.js
View File

@ -76,7 +76,7 @@ let EditionActionPanel = React.createClass({
const notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
refreshCollection() { refreshCollection() {
@ -85,7 +85,7 @@ let EditionActionPanel = React.createClass({
EditionListActions.refreshEditionList({pieceId: this.props.edition.parent}); EditionListActions.refreshEditionList({pieceId: this.props.edition.parent});
}, },
handleSuccess(response){ handleSuccess(response) {
this.refreshCollection(); this.refreshCollection();
this.props.handleSuccess(); this.props.handleSuccess();
if (response){ if (response){
@ -94,7 +94,7 @@ let EditionActionPanel = React.createClass({
} }
}, },
render(){ render() {
const { const {
actionPanelButtonListType: ActionPanelButtonListType, actionPanelButtonListType: ActionPanelButtonListType,
edition, edition,

42
js/components/ascribe_detail/media_container.js
View File

@ -14,10 +14,6 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
import AclProxy from '../acl_proxy'; import AclProxy from '../acl_proxy';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import { mergeOptions } from '../../utils/general_utils.js';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
const EMBED_IFRAME_HEIGHT = { const EMBED_IFRAME_HEIGHT = {
@ -28,25 +24,22 @@ const EMBED_IFRAME_HEIGHT = {
let MediaContainer = React.createClass({ let MediaContainer = React.createClass({
propTypes: { propTypes: {
content: React.PropTypes.object, content: React.PropTypes.object,
currentUser: React.PropTypes.object,
refreshObject: React.PropTypes.func refreshObject: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
return mergeOptions( return {
UserStore.getState(),
{
timerId: null timerId: null
}); };
}, },
componentDidMount() { componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
if (!this.props.content.digital_work) { if (!this.props.content.digital_work) {
return; 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) { if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(this.props.refreshObject, 10000); let timerId = window.setInterval(this.props.refreshObject, 10000);
this.setState({timerId: timerId}); this.setState({timerId: timerId});
@ -60,22 +53,16 @@ let MediaContainer = React.createClass({
}, },
componentWillUnmount() { componentWillUnmount() {
UserStore.unlisten(this.onChange);
window.clearInterval(this.state.timerId); window.clearInterval(this.state.timerId);
}, },
onChange(state) {
this.setState(state);
},
render() { 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 // 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. // 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 // We also force uniqueness of usernames, so this check is safe to dtermine if the
// content was registered by the current user. // content was registered by the current user.
const didUserRegisterContent = this.state.currentUser && (this.state.currentUser.username === content.user_registered); const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe; content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@ -94,8 +81,11 @@ let MediaContainer = React.createClass({
embed = ( embed = (
<CollapsibleButton <CollapsibleButton
button={ button={
<Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}> <Button
Embed bsSize="xsmall"
className="ascribe-margin-1px"
disabled={isEmbedDisabled}>
{getLangText('Embed')}
</Button> </Button>
} }
panel={ panel={
@ -125,8 +115,12 @@ let MediaContainer = React.createClass({
show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download} show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
aclObject={content.acl} aclObject={content.acl}
aclName="acl_download"> aclName="acl_download">
<Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank"> <Button
Download .{mimetype} <Glyphicon glyph="cloud-download"/> bsSize="xsmall"
className="ascribe-margin-1px"
href={content.digital_work.url}
target="_blank">
{getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download"/>
</Button> </Button>
</AclProxy> </AclProxy>
{embed} {embed}

18
js/components/ascribe_detail/piece.js
View File

@ -16,10 +16,10 @@ import MediaContainer from './media_container';
let Piece = React.createClass({ let Piece = React.createClass({
propTypes: { propTypes: {
piece: React.PropTypes.object, piece: React.PropTypes.object,
currentUser: React.PropTypes.object,
header: React.PropTypes.object, header: React.PropTypes.object,
subheader: React.PropTypes.object, subheader: React.PropTypes.object,
buttons: React.PropTypes.object, buttons: React.PropTypes.object,
loadPiece: React.PropTypes.func,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element React.PropTypes.element
@ -32,20 +32,22 @@ let Piece = React.createClass({
}, },
render() { render() {
const { buttons, children, currentUser, header, piece, subheader } = this.props;
return ( return (
<Row> <Row>
<Col md={6} className="ascribe-print-col-left"> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
refreshObject={this.updateObject} content={piece}
content={this.props.piece}/> currentUser={currentUser}
refreshObject={this.updateObject} />
</Col> </Col>
<Col md={6} className="ascribe-edition-details ascribe-print-col-right"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
{this.props.header} {header}
{this.props.subheader} {subheader}
{this.props.buttons} {buttons}
{this.props.children}
{children}
</Col> </Col>
</Row> </Row>
); );

66
js/components/ascribe_detail/piece_container.js
View File

@ -162,7 +162,7 @@ let PieceContainer = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success'); let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getCreateEditionsDialog() { getCreateEditionsDialog() {
@ -254,76 +254,76 @@ let PieceContainer = React.createClass({
}, },
render() { render() {
if (this.state.piece && this.state.piece.id) { const { currentUser, furtherDetailsType: FurtherDetailsType } = this.props;
let FurtherDetailsType = this.props.furtherDetailsType; const { piece } = this.state;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
if (piece && piece.id) {
setDocumentTitle([piece.artist_name, piece.title].join(', '));
return ( return (
<Piece <Piece
piece={this.state.piece} piece={piece}
loadPiece={this.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr className="hidden-print" style={{marginTop: 0}}/> <hr className="hidden-print" style={{marginTop: 0}} />
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={this.state.piece.artist_name} /> <DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } /> <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
{this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null} {piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
<hr/> <hr/>
</div> </div>
} }
subheader={ subheader={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} /> <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<LicenseDetail license={this.state.piece.license_type} /> <LicenseDetail license={piece.license_type} />
</div> </div>
} }
buttons={this.getActions()}> buttons={this.getActions()}>
{this.getCreateEditionsDialog()} {this.getCreateEditionsDialog()}
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}> show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.state.piece.loan_history} /> history={piece.loan_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Notes')} title={getLangText('Notes')}
show={!!(this.props.currentUser.username show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}>
|| this.state.piece.acl.acl_edit
|| this.state.piece.public_note)}>
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.state.piece.private_note || null} defaultValue={piece.private_note || null}
show = {!!this.props.currentUser.username} show = {!!currentUser.username}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece} url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/> currentUser={currentUser} />
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Personal note (public)')} label={getLangText('Personal note (public)')}
defaultValue={this.state.piece.public_note || null} defaultValue={piece.public_note || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.state.piece.acl.acl_edit} editable={!!piece.acl.acl_edit}
show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)} show={!!(piece.public_note || piece.acl.acl_edit)}
successMessage={getLangText('Public note saved')} successMessage={getLangText('Public note saved')}
url={ApiUrls.note_public_piece} url={ApiUrls.note_public_piece}
currentUser={this.props.currentUser}/> currentUser={currentUser} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
show={this.state.piece.acl.acl_edit show={piece.acl.acl_edit
|| Object.keys(this.state.piece.extra_data).length > 0 || Object.keys(piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0} || piece.other_data.length > 0}
defaultExpanded={true}> defaultExpanded={true}>
<FurtherDetailsType <FurtherDetailsType
editable={this.state.piece.acl.acl_edit} editable={piece.acl.acl_edit}
pieceId={this.state.piece.id} pieceId={piece.id}
extraData={this.state.piece.extra_data} extraData={piece.extra_data}
otherData={this.state.piece.other_data} otherData={piece.other_data}
handleSuccess={this.loadPiece} /> handleSuccess={this.loadPiece} />
</CollapsibleParagraph> </CollapsibleParagraph>

2
js/components/ascribe_forms/form_send_contract_agreement.js
View File

@ -58,7 +58,7 @@ let SendContractAgreementForm = React.createClass({
notification = new GlobalNotificationModel(notification, 'success', 10000); notification = new GlobalNotificationModel(notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getFormData() { getFormData() {

2
js/components/ascribe_media/media_player.js
View File

@ -184,7 +184,7 @@ let Video = React.createClass({
); );
} else { } else {
return ( return (
<Image src={this.props.preview} /> <Image preview={this.props.preview} />
); );
} }
} }

24
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -91,13 +91,13 @@ let PieceListToolbarFilterWidget = React.createClass({
label also iterate over its items, to get all filterable options */} label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => { {this.props.filterParams.map(({ label, items }, i) => {
return ( return (
<div> <div key={label}>
<li <li style={{'textAlign': 'center'}}>
style={{'textAlign': 'center'}}
key={i}>
<em>{label}:</em> <em>{label}:</em>
</li> </li>
{items.map((param, j) => { {items.map((paramItem) => {
let itemLabel;
let param;
// As can be seen in the PropTypes, a param can either // As can be seen in the PropTypes, a param can either
// be a string or an object of the shape: // 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. // This is why we need to distinguish between both here.
if (typeof param !== 'string') { if (typeof paramItem !== 'string') {
label = param.label; param = paramItem.key;
param = param.key; itemLabel = paramItem.label;
} else { } else {
param = param; param = paramItem;
label = param.split('acl_')[1].replace(/_/g, ' '); itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' ');
} }
return ( return (
<li <li
key={j} key={itemLabel}
onClick={this.filterBy(param)} onClick={this.filterBy(param)}
className="filter-widget-item"> className="filter-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(label)} {getLangText(itemLabel)}
</span> </span>
<input <input
readOnly readOnly

2
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -63,7 +63,6 @@ let PieceListToolbarOrderWidget = React.createClass({
</li> </li>
{this.props.orderParams.map((param) => { {this.props.orderParams.map((param) => {
return ( return (
<div>
<li <li
key={param} key={param}
onClick={this.orderBy(param)} onClick={this.orderBy(param)}
@ -78,7 +77,6 @@ let PieceListToolbarOrderWidget = React.createClass({
checked={param.indexOf(this.props.orderBy) > -1} /> checked={param.indexOf(this.props.orderBy) > -1} />
</div> </div>
</li> </li>
</div>
); );
})} })}
</DropdownButton> </DropdownButton>

8
js/components/ascribe_routes/proxy_handler.js
View File

@ -20,8 +20,8 @@ const WHEN_ENUM = ['loggedIn', 'loggedOut'];
export function AuthRedirect({to, when}) { export function AuthRedirect({to, when}) {
// validate `when`, must be contained in `WHEN_ENUM`. // validate `when`, must be contained in `WHEN_ENUM`.
// Throw an error otherwise. // Throw an error otherwise.
if(WHEN_ENUM.indexOf(when) === -1) { if (WHEN_ENUM.indexOf(when) === -1) {
let whenValues = WHEN_ENUM.join(', '); const whenValues = WHEN_ENUM.join(', ');
throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`); throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
} }
@ -39,14 +39,14 @@ export function AuthRedirect({to, when}) {
// and redirect if `true`. // and redirect if `true`.
if (exprToValidate) { if (exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query)); window.setTimeout(() => history.replace({ query, pathname: to }));
return true; return true;
// Otherwise there can also be the case that the backend // Otherwise there can also be the case that the backend
// wants to redirect the user to a specific route when the user is logged out already // wants to redirect the user to a specific route when the user is logged out already
} else if (!exprToValidate && when === 'loggedIn' && redirect) { } else if (!exprToValidate && when === 'loggedIn' && redirect) {
delete query.redirect; delete query.redirect;
window.setTimeout(() => history.replaceState(null, '/' + redirect, query)); window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
return true; return true;
} else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) { } else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {

12
js/components/ascribe_slides_container/slides_container.js
View File

@ -57,21 +57,21 @@ const SlidesContainer = React.createClass({
// When the start_from parameter is used, this.setSlideNum can not simply be used anymore. // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
nextSlide(additionalQueryParams) { nextSlide(additionalQueryParams) {
const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0; const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
let nextSlide = slideNum + 1; this.setSlideNum(slideNum + 1, additionalQueryParams);
this.setSlideNum(nextSlide, additionalQueryParams);
}, },
setSlideNum(nextSlideNum, additionalQueryParams = {}) { setSlideNum(nextSlideNum, additionalQueryParams = {}) {
let queryParams = Object.assign(this.props.location.query, additionalQueryParams); const { location: { pathname } } = this.props;
queryParams.slide_num = nextSlideNum; const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
this.history.pushState(null, this.props.location.pathname, queryParams);
this.history.push({ pathname, query });
}, },
// breadcrumbs are defined as attributes of the slides. // breadcrumbs are defined as attributes of the slides.
// To extract them we have to read the DOM element's attributes // To extract them we have to read the DOM element's attributes
extractBreadcrumbs() { extractBreadcrumbs() {
const startFrom = parseInt(this.props.location.query.start_from, 10) || -1; const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
let breadcrumbs = []; const breadcrumbs = [];
React.Children.map(this.props.children, (child, i) => { React.Children.map(this.props.children, (child, i) => {
if(child && i >= startFrom && child.props['data-slide-title']) { if(child && i >= startFrom && child.props['data-slide-title']) {

8
js/components/ascribe_table/models/table_models.js
View File

@ -2,15 +2,15 @@
export class ColumnModel { export class ColumnModel {
// ToDo: Add validation for all passed-in parameters // 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.transformFn = transformFn;
this.columnName = columnName; this.columnName = columnName;
this.displayName = displayName; this.displayElement = displayElement;
this.displayType = displayType; this.displayType = displayType;
this.rowWidth = rowWidth; this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered; this.canBeOrdered = canBeOrdered;
this.transition = transition; this.transition = transition;
this.className = className ? className : ''; this.className = className;
} }
} }
@ -28,7 +28,7 @@ export class ColumnModel {
* our selfes, using this TransitionModel. * our selfes, using this TransitionModel.
*/ */
export class TransitionModel { export class TransitionModel {
constructor(to, queryKey, valueKey, callback) { constructor({ to, queryKey, valueKey, callback }) {
this.to = to; this.to = to;
this.queryKey = queryKey; this.queryKey = queryKey;
this.valueKey = valueKey; this.valueKey = valueKey;

4
js/components/ascribe_table/table_header.js
View File

@ -1,5 +1,5 @@
'use strict';
'use strict';
import React from 'react'; import React from 'react';
import TableHeaderItem from './table_header_item'; import TableHeaderItem from './table_header_item';
@ -29,7 +29,7 @@ let TableHeader = React.createClass({
<TableHeaderItem <TableHeaderItem
className={column.className} className={column.className}
key={i} key={i}
displayName={column.displayName} displayElement={column.displayElement}
columnName={columnName} columnName={columnName}
canBeOrdered={canBeOrdered} canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc} orderAsc={this.props.orderAsc}

20
js/components/ascribe_table/table_header_item.js
View File

@ -7,7 +7,7 @@ import TableHeaderItemCarret from './table_header_item_carret';
let TableHeaderItem = React.createClass({ let TableHeaderItem = React.createClass({
propTypes: { propTypes: {
displayName: React.PropTypes.oneOfType([ displayElement: React.PropTypes.oneOfType([
React.PropTypes.string, React.PropTypes.string,
React.PropTypes.element React.PropTypes.element
]).isRequired, ]).isRequired,
@ -24,29 +24,31 @@ let TableHeaderItem = React.createClass({
}, },
render() { render() {
if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) { const { canBeOrdered, changeOrder, className, columnName, displayElement, orderAsc, orderBy } = this.props;
if(this.props.columnName === this.props.orderBy) {
if (canBeOrdered && changeOrder && orderAsc != null && orderBy) {
if (columnName === orderBy) {
return ( return (
<th <th
className={'ascribe-table-header-column ' + this.props.className} className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span> <span>{displayElement} <TableHeaderItemCarret orderAsc={orderAsc} /></span>
</th> </th>
); );
} else { } else {
return ( return (
<th <th
className={'ascribe-table-header-column ' + this.props.className} className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName}</span> <span>{displayElement}</span>
</th> </th>
); );
} }
} else { } else {
return ( return (
<th className={'ascribe-table-header-column ' + this.props.className}> <th className={'ascribe-table-header-column ' + className}>
<span> <span>
{this.props.displayName} {displayElement}
</span> </span>
</th> </th>
); );

19
js/components/ascribe_table/table_item_acl_filtered.js
View File

@ -3,15 +3,15 @@
import React from 'react'; import React from 'react';
let TableItemAclFiltered = React.createClass({ const TableItemAclFiltered = React.createClass({
propTypes: { propTypes: {
content: React.PropTypes.object, content: React.PropTypes.object,
notifications: React.PropTypes.string notifications: React.PropTypes.array
}, },
render() { render() {
var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete']; const availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
if (this.props.notifications && this.props.notifications.length > 0){ if (this.props.notifications && this.props.notifications.length) {
return ( return (
<span> <span>
{this.props.notifications[0].action_str} {this.props.notifications[0].action_str}
@ -19,15 +19,14 @@ let TableItemAclFiltered = React.createClass({
); );
} }
let filteredAcls = Object.keys(this.props.content).filter((key) => { const filteredAcls = Object.keys(this.props.content)
return availableAcls.indexOf(key) > -1 && this.props.content[key]; .filter((key) => availableAcls.indexOf(key) > -1 && this.props.content[key])
}); .map((acl) => acl.split('acl_')[1])
.join('/');
filteredAcls = filteredAcls.map((acl) => acl.split('acl_')[1]);
return ( return (
<span> <span>
{filteredAcls.join('/')} {filteredAcls}
</span> </span>
); );
} }

3
js/components/password_reset_container.js
View File

@ -135,7 +135,8 @@ let PasswordResetForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
this.history.pushState(null, '/collection'); this.history.push('/collection');
const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000); const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },

21
js/components/piece_list.js
View File

@ -121,13 +121,13 @@ let PieceList = React.createClass({
}, },
componentDidUpdate() { componentDidUpdate() {
const { redirectTo, shouldRedirect } = this.props; const { location: { query }, redirectTo, shouldRedirect } = this.props;
const { unfilteredPieceListCount } = this.state; const { unfilteredPieceListCount } = this.state;
if (redirectTo && unfilteredPieceListCount === 0 && if (redirectTo && unfilteredPieceListCount === 0 &&
(typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) { (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0); window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
} }
}, },
@ -180,15 +180,16 @@ let PieceList = React.createClass({
} }
}, },
searchFor(searchTerm) { searchFor(search) {
this.loadPieceList({ const { location: { pathname } } = this.props;
page: 1,
search: searchTerm this.loadPieceList({ search, page: 1 });
}); this.history.push({ pathname, query: { page: 1 } });
this.history.pushState(null, this.props.location.pathname, {page: 1});
}, },
applyFilterBy(filterBy){ applyFilterBy(filterBy) {
const { location: { pathname } } = this.props;
this.setState({ this.setState({
isFilterDirty: true isFilterDirty: true
}); });
@ -212,7 +213,7 @@ let PieceList = React.createClass({
// we have to redirect the user always to page one as it could be that there is no page two // we have to redirect the user always to page one as it could be that there is no page two
// for filtered pieces // for filtered pieces
this.history.pushState(null, this.props.location.pathname, {page: 1}); this.history.push({ pathname, query: { page: 1 } });
}, },
applyOrderBy(orderBy) { applyOrderBy(orderBy) {

2
js/components/register_piece.js
View File

@ -73,7 +73,7 @@ let RegisterPiece = React.createClass( {
this.state.filterBy this.state.filterBy
); );
this.history.pushState(null, `/pieces/${response.piece.id}`); this.history.push(`/pieces/${response.piece.id}`);
}, },
getSpecifyEditions() { getSpecifyEditions() {

2
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -105,7 +105,7 @@ const PRRegisterPieceForm = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notificationMessage); GlobalNotificationActions.appendGlobalNotification(notificationMessage);
}); });
}) })
.then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`)) .then(() => this.history.push(`/pieces/${this.state.piece.id}`))
.catch((err) => { .catch((err) => {
const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) + const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
getLangText(' Please contact support@ascribe.io'); getLangText(' Please contact support@ascribe.io');

10
js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
View File

@ -11,6 +11,7 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import PrizeActions from '../../simple_prize/actions/prize_actions'; import PrizeActions from '../../simple_prize/actions/prize_actions';
import PrizeStore from '../../simple_prize/stores/prize_store'; import PrizeStore from '../../simple_prize/stores/prize_store';
import { omitFromObject } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
@ -34,12 +35,15 @@ const PRLanding = React.createClass({
const { location } = this.props; const { location } = this.props;
PrizeStore.listen(this.onChange); PrizeStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeActions.fetchPrize(); PrizeActions.fetchPrize();
if (location.query.redirect) { if (location.query.redirect) {
let queryCopy = JSON.parse(JSON.stringify(location.query)); window.setTimeout(() => this.history.replace({
delete queryCopy.redirect; pathname: `/${location.query.redirect}`,
window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy)); query: omitFromObject(location.query, ['redirect'])
}));
} }
}, },

2
js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
View File

@ -32,7 +32,7 @@ const PRRegisterPiece = React.createClass({
if (currentUser && currentUser.email) { if (currentUser && currentUser.email) {
const submittedPieceId = getCookie(currentUser.email); const submittedPieceId = getCookie(currentUser.email);
if (submittedPieceId) { if (submittedPieceId) {
this.history.pushState(null, `/pieces/${submittedPieceId}`); this.history.push(`/pieces/${submittedPieceId}`);
} }
} }
}, },

2
js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js
View File

@ -17,7 +17,7 @@ export function AuthPrizeRoleRedirect({ to, when }) {
.reduce((a, b) => a || b); .reduce((a, b) => a || b);
if (exprToValidate) { if (exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query)); window.setTimeout(() => history.replace({ query, pathname: to }));
return true; return true;
} else { } else {
return false; return false;

48
js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
View File

@ -33,53 +33,61 @@ let WalletPieceContainer = React.createClass({
}, },
render() { render() {
if (this.props.piece && this.props.piece.id) { const {
children,
currentUser,
handleDeleteSuccess,
loadPiece,
piece,
submitButtonType } = this.props;
if (piece && piece.id) {
return ( return (
<Piece <Piece
piece={this.props.piece} piece={piece}
loadPiece={this.props.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/> <hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={this.props.piece.artist_name} /> <DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.piece.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
<hr/> <hr/>
</div> </div>
} }
subheader={ subheader={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } /> <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} /> <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<hr/> <hr/>
</div> </div>
}> }>
<WalletActionPanel <WalletActionPanel
piece={this.props.piece} piece={piece}
currentUser={this.props.currentUser} currentUser={currentUser}
loadPiece={this.props.loadPiece} loadPiece={loadPiece}
handleDeleteSuccess={this.props.handleDeleteSuccess} handleDeleteSuccess={handleDeleteSuccess}
submitButtonType={this.props.submitButtonType}/> submitButtonType={submitButtonType}/>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.props.piece.loan_history && this.props.piece.loan_history.length > 0}> show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.piece.loan_history}/> history={piece.loan_history}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Notes')} title={getLangText('Notes')}
show={!!(this.props.currentUser.username || this.props.piece.public_note)}> show={!!(currentUser.username || piece.public_note)}>
<Note <Note
id={() => {return {'id': this.props.piece.id}; }} id={() => {return {'id': piece.id}; }}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.props.piece.private_note || null} defaultValue={piece.private_note || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece} url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/> currentUser={currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
{this.props.children} {children}
</Piece> </Piece>
); );
} else { } else {

2
js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
View File

@ -86,7 +86,7 @@ let CylandPieceContainer = React.createClass({
const notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { render() {

2
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -117,7 +117,7 @@ let CylandRegisterPiece = React.createClass({
PieceActions.fetchOne(this.state.piece.id); 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 // We need to increase the step to lock the forms that are already filled out

4
js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
View File

@ -115,7 +115,7 @@ let IkonotvContractNotifications = React.createClass({
NotificationActions.flushContractAgreementListNotifications(); NotificationActions.flushContractAgreementListNotifications();
NotificationActions.fetchContractAgreementListNotifications(); NotificationActions.fetchContractAgreementListNotifications();
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
handleDeny() { handleDeny() {
@ -129,7 +129,7 @@ let IkonotvContractNotifications = React.createClass({
const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000); const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getCopyrightAssociationForm(){ getCopyrightAssociationForm(){

2
js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
View File

@ -95,7 +95,7 @@ let IkonotvPieceContainer = React.createClass({
const notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { render() {

4
js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
View File

@ -94,7 +94,7 @@ let IkonotvRegisterPiece = React.createClass({
PieceActions.updatePiece(response.piece); PieceActions.updatePiece(response.piece);
} }
if (!this.canSubmit()) { if (!this.canSubmit()) {
this.history.pushState(null, '/collection'); this.history.push('/collection');
} }
else { else {
this.incrementStep(); this.incrementStep();
@ -125,7 +125,7 @@ let IkonotvRegisterPiece = React.createClass({
this.refreshPieceList(); this.refreshPieceList();
PieceActions.fetchOne(this.state.piece.id); 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 // We need to increase the step to lock the forms that are already filled out

2
js/components/whitelabel/wallet/components/market/market_register_piece.js
View File

@ -74,7 +74,7 @@ let MarketRegisterPiece = React.createClass({
handleAdditionalDataSuccess() { handleAdditionalDataSuccess() {
this.refreshPieceList(); this.refreshPieceList();
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
// We need to increase the step to lock the forms that are already filled out // We need to increase the step to lock the forms that are already filled out

3
js/history.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import useBasename from 'history/lib/useBasename'; import useBasename from 'history/lib/useBasename';
import useQueries from 'history/lib/useQueries';
import createBrowserHistory from 'history/lib/createBrowserHistory'; import createBrowserHistory from 'history/lib/createBrowserHistory';
import AppConstants from './constants/application_constants'; import AppConstants from './constants/application_constants';
@ -8,6 +9,6 @@ import AppConstants from './constants/application_constants';
// Remove the trailing slash if present // Remove the trailing slash if present
let baseUrl = AppConstants.baseUrl.replace(/\/$/, ''); let baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
export default useBasename(createBrowserHistory)({ export default useBasename(useQueries(createBrowserHistory))({
basename: baseUrl basename: baseUrl
}); });

2
js/third_party/notifications.js vendored
View File

@ -30,7 +30,7 @@ class NotificationsHandler {
console.log('Contractagreement notifications loaded'); console.log('Contractagreement notifications loaded');
this.loaded = true; this.loaded = true;
history.pushState(null, '/contract_notifications'); history.push('/contract_notifications');
} }
} }
); );

11
js/utils/url_utils.js
View File

@ -2,7 +2,7 @@
import camelCase from 'camelcase'; import camelCase from 'camelcase';
import decamelize from 'decamelize'; import decamelize from 'decamelize';
import qs from 'qs'; import queryString from 'query-string';
import { sanitize } from './general_utils'; import { sanitize } from './general_utils';
@ -36,8 +36,7 @@ export function argsToQueryParams(obj) {
queryParamObj[decamelize(key)] = sanitizedObj[key]; queryParamObj[decamelize(key)] = sanitizedObj[key];
}); });
// Use bracket arrayFormat as history.js and react-router use it return '?' + queryString.stringify(queryParamObj);
return '?' + qs.stringify(queryParamObj, { arrayFormat: 'brackets' });
} }
/** /**
@ -56,13 +55,13 @@ export function getCurrentQueryParams() {
* @return {object} Query params dictionary * @return {object} Query params dictionary
*/ */
export function queryParamsToArgs(queryParamString) { export function queryParamsToArgs(queryParamString) {
const qsQueryParamObj = qs.parse(queryParamString); const queryParamObj = queryString.parse(queryParamString);
const camelCaseParamObj = {}; const camelCaseParamObj = {};
Object Object
.keys(qsQueryParamObj) .keys(queryParamObj)
.forEach((key) => { .forEach((key) => {
camelCaseParamObj[camelCase(key)] = qsQueryParamObj[key]; camelCaseParamObj[camelCase(key)] = queryParamObj[key];
}); });
return camelCaseParamObj; return camelCaseParamObj;

6
package.json
View File

@ -67,7 +67,7 @@
"gulp-uglify": "^1.2.0", "gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.4", "gulp-util": "^3.0.4",
"harmonize": "^1.4.2", "harmonize": "^1.4.2",
"history": "^1.13.1", "history": "1.17.0",
"invariant": "^2.1.1", "invariant": "^2.1.1",
"isomorphic-fetch": "^2.0.2", "isomorphic-fetch": "^2.0.2",
"jest-cli": "^0.4.0", "jest-cli": "^0.4.0",
@ -76,12 +76,12 @@
"object-assign": "^2.0.0", "object-assign": "^2.0.0",
"opn": "^3.0.2", "opn": "^3.0.2",
"q": "^1.4.1", "q": "^1.4.1",
"qs": "^4.0.0", "query-string": "^3.0.0",
"raven-js": "^1.1.19", "raven-js": "^1.1.19",
"react": "0.13.2", "react": "0.13.2",
"react-bootstrap": "0.25.1", "react-bootstrap": "0.25.1",
"react-datepicker": "^0.12.0", "react-datepicker": "^0.12.0",
"react-router": "1.0.0", "react-router": "1.0.3",
"react-router-bootstrap": "^0.19.0", "react-router-bootstrap": "^0.19.0",
"react-star-rating": "~1.3.2", "react-star-rating": "~1.3.2",
"react-textarea-autosize": "^2.5.2", "react-textarea-autosize": "^2.5.2",