BrowsePage.tsx

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

// Actions
import { applyFilters, loadMoreAccessions, updateRoute } from 'accessions/actions/public';

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

// UI
import BrowsePageTemplate, { IBrowsePageProps } from 'ui/pages/_base/BrowsePage';
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PaginationComponent from 'ui/common/pagination';
import AccessionCard from 'accessions/ui/c/AccessionCard';
import Tabs, { Tab } from 'ui/common/Tabs';
import AccessionFilters from './c/Filters';
// TODO only for demo
import Button from '@material-ui/core/Button';

class BrowsePage extends BrowsePageTemplate<Accession> {
  protected static needs = [
    ({ search, params: { filterCode } }) => {
      const qs = parse(search || '');
      return applyFilters(filterCode || '', Page.fromQueryString(qs));
    },
  ];

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

  public render() {
    const { paged, loadMoreData, filterCode, currentTab, t} = this.props;

    const renderAccession = (s: Accession, index: number) => {
      return <AccessionCard key={ s.uuid } index={ index } accession={ s } />;
    };

    return (
      <PageLayout sidebar={
        <AccessionFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } />
       }>
        <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
          <PaginationComponent
            pageObj={ paged }
            onSortChange={ this.onSortChange }
            displayName="accessions.common.modelName"
            sortOptions={ Accession.SORT_OPTIONS }
            infinite
          />
          <Tabs
            tab={ currentTab }
            actions={
              <span>
                <Button variant="contained">{ t('TODO-Demo Select all') }</Button>
                <Button variant="contained">{ t('TODO-Demo Delete') }</Button>
                <Button variant="contained">{ t('TODO-Demo Share') }</Button>
              </span>
            }
          >
            <Tab name="data" to={ `/a/${filterCode || ''}` }>{ t('accessions.tab.data') }</Tab>
            <Tab name="overview" to={ `/a/overview/${filterCode || ''}` }>{ t('accessions.tab.overview') }</Tab>
            <Tab name="map" to={ `/a/map/${filterCode || '' }` }>{ t('accessions.tab.map') }</Tab>
          </Tabs>


        <PrettyFilters
          prefix="accessions"
          filterObj={ paged && paged.filter || {} }
          onSubmit={ this.myApplyFilters }
        />
        <PageContents>
          { ! paged ? <Loading /> :
            <PagedLoader
              paged={ paged }
              loadMore={ loadMoreData }
              roughItemHeight={ 45 }
              itemRenderer={ renderAccession }
            />
          }
        </PageContents>
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  paged: state.accessions.public.paged || undefined,
  filterCode: ownProps.match.params.filterCode,
  currentTab: ownProps.match.params.tab || 'data', // current tab, or ownProps.location.pathname
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  applyFilters,
  loadMoreData: loadMoreAccessions,
  updateRoute,
}, dispatch);


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