diff --git a/package.json b/package.json index f877cf2..ca445be 100644 --- a/package.json +++ b/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", diff --git a/src/public/js/components/list/posters.js b/src/public/js/components/list/posters.js index bdffe74..f8d4db1 100644 --- a/src/public/js/components/list/posters.js +++ b/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, - elementWidth: 70, - containerWidth: 0, - elementPerRaw: 1, - fakeElementHeight: 100, + items: 30, + hasMore: true, }; - this.updateDimensions = this.updateDimensions.bind(this); + this.loadMore = this.loadMore.bind(this); } - updateDimensions() { - let thumbnails = document.getElementsByClassName("thumbnail"); - if (thumbnails.length === 0) { + loadMore() { + if (!this.state.hasMore || this.props.data.length === 0) { return } - let containers = document.getElementsByClassName("posters-infinite-container"); - if (containers.length === 0) { - 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, + }); } - 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 {

No result

} - {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)} - + ); } diff --git a/yarn.lock b/yarn.lock index 9a29bab..f202c73 100644 --- a/yarn.lock +++ b/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: - 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-infinite-scroller: + version "1.0.4" + resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.0.4.tgz#cb171113c4c8ee6aa44669392a55ad50938e2028" react-loading: version "0.0.9"