Merge branch 'updateInfiniteScroll' into 'master'

Update infinite scroll with a new lib

See merge request !43

package.json

@@ -17,7 +17,7 @@
         "react-bootstrap": "^0.30.6",
         "react-bootstrap-sweetalert": "^3.0.0",
         "react-dom": "^15.3.2",
-        "react-infinite": "^0.10.0",
+        "react-infinite-scroller": "^1.0.4",
         "react-loading": "^0.0.9",
         "react-redux": "^4.4.6",
         "react-redux-form": "^1.2.4",

src/public/js/components/list/posters.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import fuzzy from 'fuzzy';
-import Infinite from 'react-infinite';
+import InfiniteScroll from 'react-infinite-scroller';
 
 import ListFilter from './filter'
 import ListPoster from './poster'
@@ -10,42 +10,28 @@ export default class ListPosters extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      elementHeight: 150,
+      items: 30,
-      elementWidth: 70,
+      hasMore: true,
-      containerWidth: 0,
-      elementPerRaw: 1,
-      fakeElementHeight: 100,
     };
-    this.updateDimensions = this.updateDimensions.bind(this);
+    this.loadMore = this.loadMore.bind(this);
   }
-  updateDimensions() {
+  loadMore() {
-    let thumbnails = document.getElementsByClassName("thumbnail");
+    if (!this.state.hasMore || this.props.data.length === 0) {
-    if (thumbnails.length === 0) {
       return
     }
-    let containers = document.getElementsByClassName("posters-infinite-container");
+
-    if (containers.length === 0) {
+    const addItems = 30;
-      return
+    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,
+      });
     }
-    let elementHeight = thumbnails[0].parentNode.clientHeight;
-    let elementWidth = thumbnails[0].parentNode.clientWidth;
-    let containerWidth = containers[0].clientWidth;
-    let elementPerRaw = Math.round(containerWidth/elementWidth);
-    let fakeElementHeight = Math.round(elementHeight/elementPerRaw);
-    this.setState({
-      elementHeight: elementHeight,
-      elementWidth: elementWidth,
-      containerWidth: containerWidth,
-      elementPerRaw: elementPerRaw,
-      fakeElementHeight: fakeElementHeight,
-    });
-  }
-  componentDidMount() {
-    window.addEventListener("resize", this.updateDimensions);
-    this.updateDimensions();
-  }
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateDimensions);
   }
 
   render() {
@@ -59,6 +45,8 @@ export default class ListPosters extends React.Component {
         extract: (el) => el.title
       });
       elmts = filtered.map((el) => el.original);
+    } else {
+      elmts = elmts.slice(0, this.state.items);
     }
 
     return (
@@ -74,11 +62,9 @@ export default class ListPosters extends React.Component {
               <h2>No result</h2>
             </div>
         }
-        <Infinite
+        <InfiniteScroll
-          elementHeight={this.state.fakeElementHeight}
+          hasMore={this.state.hasMore}
-          infiniteLoadBeginEdgeOffset={200}
+          loadMore={this.loadMore}
-          useWindowAsScrollContainer
-          className="row posters-infinite-container"
         >
           {elmts.map(function(el, index) {
             const selected = (el.imdb_id === this.props.selectedImdbId) ? true : false;
@@ -92,7 +78,7 @@ export default class ListPosters extends React.Component {
               />
             )}
             , this)}
-        </Infinite>
+        </InfiniteScroll>
       </div>
     );
   }

yarn.lock

@@ -2253,7 +2253,7 @@ lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
 
-lodash.isarray@^3.0.0, lodash.isarray@3.0.4:
+lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
@@ -2261,10 +2261,6 @@ lodash.isempty@^4.2.1, lodash.isempty@4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
 
-lodash.isfinite@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.2.0.tgz#aa69ffb93a37e82fab0ce18862655f9174ced339"
-
 lodash.isplainobject@^4.0.4:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -2608,10 +2604,6 @@ object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
-object-assign@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.0.1.tgz#99504456c3598b5cad4fc59c26e8a9bb107fe0bd"
-
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -3095,13 +3087,9 @@ react-dom@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
 
-react-infinite:
+react-infinite-scroller:
-  version "0.10.0"
+  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-infinite/-/react-infinite-0.10.0.tgz#04567469dd26b2f0d53bd9793bafbcd26e05c58b"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.0.4.tgz#cb171113c4c8ee6aa44669392a55ad50938e2028"
-  dependencies:
-    lodash.isarray "3.0.4"
-    lodash.isfinite "3.2.0"
-    object-assign "4.0.1"
 
 react-loading:
   version "0.0.9"