diff --git a/README.md b/README.md
index ef78e518..21c85c0c 100644
--- a/README.md
+++ b/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
----------
diff --git a/css/main.css b/css/main.css
index 636b79b7..1676fc84 100644
--- a/css/main.css
+++ b/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;
diff --git a/js/actions/edition_actions.js b/js/actions/edition_actions.js
new file mode 100644
index 00000000..d657539b
--- /dev/null
+++ b/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);
diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js
index cca1cf72..74b42f71 100644
--- a/js/actions/edition_list_actions.js
+++ b/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);
diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js
index 7de508bb..90067be6 100644
--- a/js/components/ascribe_table/table.js
+++ b/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
+ });
});
},
diff --git a/js/components/ascribe_table/table_item_subtable.js b/js/components/ascribe_table/table_item_subtable.js
index 942e72c4..0b0fd2ac 100644
--- a/js/components/ascribe_table/table_item_subtable.js
+++ b/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 (
-
+
+ {this.state.editionList[this.props.columnContent.id].map((edition, i) => {
+ return (
+
+
+ );
+ })}
+
);
@@ -103,4 +121,4 @@ let TableItemSubtable = React.createClass({
}
});
-export default TableItemSubtable;
+export default TableItemSubtable;
\ No newline at end of file
diff --git a/js/components/ascribe_table/table_item_text.js b/js/components/ascribe_table/table_item_text.js
index 1badbefd..0e90a2d5 100644
--- a/js/components/ascribe_table/table_item_text.js
+++ b/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() {
diff --git a/js/components/piece.js b/js/components/edition.js
similarity index 100%
rename from js/components/piece.js
rename to js/components/edition.js
diff --git a/js/components/piece_container.js b/js/components/edition_container.js
similarity index 100%
rename from js/components/piece_container.js
rename to js/components/edition_container.js
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 3806b0eb..aca59279 100644
--- a/js/components/piece_list.js
+++ b/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 (
- {
- return {
- 'itemList': props.pieceList,
- 'itemListCount': props.pieceListCount,
- 'orderBy': props.orderBy,
- 'orderAsc': props.orderAsc,
- 'search': props.search,
- 'page': props.page,
- 'pageSize': props.pageSize,
- }
- }}>
-
-
-
- );
+
+ if(this.state.pieceList && this.state.pieceList.length > 0) {
+ return (
+
+
+ {this.state.pieceList.map((item, i) => {
+ return (
+
+
+ );
+ })}
+
+
+
+
Loading
+ );
+ }
+
}
});
diff --git a/js/fetchers/edition_fetcher.js b/js/fetchers/edition_fetcher.js
new file mode 100644
index 00000000..1f70edbf
--- /dev/null
+++ b/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;
diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js
index 0412122b..4158e74c 100644
--- a/js/stores/edition_list_store.js
+++ b/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;
}
};
diff --git a/js/stores/edition_store.js b/js/stores/edition_store.js
new file mode 100644
index 00000000..35e8c229
--- /dev/null
+++ b/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);