diff --git a/src/components/DisplayMovieRow.js b/src/components/DisplayMovieRow.js index 99443b5..1e58d20 100644 --- a/src/components/DisplayMovieRow.js +++ b/src/components/DisplayMovieRow.js @@ -7,7 +7,7 @@ import { useViewport } from '../hooks/useViewport' // install Swiper components SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]) -const DisplayMovieRow = ({ title, isNetflixMovies, movies }) => { +const DisplayMovieRow = ({ title, isNetflixMovies, movies, selectMovieHandler }) => { const [windowDimensions] = useViewport() const { width } = windowDimensions @@ -56,7 +56,7 @@ const DisplayMovieRow = ({ title, isNetflixMovies, movies }) => { if (movie.poster_path && movie.backdrop_path !== null) { return ( this.props.selectMovieHandler(movie)} + onClick={() => selectMovieHandler(movie)} key={idx} className={ 'movieShowcase__container--movie' + diff --git a/src/components/MainContent.js b/src/components/MainContent.js index a8b4353..f2a9c33 100644 --- a/src/components/MainContent.js +++ b/src/components/MainContent.js @@ -1,130 +1,25 @@ -import React, { useState, useEffect } from 'react' -import axios from 'axios' +import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import * as movieActions from '../store/actions' -// import { bindActionCreators } from 'redux' -// import { connect } from 'react-redux' import Header from './Header' import Footer from './Footer' -import { - fetchNetflixOriginals, - fetchTrending, - fetchTopRated, - fetchActionMovies, - fetchComedyMovies, - fetchDocumentaries, - fetchHorrorMovies, -} from '../store/actions/index' + import DisplayMovieRow from './DisplayMovieRow' -const MainContent = () => { - // const [netflixOriginals, setNetflixOriginals] = useState([]) +const MainContent = ({ selectMovieHandler }) => { const headerMovie = useSelector((state) => state.headerMovie) const netflixOriginals = useSelector((state) => state.netflixOriginals) + const trending = useSelector((state) => state.trending) const dispatch = useDispatch() useEffect(() => { - dispatch(movieActions.fetchNetflixOriginals()) dispatch(movieActions.fetchHeaderMovie()) + dispatch(movieActions.fetchNetflixOriginals()) + dispatch(movieActions.fetchTrending()) }, [dispatch]) - // state = { - // /** Will hold our chosen movie to display on the header */ - // selectedMovie: {}, - // movieInfo: [ - // { - // title: 'Netflix Originals', - // url: `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`, - // movies: [], - // }, - // { - // title: 'Trending Now', - // url: `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`, - // movies: [], - // }, - // { - // title: 'Top Rated', - // url: `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`, - // movies: [], - // }, - // { - // title: 'Action Movies', - // url: `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`, - // movies: [], - // }, - // { - // title: 'Comedy Movies', - // url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`, - // movies: [], - // }, - // { - // title: 'Horror Movies', - // url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`, - // movies: [], - // }, - // { - // title: 'Documentaries', - // url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`, - // movies: [], - // }, - // ], - // }; - - // componentDidMount = async () => { - // await this.getMovie() - // await this.props.fetchNetflixOriginals() - // await this.props.fetchTrending() - // await this.props.fetchTopRated() - // await this.props.fetchActionMovies() - // await this.props.fetchComedyMovies() - // await this.props.fetchDocumentaries() - // await this.props.fetchHorrorMovies() - - // const newMoviesArray = this.state.movieInfo.map((movie) => { - // if (movie.title === 'Netflix Originals') { - // movie.movies.push(...this.props.netflixOriginals.data) - // } - // if (movie.title === 'Trending Now') { - // movie.movies.push(...this.props.trending.data) - // } - // if (movie.title === 'Top Rated') { - // movie.movies.push(...this.props.topRated.data) - // } - // if (movie.title === 'Action Movies') { - // movie.movies.push(...this.props.actionMovies.data) - // } - // if (movie.title === 'Comedy Movies') { - // movie.movies.push(...this.props.comedyMovies.data) - // } - // if (movie.title === 'Documentaries') { - // movie.movies.push(...this.props.documentaries.data) - // } - // if (movie.title === 'Horror Movies') { - // movie.movies.push(...this.props.horrorMovies.data) - // } - // return movie - // }) - // await this.setState({ movieInfo: newMoviesArray }) - // } - - // getMovie = () => { - // /** Movie Id for the Narcos series */ - // const movieId = 63351 - // /** Make Api call to retrieve the details for a single movie */ - // const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=${process.env.API_KEY}` - // axios - // .get(url) - // .then((res) => { - // const movieData = res.data - // this.setState({ selectedMovie: movieData }) - // }) - // .catch((error) => { - // console.log(error) - // }) - // } - return (
@@ -132,56 +27,18 @@ const MainContent = () => { +
- {/*
-
- {this.state.movieInfo.map((info) => { - if (info.movies.length > 0) { - return ( - - ) - } - })} -
*/}