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 {