More control on the poster component update

This commit is contained in:
Grégoire Delattre 2017-06-02 22:26:01 +02:00
parent 643bd3aa9a
commit e2445bc287
2 changed files with 15 additions and 9 deletions

View File

@ -1,9 +1,15 @@
import React from "react" import React from "react"
export default class ListPoster extends React.PureComponent { export default class Poster extends React.Component {
constructor(props) { constructor(props) {
super(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() { render() {
const selected = this.props.selected ? " thumbnail-selected" : ""; const selected = this.props.selected ? " thumbnail-selected" : "";
const imgClass = "thumbnail" + selected; const imgClass = "thumbnail" + selected;

View File

@ -5,7 +5,7 @@ import InfiniteScroll from "react-infinite-scroller";
import ListFilter from "./filter" import ListFilter from "./filter"
import ExplorerOptions from "./explorerOptions" import ExplorerOptions from "./explorerOptions"
import ListPoster from "./poster" import Poster from "./poster"
import Loader from "../loader/loader" import Loader from "../loader/loader"
@ -132,7 +132,7 @@ class Posters extends React.PureComponent {
const imdbId = movie.get("imdb_id"); const imdbId = movie.get("imdb_id");
const selected = (imdbId === this.props.selectedImdbId) ? true : false; const selected = (imdbId === this.props.selectedImdbId) ? true : false;
return ( return (
<ListPoster <Poster
index={index} index={index}
data={movie} data={movie}
key={imdbId} key={imdbId}