URL driven pagination

app/assets/javascripts/components/App.js

@@ -25,6 +25,7 @@ Aviator.setRoutes({
   '/collection': {
     target: {
       show: function(e) {
+        UIActions.setPagination({page: e.params.page});
         UIActions.selectCollection({id: e.params['id']});
         if(!e.params['sampleID'])
         {
@@ -41,7 +42,7 @@ Aviator.setRoutes({
         UIActions.selectElement({type: 'sample', id: e.params['sampleID']})
       }
     },
-    '/:sampleID': 'show'
+    '/:sampleID': 'show',
   },
 
   '/sharing': {

app/assets/javascripts/components/ElementsTable.js

@@ -18,7 +18,7 @@ export default class ElementsTable extends React.Component {
       elements: [],
 
       // Pagination
-      activePage: 1,
+      activePage: this.props.activePage || 1,
       numberOfPages: 0,
       pageSize: 5
     }
@@ -26,10 +26,21 @@ export default class ElementsTable extends React.Component {
 
   componentDidMount() {
     ElementStore.listen(this.onChange.bind(this));
+    UIStore.listen(this.onChangeUI.bind(this));
   }
 
   componentWillUnmount() {
     ElementStore.unlisten(this.onChange.bind(this));
+    UIStore.unlisten(this.onChangeUI.bind(this));
+  }
+
+  onChangeUI(state) {
+    let page = state.pagination && state.pagination.page;
+    if(page) {
+      this.setState({
+        activePage: parseInt(page)
+      });
+    }
   }
 
   onChange(state) {
@@ -43,18 +54,25 @@ export default class ElementsTable extends React.Component {
     let elementsDidChange = !deepEqual(elements, this.state.elements);
     let currentElementDidChange = !deepEqual(currentElement, this.state.currentElement);
 
+    let pagination = UIStore.getState().pagination;
+    let page = pagination.page && parseInt(pagination.page) || 1;
+    let numberOfPages = Math.ceil(elements.length / this.state.pageSize);
+    if(page > numberOfPages) {
+      page = 1
+    }
+
     if(elementsDidChange) {
-      let numberOfPages = Math.ceil(elements.length / this.state.pageSize);
       this.setState({
         elements: elements,
         currentElement: currentElement,
         numberOfPages: numberOfPages,
-        activePage: 1
+        activePage: page
       });
     }
     else if (currentElementDidChange) {
       this.setState({
-        currentElement: currentElement
+        currentElement: currentElement,
+        activePage: page
       });
     }
   }
@@ -117,14 +135,33 @@ export default class ElementsTable extends React.Component {
   }
 
   showDetails(element) {
-    let uiState = UIStore.getState();
-    Aviator.navigate(`/collection/${uiState.currentCollectionId}/${element.type}/${element.id}`);
+    Aviator.navigate(this._elementDetailsUrl(element), this._queryParams());
   }
 
   handlePaginationSelect(event, selectedEvent) {
     this.setState({
       activePage: selectedEvent.eventKey
-    });
+    }, () => {
+      if(this.state.currentElement) {
+        Aviator.navigate(this._elementDetailsUrl(this.state.currentElement), this._queryParams())
+      }
+      else {
+        Aviator.navigate(this._collectionUrl(), this._queryParams())
+      }
+    })
+  }
+
+  _elementDetailsUrl(element) {
+    return `${this._collectionUrl()}/${element.type}/${element.id}`
+  }
+
+  _collectionUrl() {
+    let uiState = UIStore.getState();
+    return `/collection/${uiState.currentCollectionId}`
+  }
+
+  _queryParams() {
+    return {queryParams: { page: this.state.activePage }};
   }
 
   pagination() {

app/assets/javascripts/components/SampleDetails.js

@@ -43,7 +43,10 @@ export default class SampleDetails extends React.Component {
 
   closeDetails() {
     let uiState = UIStore.getState();
-    Aviator.navigate(`/collection/${uiState.currentCollectionId}`);
+    let pagination = uiState.pagination;
+    let page = pagination.page && parseInt(pagination.page) || 1;
+    let queryParams = page ? {queryParams: { page: page }} : {}
+    Aviator.navigate(`/collection/${uiState.currentCollectionId}`, queryParams);
   }
 
   updateSample() {

app/assets/javascripts/components/actions/UIActions.js

@@ -29,6 +29,10 @@ class UIActions {
   deselectAllElements(type) {
     this.dispatch(type);
   }
+
+  setPagination(pagination) {
+    this.dispatch(pagination);
+  }
 }
 
 export default alt.createActions(UIActions);

app/assets/javascripts/components/stores/UIStore.js

@@ -11,7 +11,8 @@ class UIStore {
     this.state = {
       checkedSampleIds: Immutable.List(),
       currentCollectionId: null,
-      currentSampleId: null
+      currentSampleId: null,
+      pagination: null
     };
 
     this.bindListeners({
@@ -21,7 +22,8 @@ class UIStore {
       handleUncheckElement: UIActions.uncheckElement,
       handleUncheckAllElements: UIActions.uncheckAllElements,
       handleDeselectAllElements: UIActions.deselectAllElements,
-      handleSelectElement: UIActions.selectElement
+      handleSelectElement: UIActions.selectElement,
+      handleSetPagination: UIActions.setPagination
     });
   }
 
@@ -83,6 +85,10 @@ class UIStore {
     // TODO also for reactions and so on
     ElementActions.fetchSamplesByCollectionId(collection.id)
   }
+
+  handleSetPagination(pagination) {
+    this.state.pagination = pagination;
+  }
 }
 
 export default alt.createStore(UIStore, 'UIStore');