Remove superagent, add isomorphic fetch instead again, add constants as well as utility functions

README.md

@@ -23,7 +23,8 @@ For this project, we're using:
 
 * 4 Spaces
 * We use ES6
-* We don't use ES6's class declaration because it does not support Mixins as well as Autobinding ([Blog post about it](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
+* We don't use ES6's class declaration for React components because it does not support Mixins as well as Autobinding ([Blog post about it](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
+* We don't use camel case for file naming but in everything Javascript related
 
 
 Reading list

js/actions/artwork_list_actions.js

@@ -9,13 +9,17 @@ class ArtworkListActions {
     }
 
     fetchArtworkList() {
-        ArtworkFetcher.fetch().end((err, res) => {
+        ArtworkFetcher.fetch()
-            if (err) {
+            /*.then((res) => {
-                console.error('OMG cannot retrieve the artworks');
+                return res.json();
-            } else {
+            })*/
-                this.actions.updateArtworkList(res.body['pieces']);
+            .then((res) => {
-            }
+                this.actions.updateArtworkList(res.pieces);
             })
+            .catch((err) => {
+                console.log(err);
+                console.error('OMG cannot retrieve the artworks');                
+            });
     }
 };
 

js/constants/application_constants.js

@@ -0,0 +1,5 @@
+var constants = {
+    'baseUrl': 'http://staging.ascribe.io/api/'
+};
+
+export default constants;

js/fetchers/artwork_fetcher.js

@@ -1,9 +1,20 @@
-import request from 'superagent';
+import fetch from 'isomorphic-fetch';
+
+import AppConstants from '../constants/application_constants';
+import FetchApiUtils from '../utils/fetch_api_utils';
 
 var ArtworkListFetcher = {
-    fetch() {
+    fetch(page=1, pageSize=10) {
-        return request.get('http://staging.ascribe.io/api/pieces/?page=1&page_size=10')
+        let params = FetchApiUtils.argsToQueryParams({
-                      .auth('dimi@mailinator.com', '0000000000');
+            page,
+            'page_size': pageSize // this is kind of a bummer...
+        });
+
+        return fetch(AppConstants.baseUrl + 'pieces/' + params, {
+            headers: {
+                'Authorization': 'Basic ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw'
+            }
+        }).then((res) => { return res.json(); });
     }
 };
 

js/utils/fetch_api_utils.js

@@ -0,0 +1,34 @@
+let FetchApiUtils = {
+
+    /**
+     * Takes a key-value object of this form:
+     *
+     *  {
+     *     'page': 1,
+     *     'pageSize': 10
+     *  }
+     *
+     * and converts it to a query-parameter, which you can append to your URL.
+     * 
+     * @param  {[type]}
+     * @return {[type]}
+     */
+    argsToQueryParams(obj) {
+        return Object
+                .keys(obj)
+                .map((key, i) => {
+                    let s = '';
+
+                    if(i === 0) {
+                        s += '?';
+                    } else {
+                        s += '&';
+                    }
+
+                    return s + key + '=' + obj[key];
+                })
+                .join('');
+    }
+};
+
+export default FetchApiUtils;

package.json

@@ -28,10 +28,10 @@
   "dependencies": {
     "alt": "^0.15.6",
     "classnames": "^1.2.2",
+    "isomorphic-fetch": "^2.0.2",
     "object-assign": "^2.0.0",
     "react": "^0.13.2",
     "react-router": "^0.13.3",
-    "superagent": "^1.2.0",
     "uglifyjs": "^2.4.10"
   },
   "jest": {