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

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';
import { Router } from 'preact-router';
import { createHashHistory } from 'history';

class WBBrowseDialog extends Component {
  constructor(...args) {
    super(...args);
    this.state.history = [];
    this.state.history_1 = createHashHistory();
  }

  resetSearch() {
    this.setState({
      'textSearch': null,
      'textSearchInput': null
    });
  }

  pushHistory(child) {
    const { history, textSearch } = 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, history, history_1 }) {
    return (
      <div class="modal" id={ id } tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Browse</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              <Router history={ history_1 }>
                <div path="/a">
                  A
                </div>
                <div path="/b">
                  B
                </div>
              </Router>

              <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">
                  <button class="btn btn-outline-secondary" type="button">Back</button>
                </div>

                <input type="text" class="form-control" placeholder="Search"
                  aria-label="Search" value={ textSearchInput }
                  onChange={ linkState(this, 'textSearchInput') } />

                <div class="input-group-append">
                  <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 } textSearch={ textSearch }
                resetSearch={ () => this.resetSearch() }
                pushHistory={ () => this.pushHistory() }
                popHistory={ () => this.popHistory() } />

              { mode === 'collection-content' ? (
                <h5>Content</h5>
              ) : (
                <div>
                  <h5>Collections</h5>
                  <WBBrowseDialogCollectionList app={ app } />
                </div>
              ) }
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-primary">Accept</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default WBBrowseDialog;