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: { ...@@ -14,12 +14,14 @@ const INITIAL_STATE: {
paged: Page<Descriptor>; paged: Page<Descriptor>;
pagedQuery: any; pagedQuery: any;
loading: boolean; loading: boolean;
list: Descriptor[];
} = { } = {
currentDescriptor: null, currentDescriptor: null,
currentDescriptorExtra: null, currentDescriptorExtra: null,
paged: null, paged: null,
pagedQuery: null, pagedQuery: null,
loading: null, loading: null,
list: [],
}; };
function descriptors(state = INITIAL_STATE, action: IReducerAction) { function descriptors(state = INITIAL_STATE, action: IReducerAction) {
...@@ -73,6 +75,7 @@ function descriptors(state = INITIAL_STATE, action: IReducerAction) { ...@@ -73,6 +75,7 @@ function descriptors(state = INITIAL_STATE, action: IReducerAction) {
loading: { $set: null }, loading: { $set: null },
paged: { $set: action.payload.paged }, paged: { $set: action.payload.paged },
pagedQuery: { $set: _.cloneDeep(action.payload.query) }, pagedQuery: { $set: _.cloneDeep(action.payload.query) },
list: {$push: action.payload.paged.content},
}); });
} }
......
...@@ -11,13 +11,14 @@ import { Descriptor, IDescriptorFilter } from 'model/descriptor.model'; ...@@ -11,13 +11,14 @@ import { Descriptor, IDescriptorFilter } from 'model/descriptor.model';
import { Page, Pagination } from 'model/common.model'; import { Page, Pagination } from 'model/common.model';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination'; // import PaginationComponent from 'ui/common/pagination';
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard'; // import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import DescriptorFilters from 'ui/catalog/descriptor/Filters'; import DescriptorFilters from 'ui/catalog/descriptor/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters'; import PrettyFilters from 'ui/common/filter/PrettyFilters';
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
import DescriptorInfiniteLoader from './c/DescriptorInfiniteLoader';
interface IDescriptorListsPageProps extends React.ClassAttributes<any> { interface IDescriptorListsPageProps extends React.ClassAttributes<any> {
classes: any; classes: any;
...@@ -26,6 +27,7 @@ interface IDescriptorListsPageProps extends React.ClassAttributes<any> { ...@@ -26,6 +27,7 @@ interface IDescriptorListsPageProps extends React.ClassAttributes<any> {
loadDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => void; loadDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => void;
listCrops: () => any; listCrops: () => any;
loading: any; loading: any;
list: Descriptor[];
} }
const styles = (theme) => ({ const styles = (theme) => ({
...@@ -83,7 +85,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> { ...@@ -83,7 +85,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
} }
public render() { public render() {
const {classes, paged, pagination} = this.props; const {classes, paged, pagination, loading, list, loadDescriptors} = this.props;
const stillLoading: boolean = (! paged || ! paged.content); const stillLoading: boolean = (! paged || ! paged.content);
...@@ -98,14 +100,14 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> { ...@@ -98,14 +100,14 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
</Grid> </Grid>
<Grid item xs={ 12 } md={ 9 } lg={ 10 }> <Grid item xs={ 12 } md={ 9 } lg={ 10 }>
<Grid container spacing={ 0 }> <Grid container spacing={ 0 }>
<Grid item xs={ 12 }> { /*<Grid item xs={ 12 }>
<PaginationComponent <PaginationComponent
pageObj={ paged } pageObj={ paged }
onChange={ this.onPaginationChange } onChange={ this.onPaginationChange }
displayName="descriptors" displayName="descriptors"
sortOptions={ Descriptor.SORT_OPTIONS } sortOptions={ Descriptor.SORT_OPTIONS }
/> />
</Grid> </Grid>*/ }
<Grid item xs={ 12 }> <Grid item xs={ 12 }>
<PrettyFilters <PrettyFilters
filterObj={ pagination.filter } filterObj={ pagination.filter }
...@@ -114,15 +116,22 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> { ...@@ -114,15 +116,22 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
</Grid> </Grid>
{ stillLoading ? <Loading /> : { stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="p-20"> <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" <DescriptorCard key={ d.uuid } className="mb-20"
descriptor={ d } complete dataType vocabulary /> descriptor={ d } complete dataType vocabulary />
)) } )) }*/ }
<DescriptorInfiniteLoader
list={ list }
loading={ loading }
paged={ paged }
filter={ pagination.filter }
loadDescriptors={ loadDescriptors }
/>
</Grid> </Grid>
} }
</Grid> </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 md={ 2 }/>
<Grid item xs={ 12 } md={ 10 }> <Grid item xs={ 12 } md={ 10 }>
<PaginationComponent <PaginationComponent
...@@ -132,7 +141,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> { ...@@ -132,7 +141,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
sortOptions={ Descriptor.SORT_OPTIONS } sortOptions={ Descriptor.SORT_OPTIONS }
/> />
</Grid> </Grid>
</Grid> </Grid>*/ }
</Grid> </Grid>
</div> </div>
); );
...@@ -150,6 +159,7 @@ const mapStateToProps = (state, ownProps) => ({ ...@@ -150,6 +159,7 @@ const mapStateToProps = (state, ownProps) => ({
}), }),
paged: state.descriptors.paged, paged: state.descriptors.paged,
loading: state.descriptors.loading, loading: state.descriptors.loading,
list: state.descriptors.list,
}); });
const mapDispatchToProps = (dispatch) => bindActionCreators({ 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