Added PieceDetail boilerplate code

js/actions/piece_actions.js

@@ -0,0 +1,23 @@
+import alt from '../alt';
+import PieceFetcher from '../fetchers/piece_fetcher';
+
+
+class PieceActions {
+    constructor() {
+        this.generateActions(
+            'updatePiece'
+        );
+    }
+
+    fetchOne(pieceId) {
+        PieceFetcher.fetchOne(pieceId)
+            .then((res) => {
+                this.actions.updatePiece(res.piece);
+            })
+            .catch((err) => {
+                console.log(err);           
+            });
+    }
+};
+
+export default alt.createActions(PieceActions);

js/components/ascribe_piece_detail/piece_detail.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+/**
+ * This is the component that implements display-specific functionality
+ */
+let PieceDetail = React.createClass({
+  propTypes: {
+    title: React.PropTypes.string.isRequired
+  },
+
+  render() {
+    return (
+      <p>Title: {this.props.title}</p>
+    );
+  }
+});
+
+export default PieceDetail;

js/components/ascribe_table/table_item_subtable.js

@@ -6,6 +6,7 @@ import TableColumnContentModel from '../../models/table_column_content_model';
 import GeneralUtils from '../../utils/general_utils';
 
 import TableItemSubtableButton from './table_item_subtable_button';
+import Table from './table';
 
 
 let TableItemSubtable = React.createClass({
@@ -29,8 +30,12 @@ let TableItemSubtable = React.createClass({
     },
 
     loadEditionList() {
-        console.log(this.props);
+        this.props.actions.fetchEditionList(this.props.columnContent.id);
-        //this.props.actions.actions.fetchEditionList();
+
+        this.setState({
+            'open': true,
+            'editionList': this.props.store.getState()
+        });
     },
 
     calcColumnClasses(list, i) {
@@ -63,6 +68,26 @@ let TableItemSubtable = React.createClass({
             });
         };
 
+
+        let renderEditionListTable = () => {
+
+            // let columnList = [
+            //     new TableColumnContentModel('thumbnail', '', TableItemImg, 2, false),
+            //     new TableColumnContentModel('artist_name', 'Artist', TableItemText, 4, true),
+            //     new TableColumnContentModel('title', 'Title', TableItemText, 4, true)
+            // ];
+
+            if(this.state.open) {
+                return (
+                    <div className="row">
+                      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                        <Table itemList={this.state.editionList}></Table>
+                      </div>  
+                    </div>
+                );
+            }
+        };
+
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
                 <div className="row">
@@ -72,6 +97,7 @@ let TableItemSubtable = React.createClass({
                         </TableItemSubtableButton>
                     </div>
                 </div>
+                {renderEditionListTable()}
             </div> 
         );
     }

js/components/ascribe_table/table_item_subtable_button.js

@@ -3,13 +3,14 @@ import React from 'react';
 let TableItemSubtableButton = React.createClass({
     
     propTypes: {
-        content: React.PropTypes.string.isRequired
+        content: React.PropTypes.string.isRequired,
+        onClick: React.PropTypes.func.isRequired
     },
 
     render() {
         return (
             <span>
-                <button type="button" className="btn btn-ascribe btn-primary btn-sm">
+                <button type="button" className="btn btn-ascribe btn-primary btn-sm" onClick={this.props.onClick}>
                     {this.props.content}
                 </button>
             </span>

js/components/piece.js

@@ -1,11 +1,45 @@
 import React from 'react';
 
+import PieceActions from '../actions/piece_actions';
+import PieceStore from '../stores/piece_store';
 
+import PieceDetail from './ascribe_piece_detail/piece_detail';
+
+/**
+ * This is the component that implements resource/data specific functionality
+ */
 let Piece = React.createClass({
+
+    getInitialState() {
+        return PieceStore.getState();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        PieceActions.fetchOne(this.props.params.pieceId);
+        PieceStore.listen(this.onChange);
+    },
+
+    componentDidUnmount() {
+        PieceStore.unlisten(this.onChange);
+    },
+
     render() {
-        return (
+
-            <p>this.props.piece.title</p>
+        if('title' in this.state.piece) {
-        );
+            return (
+                <PieceDetail title={this.state.piece.title}></PieceDetail>
+            );
+        } else {
+            return (
+                <p>Loading</p>
+            );
+        }
+
+        
     }
 });
 

js/components/piece_list.js

@@ -16,7 +16,7 @@ import TableItemSubtableButton from './ascribe_table/table_item_subtable_button'
 
 import TableColumnContentModel from '../models/table_column_content_model';
 
-import Pagination from './ascribe_pagination/pagination'
+import Pagination from './ascribe_pagination/pagination';
 
 
 let PieceList = React.createClass({

js/fetchers/piece_fetcher.js

@@ -0,0 +1,22 @@
+import fetch from 'isomorphic-fetch';
+
+import AppConstants from '../constants/application_constants';
+import FetchApiUtils from '../utils/fetch_api_utils';
+
+
+let PieceFetcher = {
+    /**
+     * Fetch one user from the API.
+     * If no arg is supplied, load the current user
+     * 
+     */
+    fetchOne(pieceId) {
+        return fetch(AppConstants.baseUrl + 'pieces/' + pieceId + '/', {
+            headers: {
+                'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
+            }
+        }).then((res) => res.json());
+    }
+};
+
+export default PieceFetcher;

js/routes.js

@@ -11,7 +11,9 @@ let Route = Router.Route;
 let routes = (
     <Route name="app" path="/" handler={AscribeApp}>
         <Route name="pieces" path="/pieces" handler={PieceList}>
-            <Route name="piece" path="/pieces/:bitcoin_ID_noPrefix" handler={Piece} />
+            
+        </Route>
+        <Route name="piece" path="/pieces/:pieceId" handler={Piece}>
         </Route>
     </Route>
 );

js/stores/piece_store.js

@@ -0,0 +1,16 @@
+import alt from '../alt';
+import PieceAction from '../actions/piece_actions';
+
+
+class PieceStore {
+    constructor() {
+        this.piece = {}
+        this.bindActions(PieceAction);
+    }
+
+    onUpdatePiece(piece) {
+        this.piece = piece;
+    }
+};
+
+export default alt.createStore(PieceStore);