first cut pagination for editions

js/actions/edition_list_actions.js

@@ -15,19 +15,27 @@ class EditionListActions {
         );
     }
 
-    fetchEditionList(pieceId, orderBy, orderAsc) {
+    fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc) {
         if(!orderBy && typeof orderAsc == 'undefined') {
             orderBy = 'edition_number';
             orderAsc = true;
         }
 
+        // Taken from: http://stackoverflow.com/a/519157/1263876
+        if(typeof page === 'undefined' && typeof pageSize === 'undefined') {
+            page = 1;
+            pageSize = 10;
+        }
+
         return new Promise((resolve, reject) => {
             EditionListFetcher
-                .fetch(pieceId, orderBy, orderAsc)
+                .fetch(pieceId, page, pageSize, orderBy, orderAsc)
                 .then((res) => {
                     this.actions.updateEditionList({
                         'editionListOfPiece': res.editions,
                         pieceId,
+                        page,
+                        pageSize,
                         orderBy,
                         orderAsc
                     });

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -67,6 +67,11 @@ let AccordionListItemTableEditions = React.createClass({
         }
     },
 
+    loadFurtherEditions() {
+        let editionList = this.state.editionList[this.props.parentId];
+        EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize);
+    },
+
     changeEditionListOrder(orderBy, orderAsc) {
         EditionListActions.fetchEditionList(this.props.parentId, orderBy, orderAsc);
     },
@@ -166,10 +171,14 @@ let AccordionListItemTableEditions = React.createClass({
                     orderBy={orderBy}
                     orderAsc={orderAsc}
                     changeOrder={this.changeEditionListOrder}>
+                    <AccordionListItemTableToggle
+                        className="ascribe-accordion-list-table-toggle"
+                        onClick={this.loadFurtherEditions}
+                        message={show ? <p>Show me more</p> : ''} />
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle"
                         onClick={this.toggleTable}
-                        show={show} />
+                        message={show ? 'Hide all editions' : 'Show all editions'} />
                 </AccordionListItemTable>
                 
             </div>

js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js

@@ -6,7 +6,10 @@ let AccordionListItemTableToggle = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         onClick: React.PropTypes.func,
-        show: React.PropTypes.bool
+        message: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.element
+        ])
     },
 
     render() {
@@ -14,7 +17,7 @@ let AccordionListItemTableToggle = React.createClass({
             <span
                 className={this.props.className}
                 onClick={this.props.onClick}>
-                {this.props.show ? 'Hide all Editions' : 'Show all Editions'}
+                {this.props.message}
             </span>
         );
     }

js/fetchers/edition_list_fetcher.js

@@ -9,9 +9,14 @@ let EditionListFetcher = {
     /**
      * Fetches a list of editions from the API.
      */
-    fetch(pieceId, orderBy, orderAsc) {
+    fetch(pieceId, page, pageSize, orderBy, orderAsc) {
         let ordering = generateOrderingQueryParams(orderBy, orderAsc);
-        return requests.get('editions_list', { 'piece_id': pieceId, ordering });
+        return requests.get('editions_list', { 
+            'piece_id': pieceId,
+            page, 
+            pageSize,
+            ordering
+        });
     }
 };
 

js/stores/edition_list_store.js

@@ -12,18 +12,29 @@ class EditionListStore {
         this.bindActions(EditionsListActions);
     }
 
-    onUpdateEditionList({pieceId, editionListOfPiece, orderBy, orderAsc}) {
+    onUpdateEditionList({pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc}) {
         if(this.editionList[pieceId]) {
-            this.editionList[pieceId].forEach((edition, i) => {
-                // This uses the index of the new editionList for determining the edition.
-                // If the list of editions can be sorted in the future, this needs to be changed!
-                if (editionListOfPiece[i]) {
-                    editionListOfPiece[i] = React.addons.update(edition, {$merge: editionListOfPiece[i]});
-                }
-            });
-        }
 
-        this.editionList[pieceId] = editionListOfPiece;
+            let pageOfCurrentEditionList = this.editionList[pieceId].slice((page - 1) * pageSize, pageSize);
+            
+            if(pageOfCurrentEditionList.length < 1) {
+                // just append newly received editions
+                console.log('asdasd');
+                this.editionList[pieceId].push.apply(this.editionList[pieceId], editionListOfPiece);
+            } else {
+                // merge with existing page's editions
+                pageOfCurrentEditionList.forEach((edition, i) => {
+
+                    if(editionListOfPiece[i]) {
+                        edition = React.addons.update(edition, {$merge: editionListOfPiece[i]});
+                    }
+
+                    this.editionList[pieceId].splice((page - 1) * pageSize + i, 0, edition);
+                });
+            }
+        } else {
+            this.editionList[pieceId] = editionListOfPiece;
+        }
 
         /**
          * orderBy and orderAsc are specific to a single list of editions
@@ -31,6 +42,8 @@ class EditionListStore {
          *
          * Default values for both are set in the editon_list-actions.
          */
+        this.editionList[pieceId].page = page;
+        this.editionList[pieceId].pageSize = pageSize;
         this.editionList[pieceId].orderBy = orderBy;
         this.editionList[pieceId].orderAsc = orderAsc;
     }