refactored MainContent component

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 (
                 <SwiperSlide
-                  onClick={() => this.props.selectMovieHandler(movie)}
+                  onClick={() => selectMovieHandler(movie)}
                   key={idx}
                   className={
                     'movieShowcase__container--movie' +

src/components/MainContent.js

@@ -1,130 +1,25 @@
-import React, { useState, useEffect } from 'react'
+import React, { 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 {
+
-  fetchNetflixOriginals,
-  fetchTrending,
-  fetchTopRated,
-  fetchActionMovies,
-  fetchComedyMovies,
-  fetchDocumentaries,
-  fetchHorrorMovies,
-} from '../store/actions/index'
 import DisplayMovieRow from './DisplayMovieRow'
 
-const MainContent = () => {
+const MainContent = ({ selectMovieHandler }) => {
-  // const [netflixOriginals, setNetflixOriginals] = useState([])
   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

src/store/actions/index.js

@@ -40,13 +40,13 @@ export const fetchNetflixOriginals = () => {
 }
 
 export const fetchTrending = () => {
-  const request = axios.get(
+  return async (dispatch) => {
-    `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
+    try {
-  )
+      const request = await axios.get(
-
+        `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
-  return {
+      )
-    type: FETCH_TRENDING,
+      dispatch({ type: FETCH_TRENDING, payload: request })
-    payload: request,
+    } catch (error) {}
   }
 }