diff --git a/src/public/js/components/list/poster.js b/src/public/js/components/list/poster.js index 0f9f129..a151061 100644 --- a/src/public/js/components/list/poster.js +++ b/src/public/js/components/list/poster.js @@ -1,9 +1,15 @@ import React from "react" -export default class ListPoster extends React.PureComponent { +export default class Poster extends React.Component { constructor(props) { super(props); } + shouldComponentUpdate(nextProps) { + if (nextProps.index !== this.props.index) { return true } + if (nextProps.selected !== this.props.selected) { return true } + if (nextProps.data.get("poster_url") !== this.props.data.get("poster_url")) { return true } + return false; + } render() { const selected = this.props.selected ? " thumbnail-selected" : ""; const imgClass = "thumbnail" + selected; diff --git a/src/public/js/components/list/posters.js b/src/public/js/components/list/posters.js index 6668dbe..73beb8d 100644 --- a/src/public/js/components/list/posters.js +++ b/src/public/js/components/list/posters.js @@ -5,7 +5,7 @@ import InfiniteScroll from "react-infinite-scroller"; import ListFilter from "./filter" import ExplorerOptions from "./explorerOptions" -import ListPoster from "./poster" +import Poster from "./poster" import Loader from "../loader/loader" @@ -58,12 +58,12 @@ export default class ListPosters extends React.PureComponent { const listSize = elmts !== undefined ? elmts.size : 0; const colSize = (listSize !== 0) ? "col-xs-5 col-md-8" : "col-xs-12"; - // Filter the list of elements - if (this.props.filter !== "") { - elmts = elmts.filter((v) => fuzzy.test(this.props.filter, v.get("title")), this); - } else { - elmts = elmts.slice(0, this.state.items); - } + // Filter the list of elements + if (this.props.filter !== "") { + elmts = elmts.filter((v) => fuzzy.test(this.props.filter, v.get("title")), this); + } else { + elmts = elmts.slice(0, this.state.items); + } // Chose when to display filter / explore options let displayFilter = true; @@ -132,7 +132,7 @@ class Posters extends React.PureComponent { const imdbId = movie.get("imdb_id"); const selected = (imdbId === this.props.selectedImdbId) ? true : false; return ( -