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 (