refacted MainContent component

src/containers/ActionMovies.js

@@ -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);

src/containers/ComedyMovies.js

@@ -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);

src/containers/DisplayMovieRow.js

@@ -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 (
     <>

src/containers/Documentaries.js

@@ -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);

src/containers/HorrorMovies.js

@@ -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);

src/containers/MainContent.js

@@ -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 Header from '../components/Header';
-import NetflixOriginals from './NetflixOriginals';
+import Footer from '../components/Footer';
-import { fetchNetflixOriginals } from '../store/actions/index';
+import {
-import TopRated from './TopRated';
+  fetchNetflixOriginals,
-import ActionMovies from './ActionMovies';
+  fetchTrending,
-import ComedyMovies from './ComedyMovies';
+  fetchTopRated,
-import Documentaries from './Documentaries';
+  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)
+              if (info.movies.length > 0) {
-              return (
+                return (
-                <DisplayMovieRow
+                  <DisplayMovieRow
-                  title={info.title}
+                    key={info.title}
-                  url={info.url}
+                    title={info.title}
-                  movies={info.movies}
+                    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); 

src/containers/NetflixOriginals.js

@@ -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);

src/containers/RomanceMovies.js

@@ -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);

src/containers/TopRated.js

@@ -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);

src/containers/TrendingMovies.js

@@ -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);