diff --git a/js/actions/artwork_list_actions.js b/js/actions/artwork_list_actions.js
index f79015eb..72010dd2 100644
--- a/js/actions/artwork_list_actions.js
+++ b/js/actions/artwork_list_actions.js
@@ -1,11 +1,22 @@
import alt from '../alt';
+import ArtworkFetcher from '../fetchers/artwork_fetcher';
class ArtworkListActions {
constructor() {
this.generateActions(
'updateArtworkList'
);
- };
+ }
+
+ fetchArtworkList() {
+ ArtworkFetcher.fetch().end((err, res) => {
+ if (err) {
+ console.error('OMG cannot retrieve the artworks');
+ } else {
+ this.actions.updateArtworkList(res.body['pieces']);
+ }
+ })
+ }
};
export default alt.createActions(ArtworkListActions);
diff --git a/js/app.js b/js/app.js
index 88e4d67b..db30113e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -6,7 +6,7 @@ import Router from 'react-router';
import AscribeApp from './components/ascribe_app';
import routes from './routes';
-Router.run(routes, Router.HistoryLocation, (AscribeApp) => {
+Router.run(routes, Router.HashLocation, (AscribeApp) => {
React.render(
,
document.getElementById('main')
diff --git a/js/components/artwork_list.js b/js/components/artwork_list.js
index c43d411d..13c5d1fe 100644
--- a/js/components/artwork_list.js
+++ b/js/components/artwork_list.js
@@ -1,24 +1,75 @@
import React from 'react';
-import ArtworkFetcher from '../fetchers/artwork_fetcher';
import ArtworkListStore from '../stores/artwork_list_store';
+import ArtworkListActions from '../actions/artwork_list_actions';
+/*
class ArtworkList extends React.Component {
- componentDidMount() {
- ArtworkFetcher.fetch().end();
+ constructor(props) {
+ super(props);
+ this.state = ArtworkListStore.getState();
}
- getInitialState() {
+ componentDidMount() {
+ ArtworkListStore.listen(this.onChange);
+ ArtworkListActions.fetchArtworkList();
+ }
+ componentWillUnmount() {
+ ArtworkListStore.unlisten(this.onChange);
+ }
+
+ onChange(state) {
+ console.log(this);
+ this.setState(state);
}
render() {
+ console.log('render');
return (
- - This is an artwork
+ {this.state.artworkList.map((artwork) => {
+ return (
+ - {artwork.title}
+ );
+ })}
);
}
};
+*/
+
+var ArtworkList = React.createClass({
+ getInitialState() {
+ return ArtworkListStore.getState();
+ },
+
+ componentDidMount() {
+ ArtworkListStore.listen(this.onChange);
+ ArtworkListActions.fetchArtworkList();
+ },
+
+ componentWillUnmount() {
+ ArtworkListStore.unlisten(this.onChange);
+ },
+
+ onChange(state) {
+ console.log(this);
+ this.setState(state);
+ },
+
+ render() {
+ console.log('render');
+ return (
+
+ {this.state.artworkList.map((artwork) => {
+ return (
+ - {artwork.title}
+ );
+ })}
+
+ );
+ }
+});
export default ArtworkList;
diff --git a/js/fetchers/artwork_fetcher.js b/js/fetchers/artwork_fetcher.js
index 80611630..524d0486 100644
--- a/js/fetchers/artwork_fetcher.js
+++ b/js/fetchers/artwork_fetcher.js
@@ -2,7 +2,7 @@ import request from 'superagent';
var ArtworkListFetcher = {
fetch() {
- return request.get('http://staging.ascribe.io/api/users/')
+ return request.get('http://staging.ascribe.io/api/pieces/?page=1&page_size=10')
.auth('dimi@mailinator.com', '0000000000');
}
};