add encoding and camel to snake case conversion to FetchApiUtils

js/actions/artwork_list_actions.js

@@ -10,15 +10,11 @@ class ArtworkListActions {
 
     fetchArtworkList() {
         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');                
             });
     }
 };

js/components/ascribe_app.js

@@ -10,8 +10,11 @@ class AscribeApp extends React.Component {
     render() {
         return (
             <div>
-                <h1>ascribe all the things!</h1>
+                <header>ascribe</header>
+                <navigation>
                     <Link to="artworks">artworks</Link>
+                </navigation>
+                
                 <RouteHandler />
             </div> 
         );

js/fetchers/artwork_fetcher.js

@@ -7,14 +7,14 @@ var ArtworkListFetcher = {
     fetch(page=1, pageSize=10) {
         let params = FetchApiUtils.argsToQueryParams({
             page,
-            'page_size': pageSize // this is kind of a bummer...
+            pageSize
         });
 
         return fetch(AppConstants.baseUrl + 'pieces/' + params, {
             headers: {
                 'Authorization': 'Basic ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw'
             }
-        }).then((res) => { return res.json(); });
+        }).then((res) => res.json());
     }
 };
 

js/utils/fetch_api_utils.js

@@ -9,6 +9,11 @@ let FetchApiUtils = {
      *  }
      *
      * and converts it to a query-parameter, which you can append to your URL.
+     * The return looks like this:
+     *
+     * ?page=1&page_size=10
+     *
+     * CamelCase gets converted to snake_case!
      * 
      * @param  {[type]}
      * @return {[type]}
@@ -25,7 +30,9 @@ let FetchApiUtils = {
                         s += '&';
                     }
 
-                    return s + key + '=' + obj[key];
+                    let snakeCaseKey = key.replace(/[A-Z]/, (match) => '_' + match.toLowerCase());
+
+                    return s + snakeCaseKey + '=' + encodeURIComponent(obj[key]);
                 })
                 .join('');
     }