DisplayPage.tsx

import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { translate } from 'react-i18next';

// Actions
import { loadAccession } from 'actions/accessions';
import {addAccessionToMyList, removeAccessionFromMyList} from 'actions/user';

// Models
import Accession from 'model/Accession';

// UI
import { Link } from 'react-router-dom';
import PrettyDate from 'ui/common/time/PrettyDate';
import PageLayout, { PageContents, MainSection, PageSection } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import DOI from 'ui/common/DOI';
import { ExternalLink } from 'ui/common/Links';
import SciName from 'ui/genesys/SciName';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import ReduxCheckbox from 'ui/common/checkbox';
import CropChips from 'ui/genesys/crop/CropChips';
import LocationMap from 'ui/common/LocationMap';
import {InstituteLink} from 'ui/genesys/Links';
import McpdDate from 'ui/common/time/McpdDate';


interface IBrowsePageProps extends React.ClassAttributes<any> {
  t: any;
  uuid: string;
  doi: string; // DOI comes from the route without the '10.'
  accession: Accession;
  error: any;
  loadAccession: any;
  accessions: any;
  addAccessionToMyList: any;
  removeAccessionFromMyList: any;
}

class BrowsePage extends React.Component<IBrowsePageProps, any> {

  protected static needs = [
    ({ params: { uuid, doi } }) => {
        return doi ? loadAccession({ doi: `10.${doi}` }) :  loadAccession({ uuid });
    },
  ];

  constructor(props: IBrowsePageProps, context: any) {
      super(props, context);
  }

  public componentWillMount() {
    const { accession, doi, uuid, loadAccession } = this.props;
    const theDoi = `10.${doi}`;
    if (doi && (! accession || theDoi !== accession.doi)) {
      loadAccession({ doi: theDoi });
    }
    if (uuid && (! accession || uuid !== accession.uuid)) {
      loadAccession({ uuid });
    }
  }

  private onCheckboxChange = (event, checked) => {
      const {accession, addAccessionToMyList, removeAccessionFromMyList} = this.props;
      if (checked) {
          addAccessionToMyList(accession.uuid);
      } else {
          removeAccessionFromMyList(accession.uuid);
        }
  }

  public render() {
    const { t, error, accession, uuid, doi, accessions } = this.props;
    const  isChecked  =  accession && accessions && accessions.includes(accession.uuid);
    const theDoi = `10.${doi}`;
    const stillLoading: boolean = ! error && (! accession
      || (doi && accession && accession.doi !== theDoi)
      || (uuid && accession && accession.uuid !== uuid));

    const hasLatLon = accession && accession.geo && accession.geo.latitude !== null && accession.geo.longitude !== null;

    return (
      <PageLayout>
        <ScrollToTopOnMount />
        <ContentHeader title="Accession details" subtitle="Passport data and everything else" />

        { stillLoading ? <Loading /> :
          <div>
            { error && <div>{ JSON.stringify(error) }</div> }

            { accession &&
              <PageContents>
                <MainSection title={
                  <div>
                    Accession: { accession.accessionNumber }
                    <div className="float-right">
                        <ReduxCheckbox
                            label={
                                <b>
                                    { isChecked ? `Remove ${accession.accessionNumber} from my list` : `Add ${accession.accessionNumber} to my list` }
                                </b>
                            }
                            input={ {
                                value: isChecked,
                                onChange: this.onCheckboxChange,
                            } }
                        />
                    </div>
                  </div>
                  }
                >
                  <Properties>
                    { accession.doi && <PropertiesItem title="DOI"><DOI noPrefix value={ accession.doi } /></PropertiesItem> }
                    <PropertiesItem title="Accession number">{ accession.accessionNumber }</PropertiesItem>
                    <PropertiesItem title="Holding institute">
                      <InstituteLink to={ accession.institute }>
                        { accession.institute.fullName }
                      </InstituteLink>
                    </PropertiesItem>
                    <PropertiesItem title="Country of holding institute">{ accession.institute.country.name }</PropertiesItem>
                    <PropertiesItem title="Institute code">{ accession.institute.code }</PropertiesItem>
                    <PropertiesItem title="Acquisition date"><McpdDate value={ accession.acquisitionDate } /></PropertiesItem>

                    <PropertiesItem title="Biological status of accession">{ accession.sampStat }</PropertiesItem>
                    <PropertiesItem title="Availability for distribution">{ t(`accession.available.${accession.available}`) }</PropertiesItem>

                    { accession.storage && accession.storage.length > 0 && <PropertiesItem title="Type of Germplasm storage">
                      { accession.storage.map((storage, i) => (
                        <div key={ storage }>{ t(`accession.storage.${storage}`) }</div>
                      )) }
                    </PropertiesItem> }
                    <PropertiesItem title="Donor institute">{ accession.donorCode }</PropertiesItem>
                    <PropertiesItem title="Donor accession number">{ accession.donorNumb }</PropertiesItem>

                    { accession.duplSite && accession.duplSite.length > 0 && <PropertiesItem title="Safety duplication institute">
                      { accession.duplSite.map((duplSite, i) => (
                        <div key={ duplSite }>{ duplSite }</div>
                      )) }
                    </PropertiesItem> }

                    { accession.acceUrl && <PropertiesItem title="Accession URL"><ExternalLink link={ accession.acceUrl } /></PropertiesItem> }
                  </Properties>
                </MainSection>

                <PageSection title="Taxonomy">
                  <Properties>
                    <PropertiesItem title="Genus">{ accession.taxonomy.genus }</PropertiesItem>
                    <PropertiesItem title="Species">
                      { accession.taxonomy.species }
                      { ' — ' }
                      <Link to={ '/a' }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</Link>
                    </PropertiesItem>
                    <PropertiesItem title="Scientific name"><SciName taxa={ accession.taxonomy.taxonNameHtml } /></PropertiesItem>
                    { accession.crop && <PropertiesItem title="Crop name"><CropChips crops={ accession.crop.shortName } /></PropertiesItem> }
                    <PropertiesItem title="Provided crop name">{ accession.cropName }</PropertiesItem>
                  </Properties>
                </PageSection>

                <PageSection title="Accession names">
                  <Properties>
                    { accession.coll && accession.coll.collNumb && <PropertiesItem title={ t('accession.alias.COLLNUMB') }>{ accession.coll.collNumb } { accession.coll.collCode }</PropertiesItem> }
                    { accession.donorCode && <PropertiesItem title={ t('accession.alias.DONORNUMB') }>{ accession.donorNumb } { accession.donorCode }</PropertiesItem> }
                    { accession.aliases && accession.aliases.map((alias) => (
                      <PropertiesItem key={ alias.id } title={ t(`accession.alias.${alias.aliasType}`) }>{ alias.name } { alias.usedBy }</PropertiesItem>
                    )) }
                  </Properties>
                </PageSection>

                { accession.coll &&
                  <PageSection title="Collecting information">
                    <Properties>
                      { accession.countryOfOrigin && <PropertiesItem title="Country of origin">{ accession.countryOfOrigin.name }</PropertiesItem> }
                      { accession.coll.collDate &&   <PropertiesItem key="collDate" title={ t(`accession.coll.collDate`) }><McpdDate value={ accession.coll.collDate } /></PropertiesItem> }
                      { accession.coll &&
                        [ 'collMissId', 'collNumb', 'collSite', 'collSrc' ]
                          .filter((prop) => accession.coll[prop] !== null).map((prop) => (
                          <PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
                        ))
                      }
                      { accession.coll &&
                        [ 'collCode', 'collName' ]
                          .filter((prop) => accession.coll[prop].length).map((prop) => (
                          <PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
                        ))
                      }
                      { accession.geo &&
                        [ 'latitude', 'longitude', 'datum', 'method', 'uncertainty', 'elevation' ]
                          .filter((prop) => accession.geo[prop] !== null).map((prop) => (
                          <PropertiesItem key={ prop } title={ t(`accession.geo.${prop}`) }>{ accession.geo[prop] }</PropertiesItem>
                        ))
                      }
                    </Properties>

                    { hasLatLon &&
                      <LocationMap
                        location={
                          {
                            id: accession.geo.id,
                            lat: accession.geo.latitude,
                            lng: accession.geo.longitude,
                          }
                        }
                      />
                    }
                  </PageSection>
                }

                { accession.remarks && accession.remarks.length > 0 && <PageSection title="Remarks">
                  <Properties>
                    { accession.remarks && accession.remarks.map((remark) => (
                      <PropertiesItem key={ remark.id } title={ remark.fieldName }>{ remark.remark }</PropertiesItem>
                    )) }
                  </Properties>
                </PageSection> }

                { accession.pdci && <PageSection title="Passport Data Completeness Index">
                  <div style={ { marginBottom: '2em', padding: '2em', backgroundColor: '#b6c1b4', borderRadius: '6px' } }>
                    <span style={ { fontSize: '1.5em' } }>
                      { t('accession.pdciScore', { score: accession.pdci.score }) }
                      { /*<p>{ t(`accession.pdciInstitute`, { score: accession.pdci.score }) }</p>*/ }
                    </span>
                      { ' ' }
                      <a href="#">Read about Passport Data Completeness Index</a>
                  </div>
                  <Properties>
                    { accession.pdci.independentItems.map((item) => (
                      <PropertiesItem small key={ item } title={ item.toUpperCase() }>{ accession.pdci[item] }</PropertiesItem>
                    )) }
                    { accession.pdci.dependentItems.map((item) => (
                      <PropertiesItem small key={ item } title={ item.toUpperCase() }>{ accession.pdci[item] }</PropertiesItem>
                    )) }
                  </Properties>
                </PageSection> }

                <PageSection title="Metadata">
                  <Properties>
                    <PropertiesItem title="UUID">{ `urn:uuid:${accession.uuid}` }</PropertiesItem>
                    <PropertiesItem title="Permanent URL"><ExternalLink link={ `https://purl.org/germplasm/id/${accession.uuid}` } /></PropertiesItem>
                    <PropertiesItem title="Last updated"><PrettyDate value={ accession.lastModifiedDate } /></PropertiesItem>
                    <PropertiesItem title="Created"><PrettyDate value={ accession.createdDate } /></PropertiesItem>
                  </Properties>
                </PageSection>
              </PageContents>
            }
          </div>
        }
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  accession: state.accessions.accession,
  error: state.accessions.accessionError,
  uuid: ownProps.match.params.uuid,
  doi: ownProps.match.params.doi,
  accessions: state.user.myList.accessions,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  addAccessionToMyList,
  removeAccessionFromMyList,
  loadAccession,
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)(translate()(BrowsePage));