BrowsePage.tsx 2.78 KB
Newer Older
Maxym Borodenko's avatar
Maxym Borodenko committed
1
2
3
4
5
6
7
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { parse } from 'query-string';

// Actions
8
import { applyFilters, updateRoute, loadMoreUsers } from 'user/actions/admin';
Maxym Borodenko's avatar
Maxym Borodenko committed
9
10

// Models
11
import FilteredPage from 'model/FilteredPage';
Maxym Borodenko's avatar
Maxym Borodenko committed
12
13
14
15
16
17
18
19
20
21
22
23
import { User } from 'model/user/User';

// UI
import BrowsePageTemplate from 'ui/pages/_base/BrowsePage';
import { PageContents } from 'ui/layout/PageLayout';
import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import UserCard from './c/UserCard';
import UserFilters from 'user/ui/admin/c/UserFilter';
import Grid from '@material-ui/core/Grid';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
Oleksii Savran's avatar
Oleksii Savran committed
24
import ContentLayout from 'ui/layout/ContentLayout';
Maxym Borodenko's avatar
Maxym Borodenko committed
25
26
27
28
29
30

class BrowsePage extends BrowsePageTemplate<User> {

  protected static needs = [
    ({ search, params: { filterCode } }) => {
      const qs = parse(search || '');
31
      return applyFilters(filterCode || '', FilteredPage.fromQueryString(qs));
Maxym Borodenko's avatar
Maxym Borodenko committed
32
33
34
35
36
37
38
39
40
41
42
    },
  ];

  public componentWillMount() {
    const { paged, applyFilters, filterCode } = this.props;
    if (!paged) {
      applyFilters(filterCode);
    }
  }

  public render() {
43
    const { paged, t, loadMoreData } = this.props;
Maxym Borodenko's avatar
Maxym Borodenko committed
44
45
46
47
48
49

    const renderUser = (user: User, index: number) => {
      return <UserCard key={ user.uuid } index={ index } user={ user } />;
    };

    return (
Oleksii Savran's avatar
Oleksii Savran committed
50
51
52
      <ContentLayout left={
        <UserFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
      } customHeaderHeight>
Maxym Borodenko's avatar
Maxym Borodenko committed
53
        <Grid container spacing={ 0 }>
Oleksii Savran's avatar
Oleksii Savran committed
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
          <Grid item xs={ 12 }>
            <ContentHeaderWithButton title={ t(`user.admin.p.browse.title`) }/>
            <PrettyFilters
              prefix="users"
              filterObj={ paged && paged.filter || {} }
              onSubmit={ this.myApplyFilters }
            />
            <PageContents className="pt-1rem container-spacing-horizontal">
              { !paged ? <Loading/> :
                <PagedLoader
                  paged={ paged }
                  loadMore={ loadMoreData }
                  roughItemHeight={ 80 }
                  itemRenderer={ renderUser }/>
              }
            </PageContents>
Maxym Borodenko's avatar
Maxym Borodenko committed
70
71
          </Grid>
        </Grid>
Oleksii Savran's avatar
Oleksii Savran committed
72
      </ContentLayout>
Maxym Borodenko's avatar
Maxym Borodenko committed
73
74
75
76
77
78
79
80
81
82
83
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  paged: state.user.admin.paged || undefined,
  filterCode: ownProps.match.params.filterCode,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  applyFilters,
84
  loadMoreData: loadMoreUsers,
Maxym Borodenko's avatar
Maxym Borodenko committed
85
86
87
88
89
  updateRoute,
}, dispatch);


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