From 5f7afb7e463fb557b16b4980724818a4e0f4fe3b Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Thu, 7 Oct 2021 12:59:45 -0400 Subject: [PATCH] refactored Header component --- .prettierignore | 3 - .prettierrc | 5 - src/components/DisplayMovieRow.js | 2 +- src/components/Header.js | 61 ++-- src/components/MainContent.js | 273 ++++++++++-------- src/index.js | 32 +- src/pages/Home.js | 3 - src/store/actions/index.js | 101 ++++--- src/store/reducers/index.js | 24 +- src/store/reducers/reducerHeaderMovie.js | 11 + src/store/reducers/reducerNetflixOriginals.js | 8 +- 11 files changed, 287 insertions(+), 236 deletions(-) delete mode 100644 .prettierignore delete mode 100644 .prettierrc create mode 100644 src/store/reducers/reducerHeaderMovie.js diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 48dde77..0000000 --- a/.prettierignore +++ /dev/null @@ -1,3 +0,0 @@ -package-lock.json -.next -node_modules/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index ab83765..0000000 --- a/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "jsxSingleQuote": true, - "semi": false, - "singleQuote": true -} diff --git a/src/components/DisplayMovieRow.js b/src/components/DisplayMovieRow.js index fa62208..495b774 100644 --- a/src/components/DisplayMovieRow.js +++ b/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 ( diff --git a/src/components/Header.js b/src/components/Header.js index f072dbe..8536017 100644 --- a/src/components/Header.js +++ b/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 AddLogo from '../static/images/add.svg'; +import PlayLogo from '../static/images/play-button.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 ( -
-
-

{props.movie.name}

- + movie && ( +
+
+

{movie.name}

+ - -

{props.movie.overview}

-
-
-
- ); + +

{movie.overview}

+
+
+
+ ) + ) } + +export default Header diff --git a/src/components/MainContent.js b/src/components/MainContent.js index cfbb27c..6bc7ebc 100644 --- a/src/components/MainContent.js +++ b/src/components/MainContent.js @@ -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 ( -
-
-
- {this.state.movieInfo.map((info) => { - if (info.movies.length > 0) { - return ( - - ); - } - })} -
-