diff --git a/public/noimage.png b/public/noimage.png new file mode 100644 index 0000000..630701e Binary files /dev/null and b/public/noimage.png differ 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 ( - - {content} - - ); - } - - displayTitledData(title, content) { - return ( - <> - - - {title} - - - {content} - - - - ) - } - displayTitledDataWithLine(title, content) { return ( <>
- {this.displayTitledData(title, content)} + ) } - render() { const { movie, isLoading } = this.state; @@ -73,39 +50,46 @@ class MovieDetails extends Component { if (isLoading) return (

Loading Movie Details...

); return ( <> + {isLoading &&

Loading Movie Details...

}

{movie.Title} {"(" + movie.Year + ")"}


- + - {this.displayColumn(movie.Rated)} - {this.displayColumn(movie.Runtime)} - {this.displayColumn(movie.Genre)} + + {movie.Rated} + + + {movie.Runtime} + + + {movie.Genre} +
- {movie.Plot}} + {movie.Plot} {this.displayTitledDataWithLine("Writer:", movie.Writer)} - {this.displayTitledData("Actors:", movie.Actors)} - {this.displayTitledData("Director:", movie.Director)} - {this.displayTitledData("Country:", movie.Country)} + + + {this.displayTitledDataWithLine("Awards:", movie.Awards)} - {this.displayTitledData("Metascore:", movie.Metascore)} - {this.displayTitledData("Imdb Rating:", movie.imdbRating)} - {this.displayTitledData("Imdb Votes:", movie.imdbVotes)} + + + {this.displayTitledDataWithLine("Box Office:", movie.BoxOffice)} - {this.displayTitledData("Production:", movie.Production)} +

- Back to Movies Search + Back to Movies Search ); 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

Loading...

return ( <> + {isLoading &&

Loading...

}
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 => (
- {"Movie + {"Movie

{movie.Title} {"(" + movie.Year + ")"}

@@ -18,6 +18,10 @@ class MoviesTable extends Component { ); } + + 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 ( + <> + + + {props.title} + + + {props.content} + + + + ); +} \ 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;