Merge remote-tracking branch 'remotes/origin/master' into piece-detail-setup

Conflicts:
	css/main.css
	js/components/ascribe_table/table_item_subtable.js

README.md

@@ -9,16 +9,24 @@ The code is JavaScript ECMA 6.
 
 Getting started
 ===============
-
+Install some nice extensions for Chrom(e|ium):
+- [Allow-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi):
+  we need this to open connection to external hosts ([staging.ascribe.io](http://staging.ascribe.io/) in our case)
+- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
+  
 ```bash
 git clone git@bitbucket.org:ascribe/onion.git
 cd onion
 npm install
 npm run watch
+
+python -mSimpleHTTPServer
 ```
 
+
+
 Code Conventions
-============
+================
 For this project, we're using:
 
 * 4 Spaces
@@ -28,10 +36,16 @@ For this project, we're using:
 * We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) 
 
 
+Troubleshooting
+===============
+
+Q: OMG nothing works
+A: try `npm install`. Someone may have updated some dependencies
+
+
 Reading list
 ============
 
-
 Start here
 ----------
 

css/main.css

@@ -36,9 +36,9 @@
     background-color: #F5F5F5;
 }
 
-.ascribe-table-item:hover {
-    background-color: #EEEEEE;
-}
+/*.ascribe-table-item:hover {
+    background-color: #EEEEEE; 
+}*/
 
 .ascribe-table-item-column {
     display: table;

js/actions/edition_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/actions/edition_list_actions.js

@@ -13,7 +13,10 @@ class EditionListActions {
         EditionListFetcher
             .fetch(pieceId)
             .then((res) => {
-                this.actions.updateEditionList(res.editions);
+                this.actions.updateEditionList({
+                    'editionList': res.editions,
+                    pieceId
+                });
             })
             .catch((err) => {
                 console.log(err);

js/components/ascribe_table/table.js

@@ -14,14 +14,12 @@ let Table = React.createClass({
 
     renderChildren() {
         var that = this;
-        return ReactAddons.Children.map(this.props.children, (child) => {
-            return that.props.itemList.map((item, i) => {
-                 return ReactAddons.addons.cloneWithProps(child, {
-                    columnList: this.props.columnList,
-                    columnContent: item,
-                    key: i
-                });
-            });           
+        return ReactAddons.Children.map(this.props.children, (child, i) => {
+            return ReactAddons.addons.cloneWithProps(child, {
+                columnList: this.props.columnList,
+                columnContent: this.props.itemList[i],
+                key: i
+            });       
         });
     },
     

js/components/ascribe_table/table_item_subtable.js

@@ -2,11 +2,16 @@ import React from 'react';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
 
+import EditionListStore from '../../stores/edition_list_store';
+import EditionListActions from '../../actions/edition_list_actions';
+
 // ToDo: Create Table-specific Utils to not lock it to projects utilities
 import GeneralUtils from '../../utils/general_utils';
 
-import TableItemSubtableButton from './table_item_subtable_button';
 import Table from './table';
+import TableItem from './table_item';
+import TableItemText from './table_item_text';
+import TableItemSubtableButton from './table_item_subtable_button';
 
 
 let TableItemSubtable = React.createClass({
@@ -26,16 +31,21 @@ let TableItemSubtable = React.createClass({
     },
 
     componentDidMount() {
-        this.props.store.listen(this.onChange);
+        EditionListStore.listen(this.onChange);
     },
 
     loadEditionList() {
-        this.props.actions.fetchEditionList(this.props.columnContent.id);
-
-        this.setState({
-            'open': true,
-            'editionList': this.props.store.getState()
-        });
+        if(this.state.open) {
+            this.setState({
+                'open': false
+            });
+        } else {
+            EditionListActions.fetchEditionList(this.props.columnContent.id);
+            this.setState({
+                'open': true,
+                'editionList': EditionListStore.getState()
+            });
+        }
     },
 
     calcColumnClasses(list, i) {
@@ -71,17 +81,25 @@ 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)
-            // ];
+            let columnList = [
+                new TableColumnContentModel('edition_number', 'Edition Number', TableItemText, 2, false),
+                new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
+                new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, true)
+            ];
 
-            if(this.state.open) {
+            if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {
                 return (
                     <div className="row">
                       <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                        <Table itemList={this.state.editionList}></Table>
+                        <Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
+                            {this.state.editionList[this.props.columnContent.id].map((edition, i) => {
+                                return (
+                                    <TableItem
+                                        key={i}>
+                                    </TableItem>
+                                );
+                            })} 
+                        </Table>
                       </div>  
                     </div>
                 );
@@ -103,4 +121,4 @@ let TableItemSubtable = React.createClass({
     }
 });
 
-export default TableItemSubtable;
+export default TableItemSubtable;

js/components/ascribe_table/table_item_text.js

@@ -3,7 +3,10 @@ import React from 'react';
 
 let TableItemText = React.createClass({
     propTypes: {
-        content: React.PropTypes.string.isRequired
+        content: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.number
+        ]) 
     },
 
     render() {

js/components/piece_list.js

@@ -4,9 +4,6 @@ import AltContainer from 'alt/AltContainer';
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
 
-import EditionListStore from '../stores/edition_list_store';
-import EditionListActions from '../actions/edition_list_actions';
-
 import Table from './ascribe_table/table';
 import TableItem from './ascribe_table/table_item';
 import TableItemImg from './ascribe_table/table_item_img';
@@ -26,16 +23,19 @@ let PieceList = React.createClass({
     },
 
     componentDidMount() {
+        PieceListStore.listen(this.onChange);
+
         let page = this.props.query.page || this.state.page;
         PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
+        PieceListStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
     },
 
-    onChange() {
-        this.setState(this.getInitialState());
+    onChange(state) {
+        this.setState(state);
     },
 
     paginationGoToPage(page) {
@@ -58,30 +58,40 @@ let PieceList = React.createClass({
 
         let currentPage = parseInt(this.props.query.page, 10);
         let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
-
-        // Could wrap this altContainer potentially once again.
-        return (
-            <AltContainer
-                store={PieceListStore}
-                transform={(props) => {
-                    return {
-                        'itemList': props.pieceList,
-                        'itemListCount': props.pieceListCount,
-                        'orderBy': props.orderBy,
-                        'orderAsc': props.orderAsc,
-                        'search': props.search,
-                        'page': props.page,
-                        'pageSize': props.pageSize,
-                    }
-                }}>
-                <Table columnList={columnList} changeOrder={this.tableChangeOrder}>
-                    <TableItemSubtable store={EditionListStore} actions={EditionListActions}></TableItemSubtable>
-                </Table>
-                <Pagination currentPage={currentPage}
-                            totalPages={totalPages}
-                            goToPage={this.paginationGoToPage} />
-            </AltContainer>
-        );
+        
+        if(this.state.pieceList && this.state.pieceList.length > 0) {
+            return (
+                <div>
+                    <Table 
+                        columnList={columnList} 
+                        changeOrder={this.tableChangeOrder}
+                        itemList={this.state.pieceList}
+                        itemListCount={this.state.pieceListCount}
+                        orderBy={this.state.orderBy}
+                        orderAsc={this.state.orderAsc}
+                        search={this.state.search}
+                        page={this.state.page}
+                        pageSize={this.state.pageSize}>
+                            {this.state.pieceList.map((item, i) => {
+                                return (
+                                    <TableItemSubtable
+                                        key={i}>
+                                    </TableItemSubtable>
+                                );
+                            })}
+                    </Table>
+                    <Pagination currentPage={currentPage}
+                                totalPages={totalPages}
+                                goToPage={this.paginationGoToPage}>
+                    </Pagination>
+                </div>
+            );
+        } else {
+            return (
+                <p>Loading</p>
+            );
+        }
+        
     }
 });
 

js/fetchers/edition_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 + 'editions/' + pieceId + '/', {
+            headers: {
+                'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
+            }
+        }).then((res) => res.json());
+    }
+};
+
+export default PieceFetcher;

js/stores/edition_list_store.js

@@ -3,12 +3,12 @@ import EditionsListActions from '../actions/edition_list_actions';
 
 class EditionListStore {
     constructor() {
-        this.editionList = [];
+        this.editionList = {};
         this.bindActions(EditionsListActions);
     }
 
-    onUpdateEditionList(editionList) {
-        this.editionList = editionList;
+    onUpdateEditionList({pieceId, editionList}) {
+        this.editionList[pieceId] = editionList;
     }
 };
 

js/stores/edition_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);