SubsetDisplay.tsx

import * as React from 'react';
import {translate} from 'react-i18next';
import {withStyles} from '@material-ui/core/styles';
// util
import {log} from 'utilities/debug';
// models
import Subset from 'model/subset/Subset';
import Accession from 'model/accession/Accession';
import AccessionFilter from 'model/accession/AccessionFilter';
import {IPageRequest} from 'model/FilteredPage';
import Page from 'model/Page';
// ui
import SubsetCard from 'subsets/ui/c/SubsetCard';
import AccessionCard from 'accessions/ui/c/AccessionCard';
import PropertiesCard from 'ui/common/PropertiesCard';
import Grid from '@material-ui/core/Grid';

const styles = (theme) => ({
  accessionSection: {
    marginTop: '16px',
  },
  accessionCard: {
    // marginBottom: '8px',
  },
});

interface IDetailInfoProps extends React.ClassAttributes<any> {
  t: any;
  classes: any;
  subset: Subset;
  listAccessions: (filter: string | AccessionFilter, page: IPageRequest) => Promise<Page<Accession>>;
  unpublishSubset?: (subset: Subset) => any;
  deleteSubset?: (subset: Subset) => any;
}

class DetailInfo extends React.Component<IDetailInfoProps, any> {

  public render() {
    const {classes, subset, t} = this.props;

    if (!subset) {
      log('Waiting for subset.');
      return null;
    }

    return (
      <div>
        <SubsetCard complete subset={ subset }/>
        <Grid container spacing={ 16 } className={ classes.accessionSection } justify={ 'space-between' }>
          { subset.creators &&
            <PropertiesCard
              propertyItemProps={ {numeric: false} }
              title="Subset creators"
              propertiesList={
                subset.creators.map((creator) => ({
                  title: t(`subset.creator.role.${creator.role}`),
                  value: (<span><b>{ creator.fullName }</b>{ creator.institutionalAffiliation && <span> { creator.institutionalAffiliation }</span> }</span>),
                }))
              }
            />
          }
          { subset.accessionRefs && subset.accessionRefs.map((accessionRef, index: number) => (
            accessionRef.accession &&
              <Grid key={ accessionRef.accession.uuid } item xs={ 12 } className={ classes.accessionCard }>
                <AccessionCard index={ index } accession={ accessionRef.accession }/>
              </Grid>
          )) }
        </Grid>
      </div>
    );
  }

}

export default translate()((withStyles as any)(styles)(DetailInfo));