refactored Header component

.prettierignore

@@ -1,3 +0,0 @@
-package-lock.json
-.next
-node_modules/

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "jsxSingleQuote": true,
-  "semi": false,
-  "singleQuote": true
-}

src/components/DisplayMovieRow.js

@@ -71,7 +71,7 @@ export default class DisplayMovieRow extends Component {
           slideToClickedSlide={false}
           pagination={{ clickable: true }}
         >
-          {this.props.movies.map((movie, idx) => {
+          {this.props.movies && this.props.movies.map((movie, idx) => {
             let movieImageUrl =
               'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
             if (

src/components/Header.js

@@ -1,34 +1,45 @@
-import React from 'react';
+import React from 'react'
 
-import PlayLogo from '../static/images/play-button.svg';
+import PlayLogo from '../static/images/play-button.svg'
-import AddLogo from '../static/images/add.svg';
+import AddLogo from '../static/images/add.svg'
 
-export default function Header(props) {
+const Header = ({ movie }) => {
   const backgroundStyle = {
     backgroundSize: 'cover',
-    backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`,
+    backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
     backgroundPosition: 'center',
-  };
+  }
 
   return (
-    <header style={backgroundStyle} className="header">
+    movie && (
-      <div className="header__container">
+      <header
-        <h1 className="header__container-heading">{props.movie.name}</h1>
+        style={{
-        <button
+          backgroundSize: 'cover',
-          onClick={() => alert('not a movie!')}
+          backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
-          className="header__container-btnPlay"
+          backgroundPosition: 'center',
-        >
+        }}
-          <PlayLogo className="header__container-btnMyList-play" />
+        className='header'
-          Play
+      >
-        </button>
+        <div className='header__container'>
+          <h1 className='header__container-heading'>{movie.name}</h1>
+          <button
+            onClick={() => alert('not a movie!')}
+            className='header__container-btnPlay'
+          >
+            <PlayLogo className='header__container-btnMyList-play' />
+            Play
+          </button>
 
-        <button className="header__container-btnMyList">
+          <button className='header__container-btnMyList'>
-          <AddLogo className="header__container-btnMyList-add" />
+            <AddLogo className='header__container-btnMyList-add' />
-          My List
+            My List
-        </button>
+          </button>
-        <p className="header__container-overview">{props.movie.overview}</p>
+          <p className='header__container-overview'>{movie.overview}</p>
-      </div>
+        </div>
-      <div className="header--fadeBottom"></div>
+        <div className='header--fadeBottom'></div>
-    </header>
+      </header>
-  );
+    )
+  )
 }
+
+export default Header

src/components/MainContent.js

@@ -1,10 +1,12 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react'
-import axios from 'axios';
+import axios from 'axios'
-import { bindActionCreators } from 'redux';
+import { useDispatch, useSelector } from 'react-redux'
-import { connect } from 'react-redux';
+import * as movieActions from '../store/actions'
+// import { bindActionCreators } from 'redux'
+// import { connect } from 'react-redux'
 
-import Header from './Header';
+import Header from './Header'
-import Footer from './Footer';
+import Footer from './Footer'
 import {
   fetchNetflixOriginals,
   fetchTrending,
@@ -13,128 +15,144 @@ import {
   fetchComedyMovies,
   fetchDocumentaries,
   fetchHorrorMovies,
-} from '../store/actions/index';
+} from '../store/actions/index'
-import DisplayMovieRow from './DisplayMovieRow';
+import DisplayMovieRow from './DisplayMovieRow'
 
-class MainContent extends Component {
+const MainContent = () => {
-  state = {
+  // const [netflixOriginals, setNetflixOriginals] = useState([])
-    /** Will hold our chosen movie to display on the header */
+  const headerMovie = useSelector((state) => state.headerMovie)
-    selectedMovie: {},
+  const netflixOriginals = useSelector((state) => state.netflixOriginals)
-    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 () => {
+  const dispatch = useDispatch()
-    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) => {
+  useEffect(() => {
-      if (movie.title === 'Netflix Originals') {
+    dispatch(movieActions.fetchNetflixOriginals())
-        movie.movies.push(...this.props.netflixOriginals.data);
+    dispatch(movieActions.fetchHeaderMovie())
-      }
+  }, [dispatch])
-      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 = () => {
+  // state = {
-    /** Movie Id for the Narcos series  */
+  //   /** Will hold our chosen movie to display on the header */
-    const movieId = 63351;
+  //   selectedMovie: {},
-    /** Make Api call to retrieve the details for a single movie  */
+  //   movieInfo: [
-    const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=${process.env.API_KEY}`;
+  //     {
-    axios
+  //       title: 'Netflix Originals',
-      .get(url)
+  //       url: `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`,
-      .then((res) => {
+  //       movies: [],
-        const movieData = res.data;
+  //     },
-        this.setState({ selectedMovie: movieData });
+  //     {
-      })
+  //       title: 'Trending Now',
-      .catch((error) => {
+  //       url: `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`,
-        console.log(error);
+  //       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() {
+  // componentDidMount = async () => {
-    return (
+  //   await this.getMovie()
-      <div className="container">
+  //   await this.props.fetchNetflixOriginals()
-        <Header movie={this.state.selectedMovie} />
+  //   await this.props.fetchTrending()
-        <div className="movieShowcase">
+  //   await this.props.fetchTopRated()
-          {this.state.movieInfo.map((info) => {
+  //   await this.props.fetchActionMovies()
-            if (info.movies.length > 0) {
+  //   await this.props.fetchComedyMovies()
-              return (
+  //   await this.props.fetchDocumentaries()
-                <DisplayMovieRow
+  //   await this.props.fetchHorrorMovies()
-                  selectMovieHandler={this.props.selectMovieHandler}
+
-                  key={info.title}
+  //   const newMoviesArray = this.state.movieInfo.map((movie) => {
-                  title={info.title}
+  //     if (movie.title === 'Netflix Originals') {
-                  url={info.url}
+  //       movie.movies.push(...this.props.netflixOriginals.data)
-                  movies={info.movies}
+  //     }
-                />
+  //     if (movie.title === 'Trending Now') {
-              );
+  //       movie.movies.push(...this.props.trending.data)
-            }
+  //     }
-          })}
+  //     if (movie.title === 'Top Rated') {
-        </div>
+  //       movie.movies.push(...this.props.topRated.data)
-        <Footer />
+  //     }
+  //     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

src/index.js

@@ -1,26 +1,26 @@
-import React from 'react';
+import React from 'react'
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux';
+import { Provider } from 'react-redux'
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware } from 'redux'
-import promise from 'redux-promise';
+import ReduxThunk from 'redux-thunk'
-import '@babel/polyfill';
+import '@babel/polyfill'
 
-import reducers from './store/reducers';
+import reducers from './store/reducers'
-import AppRouter from './AppRouter';
+import AppRouter from './AppRouter'
 
 // Import Swiper styles
-import 'swiper/css';
+import 'swiper/css'
-import 'swiper/css/navigation';
+import 'swiper/css/navigation'
-import 'swiper/css/pagination';
+import 'swiper/css/pagination'
 // Import main sass file to apply global styles
-import './static/sass/style.scss';
+import './static/sass/style.scss'
 
-const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
+const store = createStore(reducers, applyMiddleware(ReduxThunk))
 
 const app = (
-  <Provider store={createStoreWithMiddleware(reducers)}>
+  <Provider store={store}>
     <AppRouter />
   </Provider>
-);
+)
 
-ReactDOM.render(app, document.getElementById('app'));
+ReactDOM.render(app, document.getElementById('app'))

src/pages/Home.js

@@ -8,10 +8,7 @@ const Home = () => {
   const [toggleModal, setToggleModal] = useState(false)
   const [movieOverview, setMovieOverview] = useState({})
 
-
-  /* Get the appropriate details for a specific movie that was clicked */
   const selectMovieHandler = async (movie) => {
-    console.log('movei is', movie)
     setToggleModal(true)
     setMovieOverview(movie)
   }

src/store/actions/index.js

@@ -1,98 +1,117 @@
-import axios from '../../axios-movies';
+import axios from '../../axios-movies'
 
-export const FETCH_TRENDING = 'FETCH_TRENDING';
+export const FETCH_HEADER_MOVIE = 'FETCH_HEADER_MOVIE'
-export const FETCH_NETFLIX_ORIGINALS = 'FETCH_NETFLIX_ORIGINALS';
+export const FETCH_TRENDING = 'FETCH_TRENDING'
-export const FETCH_TOP_RATED = 'FETCH_TOP_RATED';
+export const FETCH_NETFLIX_ORIGINALS = 'FETCH_NETFLIX_ORIGINALS'
-export const FETCH_ACTION_MOVIES = 'FETCH_ACTION_MOVIES';
+export const FETCH_TOP_RATED = 'FETCH_TOP_RATED'
-export const FETCH_COMEDY_MOVIES = 'FETCH_COMEDY_MOVIES';
+export const FETCH_ACTION_MOVIES = 'FETCH_ACTION_MOVIES'
-export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES';
+export const FETCH_COMEDY_MOVIES = 'FETCH_COMEDY_MOVIES'
-export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES';
+export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES'
-export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES';
+export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES'
+export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES'
 
-export function fetchTrending() {
+export const fetchHeaderMovie = () => {
+  const movieId = 63351
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `tv/${movieId}?api_key=${process.env.API_KEY}`
+      )
+
+      dispatch({ type: FETCH_HEADER_MOVIE, payload: request })
+    } catch (error) {
+      console.log('error', error)
+    }
+  }
+}
+
+export const fetchNetflixOriginals = () => {
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
+      )
+
+      dispatch({ type: FETCH_NETFLIX_ORIGINALS, payload: request })
+    } catch (error) {
+      console.log('error', error)
+    }
+  }
+}
+
+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,
-  };
+  }
 }
 
-export function fetchNetflixOriginals() {
+export const fetchTopRated = () => {
-  const request = axios.get(
-    `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-  );
-
-  return {
-    type: FETCH_NETFLIX_ORIGINALS,
-    payload: request,
-  };
-}
-
-export function fetchTopRated() {
   const request = axios.get(
     `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
-  );
+  )
 
   return {
     type: FETCH_TOP_RATED,
     payload: request,
-  };
+  }
 }
 
-export function fetchActionMovies() {
+export const fetchActionMovies = () => {
   const request = axios.get(
     `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
-  );
+  )
 
   return {
     type: FETCH_ACTION_MOVIES,
     payload: request,
-  };
+  }
 }
 
-export function fetchComedyMovies() {
+export const fetchComedyMovies = () => {
   const request = axios.get(
     `/discover/movie?api_key=${process.env.API_KEY}&with_genres=35`
-  );
+  )
 
   return {
     type: FETCH_COMEDY_MOVIES,
     payload: request,
-  };
+  }
 }
 
-export function fetchHorrorMovies() {
+export const fetchHorrorMovies = () => {
   const request = axios.get(
     `/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
-  );
+  )
 
   return {
     type: FETCH_HORROR_MOVIES,
     payload: request,
-  };
+  }
 }
 
-export function fetchRomanceMovies() {
+export const fetchRomanceMovies = () => {
   const request = axios.get(
     `/discover/movie?api_key=${process.env.API_KEY}&with_genres=10749`
-  );
+  )
 
   return {
     type: FETCH_ROMANCE_MOVIES,
     payload: request,
-  };
+  }
 }
 
-export function fetchDocumentaries() {
+export const fetchDocumentaries = () => {
   const request = axios.get(
     `/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
-  );
+  )
 
   return {
     type: FETCH_DOCUMENTARIES,
     payload: request,
-  };
+  }
 }

src/store/reducers/index.js

@@ -1,12 +1,13 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from 'redux'
-import TrendingReducer from './reducerTrending';
+import TrendingReducer from './reducerTrending'
-import NetflixOriginalsReducer from './reducerNetflixOriginals';
+import NetflixOriginalsReducer from './reducerNetflixOriginals'
-import TopRatedReducer from './reducerTopRated';
+import TopRatedReducer from './reducerTopRated'
-import ActionMoviesReducer from './reducerActionMovies';
+import ActionMoviesReducer from './reducerActionMovies'
-import ComedyMoviesReducer from './reducerComedyMovies';
+import ComedyMoviesReducer from './reducerComedyMovies'
-import HorrorMoviesReducer from './reducerHorrorMovies';
+import HorrorMoviesReducer from './reducerHorrorMovies'
-import RomanceMoviesReducer from './reducerRomanceMovies';
+import RomanceMoviesReducer from './reducerRomanceMovies'
-import DocumentaryReducer from './reducerDocumentary';
+import DocumentaryReducer from './reducerDocumentary'
+import HeaderMovieReducer from './reducerHeaderMovie'
 
 const rootReducer = combineReducers({
   trending: TrendingReducer,
@@ -17,6 +18,7 @@ const rootReducer = combineReducers({
   horror: HorrorMoviesReducer,
   romance: RomanceMoviesReducer,
   documentary: DocumentaryReducer,
-});
+  headerMovie: HeaderMovieReducer,
+})
 
-export default rootReducer;
+export default rootReducer

src/store/reducers/reducerHeaderMovie.js

@@ -0,0 +1,11 @@
+import { FETCH_HEADER_MOVIE } from '../actions/index'
+
+export default function (state = {}, action) {
+  switch (action.type) {
+    case FETCH_HEADER_MOVIE:
+      const data = action.payload.data
+      return { ...state, ...data }
+    default:
+      return state
+  }
+}

src/store/reducers/reducerNetflixOriginals.js

@@ -1,11 +1,11 @@
-import { FETCH_NETFLIX_ORIGINALS } from '../actions/index';
+import { FETCH_NETFLIX_ORIGINALS } from '../actions/index'
 
 export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_NETFLIX_ORIGINALS:
-      const data = action.payload.data.results;
+      const data = action.payload.data.results
-      return { ...state, data };
+      return { ...state, data }
     default:
-      return state;
+      return state
   }
 }