77 lines
1.3 KiB
JavaScript
77 lines
1.3 KiB
JavaScript
|
const debounce = require('lodash.debounce');
|
||
|
|
const ReactRedux = require('react-redux');
|
||
|
|
const Infinite = require('react-infinite');
|
||
|
|
const actions = require('./actions');
|
||
|
|
const React = require('react');
|
||
|
|
|
||
|
|
const {
|
||
|
|
connect
|
||
|
|
} = ReactRedux;
|
||
|
|
|
||
|
|
const {
|
||
|
|
fetch,
|
||
|
|
filter
|
||
|
|
} = actions;
|
||
|
|
|
||
|
|
const mapStateToProps = (state) => {
|
||
|
|
return state;
|
||
|
|
};
|
||
|
|
|
||
|
|
const mapDispatchToProps = (dispatch, ownProps) => {
|
||
|
|
return {
|
||
|
|
fetch: () => {
|
||
|
|
return dispatch(fetch());
|
||
|
|
},
|
||
|
|
filter: (payload) => {
|
||
|
|
return dispatch(filter(payload));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const List = ({
|
||
|
|
items = [],
|
||
|
|
filtered,
|
||
|
|
input = '',
|
||
|
|
fetching = false,
|
||
|
|
fetch,
|
||
|
|
filter
|
||
|
|
}) => {
|
||
|
|
const _items = (filtered || items).map((item) => {
|
||
|
|
return (
|
||
|
|
<div key={item.id}>
|
||
|
|
{item.title}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
const _loading = (
|
||
|
|
<div>
|
||
|
|
Loading...
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const _filter = debounce(filter, 100);
|
||
|
|
const onChange = (ev) => _filter(ev.target.value);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<input onChange={onChange} />
|
||
|
|
<Infinite
|
||
|
|
containerHeight={200}
|
||
|
|
elementHeight={20}
|
||
|
|
infiniteLoadBeginEdgeOffset={200}
|
||
|
|
onInfiniteLoad={fetch}
|
||
|
|
isInfiniteLoading={fetching}
|
||
|
|
loadingSpinnerDelegate={_loading}
|
||
|
|
>
|
||
|
|
{_items}
|
||
|
|
</Infinite>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
module.exports = connect(
|
||
|
|
mapStateToProps,
|
||
|
|
mapDispatchToProps,
|
||
|
|
)(List);
|