psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JS Doc

Browse Source
This commit is contained in:
andres alcocer
2018-11-19 15:40:45 -05:00
parent d8adc7b9d3
commit 35a583a42f
6 changed files with 63 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Header/Header.js
View File

@@ -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 (
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{this.props.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">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<h1 className="header__container-heading">{this.props.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">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<p className="header__container-overview">{this.props.movie.overview}</p>
</div>
<div className="header--fadeBottom"></div>

5
src/components/UI/Modal/Modal.js
View File

@@ -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 {
<Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
<div
style={backgroundStyle}
className={(this.props.show ? "modal show" : "modal hide")}>
className={(this.props.show ? "modal show" : "modal hide")}>
{this.props.children}
</div>
</Aux>

68
src/containers/Layout/Layout.js
View File

@@ -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 = <Movie
movieDetails={() => 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 (
<div>
<Navbar showMovies={this.onSearchHandler} />
{this.state.toggleMovieList ? <MainContent /> : <div
className="search-container">{this.state.rows}</div>}
<Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
<MovieDetails movie={this.state.movieDetails} />
{
this.state.toggleMovieList ? <MainContent /> : <div
className="search-container">{this.state.MovieList}</div>
}
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}
movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} />
</Modal>
</div>

12
src/containers/Layout/MainContent/MainContent.js
View File

@@ -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 {
<BrowserRouter>
<div className="container">
<Header movie={this.state.selectedMovie} />
<MovieShowcase />
<MovieGenreRow />
<Footer />
</div>
</BrowserRouter>

4
src/containers/MovieGenreRow/MovieGenreRow.js
View File

@@ -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 {
</div>
<Modal show={this.state.toggle} modalClosed={this.closeModal} movie={this.state.movieDetails}>
<MovieSummary movie={this.state.movieDetails}/>
<MovieDetails movie={this.state.movieDetails}/>
</Modal>
</div>
);

1
src/static/sass/components/_movie.scss
View File

@@ -13,7 +13,6 @@
&:hover {
transform: scale(1.25);
}
}
&__poster {