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

implemented genres

Browse Source
This commit is contained in:
andres alcocer
2018-11-17 11:43:28 -05:00
parent 3a4c6fa221
commit 2a88bb4719
5 changed files with 185 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@ class Layout extends Component {
<div className="container">
<Header movie={this.state.selectedMovie}/>
<MovieShowcase />
<MovieOriginals />
{/* <MovieOriginals /> */}
<Footer />
</div>
</BrowserRouter>)

200
src/containers/MovieShowcase/MovieShowcase.js
View File

@@ -7,15 +7,29 @@ import MovieSummary from '../../components/MovieRow/MovieSummary/MovieSummary';
class MovieShowcase extends Component {
state = {
trendingMovieRows: [],
netflixOriginalsRows: [],
trendingMovieRow: [],
netflixOriginalsRow: [],
topRatedRow: [],
comedyMovieRow: [],
horrorMovieRow: [],
actionMovieRow: [],
animatedMovieRow: [],
documentaryRow: [],
romanceMovieRow: [],
toggle: false,
movieDetails: {},
}
componentWillMount() {
this.getTrending();
this.getTopRated();
this.getComedyMovies();
this.getActionMovies();
this.getHorrorMovies();
this.getNetflixMovies();
this.getRomanceMovies();
this.getDocumentaries();
this.getAnimatedMovies();
}
/**
@@ -42,15 +56,18 @@ class MovieShowcase extends Component {
if (url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
}
console.log(movieImageUrl);
const movieComponent = <MovieShowCaseRow
movieDetails={() => this.getMovieDetails(movie)}
key={movie.id}
url={url}
posterUrl={movieImageUrl}
movie={movie} />
movieRows.push(movieComponent);
if (movie.poster_path && movie.backdrop_path !== null) {
console.log(movieImageUrl);
const movieComponent = <MovieShowCaseRow
movieDetails={() => this.getMovieDetails(movie)}
key={movie.id}
url={url}
posterUrl={movieImageUrl}
movie={movie} />
movieRows.push(movieComponent);
}
})
// update state
return movieRows;
@@ -58,15 +75,32 @@ class MovieShowcase extends Component {
}
/**
* Send request for movies that are popular
* Send request for movies that are popular right now
*/
getTrending = () => {
const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1';
const url = "https://api.themoviedb.org/3/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
axios.get(url)
.then(res => {
const movieRows = this.getMovieRows(res, url);
this.setState({ trendingMovieRow: movieRows });
})
.catch(error => {
console.log(error);
});
}
/**
* Send request for movies that are top rated
*/
getTopRated = () => {
const url = "https://api.themoviedb.org/3/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
axios.get(url)
.then(res => {
const movieRows = this.getMovieRows(res, url);
this.setState({ trendingMovieRows: movieRows });
this.setState({ topRatedRow: movieRows });
}).catch(error => {
console.log(error);
})
@@ -76,20 +110,103 @@ class MovieShowcase extends Component {
* Get Netflix originals
*/
getNetflixMovies = () => {
const url = "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213";
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ netflixOriginalsRows: movieRows });
this.setState({ netflixOriginalsRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
getActionMovies = () => {
const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=28";
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ actionMovieRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
getComedyMovies = () => {
const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=35";
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ comedyMovieRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
getHorrorMovies = () => {
const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=27";
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ horrorMovieRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
getRomanceMovies = () => {
const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=10749";
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ romanceMovieRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
getAnimatedMovies = () => {
const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=16";
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ animatedMovieRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
getDocumentaries = () => {
const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=99";
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ documentaryRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
render() {
@@ -98,12 +215,47 @@ class MovieShowcase extends Component {
<h1 className="movieShowcase__heading">Netflix Originals</h1>
<div className="movieShowcase__container">
{this.state.netflixOriginalsRows}
{this.state.netflixOriginalsRow}
</div>
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">
{this.state.trendingMovieRows}
{this.state.trendingMovieRow}
</div>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">
{this.state.topRatedRow}
</div>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">
{this.state.actionMovieRow}
</div>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">
{this.state.comedyMovieRow}
</div>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">
{this.state.horrorMovieRow}
</div>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">
{this.state.romanceMovieRow}
</div>
<h1 className="movieShowcase__heading">Animated Films</h1>
<div className="movieShowcase__container">
{this.state.animatedMovieRow}
</div>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">
{this.state.documentaryRow}
</div>
<Modal show={this.state.toggle} modalClosed={this.closeModal} movie={this.state.movieDetails}>
@@ -114,4 +266,12 @@ class MovieShowcase extends Component {
}
}
export default MovieShowcase;
export default MovieShowcase;
/**
* id:
* 18 = drama
* 878 - science fiction
* 80 - crime
* 36 - history
*/

2
src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
View File

@@ -8,7 +8,7 @@ class movieShowcaseRow extends Component {
let netflixUrl = false;
const netflixStyle = {
height: "52rem",
width: "50%"
}
if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {

3
src/static/sass/components/_movieShowcase.scss
View File

@@ -8,9 +8,10 @@
}
&__container {
overflow-y:hidden;
overflow-y: hidden;
transition: transform 450ms;
overflow-x: scroll;
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(20, 1fr);

2
src/static/sass/layout/_navigation.scss
View File

@@ -1,6 +1,6 @@
.navigation {
background-color: transparent;
z-index: 100;
grid-column: 1 / 13;
position: fixed;
width: 100%;