Load some pieces from API endpoint

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

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(
   	<AscribeApp />,
   	document.getElementById('main')

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 (
             <ul>
-                <li>This is an artwork</li>
+                {this.state.artworkList.map((artwork) => {
+                    return (
+                        <li>{artwork.title}</li>
+                    );
+                })}
             </ul>
         );
     }
 };
+*/
+
+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 (
+            <ul>
+                {this.state.artworkList.map((artwork) => {
+                    return (
+                        <li>{artwork.title}</li>
+                    );
+                })}
+            </ul>
+        );
+    }
+});
 
 export default ArtworkList;

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