wba/frontend/src/js/component/wb-lazy-inline-name.js

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';
import WBIdTools from 'wb-id-tools';
import urlForObject from 'url-for-object';
import arvadosObjectName from 'arvados-object-name';

class WBLazyInlineName extends Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.identifier === this.props.identifier)
      return;
    this.setState({ item: null });
  }

  fetchData() {
    const { app, identifier } = this.props;
    const { arvHost, arvToken } = app.state;
    const typeName = WBIdTools.typeName(identifier);
    if (WBIdTools.isPDH(identifier)) {
      const filters = [
        [ 'portable_data_hash', '=', identifier ]
      ];
      let prom = makeArvadosRequest(arvHost, arvToken,
        '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)));
      prom = prom.then(xhr => this.setState({ item: {
        uuid: xhr.response.items.length > 0 ? xhr.response.items[0].uuid : '',
        name: xhr.response.items.length > 0 ? xhr.response.items[0].name : 'Not Found' +
          ( xhr.response.items_available > 1 ? ' (+' + (xhr.response.items_available - 1) + ' others)' : '' )
      }}));
      return;
    }
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/' + typeName + 's/' + identifier);
    prom = prom.then(xhr => this.setState({ item: xhr.response }));
    prom = prom.catch(() => this.setState({ item: { name: 'Not Found' }}));
  }

  render({ identifier }, { item }) {
    if (item) {
      return (
        <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
      );
    }

    const typeName = WBIdTools.typeName(identifier);
    const url = (typeName === 'group' ? '/browse/' + identifier :
      typeName === 'collection' ? '/collection-browse/' + identifier :
      urlForObject({ uuid: identifier }));
    return (
      <span>
        <a href={ url }>{ identifier }</a> <a href="#" title="Look up"
          onclick={ e => { e.preventDefault(); this.fetchData(); } }>
          <i class="fas fa-search"></i>
        </a>
      </span>
    );
  }
}

export default WBLazyInlineName;