From 5e10d1cfbdb286f78bb1c9eb839dd80ec4be717c Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 12:59:11 +0100
Subject: [PATCH] Incorporated projects page into URL routing.

---
 .../src/js/component/wb-project-listing.js    | 23 +++++++++++++------
 frontend/src/js/page/wb-app.js                |  2 +-
 frontend/src/js/page/wb-browse.js             |  7 ++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 0f6013d..cb107d1 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import { route } from 'preact-router';
 import makeArvadosRequest from 'make-arvados-request';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
@@ -9,17 +10,19 @@ class WBProjectListing extends Component {
     super(...args);
     this.state.rows = [];
     this.state.numPages = 0;
-    this.state.activePage = 0;
   }
 
   componentDidMount() {
-    this.setActivePage(0);
+    this.fetchItems();
   }
 
   prepareRows(items) {
     return items.map(item => [
       (<div>
-        <div>{ item['name'] }</div>
+        <div>
+          <a href="#"
+            onclick={ e => { e.preventDefault(); route('/browse/' + item['uuid']) }}>{ item['name'] }</a>
+        </div>
         <div>{ item['uuid'] }</div>
       </div>),
       item['description'],
@@ -27,8 +30,8 @@ class WBProjectListing extends Component {
     ]);
   }
 
-  setActivePage(i) {
-    this.state.activePage = i;
+  fetchItems() {
+    let i = this.props.activePage;
     let filters = [
       [ 'group_class', '=', 'project' ]
     ];
@@ -45,14 +48,20 @@ class WBProjectListing extends Component {
       }));
   }
 
-  render({ arvHost, arvToken, ownerUuid }, { rows, numPages, activePage }) {
+  componentWillReceiveProps(nextProps, nextState) {
+    // this.setState({ 'rows': [] }); // .rows = [];
+    this.props = nextProps;
+    this.fetchItems();
+  }
+
+  render({ arvHost, arvToken, ownerUuid, activePage, onPageChanged }, { rows, numPages }) {
     return (
       <div>
         <WBTable columns={ [ 'Name', 'Description', 'Owner' ] }
           rows={ rows } />
         <WBPagination numPages={ numPages }
           activePage={ activePage }
-          onPageChanged={ i => this.setActivePage(i) } />
+          onPageChanged={ i => onPageChanged(i) } />
       </div>
     );
   }
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index c0674b8..54f305e 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -30,7 +30,7 @@ class WBApp extends Component {
 
         <WBSignIn path="/sign-in" />
 
-        <WBBrowse path="/browse/:ownerUuid?" appCallbacks={ this.appCallbacks } />
+        <WBBrowse path="/browse/:ownerUuid?/:activePage?" appCallbacks={ this.appCallbacks } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 3ad52c7..f14e59b 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -1,10 +1,11 @@
 import { h, Component } from 'preact';
+import { route } from 'preact-router';
 import WBNavbar from 'wb-navbar';
 import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
 
 class WBBrowse extends Component {
-  render({ ownerUuid, appCallbacks }) {
+  render({ ownerUuid, activePage, appCallbacks }) {
     return (
       <div>
         <WBNavbar items={ [
@@ -17,7 +18,9 @@ class WBBrowse extends Component {
         <WBProjectListing arvHost="api.arkau.roche.com"
           arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
           ownerUuid={ ownerUuid }
-          itemsPerPage="5" />
+          itemsPerPage="5"
+          activePage={ Number(activePage || 0) }
+          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />
       </div>
     );
   }