Add infinite scroll on poster list

package.json

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

src/public/js/app.js

@@ -110,7 +110,7 @@ ReactDOM.render((
         <Route path="/users/edit" component={UserIsAuthenticated(UserEdit)} />
         <Route path="/movies/search/:search" component={UserIsAuthenticated(MovieListSearch)} />
         <Route path="/movies/popular" component={UserIsAuthenticated(MovieListPopular)} />
-        <Route path="/movies/polochon(/:page)" component={UserIsAuthenticated(MovieListPolochon)} />
+        <Route path="/movies/polochon" component={UserIsAuthenticated(MovieListPolochon)} />
         <Route path="/shows/search/:search" component={UserIsAuthenticated(ShowListSearch)} />
         <Route path="/shows/popular" component={UserIsAuthenticated(ShowListPopular)} />
         <Route path="/shows/polochon" component={UserIsAuthenticated(ShowListPolochon)} />

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

@@ -1,62 +1,91 @@
 import React from 'react'
+
 import fuzzy from 'fuzzy';
+import Infinite from 'react-infinite';
 
 import ListFilter from './filter'
 import ListPoster from './poster'
 
-export default function ListPosters(props) {
-  let elmts = props.data.slice();
-
-  // Filter the list of elements
-  if (props.filter !== "") {
-    const filtered = fuzzy.filter(props.filter, elmts, {
-      extract: (el) => el.title
+export default class ListPosters extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elementHeight: 150,
+      elementWidth: 70,
+      containerWidth: 0,
+      elementPerRaw: 1,
+      fakeElementHeight: 100,
+    };
+    this.updateDimensions = this.updateDimensions.bind(this);
+  }
+  updateDimensions() {
+    let thumbnails = document.getElementsByClassName("thumbnail");
+    if (thumbnails.length === 0) {
+      return
+    }
+    let containers = document.getElementsByClassName("posters-infinite-container");
+    if (containers.length === 0) {
+      return
+    }
+    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,
     });
-    elmts = filtered.map((el) => el.original);
-  } else {
-    // Get the page number if defined
-    let page = 1;
-    let perPage = props.perPage;
-    if (props.params && props.params.page) {
-      page = parseInt(props.params.page);
-    }
-
-    let from = 0;
-    let to = perPage - 1;
-    if (page > 1) {
-      from = ((page - 1) * perPage) - 1;
-      to = from + perPage;
-    }
-
-    // Limit the number of results
-    if ((from + perPage) > elmts.length) {
-      elmts = elmts.slice(from);
-    } else {
-      elmts = elmts.slice(from, to);
-    }
+  }
+  componentDidMount() {
+    window.addEventListener("resize", this.updateDimensions);
+    this.updateDimensions();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateDimensions);
   }
 
-  return (
-    <div className="col-xs-5 col-md-8">
-      <ListFilter
-        formModel={props.formModel}
-        controlModel={props.controlModel}
-        controlPlaceHolder={props.controlPlaceHolder}
-      />
-      <div className="row">
-        {elmts.map(function(el, index) {
-          const selected = (el.imdb_id === props.selectedImdbId) ? true : false;
-          return (
-            <ListPoster
-              index={index}
-              data={el}
-              key={el.imdb_id}
-              selected={selected}
-              onClick={() => props.onClick(el.imdb_id)}
-            />
-          )}
-        )}
+  render() {
+    let elmts = this.props.data.slice();
+
+    // Filter the list of elements
+    if (this.props.filter !== "") {
+      const filtered = fuzzy.filter(this.props.filter, elmts, {
+        extract: (el) => el.title
+      });
+      elmts = filtered.map((el) => el.original);
+    }
+
+    return (
+      <div className="col-xs-5 col-md-8">
+        <ListFilter
+          formModel={this.props.formModel}
+          controlModel={this.props.controlModel}
+          controlPlaceHolder={this.props.controlPlaceHolder}
+        />
+        <Infinite
+          elementHeight={this.state.fakeElementHeight}
+          infiniteLoadBeginEdgeOffset={200}
+          useWindowAsScrollContainer
+          className="row posters-infinite-container"
+        >
+          {elmts.map(function(el, index) {
+            const selected = (el.imdb_id === this.props.selectedImdbId) ? true : false;
+            return (
+              <ListPoster
+                index={index}
+                data={el}
+                key={el.imdb_id}
+                selected={selected}
+                onClick={() => this.props.onClick(el.imdb_id)}
+              />
+            )}
+            , this)}
+        </Infinite>
       </div>
-    </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.0, lodash.isarray@3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
@@ -2261,6 +2261,10 @@ 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"
@@ -2604,6 +2608,10 @@ 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"
@@ -3087,6 +3095,14 @@ 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:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-infinite/-/react-infinite-0.10.0.tgz#04567469dd26b2f0d53bd9793bafbcd26e05c58b"
+  dependencies:
+    lodash.isarray "3.0.4"
+    lodash.isfinite "3.2.0"
+    object-assign "4.0.1"
+
 react-loading:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/react-loading/-/react-loading-0.0.9.tgz#e9fba6948915ba7742a508193828b6c73eb04956"