From 4da72d88465812ca3d086d9d7a0feaebadcfde55 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Tue, 19 May 2015 10:16:44 +0200
Subject: [PATCH] Load some pieces from API endpoint

---
 js/actions/artwork_list_actions.js | 13 ++++++-
 js/app.js                          |  2 +-
 js/components/artwork_list.js      | 61 +++++++++++++++++++++++++++---
 js/fetchers/artwork_fetcher.js     |  2 +-
 4 files changed, 70 insertions(+), 8 deletions(-)

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(
   	<AscribeApp />,
   	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 (
             <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;
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');
     }
 };