WBBrowseDialog slowly tarts working...

frontend/src/js/dialog/wb-browse-dialog-project-list.js

@@ -16,54 +16,29 @@ class WBBrowseDialogProjectList extends Component {
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.setState({
-      'page': 0
-    });
-    this.fetchRows();
-  }
-
-  changePage(page) {
-    this.setState({
-      'page': page
-    });
-    this.fetchRows();
-  }
-
-  popHistory() {
-    const state = this.state.history.pop();
-    this.setState(state);
     this.fetchRows();
   }
 
   prepareRows(items) {
-    const { resetSearch, pushHistory } = this.props;
-    const ownerUuid = ( 'ownerUuid' in this.state ?
-      this.state.ownerUuid : this.props.ownerUuid );
+    const { navigate } = this.props;
     return items.map(it => [
       (
         <a href="#" onclick={ e => {
           e.preventDefault();
-          this.setState({
-            'ownerUuid': it.uuid,
-            'page': 0
-          });
-          this.fetchRows();
-          this.state.history.push({ 'ownerUuid': ownerUuid });
-          pushHistory(this);
-          resetSearch();
+          navigate('/browse-dialog/browse/' + it.uuid);
         } }>{ it.name }</a>
       ),
-      it.file_count,
-      it.file_size_total
+      it.uuid
     ]);
   }
 
-  fetchRows() {
+  fetchSharedWithMe() {
+
+  }
+
+  fetchOwned() {
     const { arvHost, arvToken } = this.props.app.state;
-    const { textSearch, itemsPerPage } = this.props;
-    const ownerUuid = ('ownerUuid' in this.state ?
-      this.state.ownerUuid : this.props.ownerUuid);
-    const { page } = this.state;
+    const { ownerUuid, page, textSearch, itemsPerPage } = this.props;
     const filters = [
       ['group_class', '=', 'project']
     ];
@@ -76,22 +51,34 @@ class WBBrowseDialogProjectList extends Component {
       encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + itemsPerPage +
       '&offset=' + (page * itemsPerPage));
+    return prom;
+  }
+
+  fetchRows() {
+    const { mode, itemsPerPage } = this.props;
+
+    let prom = (mode === 'shared-with-me') ?
+      this.fetchSharedWithMe() :
+      this.fetchOwned();
+
     prom = prom.then(xhr => {
       this.setState({
         'rows': this.prepareRows(xhr.response.items),
         'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
       });
     });
+
+    return prom;
   }
 
-  render({ app }, { ownerUuid, textSearch, page, numPages, rows }) {
+  render({ app, navigate }, { ownerUuid, textSearch, page, numPages, rows }) {
     return (
       <div>
-        <WBTable columns={ ['Name', 'File Count', 'Size'] }
+        <WBTable columns={ ['Name', 'UUID'] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages } activePage={ page }
-          onPageChanged={ i => this.changePage(i) }
+          onPageChanged={ i => navigate({ 'topPage': i }) }
           chunkSize="3" />
       </div>
     );

frontend/src/js/dialog/wb-browse-dialog.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
-import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
+import WBBrowseDialogCollectionList from 'wb-browse-dialog-collection-list';
 import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
 import WBBrowseDialogUserList from 'wb-browse-dialog-user-list';
 import linkState from 'linkstate';
@@ -35,19 +35,35 @@ class WBBrowseDialog extends Component {
     this.state.selected = {};
     this.state.selectedOrder = [];
     const { currentUser } = this.props.app.state;
-    this.navigate('/browse-dialog/browse/' + currentUser.uuid, false);
+    this.state.currentUrl = '/browse-dialog/browse/' + currentUser.uuid;
+    this.state.uuid = currentUser.uuid;
+    this.state.mode = 'browse';
+    this.state.topPage = 0;
+    this.state.bottomPage = 0;
   }
 
   navigateBack() {
-    if (this.history.length === 0)
+    if (this.state.history.length === 0)
       return;
-    const url = this.history.pop();
-    navigate(url, false);
+    const url = this.state.history.pop();
+    this.navigate(url, false);
   }
 
-  navigate(url, history=true) {
-    if (history)
-      this.history.push(this.state.currentUrl);
+  navigate(url, useHistory=true) {
+    if (typeof(url) === 'object') {
+      url = ['', 'browse-dialog',
+        'mode' in url ? url.mode : this.state.mode,
+        'uuid' in url ? url.uuid : this.state.uuid,
+        'topPage' in url ? url.topPage : this.state.topPage,
+        'bottomPage' in url ? url.bottomPage : this.state.bottomPage,
+        'textSearch' in url ? url.textSearch : this.state.textSearch
+      ].join('/');
+    }
+
+    url = url.substr(url.indexOf('/browse-dialog/'));
+
+    if (useHistory)
+      this.state.history.push(this.state.currentUrl);
     let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch ] = url.split('/');
     topPage = parseInt(topPage, 10) || 0;
     bottomPage = parseInt(bottomPage, 10) || 0;
@@ -89,7 +105,7 @@ class WBBrowseDialog extends Component {
     });
   }
 
-  render({ app, id, selectMany, selectWhat }, { currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
+  render({ app, id, selectMany, selectWhat }, { history, currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
@@ -104,8 +120,13 @@ class WBBrowseDialog extends Component {
 
             <div class="modal-body">
               <div class="mb-3">
-                <a href="#" class="btn btn-outline-secondary mr-2">Back</a>
-                <a href="#" class="btn btn-outline-primary mr-2">Home</a>
+                <a href="#" class={ 'btn btn-outline-secondary mr-2' +
+                  (history.length === 0 ? ' disabled': '') }
+                  onclick={ e => { e.preventDefault();
+                    this.navigateBack(); } }>Back</a>
+                <a href="#" class="btn btn-outline-primary mr-2"
+                  onclick={ e => { e.preventDefault();
+                    this.navigate('/browse-dialog/browse/' + app.state.currentUser.uuid); } }>Home</a>
                 <a href="#" class="btn btn-outline-primary mr-2">All Projects</a>
                 <a href="#" class="btn btn-outline-primary mr-2">All Users</a>
                 <a href="#" class="btn btn-outline-primary mr-2">Shared with Me</a>
@@ -124,8 +145,10 @@ class WBBrowseDialog extends Component {
               { (mode === 'browse' || mode === 'shared-with-me') ? (
                 <div>
                   <h5>Projects</h5>
-                  <WBBrowseDialogProjectList app={ app } parent={ this }
-                    page={ topPage } />
+                  <WBBrowseDialogProjectList app={ app }
+                    navigate={ url => this.navigate(url) }
+                    mode={ mode } ownerUuid={ uuid }
+                    page={ topPage } textSearch={ textSearch } />
                 </div>
               ) : null }