From d51f56fc60703962e99df48aca901ef21c19f739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Thu, 17 Nov 2016 13:43:50 +0100
Subject: [PATCH] Handle missing movie posters

---
 src/public/js/components/movies/list.js | 37 +++++++++++++++++--------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js
index c27b600..889b760 100644
--- a/src/public/js/components/movies/list.js
+++ b/src/public/js/components/movies/list.js
@@ -32,17 +32,32 @@ function MoviePosters(props) {
   );
 }
 
-function MoviePoster(props) {
-  const imgUrl = '/img/movies/' + props.data.imdb_id +'.jpg';
-  const selected = props.selected ? ' thumbnail-selected' : '';
-  const imgClass = 'thumbnail' + selected;
-  return (
-    <div className="col-xs-12 col-md-3">
-      <a className={imgClass}>
-        <img src={imgUrl} onClick={props.onClick}/>
-      </a>
-    </div>
-  );
+class MoviePoster extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      src: `/img/movies/${this.props.data.imdb_id}.jpg`,
+    }
+    this.handleError = this.handleError.bind(this);
+  }
+  handleError() {
+    this.setState({ src: '/img/noimage.png' });
+  }
+  render() {
+    const selected = this.props.selected ? ' thumbnail-selected' : '';
+    const imgClass = 'thumbnail' + selected;
+    return (
+      <div className="col-xs-12 col-md-3">
+        <a className={imgClass}>
+          <img
+            src={this.state.src}
+            onClick={this.props.onClick}
+            onError={this.handleError}
+          />
+        </a>
+      </div>
+    );
+  }
 }
 
 function MovieDetails(props) {