From 47246a9083d2fcb6600c23c54b0064c35ecb8d1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 19 May 2015 17:01:28 +0200
Subject: [PATCH] create artwork component

---
 js/actions/artwork_list_actions.js    |  2 +-
 js/components/artwork.js              | 11 +++++++++++
 js/components/artwork_list.js         |  5 ++++-
 js/components/ascribe_app.js          |  1 -
 js/constants/application_constants.js |  3 ++-
 js/fetchers/artwork_fetcher.js        | 15 ++++++++++++---
 js/routes.js                          |  2 ++
 js/utils/fetch_api_utils.js           |  8 ++++++--
 js/utils/general_utils.js             | 22 ++++++++++++++++++++++
 9 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 js/components/artwork.js
 create mode 100644 js/utils/general_utils.js

diff --git a/js/actions/artwork_list_actions.js b/js/actions/artwork_list_actions.js
index bbabe2f3..b9618bd4 100644
--- a/js/actions/artwork_list_actions.js
+++ b/js/actions/artwork_list_actions.js
@@ -9,7 +9,7 @@ class ArtworkListActions {
     }
 
     fetchArtworkList() {
-        ArtworkFetcher.fetch()
+        ArtworkFetcher.fetch(1, 10)
             .then((res) => {
                 this.actions.updateArtworkList(res.pieces);
             })
diff --git a/js/components/artwork.js b/js/components/artwork.js
new file mode 100644
index 00000000..27ab31e2
--- /dev/null
+++ b/js/components/artwork.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+let Artwork = React.createClass({
+    render() {
+        return (
+            <p>this.props.artwork.title</p>
+        );
+    }
+});
+
+export default Artwork; 
\ No newline at end of file
diff --git a/js/components/artwork_list.js b/js/components/artwork_list.js
index d5ec18bd..3bde0815 100644
--- a/js/components/artwork_list.js
+++ b/js/components/artwork_list.js
@@ -1,7 +1,10 @@
 import React from 'react';
+import Router from 'react-router';
+
 import ArtworkListStore from '../stores/artwork_list_store';
 import ArtworkListActions from '../actions/artwork_list_actions';
 
+let Link = Router.Link;
 
 var ArtworkList = React.createClass({
     getInitialState() {
@@ -26,7 +29,7 @@ var ArtworkList = React.createClass({
             <ul>
                 {this.state.artworkList.map((artwork, i) => {
                     return (
-                        <li key={i}>{artwork.title}</li>
+                        <li key={i}><Link to="artwork" params={{'bitcoin_ID_noPrefix': artwork.bitcoin_ID_noPrefix}}>{artwork.title}</Link></li>
                     );
                 })}
             </ul>
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 5a24c95a..3bd406ff 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -14,7 +14,6 @@ class AscribeApp extends React.Component {
                 <navigation>
                     <Link to="artworks">artworks</Link>
                 </navigation>
-                
                 <RouteHandler />
             </div> 
         );
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 98e2ea0f..982a5373 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -1,5 +1,6 @@
 var constants = {
-    'baseUrl': 'http://staging.ascribe.io/api/'
+    'baseUrl': 'http://staging.ascribe.io/api/',
+    'debugCredentialBase64': 'ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw' // dimi@mailinator:0000000000
 };
 
 export default constants;
\ No newline at end of file
diff --git a/js/fetchers/artwork_fetcher.js b/js/fetchers/artwork_fetcher.js
index 2ac0c820..1b06fd83 100644
--- a/js/fetchers/artwork_fetcher.js
+++ b/js/fetchers/artwork_fetcher.js
@@ -4,15 +4,24 @@ import AppConstants from '../constants/application_constants';
 import FetchApiUtils from '../utils/fetch_api_utils';
 
 var ArtworkListFetcher = {
-    fetch(page=1, pageSize=10) {
+    /**
+     * Fetches a list of pieces from the API.
+     * Can be called with all supplied queryparams the API.
+     * 
+     * 
+     */
+    fetch(page, pageSize, search, ordering) {
+
         let params = FetchApiUtils.argsToQueryParams({
             page,
-            pageSize
+            pageSize,
+            search,
+            ordering
         });
 
         return fetch(AppConstants.baseUrl + 'pieces/' + params, {
             headers: {
-                'Authorization': 'Basic ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw'
+                'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
             }
         }).then((res) => res.json());
     }
diff --git a/js/routes.js b/js/routes.js
index 39b28f0d..a181d2c8 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -3,12 +3,14 @@ import Router from 'react-router';
 
 import AscribeApp from './components/ascribe_app';
 import ArtworkList from './components/artwork_list';
+import Artwork from './components/artwork';
 
 var Route = Router.Route;
 
 var routes = (
     <Route name="app" path="/" handler={AscribeApp}>
         <Route name="artworks" handler={ArtworkList} />
+            <Route name="artwork" path="/artworks/:bitcoin_ID_noPrefix" handler={Artwork} />
     </Route>
 );
 
diff --git a/js/utils/fetch_api_utils.js b/js/utils/fetch_api_utils.js
index 5d537102..57fa12fa 100644
--- a/js/utils/fetch_api_utils.js
+++ b/js/utils/fetch_api_utils.js
@@ -1,3 +1,6 @@
+import GeneralUtils from './general_utils';
+
+// TODO: Create Unittests that test all functions
 let FetchApiUtils = {
 
     /**
@@ -15,10 +18,11 @@ let FetchApiUtils = {
      *
      * CamelCase gets converted to snake_case!
      * 
-     * @param  {[type]}
-     * @return {[type]}
      */
     argsToQueryParams(obj) {
+
+        obj = GeneralUtils.sanitize(obj);
+
         return Object
                 .keys(obj)
                 .map((key, i) => {
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
new file mode 100644
index 00000000..bf2e443e
--- /dev/null
+++ b/js/utils/general_utils.js
@@ -0,0 +1,22 @@
+// TODO: Create Unittests that test all functions
+
+let GeneralUtils = {
+    /**
+     * Removes undefined and null values from an key-value object.
+     */
+    sanitize(obj) {
+        Object
+            .keys(obj)
+            .map((key) => {
+                // By matching null with a double equal, we can match undefined and null
+                // http://stackoverflow.com/a/15992131
+                if(obj[key] == null) {
+                    delete obj[key];
+                }
+            });
+
+        return obj;
+    }
+};
+
+export default GeneralUtils;
\ No newline at end of file