Working on history in browse dialog.

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

@@ -7,6 +7,7 @@ class WBBrowseDialogProjectList extends Component {
   constructor(...args) {
     super(...args);
     this.state.rows = [];
+    this.state.history = [];
   }
 
   componentDidMount() {
@@ -28,9 +29,30 @@ class WBBrowseDialogProjectList extends Component {
     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 );
     return items.map(it => [
-      it.name,
+      (
+        <a href="#" onclick={ e => {
+          e.preventDefault();
+          this.setState({
+            'ownerUuid': it.uuid,
+            'page': 0
+          });
+          this.fetchRows();
+          this.state.history.push({ 'ownerUuid': ownerUuid });
+          pushHistory(this);
+          resetSearch();
+        } }>{ it.name }</a>
+      ),
       it.file_count,
       it.file_size_total
     ]);
@@ -57,7 +79,7 @@ class WBBrowseDialogProjectList extends Component {
     prom = prom.then(xhr => {
       this.setState({
         'rows': this.prepareRows(xhr.response.items),
-        'numPages': xhr.response.items_available / itemsPerPage
+        'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
       });
     });
   }
@@ -69,14 +91,16 @@ class WBBrowseDialogProjectList extends Component {
           rows={ rows } />
 
         <WBPagination numPages={ numPages } activePage={ page }
-          onPageChanged={ i => this.changePage(i) } />
+          onPageChanged={ i => this.changePage(i) }
+          chunkSize="3" />
       </div>
     );
   }
 }
 
 WBBrowseDialogProjectList.defaultProps = {
-  'itemsPerPage': 5
+  'itemsPerPage': 5,
+  'resetSearch': () => {}
 };
 
 export default WBBrowseDialogProjectList;

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

@@ -1,9 +1,36 @@
 import { h, Component } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
+import linkState from 'linkstate';
 
 class WBBrowseDialog extends Component {
-  render({ app, id }, { mode }) {
+  constructor(...args) {
+    super(...args);
+    this.state.history = [];
+  }
+
+  resetSearch() {
+    this.setState({
+      'textSearch': null,
+      'textSearchInput': null
+    });
+  }
+
+  pushHistory(child) {
+    const { history } = this.state;
+    history.push([ child, { textSearch } ]);
+    this.state.history = history.slice(history.length - 1000);
+  }
+
+  popHistory() {
+    if (this.history.length === 0)
+      return;
+    const entry = history.pop();
+    this.setState(entry[1]);
+    entry[0].popHistory();
+  }
+
+  render({ app, id }, { mode, textSearch, textSearchInput }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
@@ -16,9 +43,10 @@ class WBBrowseDialog extends Component {
             </div>
 
             <div class="modal-body">
-              <button class="btn btn-sm btn-outline-primary">Back</button>
-
-              <input class="form-control" type="search" placeholder="Search" />
+              <div>
+                <h5>Go to: <a href="#">Home</a>, <a href="#">All Projects</a>,
+                  <a href="#">All Users</a>, <a href="#">Shared with Me</a></h5>
+              </div>
 
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
@@ -26,15 +54,20 @@ class WBBrowseDialog extends Component {
                 </div>
 
                 <input type="text" class="form-control" placeholder="Search"
-                  aria-label="Search" />
+                  aria-label="Search" value={ textSearchInput }
+                  onChange={ linkState(this, 'textSearchInput') } />
 
                 <div class="input-group-append">
-                  <button class="btn btn-outline-primary" type="button">Search</button>
+                  <button class="btn btn-outline-primary" type="button"
+                    onclick={ () => this.setState({ 'textSearch': this.state.textSearchInput }) }>Search</button>
                 </div>
               </div>
 
               <h5>Projects</h5>
-              <WBBrowseDialogProjectList app={ app } />
+              <WBBrowseDialogProjectList app={ app } textSearch={ textSearch }
+                resetSearch={ () => this.resetSearch() }
+                pushHistory={ () => this.pushHistory() }
+                popHistory={ () => this.popHistory() } />
 
               { mode === 'collection-content' ? (
                 <h5>Content</h5>