psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactored Header component

Browse Source
This commit is contained in:
andres alcocer
2021-10-07 12:59:45 -04:00
parent f3ac25f825
commit 5f7afb7e46
11 changed files with 287 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/components/MainContent.js
View File

@@ -1,10 +1,12 @@
import React, { Component } from 'react';
import axios from 'axios';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import React, { useState, useEffect } from 'react'
import axios from 'axios'
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 Header from './Header'
import Footer from './Footer'
import {
fetchNetflixOriginals,
fetchTrending,
@@ -13,128 +15,144 @@ import {
fetchComedyMovies,
fetchDocumentaries,
fetchHorrorMovies,
} from '../store/actions/index';
import DisplayMovieRow from './DisplayMovieRow';
} from '../store/actions/index'
import DisplayMovieRow from './DisplayMovieRow'
class MainContent extends Component {
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: [],
},
],
};
const MainContent = () => {
// const [netflixOriginals, setNetflixOriginals] = useState([])
const headerMovie = useSelector((state) => state.headerMovie)
const netflixOriginals = useSelector((state) => state.netflixOriginals)
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 dispatch = useDispatch()
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 });
};
useEffect(() => {
dispatch(movieActions.fetchNetflixOriginals())
dispatch(movieActions.fetchHeaderMovie())
}, [dispatch])
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);
});
};
// 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: [],
// },
// ],
// };
render() {
return (
<div className="container">
<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 />
// 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} />
<div className='movieShowcase'>
<DisplayMovieRow
title='Netflix Originals'
movies={netflixOriginals.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) => {
@@ -146,8 +164,8 @@ const mapStateToProps = (state) => {
comedyMovies: state.comedy,
documentaries: state.documentary,
horrorMovies: state.horror,
};
};
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(
@@ -161,7 +179,8 @@ const mapDispatchToProps = (dispatch) => {
fetchHorrorMovies,
},
dispatch
);
};
)
}
export default connect(mapStateToProps, mapDispatchToProps)(MainContent);
// export default connect(mapStateToProps, mapDispatchToProps)(MainContent)
export default MainContent