diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js
index 6c07a891..37803ad2 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item.js
@@ -3,151 +3,24 @@
import React from 'react';
import Router from 'react-router';
-import Glyphicon from 'react-bootstrap/lib/Glyphicon';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
-import Tooltip from 'react-bootstrap/lib/Tooltip';
-
-import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
-import CreateEditionsForm from '../ascribe_forms/create_editions_form';
-
-import PieceListActions from '../../actions/piece_list_actions';
-import PieceListStore from '../../stores/piece_list_store';
-
-import WhitelabelStore from '../../stores/whitelabel_store';
-
-import EditionListActions from '../../actions/edition_list_actions';
-
-import GlobalNotificationModel from '../../models/global_notification_model';
-import GlobalNotificationActions from '../../actions/global_notification_actions';
-
-import AclProxy from '../acl_proxy';
-import SubmitToPrizeButton from '../whitelabel/prize/components/ascribe_buttons/submit_to_prize_button';
-
-import { getLangText } from '../../utils/lang_utils';
-import { mergeOptions } from '../../utils/general_utils';
-
-let Link = Router.Link;
-
let AccordionListItem = React.createClass({
propTypes: {
+ badge: React.PropTypes.object,
className: React.PropTypes.string,
- content: React.PropTypes.object,
- children: React.PropTypes.object
+ thumbnail: React.PropTypes.object,
+ heading: React.PropTypes.object,
+ subheading: React.PropTypes.object,
+ subsubheading: React.PropTypes.object,
+ buttons: React.PropTypes.object,
+ children: React.PropTypes.oneOfType([
+ React.PropTypes.arrayOf(React.PropTypes.element),
+ React.PropTypes.element
+ ])
},
mixins: [Router.Navigation],
- getInitialState() {
- return mergeOptions(
- {
- showCreateEditionsDialog: false
- },
- PieceListStore.getState(),
- WhitelabelStore.getState()
- );
- },
-
- componentDidMount() {
- PieceListStore.listen(this.onChange);
- WhitelabelStore.listen(this.onChange);
- },
-
- componentWillUnmount() {
- PieceListStore.unlisten(this.onChange);
- WhitelabelStore.unlisten(this.onChange);
- },
-
- onChange(state) {
- this.setState(state);
- },
-
- getGlyphicon(){
- if (this.props.content.requestAction) {
- return (
- {getLangText('You have actions pending in one of your editions')}}>
-
- );
- }
- return null;
- },
-
- toggleCreateEditionsDialog() {
- this.setState({
- showCreateEditionsDialog: !this.state.showCreateEditionsDialog
- });
- },
-
- handleEditionCreationSuccess() {
- PieceListActions.updatePropertyForPiece({pieceId: this.props.content.id, key: 'num_editions', value: 0});
-
- this.toggleCreateEditionsDialog();
- },
-
- handleSubmitPrizeSuccess(response) {
- PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
- this.state.orderBy, this.state.orderAsc, this.state.filterBy);
-
- let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
- GlobalNotificationActions.appendGlobalNotification(notification);
- },
-
- onPollingSuccess(pieceId) {
- PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
- this.state.orderBy, this.state.orderAsc, this.state.filterBy);
- EditionListActions.toggleEditionList(pieceId);
-
- let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
- GlobalNotificationActions.appendGlobalNotification(notification);
- },
-
- getCreateEditionsDialog() {
- if (this.props.content.num_editions < 1 && this.state.showCreateEditionsDialog) {
- return (
-
-
-
- );
- }
- },
-
- getLicences() {
- // convert this to acl_view_licences later
- if (this.state.whitelabel && this.state.whitelabel.name === 'Creative Commons France') {
- return (
-
- ,
-
- {getLangText('%s license', this.props.content.license_type.code)}
-
-
- );
- }
- },
-
render() {
- let linkData;
-
- if (this.props.content.num_editions < 1 || !this.props.content.first_edition) {
- linkData = {
- to: 'piece',
- params: {
- pieceId: this.props.content.id
- }
- };
- } else {
- linkData = {
- to: 'edition',
- params: {
- editionId: this.props.content.first_edition.bitcoin_id
- }
- };
- }
return (
@@ -155,52 +28,22 @@ let AccordionListItem = React.createClass({
-
-
![]({this.props.content.thumbnail.url_safe}/)
-
+ {this.props.thumbnail}
-
-
{this.props.content.title}
-
-
-
{getLangText('by %s', this.props.content.artist_name)}
-
-
-
{this.props.content.date_created.split('-')[0]}
-
-
-
-
-
-
-
- {this.getLicences()}
-
+ {this.props.heading}
+ {this.props.subheading}
+ {this.props.subsubheading}
+ {this.props.buttons}
- {this.getGlyphicon()}
+ {this.props.badge}
-
- {this.getCreateEditionsDialog()}
-
- {/* this.props.children is AccordionListItemTableEditions */}
{this.props.children}
);
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
new file mode 100644
index 00000000..65b6454c
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
@@ -0,0 +1,76 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+
+import AccordionListItem from './accordion_list_item';
+
+import { getLangText } from '../../utils/lang_utils';
+
+let Link = Router.Link;
+
+
+let AccordionListItemPiece = React.createClass({
+ propTypes: {
+ className: React.PropTypes.string,
+ piece: React.PropTypes.object,
+ children: React.PropTypes.oneOfType([
+ React.PropTypes.arrayOf(React.PropTypes.element),
+ React.PropTypes.element
+ ]),
+ subsubheading: React.PropTypes.object,
+ buttons: React.PropTypes.object,
+ badge: React.PropTypes.object
+ },
+
+ mixins: [Router.Navigation],
+
+ getLinkData(){
+ let linkData;
+
+ if (this.props.piece.num_editions < 1 || !this.props.piece.first_edition) {
+ linkData = {
+ to: 'piece',
+ params: {
+ pieceId: this.props.piece.id
+ }
+ };
+ } else {
+ linkData = {
+ to: 'edition',
+ params: {
+ editionId: this.props.piece.first_edition.bitcoin_id
+ }
+ };
+ }
+ return linkData;
+ },
+
+ render() {
+ return (
+
+
+ }
+ heading={
+
+ {this.props.piece.title}
+ }
+ subheading={
+
+ {getLangText('by %s', this.props.piece.artist_name)}
+
+ }
+ subsubheading={this.props.subsubheading}
+ buttons={this.props.buttons}
+ badge={this.props.badge}
+ >
+ {this.props.children}
+
+ );
+ }
+});
+
+export default AccordionListItemPiece;
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
new file mode 100644
index 00000000..3cb557ef
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -0,0 +1,156 @@
+'use strict';
+
+import React from 'react';
+
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+import AccordionListItemPiece from './accordion_list_item_piece';
+import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
+import CreateEditionsForm from '../ascribe_forms/create_editions_form';
+
+import PieceListActions from '../../actions/piece_list_actions';
+import PieceListStore from '../../stores/piece_list_store';
+
+import WhitelabelStore from '../../stores/whitelabel_store';
+
+import EditionListActions from '../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import AclProxy from '../acl_proxy';
+
+import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions } from '../../utils/general_utils';
+
+
+let AccordionListItemWallet = React.createClass({
+ propTypes: {
+ className: React.PropTypes.string,
+ content: React.PropTypes.object,
+ children: React.PropTypes.oneOfType([
+ React.PropTypes.arrayOf(React.PropTypes.element),
+ React.PropTypes.element
+ ])
+ },
+
+ getInitialState() {
+ return mergeOptions(
+ {
+ showCreateEditionsDialog: false
+ },
+ PieceListStore.getState(),
+ WhitelabelStore.getState()
+ );
+ },
+
+ componentDidMount() {
+ PieceListStore.listen(this.onChange);
+ WhitelabelStore.listen(this.onChange);
+ },
+
+ componentWillUnmount() {
+ PieceListStore.unlisten(this.onChange);
+ WhitelabelStore.unlisten(this.onChange);
+ },
+
+ onChange(state) {
+ this.setState(state);
+ },
+
+ getGlyphicon(){
+ if (this.props.content.requestAction) {
+ return (
+ {getLangText('You have actions pending in one of your editions')}}>
+
+ );
+ }
+ return null;
+ },
+
+ toggleCreateEditionsDialog() {
+ this.setState({
+ showCreateEditionsDialog: !this.state.showCreateEditionsDialog
+ });
+ },
+
+ handleEditionCreationSuccess() {
+ PieceListActions.updatePropertyForPiece({pieceId: this.props.content.id, key: 'num_editions', value: 0});
+
+ this.toggleCreateEditionsDialog();
+ },
+
+ onPollingSuccess(pieceId) {
+ PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+ this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+ EditionListActions.toggleEditionList(pieceId);
+
+ let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
+ GlobalNotificationActions.appendGlobalNotification(notification);
+ },
+
+ getCreateEditionsDialog() {
+ if (this.props.content.num_editions < 1 && this.state.showCreateEditionsDialog) {
+ return (
+
+
+
+ );
+ }
+ },
+
+ getLicences() {
+ // convert this to acl_view_licences later
+ if (this.state.whitelabel && this.state.whitelabel.name === 'Creative Commons France') {
+ return (
+
+ ,
+
+ {getLangText('%s license', this.props.content.license_type.code)}
+
+
+ );
+ }
+ },
+
+ render() {
+
+ return (
+
+ {this.props.content.date_created.split('-')[0]}
+ {this.getLicences()}
+ }
+ buttons={
+ }
+ badge={this.getGlyphicon()}>
+ {this.getCreateEditionsDialog()}
+ {/* this.props.children is AccordionListItemTableEditions */}
+ {this.props.children}
+
+ );
+ }
+});
+
+export default AccordionListItemWallet;
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 78917f61..566921f2 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -10,7 +10,7 @@ import EditionListStore from '../stores/edition_list_store';
import EditionListActions from '../actions/edition_list_actions';
import AccordionList from './ascribe_accordion_list/accordion_list';
-import AccordionListItem from './ascribe_accordion_list/accordion_list_item';
+import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
import Pagination from './ascribe_pagination/pagination';
@@ -24,12 +24,19 @@ import { mergeOptions } from '../utils/general_utils';
let PieceList = React.createClass({
propTypes: {
+ accordionListItemType: React.PropTypes.object,
redirectTo: React.PropTypes.string,
customSubmitButton: React.PropTypes.element
},
mixins: [Router.Navigation, Router.State],
+ getDefaultProps() {
+ return {
+ accordionListItemType: AccordionListItemWallet
+ };
+ },
+
getInitialState() {
return mergeOptions(
PieceListStore.getState(),
@@ -128,6 +135,7 @@ let PieceList = React.createClass({
render() {
let loadingElement = (
);
+ let AccordionListItemType = this.props.accordionListItemType;
return (
{this.state.pieceList.map((piece, i) => {
return (
-
-
+
);
})}
diff --git a/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
new file mode 100644
index 00000000..263d7f08
--- /dev/null
+++ b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
@@ -0,0 +1,89 @@
+'use strict';
+
+import React from 'react';
+
+import AccordionListItemPiece from '../../../../ascribe_accordion_list/accordion_list_item_piece';
+
+import PieceListActions from '../../../../../actions/piece_list_actions';
+import PieceListStore from '../../../../../stores/piece_list_store';
+
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import GlobalNotificationModel from '../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
+
+import AclProxy from '../../../../acl_proxy';
+import SubmitToPrizeButton from './../ascribe_buttons/submit_to_prize_button';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+import { mergeOptions } from '../../../../../utils/general_utils';
+
+
+let AccordionListItemWallet = React.createClass({
+ propTypes: {
+ className: React.PropTypes.string,
+ content: React.PropTypes.object,
+ children: React.PropTypes.oneOfType([
+ React.PropTypes.arrayOf(React.PropTypes.element),
+ React.PropTypes.element
+ ])
+ },
+
+ getInitialState() {
+ return mergeOptions(
+ PieceListStore.getState(),
+ WhitelabelStore.getState()
+ );
+ },
+
+ componentDidMount() {
+ PieceListStore.listen(this.onChange);
+ WhitelabelStore.listen(this.onChange);
+ },
+
+ componentWillUnmount() {
+ PieceListStore.unlisten(this.onChange);
+ WhitelabelStore.unlisten(this.onChange);
+ },
+
+ onChange(state) {
+ this.setState(state);
+ },
+
+ handleSubmitPrizeSuccess(response) {
+ PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+ this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
+ let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+ GlobalNotificationActions.appendGlobalNotification(notification);
+ },
+
+ render() {
+
+ return (
+
+ {this.props.content.date_created.split('-')[0]}
+ }
+ buttons={
+ }
+ >
+ {this.props.children}
+
+ );
+ }
+});
+
+export default AccordionListItemWallet;
diff --git a/js/components/whitelabel/prize/components/piece_list.js b/js/components/whitelabel/prize/components/piece_list.js
index 73674e25..230bf7de 100644
--- a/js/components/whitelabel/prize/components/piece_list.js
+++ b/js/components/whitelabel/prize/components/piece_list.js
@@ -4,7 +4,7 @@ import React from 'react';
import PieceList from '../../../piece_list';
import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
-
+import AccordionListItemPrize from './ascribe_accordion_list/accordion_list_item_prize';
let PrizePieceList = React.createClass({
render() {
@@ -12,6 +12,7 @@ let PrizePieceList = React.createClass({