diff --git a/src/components/MovieGenre.js b/src/components/MovieGenre.js
index eb2c58f..dbe502d 100644
--- a/src/components/MovieGenre.js
+++ b/src/components/MovieGenre.js
@@ -24,13 +24,13 @@ export default class MovieGenre extends Component {
return (
<>
-
this.handleToggleModal()}
+
this.props.selectMovieHandler(this.props.movie)}
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
-
+ {/*
-
+ */}
>
)
}
diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js
index 6cd3a41..3bad03f 100644
--- a/src/containers/DisplayMovieRow.js
+++ b/src/containers/DisplayMovieRow.js
@@ -1,7 +1,9 @@
import React from 'react';
+import OwlCarousel from 'react-owl-carousel2';
+
import MovieGenre from '../components/MovieGenre';
-const getMovieRows = (movies, url) => {
+const getMovieRows = (movies, url, selectMovieHandler) => {
const movieRow = movies.map((movie) => {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
@@ -15,6 +17,7 @@ const getMovieRows = (movies, url) => {
if (movie.poster_path && movie.backdrop_path !== null) {
const movieComponent = (
{
};
export default function DisplayMovieRow(props) {
- let movies = getMovieRows(props.movies, props.url);
+ let movies = getMovieRows(props.movies, props.url, props.selectMovieHandler);
return (
<>
{props.title}
diff --git a/src/containers/Home.js b/src/containers/Home.js
index 2db83de..0ad2a0a 100644
--- a/src/containers/Home.js
+++ b/src/containers/Home.js
@@ -17,28 +17,10 @@ class Home extends Component {
/* Get the appropriate details for a specific movie that was clicked */
- // selectMovieHandler = (movie) => {
- // this.setState({ toggleModal: true });
-
- // let url;
- // /** Make the appropriate API call to get the details for a single movie or tv show. */
- // if (movie.media_type === "movie") {
- // const movieId = movie.id;
- // url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`;
-
- // } else if (movie.media_type === "tv") {
- // const tvId = movie.id
- // url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`;
- // }
-
- // axios.get(url)
- // .then(res => {
- // const movieData = res.data;
- // this.setState({ movieOverview: movieData });
- // }).catch(error => {
- // console.log(error);
- // });
- // }
+ selectMovieHandler = async (movie) => {
+ this.setState({ toggleModal: true });
+ await this.setState({ movieOverview: movie });
+ }
closeModal = () => {
this.setState({ toggleModal: false });
@@ -48,7 +30,7 @@ class Home extends Component {
return (
<>
-
+
0) {
return (