From 35a583a42f370c9e3bcaf3df81470379f823356a Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Mon, 19 Nov 2018 15:40:45 -0500 Subject: [PATCH] JS Doc --- src/components/Header/Header.js | 22 +++--- src/components/UI/Modal/Modal.js | 5 +- src/containers/Layout/Layout.js | 68 ++++++++++++------- .../Layout/MainContent/MainContent.js | 12 ++-- src/containers/MovieGenreRow/MovieGenreRow.js | 4 +- src/static/sass/components/_movie.scss | 1 - 6 files changed, 63 insertions(+), 49 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index e52c360..df16aba 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -7,6 +7,7 @@ class Header extends Component { render() { + /** Background image for the header component */ const backgroundStyle = { backgroundSize: "cover", backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`, @@ -15,17 +16,18 @@ class Header extends Component { return (
-
-

{this.props.movie.name}

- - +

{this.props.movie.name}

+ + + +

{this.props.movie.overview}

diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js index cecb740..52c4480 100644 --- a/src/components/UI/Modal/Modal.js +++ b/src/components/UI/Modal/Modal.js @@ -3,11 +3,8 @@ import Aux from '../../../hoc/Aux/Aux'; import Backdrop from '../Backdrop/Backdrop' - - class Modal extends Component { - render() { const backgroundStyle = { backgroundSize: "cover", @@ -18,7 +15,7 @@ class Modal extends Component {
+ className={(this.props.show ? "modal show" : "modal hide")}> {this.props.children}
diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout/Layout.js index 8195f59..b8942f4 100644 --- a/src/containers/Layout/Layout.js +++ b/src/containers/Layout/Layout.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import axios from "axios"; import Navbar from '../Navbar/Navbar'; -import MainContent from './MainContent/MainContent'; +import MainContent from '../Layout/MainContent/MainContent'; import Movie from '../../components/Movie/Movie'; import Modal from '../../components/UI/Modal/Modal'; import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; @@ -10,53 +10,63 @@ import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; class Layout extends Component { state = { + /** Toggles the movie list when the user starts typing. */ toggleMovieList: true, - //an array that will hold all of our movies component - rows: [], + /** An array that will hold all of our movie Components. */ + MovieList: [], + /** Toggles the modal when a movie is clicked. */ toggleModal: false, - movieDetails: {}, + /** Holds the movie information for a single movie. */ + movieOverview: {}, } + /** Make API call as soon as the user starts typing. */ makeAipCall = (searchItem) => { const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`; + axios.get(url) .then(res => { - // console.log(res.data.results); - // extract the data from json object const results = res.data.results; let movieImageUrl; + /** Will hold all our movies Components */ let movieRows = []; + + /** Loop through all the movies */ results.forEach((movie) => { - // manually build our image url and set it on the movie object + /** Manually build our image url and set it on the Movie component. */ if (movie.poster_path !== null && movie.media_type !== "person") { movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path; - // pass in the movie object to our MovieRow component and keep it in a variable called - // movieComponent + + /** Set the movie object to our Movie component */ const movieComponent = this.selectMovieHandler(movie)} - key={movie.id} - movieImage={movieImageUrl} - movie={movie} /> - // push our movieComponent to our movieRows array; + movieDetails={() => this.selectMovieHandler(movie)} + key={movie.id} + movieImage={movieImageUrl} + movie={movie} /> + + /** Push our movie component to our movieRows array */ movieRows.push(movieComponent); } - }) - // update state - this.setState({ rows: movieRows }); + /** Set our MovieList array to the movieRows array */ + this.setState({ MovieList: movieRows }); }).catch(error => { console.log(error); }); } + /** Get the user input */ onSearchHandler = (event) => { + /** Display the movie list. */ this.setState({ toggleMovieList: false }); + const userInput = event.target.value; + /** Pass in the user input to make the API call. */ this.makeAipCall(userInput); - + /** If the input is empty don't display the movie list. */ if (userInput === "") { this.setState({ toggleMovieList: true @@ -69,10 +79,12 @@ class Layout extends Component { this.setState({ toggleModal: true }); let url; + /** Make the appropriate API call to get the details for a single movie or tv show. */ if (movie.media_type === "movie") { const movieId = movie.id; console.log(movie.id); url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; + } else if (movie.media_type === "tv") { const tvId = movie.id url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; @@ -80,12 +92,10 @@ class Layout extends Component { axios.get(url) .then(res => { - console.log(res); const movieData = res.data; - // console.log(movieData); - this.setState({ movieDetails: movieData }); + + this.setState({ movieOverview: movieData }); }).catch(error => { - console.log(error); }); @@ -100,10 +110,16 @@ class Layout extends Component { return (
- {this.state.toggleMovieList ? :
{this.state.rows}
} - - + { + this.state.toggleMovieList ? :
{this.state.MovieList}
+ } + + + +
diff --git a/src/containers/Layout/MainContent/MainContent.js b/src/containers/Layout/MainContent/MainContent.js index 15650fb..cc976ba 100644 --- a/src/containers/Layout/MainContent/MainContent.js +++ b/src/containers/Layout/MainContent/MainContent.js @@ -1,13 +1,15 @@ import React, { Component } from 'react'; import axios from 'axios'; import Header from '../../../components/Header/Header'; -import MovieShowcase from '../MovieShowcase/MovieShowcase'; +import MovieGenreRow from '../../MovieGenreRow/MovieGenreRow'; import Footer from '../../../components/Footer/Footer'; import { BrowserRouter } from "react-router-dom"; class MainContent extends Component { + state = { + /** Will hold our chosen movie to display on the header */ selectedMovie: {} }; @@ -17,11 +19,9 @@ class MainContent extends Component { getMovie = () => { - /** - * @param movieId narcos netflix series id - */ + /** 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=224ce27b38a3805ecf6f6c36eb3ba9d0`; axios .get(url) @@ -39,7 +39,7 @@ class MainContent extends Component {
- +
diff --git a/src/containers/MovieGenreRow/MovieGenreRow.js b/src/containers/MovieGenreRow/MovieGenreRow.js index bb721a1..a9274e9 100644 --- a/src/containers/MovieGenreRow/MovieGenreRow.js +++ b/src/containers/MovieGenreRow/MovieGenreRow.js @@ -2,7 +2,7 @@ import React, { Component } from "react"; import axios from 'axios'; import MovieGenre from './MovieGenre'; import Modal from "../../components/UI/Modal/Modal"; -import MovieSummary from '../../components/MovieRow/MovieSummary/MovieSummary'; +import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; class MovieGenreRow extends Component { @@ -258,7 +258,7 @@ class MovieGenreRow extends Component { - + ); diff --git a/src/static/sass/components/_movie.scss b/src/static/sass/components/_movie.scss index 7d03448..3303b03 100644 --- a/src/static/sass/components/_movie.scss +++ b/src/static/sass/components/_movie.scss @@ -13,7 +13,6 @@ &:hover { transform: scale(1.25); } - } &__poster {