BrowsePage.tsx 2.94 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { filterCodeToUrl } from 'actions/filterCode';
import { loadCrops } from 'crop/actions/public';
import { applyFilters, loadMoreDatasets, updateRoute } from 'datasets/actions/public';

import Dataset from 'model/catalog/Dataset';

import PagedLoader from 'ui/common/PagedLoader';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DatasetFilters from './c/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
17
import PageTitle from 'ui/common/PageTitle';
18
19
20
21
22
23
24
25
26
import DatasetCard from './c/Card';

import ContentHeader from 'ui/common/heading/ContentHeader';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import BrowsePageTemplate from 'ui/pages/_base/BrowsePage';
import { translate } from 'react-i18next';

class BrowsePage extends BrowsePageTemplate<Dataset> {

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
27
  protected renderDataset = (d: Dataset) => <DatasetCard dataset={ d } key={ d.uuid }/>;
28
29

  public render() {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
30
    const { paged, t, loadMoreData, error, loading } = this.props;
31
32
33
34
35
36

    return (
      <PageLayout sidebar={
        <DatasetFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
      }>
        <ScrollToTopOnMount/>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
37
        <PageTitle title={ t('datasets.common.modelName_plural') }/>
38
39
40
41
42
43
44
45
46
        <ContentHeader title={ t('datasets.common.modelName_plural') } subtitle={ t('datasets.public.p.browse.subtitle') }/>
        <PaginationComponent
          pageObj={ paged }
          onSortChange={ this.onSortChange }
          displayName={ t('datasets.common.modelName') }
          sortOptions={ Dataset.SORT_OPTIONS }
          infinite
        />
        <PrettyFilters
Oleksii Savran's avatar
Oleksii Savran committed
47
          prefix="datasets"
48
49
50
          filterObj={ paged && paged.filter || {} }
          onSubmit={ this.myApplyFilters }
        />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
51
        <PageContents className="pt-1rem container-spacing-horizontal">
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
52
53
54
55
56
57
58
59
          { loading && <Loading /> }
          { error && <div>{ JSON.stringify(error) }</div> }
          <PagedLoader
            paged={ paged }
            loadMore={ loadMoreData }
            roughItemHeight={ 300 }
            itemRenderer={ this.renderDataset }
          />
60
61
62
63
64
65
66
        </PageContents>
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
67
68
69
  paged: state.datasets.public.paged ? state.datasets.public.paged.data : undefined,
  loading: state.datasets.public.paged ? state.datasets.public.paged.loading : false,
  error: state.datasets.public.paged ? state.datasets.public.paged.error : undefined,
70
71
72
73
74
75
76
77
78
79
80
  filterCode: ownProps.match.params.filterCode,
});

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

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
81
export default translate()(connect(mapStateToProps, mapDispatchToProps)(BrowsePage));