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

refacted MainContent component

Browse Source
This commit is contained in:
andres alcocer
2020-08-01 17:04:37 -04:00
parent 139a28dc10
commit cd942334ea
10 changed files with 99 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/containers/ActionMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchActionMovies } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class ActionMovies extends Component {
componentWillMount() {
this.props.fetchActionMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.actionMovies.data) {
const url = `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`;
movies = getMovieRows(this.props.actionMovies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { actionMovies: state.action };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchActionMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(ActionMovies);

38
src/containers/ComedyMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchComedyMovies } from '../store/actions/index';
class ComedyMovies extends Component {
componentWillMount() {
this.props.fetchComedyMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.comedy };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchComedyMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(ComedyMovies);

3
src/containers/DisplayMovieRow.js
View File

@@ -1,9 +1,7 @@
import React from 'react';
// import MovieGenre from './components/MovieGenre';
import MovieGenre from '../components/MovieGenre';
const getMovieRows = (movies, url) => {
console.log('getMovieRow() ', movies, url);
const movieRow = movies.map((movie) => {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
@@ -31,7 +29,6 @@ const getMovieRows = (movies, url) => {
};
export default function DisplayMovieRow(props) {
console.log('DisplayMovieRow.render()', props.movies);
let movies = getMovieRows(props.movies, props.url);
return (
<>

38
src/containers/Documentaries.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchDocumentaries } from '../store/actions/index';
class Documentaries extends Component {
componentWillMount() {
this.props.fetchDocumentaries();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.documentary };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchDocumentaries }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(Documentaries);

38
src/containers/HorrorMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchHorrorMovies } from '../store/actions/index';
class HorrorMovies extends Component {
componentWillMount() {
this.props.fetchHorrorMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.horror };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchHorrorMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(HorrorMovies);

135
src/containers/MainContent.js
View File

@@ -1,17 +1,19 @@
import React, { Component } from 'react';
import axios from 'axios';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import TrendingMovies from './TrendingMovies';
import NetflixOriginals from './NetflixOriginals';
import { fetchNetflixOriginals } from '../store/actions/index';
import TopRated from './TopRated';
import ActionMovies from './ActionMovies';
import ComedyMovies from './ComedyMovies';
import Documentaries from './Documentaries';
import Header from '../components/Header';
import Footer from '../components/Footer';
import {
fetchNetflixOriginals,
fetchTrending,
fetchTopRated,
fetchActionMovies,
fetchComedyMovies,
fetchDocumentaries,
fetchHorrorMovies
} from '../store/actions/index';
import DisplayMovieRow from './DisplayMovieRow';
@@ -24,21 +26,76 @@ class MainContent extends Component {
{
title: 'Netflix Originals',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`,
movies: []
}
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: [],
},
],
netflixOriginals: []
};
componentDidMount = async () => {
await this.getMovie();
await this.props.fetchNetflixOriginals();
this.state.movieInfo.forEach((movie) => {
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: this.props.netflixOriginals.data })
await this.setState({ movieInfo: newMoviesArray })
};
getMovie = () => {
@@ -58,32 +115,23 @@ class MainContent extends Component {
};
render() {
// console.log('render().state', this.state)
return (
<div className="container">
<Header movie={this.state.selectedMovie} />
<div className="movieShowcase">
{
this.state.movieInfo.map((info) => {
// console.log('render()----', info)
return (
<DisplayMovieRow
title={info.title}
url={info.url}
movies={info.movies}
/>)
if (info.movies.length > 0) {
return (
<DisplayMovieRow
key={info.title}
title={info.title}
url={info.url}
movies={info.movies}
/>)
}
})
}
{/* <DisplayMovieRow
title={'Netflix Originals'}
movies={this.state.netflixOriginals}
/> */}
{/* <NetflixOriginals /> */}
<TrendingMovies />
<TopRated />
<ActionMovies />
<ComedyMovies />
<Documentaries />
</div>
<Footer />
</div>
@@ -92,15 +140,30 @@ class MainContent extends Component {
}
const mapStateToProps = (state) => {
return { netflixOriginals: state.netflixOriginals };
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 }, dispatch);
return bindActionCreators({
fetchNetflixOriginals,
fetchTrending,
fetchTopRated,
fetchActionMovies,
fetchComedyMovies,
fetchDocumentaries,
fetchHorrorMovies
}, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)
(MainContent);
)(MainContent);

58
src/containers/NetflixOriginals.js
View File

@@ -1,58 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import OwlCarousel from 'react-owl-carousel2';
import { getMovieRows } from '../getMovie';
import { fetchNetflixOriginals } from '../store/actions/index';
const options = {
items: 1,
nav: true,
rewind: true,
autoplay: true,
};
const events = {
onDragged: [],
onChanged: [],
};
class NetflixOriginals extends Component {
componentWillMount() {
this.props.fetchNetflixOriginals();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">{movies}</div>
{/* <OwlCarousel
options={options}
events={events}
className="movieShowcase__container"
>
{movies}
</OwlCarousel> */}
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.netflixOriginals };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchNetflixOriginals }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(NetflixOriginals);

39
src/containers/RomanceMovies.js
View File

@@ -1,39 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchRomanceMovies } from '../store/actions/index';
class RomanceMovies extends Component {
componentWillMount() {
this.props.fetchRomanceMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=10749`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.romance };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchRomanceMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(RomanceMovies);

38
src/containers/TopRated.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTopRated } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class TopRated extends Component {
componentWillMount() {
this.props.fetchTopRated();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.topRated.data) {
const url = `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`;
movies = getMovieRows(this.props.topRated.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { topRated: state.topRated };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchTopRated }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(TopRated);

38
src/containers/TrendingMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTrending } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class TrendingMovies extends Component {
componentWillMount() {
this.props.fetchTrending();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.trending.data) {
const url = `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`;
movies = getMovieRows(this.props.trending.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { trending: state.trending };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchTrending }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(TrendingMovies);