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...
}