From 773d42a3b8196002e1820f97d889a17ee29a20f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 9 Jul 2015 15:44:20 +0200 Subject: [PATCH] add firstEdition to a piece --- js/actions/piece_list_actions.js | 15 ++++++- .../accordion_list_item.js | 19 +++++---- .../accordion_list_item_edition_widget.js | 40 +++++++++++++++---- js/fetchers/piece_list_fetcher.js | 4 ++ js/stores/piece_list_store.js | 34 +++++++--------- 5 files changed, 75 insertions(+), 37 deletions(-) diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index eb9a5403..188935f7 100644 --- a/js/actions/piece_list_actions.js +++ b/js/actions/piece_list_actions.js @@ -4,12 +4,12 @@ import alt from '../alt'; import PieceListFetcher from '../fetchers/piece_list_fetcher'; - class PieceListActions { constructor() { this.generateActions( 'updatePieceList', - 'updatePieceListRequestActions' + 'updatePieceListRequestActions', + 'addFirstEditionToPiece' ); } @@ -32,6 +32,7 @@ class PieceListActions { .catch((err) => reject(err)); }); } + fetchPieceRequestActions() { PieceListFetcher .fetchRequestActions() @@ -40,6 +41,16 @@ class PieceListActions { }); } + fetchFirstEditionForPiece(pieceId) { + return new Promise((resolve, reject) => { + PieceListFetcher.fetchFirstEditionForPiece(pieceId) + .then((firstEdition) => { + this.actions.addFirstEditionToPiece({pieceId, firstEdition}); + resolve(); + }) + .catch((err) => reject(err)); + }); + } } export default alt.createActions(PieceListActions); diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 8ed27235..69d4bae5 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -3,14 +3,15 @@ import React from 'react'; import Router from 'react-router'; +import PieceListStore from '../../stores/piece_list_store'; +import PieceListActions from '../../actions/piece_list_actions'; + 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 requests from '../../utils/requests'; - import { getLangText } from '../../utils/lang_utils'; let AccordionListItem = React.createClass({ @@ -22,9 +23,14 @@ let AccordionListItem = React.createClass({ mixins: [Router.Navigation], - handleClick(){ - requests.get('piece_first_edition_id', {'piece_id': this.props.content.id}) - .then((res) => this.transitionTo('edition', {editionId: res.bitcoin_id})); + componentDidMount() { + if(this.props.content.num_editions !== 0) { + PieceListActions.fetchFirstEditionForPiece(this.props.content.id); + } + }, + + onChange(state) { + this.setState(state); }, getGlyphicon(){ @@ -39,7 +45,6 @@ let AccordionListItem = React.createClass({ }, render() { - return (
@@ -57,7 +62,7 @@ let AccordionListItem = React.createClass({

{getLangText('by %s', this.props.content.artist_name)}

{this.props.content.date_created.split('-')[0]} - {/* {getLangText('%s license', this.props.content.license_type.code)} 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 e66705be..2bc86016 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 @@ -6,10 +6,11 @@ import EditionListActions from '../../actions/edition_list_actions'; import EditionListStore from '../../stores/edition_list_store'; import { getLangText } from '../../utils/lang_utils'; +import { mergeOptions } from '../../utils/general_utils'; let AccordionListItemEditionWidget = React.createClass({ propTypes: { - piece: React.PropTypes.object + piece: React.PropTypes.object.isRequired }, getInitialState() { @@ -28,6 +29,9 @@ let AccordionListItemEditionWidget = React.createClass({ this.setState(state); }, + /** + * 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; @@ -40,6 +44,10 @@ let AccordionListItemEditionWidget = React.createClass({ } }, + /** + * Depending on the state of isEditionListOpenForPieceId we either want to display + * a glyphicon arrow pointing upwards or downwards + */ getGlyphicon() { let pieceId = this.props.piece.id; let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false; @@ -56,13 +64,29 @@ let AccordionListItemEditionWidget = React.createClass({ }, render() { - return ( - - {this.getGlyphicon()} {this.props.piece.num_editions + ' ' + getLangText('Editions')} - - ); + let piece = this.props.piece; + let numEditions = piece.num_editions; + + if(numEditions === 1) { + let firstEditionId = piece && piece.firstEdition ? ', ' + piece.firstEdition.bitcoin_id : ''; + let editionMapping = piece && piece.firstEdition ? piece.firstEdition.edition_number + '/' + piece.num_editions : ''; + + return ( + + {this.getGlyphicon()} {editionMapping + ' ' + getLangText('Edition') + firstEditionId} + + ); + } else { + return ( + + {this.getGlyphicon()} {numEditions + ' ' + getLangText('Editions')} + + ); + } } }); diff --git a/js/fetchers/piece_list_fetcher.js b/js/fetchers/piece_list_fetcher.js index f3b7de83..bdf0ea5e 100644 --- a/js/fetchers/piece_list_fetcher.js +++ b/js/fetchers/piece_list_fetcher.js @@ -16,6 +16,10 @@ let PieceListFetcher = { fetchRequestActions() { return requests.get('pieces_list_request_actions'); + }, + + fetchFirstEditionForPiece(pieceId) { + return requests.get('piece_first_edition_id', {'piece_id': pieceId}); } }; diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index e18dbc31..2e36924e 100644 --- a/js/stores/piece_list_store.js +++ b/js/stores/piece_list_store.js @@ -27,26 +27,6 @@ class PieceListStore { this.orderAsc = true; this.bindActions(PieceListActions); } - - /*onShowEditionList(pieceId) { - this.pieceList - .forEach((piece) => { - if(piece.id === pieceId) { - if(piece.show) { - piece.show = false; - } else { - piece.show = true; - } - } - }); - }*/ - - /*onCloseAllEditionLists() { - this.pieceList - .forEach((piece) => { - piece.show = false; - }); - }*/ onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) { this.page = page; @@ -85,11 +65,25 @@ class PieceListStore { this.pieceList = pieceList; } + onUpdatePieceListRequestActions(requestActions) { this.pieceList.forEach((piece) => { piece.requestAction = requestActions.indexOf(piece.id) > -1; }); } + + onAddFirstEditionToPiece({pieceId, firstEdition}) { + let filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId); + + if(filteredPieceList.length === 1) { + + let piece = filteredPieceList[0]; + piece.firstEdition = firstEdition.edition; + + } else { + throw new Error('Could not find a matching piece in piece list since its either not there or piecelist contains duplicates.'); + } + } } export default alt.createStore(PieceListStore, 'PieceListStore');