diff --git a/README.md b/README.md index f221bee5..7cc52667 100644 --- a/README.md +++ b/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 diff --git a/js/actions/artwork_list_actions.js b/js/actions/artwork_list_actions.js index 72010dd2..9ec50352 100644 --- a/js/actions/artwork_list_actions.js +++ b/js/actions/artwork_list_actions.js @@ -9,13 +9,17 @@ class ArtworkListActions { } fetchArtworkList() { - ArtworkFetcher.fetch().end((err, res) => { - if (err) { - console.error('OMG cannot retrieve the artworks'); - } else { - this.actions.updateArtworkList(res.body['pieces']); - } - }) + ArtworkFetcher.fetch() + /*.then((res) => { + return res.json(); + })*/ + .then((res) => { + this.actions.updateArtworkList(res.pieces); + }) + .catch((err) => { + console.log(err); + console.error('OMG cannot retrieve the artworks'); + }); } }; diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js new file mode 100644 index 00000000..98e2ea0f --- /dev/null +++ b/js/constants/application_constants.js @@ -0,0 +1,5 @@ +var constants = { + 'baseUrl': 'http://staging.ascribe.io/api/' +}; + +export default constants; \ No newline at end of file diff --git a/js/fetchers/artwork_fetcher.js b/js/fetchers/artwork_fetcher.js index 524d0486..5398e2b3 100644 --- a/js/fetchers/artwork_fetcher.js +++ b/js/fetchers/artwork_fetcher.js @@ -1,10 +1,21 @@ -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() { - return request.get('http://staging.ascribe.io/api/pieces/?page=1&page_size=10') - .auth('dimi@mailinator.com', '0000000000'); + fetch(page=1, pageSize=10) { + let params = FetchApiUtils.argsToQueryParams({ + 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(); }); } }; -export default ArtworkListFetcher; +export default ArtworkListFetcher; \ No newline at end of file diff --git a/js/utils/fetch_api_utils.js b/js/utils/fetch_api_utils.js new file mode 100644 index 00000000..96bbbbfa --- /dev/null +++ b/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; \ No newline at end of file diff --git a/package.json b/package.json index 0299bb6a..c8853f04 100644 --- a/package.json +++ b/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": {