fix broken images

gilteitelbaum · Sep 16, 2020 · 5cad478 · 5cad478
1 parent 91be2eb
commit 5cad478
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 41 deletions.
diff --git a/public/noimage.png b/public/noimage.png
diff --git 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
@@ -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
@@ -10,14 +10,18 @@ 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>
                 ))}
             </div>
         );
     }
+
+    setDefaultSource(event) {
+        event.target.src = "../../noimage.png";
+    }
 }
 
 export default MoviesTable;
diff --git a/src/components/titleAndContent.jsx 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>
+        </>
+    );
+}
diff --git 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;