AccessionListPage.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { parse } from 'query-string';
import { connect } from 'react-redux';

import { AccessionService } from '@genesys/client/service';
import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
import Accession from '@genesys/client/model/accession/Accession';
import FilteredPage, { IPageRequest } from '@genesys/client/model/FilteredPage';
import Pagination from 'ui/common/Pagination';
import { AccessionFilters } from './AccessionFilters';
import { withTranslation, WithTranslation } from 'react-i18next';
import { LocalStorageCart } from 'utilities';
import { WithConfig } from 'config/config';

interface IAccessionListPageState {
  filter: AccessionFilter;
  accessions: FilteredPage<Accession>;
  selected: string[];
  cartItems: string[];
  isAllSelected: boolean;
}

interface IAccessionListPageProps {
  location: any;
  countryCodes: Record<string, string>;
}

class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation & WithConfig, IAccessionListPageState> {
  public constructor(props) {
    super(props);

    this.state = {
      filter: this.props.appConfig.filter,
      accessions: null,
      selected: [],
      isAllSelected: false,
      cartItems: LocalStorageCart.getCartItemsLS(),
    }
  }

  public componentDidMount() {
    const { current, filterCode } = this.parseLocationSearch(this.props.location);
    this.loadData(filterCode || this.state.filter, current ? { page: current } : {});
    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() });
  };

  public componentDidUpdate(prevProps) {
    const { current: currentPage, filterCode } = this.parseLocationSearch(this.props.location);
    const { current: prevPage, filterCode: prevFilterCode } = this.parseLocationSearch(prevProps.location);

    if (prevPage !== undefined && currentPage === 0 && prevFilterCode !== undefined && filterCode === undefined) {
      // console.log('did update, reset filter);
      this.loadData(this.props.appConfig.filter, {});
    }
  }

  private parseLocationSearch = (location) => {
    const current = +parse(location.search).p || 0;
    const filterCode = parse(location.search).filter && parse(location.search).filter.toString();
    // const size = +parse(location.search).l || 20;
    // const sort = parse(location.search).s;
    // const dir = parse(location.search).d;

    return { current, filterCode /* , size, sort, dir, */ };
  };

  private loadData = (filter: string | AccessionFilter, pageR: IPageRequest): Promise<any> => {
    return AccessionService
      .list(filter, pageR)
      .then((data) => {
        // console.log('accessions: ', data);
        this.setState({ accessions: data, filter: data.filter });
        return data;
      })
      .catch((e) => {
        console.log('Api call failed: ', e);
      });
  };

  private applyFilter = (filter: AccessionFilter) => {
    this.loadData({ ...this.state.filter, ...filter }, {});
  };

  private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { selected } = this.state;
    const { uuid } = (e.currentTarget as HTMLElement).dataset;
    const updated = selected.filter((selectedUuid) => selectedUuid !== uuid);
    if (updated.length === selected.length) {
      updated.push(uuid);
    }
    this.setState({ selected: updated });
  };

  private addSelectedToCart = () => {
    LocalStorageCart.addToCart(this.state.selected);
    this.setState({ selected: [], isAllSelected: false, cartItems: LocalStorageCart.getCartItemsLS() });
  };
  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 canAddToCart = (accession) => {
    return !(accession.historic === true || accession.available === false || accession.institute.allowMaterialRequests === true);
  }

  private renderCartButton = (accession, i) => {
    const { t } = this.props;
    const { cartItems } = this.state;
    if (!this.canAddToCart(accession)) {
      return <span>{t('list.notAvailable')}</span>
    }
    if ( cartItems.includes(accession.uuid)) {
      return <button
        type="button"
        name={ `button-remove-${accession.uuid}-${i}` }
        data-uuid={ accession.uuid }
        onClick={ this.removeFromCart }
        className="btn btn-primary"
      >
        { t('cart.removeFromCart') }
      </button>
    }
    return <button
      type="button"
      name={ `button-add-${accession.uuid}-${i}` }
      data-uuid={ accession.uuid }
      onClick={ this.addToCart }
      className="btn btn-primary"
    >
      { t('cart.addToCart') }
    </button>
  }

  private onToggleAll = () => {
    this.setState((prevState) => ({
      isAllSelected: !prevState.isAllSelected,
      selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => this.canAddToCart(acc) && acc.uuid) : [],
    }));
  };

  public render() {
    const { accessions, selected, isAllSelected } = this.state;
    const { t, appConfig: { shoppingCart }, countryCodes } = this.props;
    const selectedUUIDs = new Set();
    selected.forEach((uuid) => selectedUUIDs.add(uuid));

    if (accessions === null) {
      return (
        <div>{ t('loading') }</div>
      );
    } else {
      return (
        <>
          <h1 className="d-flex justify-content-between align-items-center">
            { t('estimatedNumberOfItems', { count: accessions.totalElements, what: t('accession.model', { count: accessions.totalElements }) }) }
            { selected.length !== 0 &&
              <button type="button" className="btn btn-primary" onClick={ this.addSelectedToCart }>
                { t('cart.addToCart') }
              </button>
            }
          </h1>
          <AccessionFilters filter={ this.state.filter } applyFilter={ this.applyFilter } key={ `filters-${accessions.filterCode}` }/>
          <Pagination loadData={ this.loadData } paged={ accessions }>
            <table className="table table-striped">
              <thead className="thead-dark">
                <tr>
                  { shoppingCart.enabled && (
                    <th>
                      <input
                        type="checkbox"
                        name="select-all"
                        checked={ isAllSelected }
                        onChange={ this.onToggleAll }
                        className="align-middle"
                      />
                    </th>
                  ) }
                  <th>{ t('accession.crop') }</th>
                  <th>{ t('accession.acceNumb') }</th>
                  <th>{ t('accession.accessionName') }</th>
                  <th>{ t('accession.taxonomy.scientificName') }</th>
                  <th>{ t('accession.countryOfOrigin') }</th>
                  <th>{ t('accession.sampStat') }</th>
                  { shoppingCart.enabled && ( <th>{ t('list.availability') }</th> ) }
                </tr>
              </thead>
              <tbody>
                { accessions.content.map((a, i) => (
                  <tr key={ a.id } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
                    { shoppingCart.enabled && (
                      <td>
                        { this.canAddToCart(a) &&
                          <input
                            type="checkbox"
                            name={ `checkbox-${a.uuid}-${i}` }
                            data-uuid={ a.uuid }
                            checked={ selectedUUIDs.has(a.uuid) }
                            onChange={ this.toggleRowSelect }
                            className="align-middle"
                          />
                        }
                      </td>
                    ) }
                    <td>{ a.cropName }</td>
                    <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
                    <td>{ a.accessionName }</td>
                    <td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
                    <td>{ a.countryOfOrigin && (countryCodes && countryCodes[a.countryOfOrigin.code3] || a.countryOfOrigin.name) }</td>
                    <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
                    { shoppingCart.enabled &&
                      <td>
                        { this.renderCartButton(a, i) }
                      </td>
                    }
                  </tr>
                )) }
              </tbody>
            </table>
          </Pagination>
        </>
      );
    }
  };
}

const mapStateToProps = (state) => ({
  appConfig: state.appConfig.config,
  countryCodes: state.decoding.countryCodes,
});

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