Add fallback when no image movie is available

Macxim · Aug 11, 2017 · 578e5e2 · 578e5e2
1 parent 3da29a3
commit 578e5e2
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/src/components/List/index.css b/src/components/List/index.css
@@ -19,6 +19,37 @@
   box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.4);
 }
 
+
+.list__movie-no_image_holder{
+  display: inline-block;
+  background-color: #dbdbdb;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.list__movie-no_image_holder span{
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.list__movie-no_image_holder:before{
+  content: "No image available";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 24px;
+  border: 1px dotted #b5b5b5;
+  padding: 10px;
+  color: #b5b5b5;
+  text-align: center;
+}
+
 .list__movie-title{
   display: block;
   font-size: 16px;

diff --git a/src/components/List/index.js b/src/components/List/index.js
@@ -10,7 +10,11 @@ const List = ({ list }) => {
         <div key={item.id} className="list-container__item">
           <div className="list__movie-image">
             <span className="list__movie-vote-average">{item.vote_average}</span>
-            <img src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2${item.poster_path}`} alt={item.title}/>
+            {item.poster_path ? (
+              <img src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2${item.poster_path}`} alt={item.title}/>
+            )
+            : (<div className="list__movie-no_image_holder"></div>)
+            }
           </div>
           <div className="list__movie-title">
             {item.title}