Commit dcae689c authored by Valeriy Panov's avatar Valeriy Panov
Browse files

#241 Use infinite scrolling

parent c288077e
Pipeline #4675 passed with stages
in 3 minutes and 24 seconds
......@@ -14,12 +14,14 @@ const INITIAL_STATE: {
paged: Page<Descriptor>;
pagedQuery: any;
loading: boolean;
list: Descriptor[];
} = {
currentDescriptor: null,
currentDescriptorExtra: null,
paged: null,
pagedQuery: null,
loading: null,
list: [],
};
function descriptors(state = INITIAL_STATE, action: IReducerAction) {
......@@ -73,6 +75,7 @@ function descriptors(state = INITIAL_STATE, action: IReducerAction) {
loading: { $set: null },
paged: { $set: action.payload.paged },
pagedQuery: { $set: _.cloneDeep(action.payload.query) },
list: {$push: action.payload.paged.content},
});
}
......
......@@ -11,13 +11,14 @@ import { Descriptor, IDescriptorFilter } from 'model/descriptor.model';
import { Page, Pagination } from 'model/common.model';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
// import PaginationComponent from 'ui/common/pagination';
// import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
import ContentHeader from 'ui/common/heading/ContentHeader';
import DescriptorFilters from 'ui/catalog/descriptor/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import Grid from 'material-ui/Grid';
import DescriptorInfiniteLoader from './c/DescriptorInfiniteLoader';
interface IDescriptorListsPageProps extends React.ClassAttributes<any> {
classes: any;
......@@ -26,6 +27,7 @@ interface IDescriptorListsPageProps extends React.ClassAttributes<any> {
loadDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => void;
listCrops: () => any;
loading: any;
list: Descriptor[];
}
const styles = (theme) => ({
......@@ -83,7 +85,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
}
public render() {
const {classes, paged, pagination} = this.props;
const {classes, paged, pagination, loading, list, loadDescriptors} = this.props;
const stillLoading: boolean = (! paged || ! paged.content);
......@@ -98,14 +100,14 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
</Grid>
<Grid item xs={ 12 } md={ 9 } lg={ 10 }>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
{ /*<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="descriptors"
sortOptions={ Descriptor.SORT_OPTIONS }
/>
</Grid>
</Grid>*/ }
<Grid item xs={ 12 }>
<PrettyFilters
filterObj={ pagination.filter }
......@@ -114,15 +116,22 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="p-20">
{ paged.content.map((d: Descriptor, i) => (
{ /*{ paged.content.map((d: Descriptor, i) => (
<DescriptorCard key={ d.uuid } className="mb-20"
descriptor={ d } complete dataType vocabulary />
)) }
)) }*/ }
<DescriptorInfiniteLoader
list={ list }
loading={ loading }
paged={ paged }
filter={ pagination.filter }
loadDescriptors={ loadDescriptors }
/>
</Grid>
}
</Grid>
</Grid>
<Grid container spacing={ 0 } className="back-gray-yellow">
{ /*<Grid container spacing={ 0 } className="back-gray-yellow">
<Grid item md={ 2 }/>
<Grid item xs={ 12 } md={ 10 }>
<PaginationComponent
......@@ -132,7 +141,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
sortOptions={ Descriptor.SORT_OPTIONS }
/>
</Grid>
</Grid>
</Grid>*/ }
</Grid>
</div>
);
......@@ -150,6 +159,7 @@ const mapStateToProps = (state, ownProps) => ({
}),
paged: state.descriptors.paged,
loading: state.descriptors.loading,
list: state.descriptors.list,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......
import * as React from 'react';
import {InfiniteLoader, AutoSizer, List} from 'react-virtualized';
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
import {Page} from 'model/common.model';
import {Descriptor, IDescriptorFilter} from 'model/descriptor.model';
interface IDescriptorInfiniteLoaderProps extends React.ClassAttributes<any> {
filter: any;
loading: boolean;
paged: Page<Descriptor>;
list: Descriptor[];
loadDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => void;
}
class DescriptorInfiniteLoader extends React.PureComponent<IDescriptorInfiniteLoaderProps, any> {
protected loadNextPage = () => {
const {filter, loadDescriptors, paged} = this.props;
loadDescriptors(paged.number + 1, 20, null, filter);
}
private isRowLoaded = ({ index }) => {
const {list, paged} = this.props;
return paged.last || index < list.length;
}
private rowRenderer = ({ index, key, style }) => {
const {list} = this.props;
return this.isRowLoaded({ index }) && (
<div key={ key } style={ style }>
<DescriptorCard
className="mb-20"
descriptor={ list[index] }
complete
dataType
vocabulary
/>
</div>
);
}
protected loadMoreRows = () => {
const {loading} = this.props;
if (!loading) {
this.loadNextPage();
}
}
public render() {
const {list, paged} = this.props;
const rowCount = paged.last ? list.length : list.length + 1;
return (
<InfiniteLoader
isRowLoaded={ this.isRowLoaded }
loadMoreRows={ this.loadMoreRows }
rowCount={ rowCount }
>
{ ({ onRowsRendered, registerChild }) => (
<AutoSizer>
{ ({ height, width }) => (
<List
ref={ registerChild }
height={ height || 800 }
onRowsRendered={ onRowsRendered }
rowCount={ rowCount }
rowHeight={ 330 }
rowRenderer={ this.rowRenderer }
width={ width }
/>
) }
</AutoSizer>
) }
</InfiniteLoader>
);
}
}
export default DescriptorInfiniteLoader;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment