BrowsePage.tsx 2.89 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 { translate } from 'react-i18next';

import { filterCodeToUrl } from 'actions/filterCode';
import { applyFilters, loadMoreDescriptors, updateRoute } from 'descriptors/actions/public';

import Descriptor from 'model/catalog/Descriptor';
import PagedLoader from 'ui/common/PagedLoader';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DescriptorCard from 'descriptors/ui/c/DescriptorCard';
import DescriptorFilters from 'descriptors/ui/c/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
17
import PageTitle from 'ui/common/PageTitle';
18
19
20
21
22
23
24
25

import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
import BrowsePageTemplate from 'ui/pages/_base/BrowsePage';

class BrowsePage extends BrowsePageTemplate<Descriptor> {

  public render() {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
26
    const { paged, t, loadMoreData } = this.props;
27
28
29
30

    const stillLoading: boolean = (!paged || !paged.content);

    const renderDescriptor = (d: Descriptor) => (
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
31
      <DescriptorCard key={ d.uuid } descriptor={ d } complete dataType vocabulary/>
32
33
34
35
36
37
    );

    return (
      <PageLayout sidebar={
        <DescriptorFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
      }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
38
39
40
41
        <PageTitle title={ t('descriptors.public.p.browse.title') }/>
        <ContentHeader
          title={ t('descriptors.public.p.browse.title') }
          subtitle={ t('descriptors.public.p.browse.subtitle') }
42
43
44
45
46
47
48
49
50
51
        />
        <ScrollToTopOnMount/>
        <PaginationComponent
          pageObj={ paged }
          onSortChange={ this.onSortChange }
          displayName="descriptors.common.modelName"
          infinite
          sortOptions={ Descriptor.SORT_OPTIONS }
        />
        <PrettyFilters
Oleksii Savran's avatar
Oleksii Savran committed
52
          prefix="descriptors"
53
54
55
          filterObj={ paged && paged.filter || {} }
          onSubmit={ this.myApplyFilters }
        />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
56
        <PageContents className="pt-1rem container-spacing-horizontal">
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
          { stillLoading ? <Loading/> :
            <PagedLoader
              paged={ paged }
              loadMore={ loadMoreData }
              roughItemHeight={ 600 }
              itemRenderer={ renderDescriptor }
            />
          }
        </PageContents>
      </PageLayout>
    );
  }
}


const mapStateToProps = (state, ownProps) => ({
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
73
  paged: state.descriptors.public.paged ? state.descriptors.public.paged.data : undefined,
74
75
76
77
78
79
80
81
82
83
84
85
86
  filterCode: ownProps.match.params.filterCode,
});

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

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