Fix state not updating properly in the list view

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;