wba/frontend/src/js/component/wb-path-display.js

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';
import { encodeURIComponentIncludingDots } from 'wb-process-misc';

class WBPathDisplay extends Component {
  fetchData() {
    const { app } = this.props;
    const { arvHost, arvToken } = app.state;
    let { path } = this.props;
    if (path.endsWith('/'))
      path = path.substr(0, path.length - 1);
    let m;
    if (m = /^[0-9a-f]{32}\+[0-9]+/.exec(path));
    else if (m = /^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(path));
    else return;
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/collections/' + m[0]);
    prom = prom.then(xhr => this.setState({
      item: xhr.response,
      tail: path.substr(m[0].length)
    }));
    prom = prom.catch(() => this.setState({ 'error': 'Cannot load' }));
  }

  componentDidMount() {
    this.fetchData();
  }

  componentWillReceiveProps(nextProps) {
    this.props = nextProps;
    this.fetchData();
  }

  render({}, { item, tail, error }) {
    if (error)
      return error;

    if (!item)
      return 'Loading...';

    return (
      <span>
        <a href={ '/collection-browse/' + item.uuid }>
          { item.name || item.uuid }
        </a><a href={ '/collection-browse/' + item.uuid + '/' + encodeURIComponentIncludingDots(tail) }>
          { tail }
        </a>
      </span>
    );
  }
}

export default WBPathDisplay;