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, updateRoute, loadMoreRequests } from 'requests/actions/admin';

// Models
import MaterialRequest from 'model/request/MaterialRequest';
import FilteredPage from 'model/FilteredPage';

// 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 RequestCard from 'requests/ui/admin/c/RequestCard';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import ContentLayout from 'ui/layout/ContentLayout';
import MaterialRequestFilter from 'requests/ui/admin/c/MaterialRequestFilter';
import Grid from '@material-ui/core/Grid';
import PaginationComponent from 'ui/common/pagination';

class BrowsePage extends BrowsePageTemplate<any> {

    protected static needs = [
      ({ search, params: { filterCode } }) => {
          const qs = parse(search || '');
          return applyFilters(filterCode || '', FilteredPage.fromQueryString(qs));
      },
    ];

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

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

        const renderRequest = (r: MaterialRequest, index: number) => {
            return <RequestCard key={ r.uuid } index={ index } request={ r } />;
        };

        return (
            <ContentLayout left={
                <MaterialRequestFilter initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
            } customHeaderHeight>
                <Grid container spacing={ 0 }>
                    <Grid item xs={ 12 }>
                        <PaginationComponent
                            pageObj={ paged }
                            onSortChange={ this.onSortChange }
                            displayName="requests.common.modelName"
                            sortOptions={ MaterialRequest.SORT_OPTIONS }
                        />
                        <PrettyFilters
                            prefix="requests"
                            filterObj={ paged && paged.filter || {} }
                            onSubmit={ this.myApplyFilters }
                        />
                        <PageContents className="pt-1rem container-spacing-horizontal">
                            { ! paged ? <Loading /> :
                                <PagedLoader
                                    paged={ paged }
                                    loadMore={ loadMoreData }
                                    roughItemHeight={ 80 }
                                    itemRenderer={ renderRequest } />
                            }
                        </PageContents>
                    </Grid>
                </Grid>
            </ContentLayout>
        );
    }
}

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

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


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