AccessionDetailsPage.tsx

import React from 'react';
import { connect } from 'react-redux';
import {Link} from "react-router-dom";

import { AccessionService } from '@genesys-pgr/client/service';
import { Property } from 'ui/common/Property';
import AccessionDetails from '@genesys-pgr/client/model/accession/AccessionDetails';
import { WithTranslation, withTranslation } from 'react-i18next';
import { canAddToCart, LocalStorageCart } from 'utilities';
import { WithConfig } from 'config/config';
import { CountryName } from 'ui/common/CountryName';
import GrinSpecies from 'ui/common/GrinSpecies';
import PdciTable from 'ui/common/PdciTable';
import LocationMap from 'map/LocationMap';
import Loading from 'ui/common/Loading';
import PageTitle from 'ui/common/PageTitle';

interface AccessionDetailsPageState {
  accession: AccessionDetails;
  cartItems: string[];
}

interface AccessionDetailsPageProps {
  match: any;
}

class AccessionDetailsPage extends React.Component<AccessionDetailsPageProps & WithTranslation & WithConfig, AccessionDetailsPageState> {
  public constructor(props) {
    super(props);
  }

  public state = {
    accession: null,
    cartItems: LocalStorageCart.getCartItemsLS(),
  };

  public componentDidMount() {
    this.loadData(this.props.match.params.uuid);
    if (typeof window !== 'undefined') {
      window.addEventListener('storage', this.handleLocalStorageUpdate);
      this.receiveData();
    }
  }

  public componentWillUnmount() {
    if (typeof window !== 'undefined') {
      window.removeEventListener('storage', this.handleLocalStorageUpdate);
    }
  }

  private handleLocalStorageUpdate = (e: StorageEvent) => {
    if (e.key === LocalStorageCart.LS_KEY) {
      this.receiveData();
    }
  };

  private receiveData = () => {
    this.setState({ cartItems: LocalStorageCart.getCartItemsLS() });
  };

  private loadData = (uuid: string): Promise<void> => {
    return AccessionService
      .getDetailsByUuid(uuid)
      .then((data) => {
        console.log('accession: ', data);
        this.setState({ accession: data });
      })
      .catch((e) => {
        console.log('Api call failed: ', e);
      });
  };

  private addToCart = (e: React.MouseEvent<HTMLButtonElement>) => {
    LocalStorageCart.addToCart(e.currentTarget.getAttribute('data-uuid'));
    this.setState( { cartItems: LocalStorageCart.getCartItemsLS() } )
  };
  private removeFromCart = (e: React.MouseEvent<HTMLButtonElement>) => {
    LocalStorageCart.removeFromCart(e.currentTarget.getAttribute('data-uuid'));
    this.setState( { cartItems: LocalStorageCart.getCartItemsLS() } )
  }

  private renderAddToCart = () => {
    const { accession } = this.state;
    const { t } = this.props;

    const canAdd = canAddToCart(accession.details);

    return !accession.details.historic && <button
      type="button"
      disabled={ !canAdd }
      name={ `button-add-${accession.details.uuid}` }
      data-uuid={ accession.details.uuid }
      className="btn btn-primary"
      onClick={ this.addToCart }
    >
      { canAdd ? t('cart.addToCart') : t('list.notAvailable') }
    </button>
  }

  public render() {
    const { accession, cartItems } = this.state;
    const { t, appConfig: { apiUrl, shoppingCart, map }, appConfig } = this.props;

    let propertyIndex = 0;

    if (accession === null) {
      return (
        <>
          <PageTitle title={ t('loading') } />
          <Loading/>
        </>
      );
    } else {
      const details = accession.details;
      const pdci = accession.pdci;
      return (
        <>
          <PageTitle title={ t('pagetitle.accession', { accessionNumber: details.accessionNumber }) } />
          <div className="d-flex justify-content-between align-items-center">
            <h1>{ details.accessionNumber }</h1>
            { shoppingCart.enabled &&
              <div>
                { cartItems.includes(this.props.match.params.uuid) ?
                  <button
                    type="button"
                    name={ `button-remove-${accession.details.uuid}` }
                    data-uuid={ accession.details.uuid }
                    className="btn btn-primary"
                    onClick={ this.removeFromCart }
                  >
                    { t('cart.removeFromCart') }
                  </button>
                  :
                  this.renderAddToCart()
                }
              </div>
            }
          </div>

          { details.historic && <div className="bg-warning p-2 mb-2">{ t('accession.historicalNote') }</div> }

          { details.doi && <Property title={ t('accession.doi') } value={ <a href={ `https://doi.org/${details.doi}` } target="_blank">{ details.doi }</a> } index={ propertyIndex++ }/> }
          { details.accessionName && <Property title={ t('accession.accessionName') } value={ <b>{ details.accessionName }</b> } index={ propertyIndex++ }/> }
          <Property title={ t('accession.acceNumb') } value={ details.accessionNumber } index={ propertyIndex++ } />
          { details.institute && details.institute.fullName &&
            <Property title={ t('accession.holdingInstitute') } value={ details.institute.fullName } index={ propertyIndex++ }/>
          }
          { details.institute && details.institute.code &&
            <Property title={ t('accession.instituteCode') } value={ details.institute.code } index={ propertyIndex++ }/>
          }
          { details.institute && details.institute.owner &&
            <Property title="Data provider" value={ details.institute.owner.name } index={ propertyIndex++ }/>
          }
          { details.sampStat &&
            <Property title={ t('accession.sampStat') } value={ t(`accession.sampleStatus.${details.sampStat}`) } index={ propertyIndex++ }/>
          }
          { details.countryOfOrigin &&
            <Property title={ t('accession.countryOfOrigin') } value={
              <CountryName code3={ details.countryOfOrigin.code3 } /> || details.countryOfOrigin.name
            } index={ propertyIndex++ } />
          }
          { details.ancest &&
            <Property title="Ancestral information (pedigree)" value={ details.ancest } index={ propertyIndex++ }/>
          }
          { details.storage && details.storage.length > 0 &&
            <Property
              title={ t('accession.storageType') }
              titleStyle={ { display: 'flex', alignItems: 'center' } }
              value={  details.storage.map((storage, i) => <div key={ `${i}-${storage}` }>{t(`accession.storage.${storage}`)}</div>) }
              index={ propertyIndex++ } />
          }
          { details.aegis &&
            <Property title="AEGIS" value="Accession is part of the European Collection" index={ propertyIndex++ }/>
          }
          { (details.donorCode || details.donorName) &&
            <Property title="Donor institute" value={ <span>{ details.donorCode } { details.donorName }</span> } index={ propertyIndex++ }/>
          }
          { details.donorNumb &&
            <Property title="Donor accession number" value={ details.donorNumb } index={ propertyIndex++ }/>
          }
          { details.duplSite && details.duplSite.length > 0 &&
          <Property
            title={ t('accession.details.safetyDuplicationInstitute') }
            titleStyle={ { display: 'flex', alignItems: 'center' } }
            value={  details.duplSite.map((duplSite, i) => <div key={ `${i}-${duplSite}` }>{duplSite}</div>) }
            index={ propertyIndex++ } />
          }
          { details.acceUrl &&
            <Property title="Accession URL" value={ details.acceUrl } index={ propertyIndex++ }/>
          }
          {/* {details.crop && <Property title={ t('accession.crop') } value={ details.crop.shortName } index={ propertyIndex++ }/>} */}
          { details.cropName && <Property title={ t('accession.cropName') } value={ details.cropName } index={ propertyIndex++ }/> }

          { details.taxonomy &&
          <>
            <h3 className="mt-4">{t('accession.details.providedTaxonomy')}</h3>
            <Property title={ t('accession.taxonomy.genus') } value={ details.taxonomy.genus } index={ propertyIndex++ }/>
            <Property title={ t('accession.taxonomy.species') } value={ details.taxonomy.species } index={ propertyIndex++ }/>
            <Property title={ t('accession.taxonomy.scientificName') } value={ <span dangerouslySetInnerHTML={ { __html: details.taxonomy.taxonNameHtml } } /> } index={ propertyIndex++ }/>

            { details.taxonomy.grinTaxonomySpecies &&
              <Property title={ t('accession.taxonomy.grinTaxonName') } value={
                <a href={ `https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=${details.taxonomy.grinTaxonomySpecies.id}` }>
                  <GrinSpecies grinSpecies={ details.taxonomy.grinTaxonomySpecies } />
                </a>
              } index={ propertyIndex++ }/> }
            { details.taxonomy.currentTaxonomySpecies && details.taxonomy.currentTaxonomySpecies.id !== details.taxonomy.grinTaxonomySpecies.id &&
              <Property title={ t('accession.taxonomy.grinCurrentName') } value={
                <a href={ `https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=${details.taxonomy.currentTaxonomySpecies.id}` }>
                  <GrinSpecies grinSpecies={ details.taxonomy.currentTaxonomySpecies } />
                </a>
              } index={ propertyIndex++ }/> }
          </>
          }

          {details.aliases && details.aliases.length > 0 &&
          <>
            <h3 className="mt-4">{t('accession.details.accessionNames')}</h3>
            {
              details.aliases.map((alias) => (
                <Property key={ alias.id } title={ t(`accession.alias.${alias.aliasType}`) } value={ `${alias.name} ${alias.usedBy || ''}` } index={ propertyIndex++ }/>
              ))
            }
          </>
          }

          {
            details.remarks && details.remarks.length > 0 &&
            <>
              <h3 className="mt-4">{t('accession.details.remarks')}</h3>
              {
                details.remarks.map((remark) => (
                  <Property key={ remark.id } title={ remark.fieldName || remark.remark } value={ remark.fieldName ? remark.remark : '' } index={ propertyIndex++ }/>
                ))
              }
            </>
          }

          { details.coll &&
            <>
              <h3 className="mt-4">{t('accession.details.collSite')}</h3>
              <Property title={ t('accession.coll.collSite') } value={ details.coll.collSite } index={ propertyIndex++ }/>
              { details.coll.collSrc &&
                <Property title={ t('accession.coll.collSrc') } value={ t(`accession.collectingSource.${details.coll.collSrc}`) } index={ propertyIndex++ }/>
              }
              <Property title={ t('accession.coll.collDate') } value={ details.coll.collDate } index={ propertyIndex++ }/>
              <Property title={ t('accession.coll.collMissId') } value={ details.coll.collMissId } index={ propertyIndex++ }/>
              <Property title={ t('accession.coll.collCode') } value={ details.coll.collCode } index={ propertyIndex++ }/>
              <Property title={ t('accession.coll.collName') } value={ details.coll.collName } index={ propertyIndex++ }/>
            </>
          }
          { details.geo &&
            <>
              <h3 className="mt-4">{ t('accession.details.geo') }</h3>
              <Property title={ t('accession.geo.latitude') } value={ details.geo.latitude } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.longitude') } value={ details.geo.longitude } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.datum') } value={ details.geo.datum } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.uncertainty') } value={ details.geo.uncertainty } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.elevation') } value={ details.geo.elevation } index={ propertyIndex++ }/>
              { map.enabled && details.institute && details.geo.latitude && details.geo.longitude &&
                <LocationMap position={ { lat: details.geo.latitude, lng: details.geo.longitude } }/>
              }
            </>
          }

          { accession.imageGallery &&
            <>
              <h2 className="mt-4">{ t('accession.details.images') }</h2>
              <div>
                { accession.imageGallery.images.map((image, idx) => (
                  <span key={ idx }>
                    <a href={ `${apiUrl}/api/v1/repository/download/d${image.storagePath}` }><img className="img-thumbnail" src={ `${apiUrl}/api/v1/repository/download/d/_thumbs${image.thumbnailPath}/200x200.jpg` } alt={ image.subject } /></a>
                  </span>
                )) }
              </div>
            </>
          }

          { appConfig.accession.subsets && accession.subsets && accession.subsets.length > 0 &&
            <>
              <h2 className="mt-4">{ t('accession.subsets') }</h2>
              { accession.subsets.map((subset, idx) => (
                <div key={ idx }>
                  <Link to={`/subsets/${subset.uuid}` }>{ subset.title }</Link>
                  <p>{ subset.description }</p>
                </div>
              )) }
            </>
          }

          { appConfig.accession.datasets && accession.datasets && accession.datasets.length > 0 &&
            <>
              <h2 className="mt-4">{ t('accession.datasets') }</h2>
              { accession.datasets.map((dataset, idx) => (
                <div key={ idx }>
                  <Link to={`/datasets/${dataset.uuid}` }>{ dataset.title }</Link>
                  <p>{ dataset.description }</p>
                </div>
              )) }
            </>
          }

          { appConfig.accession.pdci && pdci && <PdciTable pdci={ pdci } title={ t('accession.details.pdci') }/> }

          <h2 className="mt-4">{ t('accession.details.metadata') }</h2>
          <Property title={ t('accession.details.uuid') } value={ `urn:uuid:${details.uuid}` } index={ propertyIndex++ }/>
          <Property title={ t('accession.details.permanentURL') } value={
            <a href={ `https://purl.org/germplasm/id/${details.uuid}` }>
              {`https://purl.org/germplasm/id/${details.uuid}`}
            </a> } index={ propertyIndex++ }/>
          {
            details.lastModifiedDate &&
            <Property title={ t('accession.details.lastUpdated') } value={ new Date(details.lastModifiedDate).toLocaleString() } index={ propertyIndex++ }/>
          }
          {
            details.createdDate &&
            <Property title={ t('accession.details.created') } value={ new Date(details.createdDate).toLocaleString() } index={ propertyIndex++ }/>
          }
        </>
      );
    }
  }
}

const mapStateToProps = (state) => ({
  appConfig: state.appConfig.config,
  publicWebsiteUrl: (state.apiInfo.apiInfo && state.apiInfo.apiInfo.publicWebsiteUrl) || '',
});

export default connect(mapStateToProps)(withTranslation()(AccessionDetailsPage));