create artwork component

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);
             })

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; 

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>

js/components/ascribe_app.js

@@ -14,7 +14,6 @@ class AscribeApp extends React.Component {
                 <navigation>
                     <Link to="artworks">artworks</Link>
                 </navigation>
-                
                 <RouteHandler />
             </div> 
         );

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;

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());
     }

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>
 );
 

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) => {

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;