From 5cad47817d589436cbe2f0ddac7c366908c62b24 Mon Sep 17 00:00:00 2001
From: Gil Teitelbaum <gil@nationalparalegal.edu>
Date: Wed, 16 Sep 2020 22:09:52 +0300
Subject: [PATCH] fix broken images

---
 public/noimage.png                 | Bin 0 -> 4076 bytes
 src/components/movieDetails.jsx    |  60 +++++++++++------------------
 src/components/movies.jsx          |   2 +-
 src/components/moviesTable.jsx     |   6 ++-
 src/components/titleAndContent.jsx |  18 +++++++++
 src/index.css                      |  10 ++++-
 6 files changed, 55 insertions(+), 41 deletions(-)
 create mode 100644 public/noimage.png
 create mode 100644 src/components/titleAndContent.jsx

diff --git a/public/noimage.png b/public/noimage.png
new file mode 100644
index 0000000000000000000000000000000000000000..630701e2ef40bbfa361f800488e7abc5cd292896
GIT binary patch
literal 4076
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

literal 0
HcmV?d00001

diff --git a/src/components/movieDetails.jsx b/src/components/movieDetails.jsx
index 4988d76..10348b6 100644
--- a/src/components/movieDetails.jsx
+++ b/src/components/movieDetails.jsx
@@ -3,6 +3,7 @@ import restService from '../services/restService';
 import config from "../config.json";
 import { Row, Col } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import TitleAndContent from "./titleAndContent";
 
 
 class MovieDetails extends Component {
@@ -32,39 +33,15 @@ class MovieDetails extends Component {
         this.performSearch();
     }
 
-    displayColumn(content) {
-        return (
-            <Col className="description">
-                {content}
-            </Col>
-        );
-    }
-
-    displayTitledData(title, content) {
-        return (
-            <>
-                <Row>
-                    <Col lg={3} md={4} xs={6} className="title">
-                        {title}
-                    </Col>
-                    <Col lg={9} md={8} xs={6} className="content">
-                        {content}
-                    </Col>
-                </Row>
-            </>
-        )
-    }
-
     displayTitledDataWithLine(title, content) {
         return (
             <>
                 <hr></hr>
-                {this.displayTitledData(title, content)}
+                <TitleAndContent title={title} content={content}></TitleAndContent>
             </>
         )
     }
 
-
     render() {
         const { movie, isLoading } = this.state;
 
@@ -73,39 +50,46 @@ class MovieDetails extends Component {
         if (isLoading) return (<h3>Loading Movie Details...</h3>);
         return (
             <>
+                {isLoading && <h3>Loading Movie Details...</h3>}
                 <h2>{movie.Title} {"(" + movie.Year + ")"}</h2>
                 <hr></hr>
                 <Row>
                     <Col className="margin-bottom-40" md={6} sm={12}>
-                        <img className="movieListImage" src={movie.Poster}></img>
+                        <img className="largeMovieListImage" src={movie.Poster}></img>
                     </Col>
                     <Col md={6} sm={12} >
                         <Row>
-                            {this.displayColumn(movie.Rated)}
-                            {this.displayColumn(movie.Runtime)}
-                            {this.displayColumn(movie.Genre)}
+                            <Col className="description">
+                                {movie.Rated}
+                            </Col>
+                            <Col className="description">
+                                {movie.Runtime}
+                            </Col>
+                            <Col className="description">
+                                {movie.Genre}
+                            </Col>
                         </Row>
                         <hr></hr>
                         <Row>
                             <Col className="description">
-                                {movie.Plot}}
+                                {movie.Plot}
                             </Col>
                         </Row>
                         {this.displayTitledDataWithLine("Writer:", movie.Writer)}
-                        {this.displayTitledData("Actors:", movie.Actors)}
-                        {this.displayTitledData("Director:", movie.Director)}
-                        {this.displayTitledData("Country:", movie.Country)}
+                        <TitleAndContent title="Actors:" content={movie.Actors}></TitleAndContent>
+                        <TitleAndContent title="Director:" content={movie.Director}></TitleAndContent>
+                        <TitleAndContent title="Country:" content={movie.Country}></TitleAndContent>
                         {this.displayTitledDataWithLine("Awards:", movie.Awards)}
-                        {this.displayTitledData("Metascore:", movie.Metascore)}
-                        {this.displayTitledData("Imdb Rating:", movie.imdbRating)}
-                        {this.displayTitledData("Imdb Votes:", movie.imdbVotes)}
+                        <TitleAndContent title="Metascore:" content={movie.Metascore}></TitleAndContent>
+                        <TitleAndContent title="Imdb Rating:" content={movie.imdbRating}></TitleAndContent>
+                        <TitleAndContent title="Imdb Votes:" content={movie.imdbVotes}></TitleAndContent>
                         {this.displayTitledDataWithLine("Box Office:", movie.BoxOffice)}
-                        {this.displayTitledData("Production:", movie.Production)}
+                        <TitleAndContent title="Production:" content={movie.Production}></TitleAndContent>
                     </Col>
                 </Row>
                 <hr></hr>
                 <Row>
-                <Link className="btn-custom wideButton" to="/movies">Back to Movies Search</Link>
+                    <Link className="btn-custom wideButton" to="/movies">Back to Movies Search</Link>
                 </Row>
             </>
         );
diff --git a/src/components/movies.jsx b/src/components/movies.jsx
index 35775b4..782ed44 100644
--- a/src/components/movies.jsx
+++ b/src/components/movies.jsx
@@ -101,10 +101,10 @@ class Movies extends Component {
 
     render() {
         const { isLoading, movies, totalMovies, movieSearchName, movieYear } = this.state;
-        if (isLoading) return <p>Loading...</p>
 
         return (
             <>
+                {isLoading && <p>Loading...</p>}
                 <Form onSubmit={this.handleSubmit}>
                     <Row>
                         <Col className="searchControl" md={8} sm={6} xs={8}><Form.Control id="movieSearchName" onChange={this.handleChange} value={movieSearchName || ""} placeholder="Search for any movie" /></Col>
diff --git a/src/components/moviesTable.jsx b/src/components/moviesTable.jsx
index a2ac92e..36401c4 100644
--- a/src/components/moviesTable.jsx
+++ b/src/components/moviesTable.jsx
@@ -10,7 +10,7 @@ class MoviesTable extends Component {
                 {movies.map(movie => (
                     <div key={movie.imdbID} className="col-xs-12 col-sm-6 col-md-4 col-lg-3 movieListEntry">
                         <Link to={'/movies/' + movie.imdbID}>
-                            <img loading="lazy" className="movieListImage" src={movie.Poster} alt={"Movie poster for " + movie.Title}></img>
+                            <img loading="lazy" onError={this.setDefaultSource} className="movieListImage" src={movie.Poster} alt={"Movie poster for " + movie.Title}></img>
                             <h4 className="movieListTitle">{movie.Title} {"(" + movie.Year + ")"}</h4>
                         </Link>
                     </div>
@@ -18,6 +18,10 @@ class MoviesTable extends Component {
             </div>
         );
     }
+
+    setDefaultSource(event) {
+        event.target.src = "../../noimage.png";
+    }
 }
 
 export default MoviesTable;
diff --git a/src/components/titleAndContent.jsx b/src/components/titleAndContent.jsx
new file mode 100644
index 0000000..ebb91ab
--- /dev/null
+++ b/src/components/titleAndContent.jsx
@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import { Row, Col } from "react-bootstrap";
+
+
+export default function TitleAndContent(props) {
+    return (
+        <>
+            <Row>
+                <Col lg={3} md={4} xs={6} className="title">
+                    {props.title}
+                </Col>
+                <Col lg={9} md={8} xs={6} className="content">
+                    {props.content}
+                </Col>
+            </Row>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 55eab58..ebcd1e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,9 +34,17 @@ body {
 
 .movieListImage{
   width: 100%;
-  border-radius: 10px
+  border-radius: 10px;
+  width: 200px;
+  height: 250px;
 }
 
+.largeMovieListImage{
+  width: 100%;
+  border-radius: 10px;
+}
+
+
 .movieListTitle {
   font-size: 18px;
   font-weight: bold;