refactored MainContent component
This commit is contained in:
andres alcocer
@@ -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 (
|
||||
<SwiperSlide
|
||||
onClick={() => this.props.selectMovieHandler(movie)}
|
||||
onClick={() => selectMovieHandler(movie)}
|
||||
key={idx}
|
||||
className={
|
||||
'movieShowcase__container--movie' +
|
||||
|
||||
@@ -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 (
|
||||
<div className='container'>
|
||||
<Header movie={headerMovie} />
|
||||
@@ -132,56 +27,18 @@ const MainContent = () => {
|
||||
<DisplayMovieRow
|
||||
isNetflixMovies={true}
|
||||
title='Netflix Originals'
|
||||
selectMovieHandler={selectMovieHandler}
|
||||
movies={netflixOriginals.data}
|
||||
/>
|
||||
<DisplayMovieRow
|
||||
title='Trending'
|
||||
selectMovieHandler={selectMovieHandler}
|
||||
movies={trending.data}
|
||||
/>
|
||||
</div>
|
||||
{/* <Header movie={this.state.selectedMovie} />
|
||||
<div className='movieShowcase'>
|
||||
{this.state.movieInfo.map((info) => {
|
||||
if (info.movies.length > 0) {
|
||||
return (
|
||||
<DisplayMovieRow
|
||||
selectMovieHandler={this.props.selectMovieHandler}
|
||||
key={info.title}
|
||||
title={info.title}
|
||||
url={info.url}
|
||||
movies={info.movies}
|
||||
/>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</div> */}
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
netflixOriginals: state.netflixOriginals,
|
||||
trending: state.trending,
|
||||
topRated: state.topRated,
|
||||
actionMovies: state.action,
|
||||
comedyMovies: state.comedy,
|
||||
documentaries: state.documentary,
|
||||
horrorMovies: state.horror,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return bindActionCreators(
|
||||
{
|
||||
fetchNetflixOriginals,
|
||||
fetchTrending,
|
||||
fetchTopRated,
|
||||
fetchActionMovies,
|
||||
fetchComedyMovies,
|
||||
fetchDocumentaries,
|
||||
fetchHorrorMovies,
|
||||
},
|
||||
dispatch
|
||||
)
|
||||
}
|
||||
|
||||
// export default connect(mapStateToProps, mapDispatchToProps)(MainContent)
|
||||
export default MainContent
|
||||
|
||||
@@ -40,13 +40,13 @@ export const fetchNetflixOriginals = () => {
|
||||
}
|
||||
|
||||
export const fetchTrending = () => {
|
||||
const request = axios.get(
|
||||
`/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
|
||||
)
|
||||
|
||||
return {
|
||||
type: FETCH_TRENDING,
|
||||
payload: request,
|
||||
return async (dispatch) => {
|
||||
try {
|
||||
const request = await axios.get(
|
||||
`/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
|
||||
)
|
||||
dispatch({ type: FETCH_TRENDING, payload: request })
|
||||
} catch (error) {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user