add firstEdition to a piece

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);

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 (
             <div className="row">
                 <div className={this.props.className}>
@@ -57,7 +62,7 @@ let AccordionListItem = React.createClass({
                             <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
                             <div>
                                 <span>{this.props.content.date_created.split('-')[0]}</span>
-                                <AccordionListItemEditionWidget 
+                                <AccordionListItemEditionWidget
                                     piece={this.props.content} />
                                 {/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
                                     {getLangText('%s license', this.props.content.license_type.code)}

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 (
-            <span
-                onClick={this.toggleTable}
-                className="ascribe-accordion-list-item-edition-widget pull-right">
-                 {this.getGlyphicon()} {this.props.piece.num_editions + ' ' + getLangText('Editions')}
-            </span>
-        );
+        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 (
+                <span
+                    onClick={this.toggleTable}
+                    className="ascribe-accordion-list-item-edition-widget pull-right">
+                     {this.getGlyphicon()} {editionMapping + ' ' + getLangText('Edition') + firstEditionId}
+                </span>
+            );
+        } else {
+            return (
+                <span
+                    onClick={this.toggleTable}
+                    className="ascribe-accordion-list-item-edition-widget pull-right">
+                     {this.getGlyphicon()} {numEditions + ' ' + getLangText('Editions')}
+                </span>
+            );
+        }
     }
 });
 

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});
     }
 };
 

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');