diff --git a/src/public/js/app.js b/src/public/js/app.js
index 6000e21..c880585 100644
--- a/src/public/js/app.js
+++ b/src/public/js/app.js
@@ -88,7 +88,7 @@ const ShowListPolochon = (props) => (
)
const ShowListWishlisted = (props) => (
-
+
)
ReactDOM.render((
diff --git a/src/public/js/components/list/posters.js b/src/public/js/components/list/posters.js
index 3789dc4..db0ec9c 100644
--- a/src/public/js/components/list/posters.js
+++ b/src/public/js/components/list/posters.js
@@ -9,34 +9,51 @@ import ListPoster from './poster'
import Loader from '../loader/loader'
+const DEFAULT_LIST_SIZE = 30;
+const DEFAULT_ADD_EXTRA_ITEMS = 30;
+
export default class ListPosters extends React.Component {
constructor(props) {
super(props);
this.state = {
- items: 30,
- hasMore: true,
+ items: 0,
+ hasMore: false,
};
this.loadMore = this.loadMore.bind(this);
}
loadMore() {
- if (!this.state.hasMore || this.props.data.length === 0) {
- return
+ // Nothing to do if the app is loading
+ if (this.props.loading) {
+ return;
}
- const addItems = 30;
- if (this.state.items + addItems >= this.props.data.length) {
- this.setState({
- items: this.props.data.length,
- hasMore: false,
- });
- } else {
- this.setState({
- items: this.state.items + addItems,
- hasMore: true,
- });
+ if (!this.props.data.length) {
+ return;
+ }
+
+ this.setState(this.getNextState(this.props));
+ }
+ getNextState(props) {
+ let totalListSize = props.data.length;
+ let currentListSize = this.state.items;
+ let nextListSize = currentListSize + DEFAULT_ADD_EXTRA_ITEMS;
+ let hasMore = true;
+
+ if (nextListSize >= totalListSize) {
+ nextListSize = totalListSize;
+ hasMore = false;
+ }
+
+ return {
+ items: nextListSize,
+ hasMore: hasMore,
+ };
+ }
+ componentWillReceiveProps(nextProps) {
+ if (this.props.data.length !== nextProps.data.length) {
+ this.setState(this.getNextState(nextProps));
}
}
-
render() {
let elmts = this.props.data.slice();
const listSize = elmts.length;